/* =========================================================
   Reed Crest Zone — shared stylesheet
   リード クレスト ゾーン株式会社
========================================================= */

:root{
  --reed:#4f6b45;
  --reed-dark:#33442c;
  --reed-light:#7c9468;
  --moss:#7c8a5a;
  --beige:#e9e2cc;
  --cream:#faf7ef;
  --sky:#b7cdd9;
  --sky-deep:#8fadbd;
  --ink:#272a20;
  --gold:#c8a563;
}

html{scroll-behavior:smooth;}

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

.font-display{font-family:'Marcellus',serif;}
.font-jp{font-family:'Shippori Mincho',serif;}

::selection{background:var(--reed); color:#fff;}

/* scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--cream);}
::-webkit-scrollbar-thumb{background:var(--reed-light); border-radius:10px;}

/* ================= NAV ================= */
#site-nav{
  transition:background-color .5s ease, box-shadow .5s ease, padding .4s ease, backdrop-filter .5s ease;
  background:transparent;
}
#site-nav.nav-solid{
  background:rgba(250,247,239,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 2px 24px rgba(51,68,44,.08);
}
#site-nav .nav-link{
  position:relative;
  color:var(--cream);
  transition:color .35s ease, opacity .3s ease;
  letter-spacing:.03em;
}
#site-nav.nav-solid .nav-link{color:var(--reed-dark);}
#site-nav .nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:1px;
  background:currentColor;
  transition:width .35s ease;
}
#site-nav .nav-link:hover::after,
#site-nav .nav-link.active::after{width:100%;}
#site-nav .nav-link.active{font-weight:600;}
#site-nav.nav-solid #brand-mark path,
#site-nav.nav-solid #brand-mark circle,
#site-nav.nav-solid #brand-mark polyline{stroke:var(--reed-dark);}
#site-nav #brand-word{color:var(--cream); transition:color .4s ease;}
#site-nav.nav-solid #brand-word{color:var(--reed-dark);}

#menu-btn span{
  display:block; height:2px; width:26px; background:var(--cream);
  transition:all .35s ease; border-radius:2px;
}
#site-nav.nav-solid #menu-btn span{background:var(--reed-dark);}
#menu-btn.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
#menu-btn.open span:nth-child(2){opacity:0;}
#menu-btn.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

#mobile-menu{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:rgba(250,247,239,.97);
}

/* ================= HERO / MEDIA ================= */
.hero-media{position:relative; overflow:hidden;}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  animation:hero-zoom 18s ease-in-out infinite alternate;
}
@keyframes hero-zoom{
  from{transform:scale(1.06);}
  to{transform:scale(1.14);}
}
.hero-gradient{
  background:linear-gradient(180deg, rgba(39,42,32,.35) 0%, rgba(39,42,32,.15) 35%, rgba(39,42,32,.55) 100%);
}

/* mist drift layers */
.mist-layer{
  position:absolute; left:-15%; width:130%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  filter:blur(18px);
  opacity:.55;
}
.mist-1{top:60%; height:22%; animation:mist-drift 26s linear infinite;}
.mist-2{top:75%; height:16%; animation:mist-drift-rev 34s linear infinite;}
@keyframes mist-drift{
  0%{transform:translateX(-6%);}
  50%{transform:translateX(6%);}
  100%{transform:translateX(-6%);}
}
@keyframes mist-drift-rev{
  0%{transform:translateX(8%);}
  50%{transform:translateX(-8%);}
  100%{transform:translateX(8%);}
}

/* swaying reed silhouettes */
.reed-sway{transform-origin:bottom center; animation:sway 5s ease-in-out infinite;}
.reed-sway:nth-child(2n){animation-duration:6.2s; animation-delay:.4s;}
.reed-sway:nth-child(3n){animation-duration:4.4s; animation-delay:.8s;}
.reed-sway:nth-child(4n){animation-duration:7s; animation-delay:.2s;}
@keyframes sway{
  0%,100%{transform:rotate(-3deg);}
  50%{transform:rotate(3deg);}
}

/* water reflection under images */
.reflect{position:relative;}
.reflect-img{display:block; width:100%; height:100%; object-fit:cover;}
.reflect::after{
  content:'';
  position:absolute; left:0; bottom:-40%; width:100%; height:40%;
  background-image:inherit;
  transform:scaleY(-1);
  opacity:.18;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 80%);
  pointer-events:none;
  display:none;
}

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

/* glass panel */
.glass{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);
}
.glass-dark{
  background:rgba(39,42,32,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
}

/* editorial cards */
.editorial-card{transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;}
.editorial-card:hover{transform:translateY(-8px); box-shadow:0 30px 60px -20px rgba(51,68,44,.35);}
.editorial-card .card-img{transition:transform .9s ease;}
.editorial-card:hover .card-img{transform:scale(1.07);}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 2rem; border-radius:999px;
  font-family:'Marcellus',serif; letter-spacing:.04em;
  transition:all .4s cubic-bezier(.2,.7,.2,1);
  white-space:nowrap;
}
.btn-primary{background:var(--reed); color:var(--cream); box-shadow:0 8px 24px -8px rgba(51,68,44,.6);}
.btn-primary:hover{background:var(--reed-dark); transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(51,68,44,.7);}
.btn-outline{border:1px solid rgba(250,247,239,.7); color:var(--cream); background:rgba(255,255,255,.06);}
.btn-outline:hover{background:rgba(250,247,239,.16); transform:translateY(-3px);}
.btn-ghost{border:1px solid var(--reed); color:var(--reed-dark);}
.btn-ghost:hover{background:var(--reed); color:#fff; transform:translateY(-3px);}
.btn svg{transition:transform .4s ease;}
.btn:hover svg{transform:translateX(4px);}

/* section divider (wave) */
.wave-divider{display:block; width:100%; height:60px; color:var(--cream);}

/* masonry gallery */
.masonry{column-count:1; column-gap:1.1rem;}
@media(min-width:640px){.masonry{column-count:2;}}
@media(min-width:1024px){.masonry{column-count:3;}}
.masonry-item{break-inside:avoid; margin-bottom:1.1rem; position:relative; overflow:hidden; border-radius:1rem; cursor:pointer;}
.masonry-item img{width:100%; display:block; transition:transform .7s ease, filter .7s ease;}
.masonry-item:hover img{transform:scale(1.06);}
.masonry-item .cap{
  position:absolute; inset:auto 0 0 0; padding:1rem;
  background:linear-gradient(0deg, rgba(39,42,32,.75), transparent);
  color:#fff; opacity:0; transition:opacity .4s ease; font-family:'Marcellus',serif;
}
.masonry-item:hover .cap{opacity:1;}

.gallery-filter{
  font-family:'Marcellus',serif; letter-spacing:.04em; font-size:.82rem;
  padding:.55rem 1.3rem; border-radius:999px; border:1px solid var(--reed);
  color:var(--reed-dark); transition:all .3s ease; background:transparent;
}
.gallery-filter.active, .gallery-filter:hover{background:var(--reed); color:#fff;}

/* lightbox */
#lightbox{background:rgba(20,22,16,.94);}
#lightbox img{max-height:82vh;}
#lightbox-close{transition:transform .3s ease, opacity .3s ease;}
#lightbox-close:hover{transform:rotate(90deg);}

/* FAQ accordion */
.faq-item{border-bottom:1px solid rgba(79,107,69,.2);}
.faq-answer{display:none; overflow:hidden;}
.faq-question{cursor:pointer;}
.faq-item .chevron{transition:transform .4s ease;}
.faq-item.open .chevron{transform:rotate(180deg); color:var(--reed);}
.faq-item.open .faq-question{color:var(--reed-dark);}

/* toast (non-blocking popup, replaces alert) */
#toast-container{position:fixed; right:1.2rem; bottom:1.2rem; z-index:9999; display:flex; flex-direction:column; gap:.7rem; max-width:min(90vw,360px);}
.toast{
  display:flex; align-items:flex-start; gap:.7rem;
  background:rgba(39,42,32,.94); color:var(--cream);
  padding:.9rem 1.1rem; border-radius:.9rem;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.4);
  transform:translateY(18px) scale(.96); opacity:0;
  transition:all .45s cubic-bezier(.2,.7,.2,1);
  font-size:.92rem; border-left:3px solid var(--gold);
}
.toast.show{transform:translateY(0) scale(1); opacity:1;}
.toast-icon{
  flex-shrink:0; width:1.4rem; height:1.4rem; border-radius:50%;
  background:var(--reed); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.75rem;
}
.toast-success .toast-icon{background:var(--reed);}
.toast-error .toast-icon{background:#a85c48;}

/* form fields */
.field{
  width:100%; background:rgba(255,255,255,.6); border:1px solid rgba(79,107,69,.25);
  border-radius:.8rem; padding:.85rem 1.1rem; transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
  font-family:'Zen Kaku Gothic New',sans-serif;
}
.field:focus{outline:none; border-color:var(--reed); box-shadow:0 0 0 4px rgba(79,107,69,.12); background:#fff;}

/* misc */
.bg-noise{
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
.tag-pill{
  font-family:'Marcellus',serif; letter-spacing:.08em; font-size:.72rem;
  text-transform:uppercase; padding:.35rem .9rem; border-radius:999px;
  border:1px solid var(--reed); color:var(--reed-dark);
}
.num-label{font-family:'Marcellus',serif; color:var(--gold); font-size:.85rem; letter-spacing:.15em;}

/* skip link */
.skip-link{position:absolute; left:-999px; top:0; background:var(--reed); color:#fff; padding:.6rem 1rem; z-index:9999;}
.skip-link:focus{left:1rem; top:1rem;}