/* ==========================================================================
   Moss Blend Line — Shared Stylesheet
   Premium Japanese nature editorial aesthetic
   ========================================================================== */

:root{
  --forest: #26311f;
  --forest-dark: #1a2216;
  --moss: #5c6e49;
  --moss-light: #7c8f63;
  --moss-pale: #a8b891;
  --stone: #8b8778;
  --stone-light: #c9c3b2;
  --beige: #e8e1d0;
  --cream: #f7f4ec;
  --cream-warm: #f4ede0;
  --ink: #2b2a24;
  --shadow-soft: 0 20px 60px -20px rgba(38,49,31,0.35);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: 'Zen Kaku Gothic New', 'Cormorant Garamond', serif;
  background-color: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

.font-display{ font-family: 'Fraunces', serif; }
.font-jp{ font-family: 'Shippori Mincho', serif; }
.font-body{ font-family: 'Zen Kaku Gothic New', sans-serif; }

/* ---------------- Texture / background ---------------- */
.bg-grain{
  position: relative;
}
.bg-grain::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(38,49,31,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode: multiply;
}

.gradient-forest{
  background: linear-gradient(180deg, rgba(26,34,22,0) 0%, rgba(26,34,22,0.85) 100%);
}

/* ---------------- Navigation ---------------- */
#site-nav{
  transition: background-color .5s ease, box-shadow .5s ease, padding .4s ease, backdrop-filter .4s ease;
  background: rgba(247,244,236,0);
}
#site-nav.nav-solid{
  background: rgba(247,244,236,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -12px rgba(38,49,31,0.25);
}
#site-nav.nav-solid .nav-link,
#site-nav.nav-solid .logo-text{ color: var(--forest); }
#site-nav .nav-link{
  color: #fff;
  position: relative;
  letter-spacing: .04em;
  transition: color .3s ease, opacity .3s ease;
}
#site-nav.nav-transparent .nav-link{ color:#fff; }
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:1px;
  background: currentColor;
  transition: width .35s ease;
}
.nav-link:hover::after{ width:100%; }
.nav-link.active::after{ width:100%; }

/* Mobile menu */
#mobile-menu{
  transform: translateY(-12px);
  opacity:0; visibility:hidden;
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
  background: radial-gradient(120% 120% at 50% 0%, #34432a 0%, var(--forest-dark) 70%);
}
#mobile-menu.open{
  opacity:1; visibility:visible; transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease, visibility 0s;
}
.mobile-link{ color:#f7f4ec !important; }
.mobile-link.active{ color: var(--moss-pale) !important; }

/* Hamburger */
#menu-toggle{ color:#fff; cursor:pointer; }
#site-nav.nav-solid #menu-toggle{ color: var(--forest); }
.hamburger-line{
  display:block; height:1.5px; width:100%;
  background: currentColor;
  transition: transform .35s ease, opacity .35s ease;
}
#menu-toggle.is-open .hamburger-line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
#menu-toggle.is-open .hamburger-line:nth-child(2){ opacity:0; }
#menu-toggle.is-open .hamburger-line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------------- Buttons ---------------- */
.btn-nature{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .95rem 2.1rem;
  border-radius: 999px;
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:.03em;
  border:1px solid var(--moss);
  color: var(--cream);
  background: var(--moss);
  position: relative;
  overflow: hidden;
  transition: color .45s ease, transform .3s ease, box-shadow .3s ease;
  z-index: 1;
}
.btn-nature::before{
  content:"";
  position:absolute; inset:0;
  background: var(--forest);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.65,0,.35,1);
  z-index:-1;
}
.btn-nature:hover::before{ transform: scaleX(1); }
.btn-nature:hover{ box-shadow: var(--shadow-soft); transform: translateY(-2px); }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .9rem 2rem;
  border-radius: 999px;
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.7);
  color:#fff;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  transition: background .35s ease, color .35s ease, transform .3s ease;
}
.btn-outline:hover{ background:#fff; color:var(--forest); transform: translateY(-2px); }

.btn-outline-dark{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  font-family:'Fraunces', serif;
  border:1px solid var(--moss);
  color: var(--forest);
  background: transparent;
  transition: background .35s ease, color .35s ease, transform .3s ease;
}
.btn-outline-dark:hover{ background: var(--moss); color:#fff; transform: translateY(-2px); }

/* ---------------- Glass panels ---------------- */
.glass-panel{
  background: rgba(247,244,236,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: var(--shadow-soft);
}
.glass-dark{
  background: rgba(26,34,22,0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ---------------- Cards ---------------- */
.editorial-card{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  isolation: isolate;
}
.editorial-card img{
  transition: transform 1.1s cubic-bezier(.25,.8,.25,1), filter .6s ease;
}
.editorial-card:hover img{ transform: scale(1.08); filter: saturate(1.1); }
.editorial-card .card-overlay{
  background: linear-gradient(180deg, rgba(26,34,22,0) 30%, rgba(20,26,16,0.92) 100%);
  transition: opacity .4s ease;
}
.editorial-card .card-line{
  width: 32px; height:1px; background: var(--moss-pale);
  transition: width .5s ease;
}
.editorial-card:hover .card-line{ width: 60px; }

/* ---------------- Fade in on scroll ---------------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.25,.8,.25,1), transform .9s cubic-bezier(.25,.8,.25,1);
}
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .12s; }
.reveal-delay-2{ transition-delay: .24s; }
.reveal-delay-3{ transition-delay: .36s; }

/* ---------------- Floating moss particles ---------------- */
#particle-field{
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 40;
  overflow: hidden;
}
.moss-particle{
  position:absolute;
  bottom:-20px;
  width:6px; height:6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9fb083, #4c5c3a);
  opacity:.55;
  animation-name: floatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes floatUp{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.6; }
  50%{ transform: translateY(-50vh) translateX(20px) rotate(180deg); }
  90%{ opacity:.35; }
  100%{ transform: translateY(-105vh) translateX(-15px) rotate(360deg); opacity:0; }
}

/* ---------------- Mist ---------------- */
.mist-layer{
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.5), transparent 60%);
  animation: driftMist 18s ease-in-out infinite alternate;
  opacity:.6;
}
.mist-layer.mist-2{
  animation-duration: 26s;
  animation-delay: -6s;
  opacity:.35;
}
@keyframes driftMist{
  0%{ transform: translateX(-6%) translateY(0); }
  100%{ transform: translateX(6%) translateY(-2%); }
}

/* ---------------- Water reflection shimmer ---------------- */
.water-shimmer{
  position:relative; overflow:hidden;
}
.water-shimmer::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position: 120% 120%; }
  100%{ background-position: -20% -20%; }
}

/* ---------------- FAQ Accordion ---------------- */
.faq-item .faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .5s cubic-bezier(.25,.8,.25,1), padding .4s ease;
}
.faq-item.open .faq-answer{ max-height: 500px; }
.faq-item .faq-icon{ transition: transform .4s ease; }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-item .faq-question{ transition: color .3s ease; }

/* ---------------- Masonry gallery ---------------- */
.masonry{
  column-count: 1;
  column-gap: 1rem;
}
@media (min-width: 640px){ .masonry{ column-count: 2; } }
@media (min-width: 1024px){ .masonry{ column-count: 3; } }
.masonry .m-item{
  break-inside: avoid;
  margin-bottom: 1rem;
  cursor: pointer;
  position: relative;
  overflow:hidden;
  border-radius: 6px;
}
.masonry .m-item img{ width:100%; display:block; transition: transform .8s ease, filter .5s ease; }
.masonry .m-item:hover img{ transform: scale(1.06); filter: brightness(1.05); }
.masonry .m-item .m-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(20,26,16,.85));
  color:#fff;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.masonry .m-item:hover .m-caption{ opacity:1; transform: translateY(0); }

/* Lightbox */
#lightbox{
  position: fixed; inset:0; z-index: 100;
  background: rgba(20,24,16,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
#lightbox.open{ opacity:1; visibility:visible; transition: opacity .4s ease, visibility 0s; }
#lightbox img{
  max-width:88vw; max-height:82vh;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

/* ---------------- Toast (non-blocking popup) ---------------- */
#toast-container{
  position: fixed; top: 1.25rem; right: 1.25rem; z-index: 200;
  display:flex; flex-direction:column; gap:.6rem;
  max-width: 90vw;
}
.toast{
  display:flex; align-items:flex-start; gap:.7rem;
  background: rgba(38,49,31,0.95);
  color: var(--cream);
  padding: .9rem 1.2rem;
  border-radius: 10px;
  border-left: 3px solid var(--moss-pale);
  box-shadow: 0 15px 40px -10px rgba(0,0,0,.4);
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size: .92rem;
  min-width: 260px;
  transform: translateX(30px);
  opacity:0;
  animation: toastIn .45s cubic-bezier(.25,.8,.25,1) forwards;
}
.toast.hide{ animation: toastOut .4s ease forwards; }
@keyframes toastIn{ to{ transform: translateX(0); opacity:1; } }
@keyframes toastOut{ to{ transform: translateX(30px); opacity:0; } }

/* ---------------- Misc ---------------- */
.divider-line{
  width: 48px; height: 1px; background: var(--moss);
}
.section-label{
  letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; color: var(--moss);
}
::selection{ background: var(--moss); color:#fff; }

.scrollbar-hidden::-webkit-scrollbar{ display:none; }

input, textarea{
  font-family:'Zen Kaku Gothic New', sans-serif;
}
input:focus, textarea:focus{ outline: none; }

.card-num{
  font-family:'Fraunces', serif;
  color: rgba(38,49,31,.15);
  font-size: 4rem;
  line-height:1;
}

/* Loading skeleton for lazy images */
img.lazy{ background: linear-gradient(90deg, var(--beige) 25%, var(--stone-light) 37%, var(--beige) 63%); background-size: 400% 100%; animation: skeleton 1.6s ease infinite; }
@keyframes skeleton{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }