/* ==========================================================================
   Pine Crest Path YX — Core Stylesheet
   Premium Japanese nature aesthetic / editorial minimalism
   ========================================================================== */

:root{
  --pine-950:#0e1f16;
  --pine-900:#152c20;
  --pine-800:#1f3d2e;
  --pine-700:#2c5240;
  --pine-600:#3a6b52;
  --moss-500:#5c7a52;
  --moss-400:#7c9a6a;
  --brown-700:#5a4130;
  --brown-500:#8a6a4c;
  --stone-600:#7d8279;
  --stone-400:#a8ab9f;
  --mist-100:#f3efe4;
  --mist-50:#faf8f2;
  --paper:#fbf9f3;
  --ink:#22261f;
  --gold:#c8a86b;
  --shadow-soft: 0 20px 60px -20px rgba(14,31,22,0.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Shippori Mincho', 'Cormorant Garamond', serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.font-en{ font-family:'Cormorant Garamond', serif; }
.font-jp{ font-family:'Shippori Mincho', serif; }
.font-ui{ font-family:'Zen Kaku Gothic New', sans-serif; }

h1,h2,h3,h4{ font-family:'Cormorant Garamond', serif; margin:0; letter-spacing:.01em; }
.jp-sub{ font-family:'Shippori Mincho', serif; letter-spacing:.12em; }

a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }

::selection{ background:var(--pine-700); color:var(--mist-50); }

/* ---------------- scrollbar ---------------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--mist-100); }
::-webkit-scrollbar-thumb{ background:var(--moss-500); border-radius:10px; }

/* ---------------- utility texture ---------------- */
.texture-grain{
  position:relative;
}
.texture-grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:.72rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--moss-500);
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--gold);
}

.divider-leaf{
  width:34px; height:34px;
  color:var(--moss-500);
  opacity:.85;
}

/* ---------------- header / nav ---------------- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(251,249,243,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(31,61,46,0.08);
  transition:background .4s ease, box-shadow .4s ease, padding .3s ease;
}
.site-header.is-scrolled{
  box-shadow:0 10px 30px -18px rgba(14,31,22,.4);
  background:rgba(251,249,243,0.92);
}
.brand-logo{ color:var(--pine-800); width:40px; height:40px; flex:none; }
.brand-name-en{ font-family:'Cormorant Garamond', serif; font-weight:600; letter-spacing:.04em; font-size:1.28rem; color:var(--pine-900); line-height:1.05; }
.brand-name-jp{ font-family:'Shippori Mincho', serif; font-size:.68rem; letter-spacing:.24em; color:var(--moss-500); }

.nav-link{
  position:relative;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--pine-900);
  padding:.3rem 0;
  white-space:nowrap;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:1px;
  background:var(--gold);
  transition:width .35s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--pine-700); }

#mobileMenu{
  max-height:0; overflow:hidden; transition:max-height .45s ease;
}
#mobileMenu.open{ max-height:640px; }

.menu-toggle{ width:26px; height:20px; position:relative; }
.menu-toggle span{
  position:absolute; left:0; width:100%; height:1.5px; background:var(--pine-900);
  transition:transform .35s ease, opacity .35s ease, top .35s ease;
}
.menu-toggle span:nth-child(1){ top:0; }
.menu-toggle span:nth-child(2){ top:9px; }
.menu-toggle span:nth-child(3){ top:18px; }
.menu-toggle.open span:nth-child(1){ top:9px; transform:rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--mist-50);
}
.hero-inner{ min-height:78svh; }
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.08);
  will-change:transform;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,25,18,.32) 0%, rgba(14,25,18,.18) 32%, rgba(11,20,14,.55) 78%, rgba(9,16,11,.86) 100%);
}
.hero-content{ position:relative; z-index:5; }
.hero-eyebrow{
  font-family:'Zen Kaku Gothic New', sans-serif;
  letter-spacing:.4em; text-transform:uppercase; font-size:.72rem;
  color:var(--gold);
}
.hero h1{
  font-size:clamp(2.4rem, 6.4vw, 5.2rem);
  line-height:1.04;
  font-weight:600;
  text-shadow:0 6px 30px rgba(0,0,0,.25);
}
.hero .hero-jp{
  font-family:'Shippori Mincho', serif;
  letter-spacing:.22em;
  font-size:clamp(.95rem,2vw,1.25rem);
  color:var(--mist-100);
}

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:.82rem; letter-spacing:.1em;
  padding:.95rem 1.9rem;
  border-radius:2px;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  border:1px solid transparent;
}
.btn-primary{
  background:var(--pine-800); color:var(--mist-50); border-color:var(--pine-800);
}
.btn-primary:hover{ background:var(--pine-700); transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(14,31,22,.5); }
.btn-outline{
  background:transparent; color:currentColor; border-color:rgba(251,249,243,.55);
}
.btn-outline:hover{ background:rgba(251,249,243,.12); border-color:rgba(251,249,243,.9); transform:translateY(-2px); }
.btn-dark-outline{ border-color:rgba(31,61,46,.35); color:var(--pine-900); }
.btn-dark-outline:hover{ background:var(--pine-800); color:var(--mist-50); }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--mist-100); opacity:.85; z-index:5;
}
.scroll-cue .line{ width:1px; height:40px; background:linear-gradient(180deg, rgba(251,249,243,.9), transparent); animation:scrollline 2.2s ease-in-out infinite; }
@keyframes scrollline{ 0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ---------------- mist & needles ---------------- */
.mist-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.mist-blob{
  position:absolute;
  width:70%; height:60%;
  background:radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0));
  filter:blur(30px);
  opacity:.35;
  animation:driftMist 34s linear infinite;
}
.mist-blob.m2{ top:30%; left:-30%; animation-duration:48s; animation-delay:-8s; opacity:.25; }
.mist-blob.m3{ top:55%; left:-50%; animation-duration:60s; animation-delay:-20s; opacity:.2; }
@keyframes driftMist{
  0%{ transform:translateX(-10%) translateY(0); }
  50%{ transform:translateX(60%) translateY(-2%); }
  100%{ transform:translateX(120%) translateY(0); }
}

.needles-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.needle{
  position:absolute; top:-5%;
  width:12px; height:3px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--gold), var(--moss-400));
  opacity:.6;
  animation-name:fallNeedle;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes fallNeedle{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  8%{ opacity:.7; }
  90%{ opacity:.5; }
  100%{ transform:translate(var(--drift,60px), 115vh) rotate(320deg); opacity:0; }
}

/* ---------------- sections ---------------- */
.section{ padding:clamp(4rem,9vw,8rem) 0; position:relative; }
.section-tight{ padding:clamp(2.5rem,5vw,4.5rem) 0; }
.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 1.5rem; }
@media(min-width:768px){ .container{ padding:0 2.5rem; } }

.reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s cubic-bezier(.2,.7,.1,1), transform .9s cubic-bezier(.2,.7,.1,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.1,1); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.reveal-delay-1.in{ transition-delay:.12s; }
.reveal-delay-2.in{ transition-delay:.24s; }
.reveal-delay-3.in{ transition-delay:.36s; }

.feature-img{
  border-radius:4px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.feature-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.7,.1,1); }
.feature-img:hover img{ transform:scale(1.06); }
.feature-img::before{
  content:""; position:absolute; inset:0; z-index:2;
  border:1px solid rgba(251,249,243,.35);
  margin:10px; pointer-events:none;
}

.frame-number{
  font-family:'Cormorant Garamond', serif;
  font-size:.85rem; letter-spacing:.15em; color:var(--stone-600);
}

/* glass panel */
.glass-panel{
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 20px 46px -26px rgba(14,31,22,.35);
}
.glass-dark{
  background:rgba(21,44,32,0.5);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.16);
}

/* cards */
.explore-card{
  position:relative; overflow:hidden; border-radius:4px;
  aspect-ratio:3/4;
  box-shadow:var(--shadow-soft);
}
.explore-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.explore-card:hover img{ transform:scale(1.08); }
.explore-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,25,18,0) 30%, rgba(10,18,13,.86) 100%);
}
.explore-card .card-text{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem; color:var(--mist-50); }
.explore-card .tag{
  position:absolute; top:1rem; left:1rem;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:.66rem; letter-spacing:.2em;
  padding:.3em .8em; border:1px solid rgba(251,249,243,.5); color:#fff; border-radius:2px;
  background:rgba(14,25,18,.25);
}

.info-card{
  background:var(--mist-50);
  border:1px solid rgba(31,61,46,.1);
  border-radius:4px;
  padding:2rem;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.info-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:rgba(31,61,46,.22); }

/* quote */
.quote-section{
  background:var(--pine-900);
  color:var(--mist-100);
  position:relative;
  overflow:hidden;
}
.quote-section::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(92,122,82,.35), transparent 55%);
}

/* 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; position:relative; overflow:hidden; border-radius:3px;
  cursor:zoom-in;
}
.masonry .m-item img{ width:100%; display:block; transition:transform 1s ease, filter .5s; }
.masonry .m-item:hover img{ transform:scale(1.05); }
.masonry .m-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem;
  background:linear-gradient(180deg, transparent, rgba(9,16,11,.82));
  color:var(--mist-50); font-family:'Zen Kaku Gothic New',sans-serif; font-size:.72rem; letter-spacing:.08em;
  opacity:0; transform:translateY(8px); transition:all .35s ease;
}
.masonry .m-item:hover .cap{ opacity:1; transform:translateY(0); }

#lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:rgba(9,16,11,.92);
  padding:2rem;
}
#lightbox.open{ display:flex; }
#lightbox img{ max-width:min(1100px,92vw); max-height:88vh; border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
#lightbox .lb-close{
  position:absolute; top:1.6rem; right:1.8rem; color:#fff; font-size:1rem; letter-spacing:.2em;
  font-family:'Zen Kaku Gothic New',sans-serif; cursor:pointer;
}
#lightbox .lb-cap{ position:absolute; bottom:2rem; left:0; right:0; text-align:center; color:var(--mist-100); font-family:'Shippori Mincho',serif; letter-spacing:.08em; }

/* FAQ accordion */
.faq-item{ border-bottom:1px solid rgba(31,61,46,.14); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.5rem 0; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:1.25rem; color:var(--pine-900);
}
.faq-q .plus{ position:relative; width:18px; height:18px; flex:none; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background:var(--pine-700); transition:transform .35s ease; }
.faq-q .plus::before{ left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%); }
.faq-q .plus::after{ top:0; left:50%; height:100%; width:1.5px; transform:translateX(-50%); }
.faq-item.open .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-a-inner{ padding-bottom:1.6rem; color:var(--stone-600); font-family:'Shippori Mincho',serif; line-height:2; }

/* forms */
.field{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(31,61,46,.28);
  padding:.85rem .2rem; font-family:'Zen Kaku Gothic New',sans-serif; font-size:.92rem; color:var(--ink);
  transition:border-color .3s ease;
}
.field:focus{ outline:none; border-color:var(--pine-700); }
.field::placeholder{ color:var(--stone-400); }
.field-label{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:.7rem; letter-spacing:.18em; color:var(--moss-500); text-transform:uppercase; }

/* toast */
#toast-stack{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:300; display:flex; flex-direction:column; gap:.6rem; align-items:flex-end; }
.toast{
  background:var(--pine-900); color:var(--mist-50);
  padding:1rem 1.3rem; border-radius:3px; max-width:320px;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:.82rem; letter-spacing:.02em;
  box-shadow:0 20px 46px -12px rgba(0,0,0,.45);
  display:flex; align-items:center; gap:.7rem;
  transform:translateX(120%); opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
  border-left:2px solid var(--gold);
}
.toast.show{ transform:translateX(0); opacity:1; }
.toast .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }

/* footer */
.site-footer{
  background:var(--pine-950);
  color:var(--mist-100);
  position:relative;
}
.footer-link{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:.82rem; color:rgba(243,239,228,.72); transition:color .3s; }
.footer-link:hover{ color:var(--gold); }
.footer-hr{ border-top:1px solid rgba(243,239,228,.12); }

/* misc */
.ridge-divider{
  width:100%; height:56px; color:var(--paper);
  display:block;
}
.tag-pill{
  display:inline-block; font-family:'Zen Kaku Gothic New',sans-serif; font-size:.68rem; letter-spacing:.18em;
  color:var(--moss-500); border:1px solid rgba(92,122,82,.4); padding:.3em .9em; border-radius:999px;
}

.stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.stagger.in > *{ opacity:1; transform:translateY(0); }
.stagger.in > *:nth-child(1){ transition-delay:.05s; }
.stagger.in > *:nth-child(2){ transition-delay:.15s; }
.stagger.in > *:nth-child(3){ transition-delay:.25s; }
.stagger.in > *:nth-child(4){ transition-delay:.35s; }
.stagger.in > *:nth-child(5){ transition-delay:.45s; }
.stagger.in > *:nth-child(6){ transition-delay:.55s; }

.parallax-slow{ will-change:transform; }

.trail-num{
  font-family:'Cormorant Garamond',serif; font-size:3.2rem; color:var(--moss-400); opacity:.5; line-height:1;
}

.page-hero{
  position:relative; min-height:62svh; display:flex; align-items:flex-end; color:var(--mist-50); overflow:hidden;
}

.breadcrumb{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:.72rem; letter-spacing:.12em; color:rgba(243,239,228,.75); }
.breadcrumb a:hover{ color:var(--gold); }

.marquee-wrap{ overflow:hidden; border-top:1px solid rgba(31,61,46,.12); border-bottom:1px solid rgba(31,61,46,.12); }
.marquee{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee span{ padding:1.1rem 2.4rem; font-family:'Cormorant Garamond',serif; font-size:1.15rem; letter-spacing:.06em; color:var(--stone-600); white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

@media(prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}