/* =========================================================
   Brook Crest Zone — Shared Stylesheet
   渓流と稜線の風景 — ブランド共通スタイル
   ========================================================= */

:root{
  --brook: #4E7C8C;
  --brook-light: #A9C9D1;
  --brook-pale: #E4EEF0;
  --brook-dark: #2E4B57;
  --moss: #7C8B5A;
  --moss-light: #AEB98C;
  --moss-dark: #565F3C;
  --forest: #2F4A3C;
  --forest-dark: #1B2E23;
  --forest-light: #3F5C4C;
  --stone: #8C8579;
  --stone-light: #E7E2D9;
  --stone-dark: #5C564B;
  --beige: #F3ECE0;
  --beige-dark: #E8DCC8;
  --beige-light: #FAF7F1;
}

html{ scroll-behavior: smooth; }

body{
  background-color: var(--beige-light);
  color: var(--forest-dark);
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width: 9px; }
::-webkit-scrollbar-track{ background: var(--beige-light); }
::-webkit-scrollbar-thumb{ background: var(--brook-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--brook); }

/* ---------- Selection ---------- */
::selection{ background: var(--moss-light); color: var(--forest-dark); }

/* ---------- Sticky Nav ---------- */
#site-nav{
  transition: background-color .5s ease, box-shadow .5s ease, padding .4s ease, backdrop-filter .5s ease;
  background-color: transparent;
}
#site-nav.scrolled{
  background-color: rgba(250, 247, 241, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 30px -12px rgba(27, 46, 35, 0.25);
}
#site-nav .nav-link{
  position: relative;
  letter-spacing: .04em;
}
#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.scrolled .nav-text-light,
#site-nav.scrolled #menu-toggle{ color: var(--forest-dark); }
#site-nav.scrolled .btn-outline{
  border-color: rgba(27,46,35,.3);
  color: var(--forest-dark);
  background: rgba(27,46,35,.03);
}
#site-nav.scrolled .btn-outline:hover{
  background: var(--forest-dark);
  color: #FAF7F1;
}

.nav-text-light{ color: #FAF7F1; }
.nav-text-dark{ color: var(--forest-dark); }

/* ---------- Mobile menu panel ---------- */
#mobile-menu.open{ transform: translateX(0); }
#menu-toggle span{ transition: transform .35s ease, opacity .35s ease; transform-origin: center; }
#menu-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
#menu-toggle.open span:nth-child(2){ opacity: 0; }
#menu-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); width: 100%; }

/* ---------- Buttons ---------- */
.btn-primary{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 2.1rem;
  background: linear-gradient(135deg, var(--forest), var(--brook-dark));
  color: #FAF7F1;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background .45s ease;
  box-shadow: 0 10px 30px -12px rgba(27,46,35,.55);
}
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -14px rgba(27,46,35,.65);
  background: linear-gradient(135deg, var(--brook-dark), var(--forest));
}

.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 2.05rem;
  border: 1px solid rgba(250,247,241,.75);
  color: #FAF7F1;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(250,247,241,.06);
  backdrop-filter: blur(6px);
  transition: all .45s cubic-bezier(.22,1,.36,1);
}
.btn-outline:hover{
  background: rgba(250,247,241,.92);
  color: var(--forest-dark);
  transform: translateY(-3px);
}

.btn-outline.dark-ctx{
  border-color: rgba(27,46,35,.35);
  color: var(--forest-dark);
  background: rgba(27,46,35,.03);
}
.btn-outline.dark-ctx:hover{
  background: var(--forest-dark);
  color: #FAF7F1;
}

/* ---------- Glass Panel ---------- */
.glass-panel{
  background: rgba(250, 247, 241, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 20px 60px -25px rgba(27,46,35,.35);
}
.glass-panel-dark{
  background: rgba(27, 46, 35, 0.35);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14);
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .12s; }
.reveal-delay-2{ transition-delay: .24s; }
.reveal-delay-3{ transition-delay: .36s; }
.reveal-delay-4{ transition-delay: .48s; }

/* ---------- Hero / cinematic media ---------- */
.hero-media{
  position: relative;
  overflow: hidden;
}
.hero-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom{
  0%{ transform: scale(1.08) translateY(0); }
  100%{ transform: scale(1.15) translateY(-1.5%); }
}

.gradient-veil{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,46,35,.55) 0%, rgba(27,46,35,.12) 32%, rgba(27,46,35,.35) 68%, rgba(19,30,24,.86) 100%);
}
.gradient-veil-soft{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,46,35,.15) 0%, rgba(27,46,35,.02) 40%, rgba(19,30,24,.55) 100%);
}

/* ---------- Drifting mist ---------- */
.mist-wrap{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.mist{
  position: absolute;
  bottom: -10%;
  width: 160%;
  height: 55%;
  background: radial-gradient(ellipse at center, rgba(250,247,241,.55) 0%, rgba(250,247,241,0) 70%);
  filter: blur(6px);
  opacity: .55;
  animation: driftMist 34s linear infinite;
}
.mist.m2{ top: 8%; bottom:auto; height: 40%; opacity: .35; animation-duration: 46s; animation-direction: reverse; }
.mist.m3{ bottom: 18%; height: 30%; opacity: .28; animation-duration: 58s; }
@keyframes driftMist{
  0%{ transform: translateX(-15%); }
  50%{ transform: translateX(5%); }
  100%{ transform: translateX(-15%); }
}

/* ---------- Parallax ridge layers ---------- */
.parallax-layer{ will-change: transform; }

/* ---------- Water reflection ---------- */
.reflect-wrap{ position: relative; }
.reflect-wrap::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -55%;
  height: 55%;
  background-image: inherit;
  background-position: center bottom;
  background-size: cover;
  transform: scaleY(-1);
  opacity: .18;
  filter: blur(3px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 80%);
}

/* ---------- Editorial destination cards ---------- */
.dest-card{
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  isolation: isolate;
}
.dest-card img{
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .8s ease;
  filter: saturate(1) brightness(1);
}
.dest-card:hover img{ transform: scale(1.08); filter: saturate(1.08) brightness(1.03); }
.dest-card .card-veil{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,46,35,0) 35%, rgba(19,30,24,.92) 100%);
  transition: opacity .5s ease;
}
.dest-card .card-line{
  position: absolute; left: 1.75rem; bottom: 1.6rem;
  height: 1px; width: 2.2rem;
  background: var(--moss-light);
  transition: width .5s ease;
}
.dest-card:hover .card-line{ width: 3.6rem; }

/* ---------- 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 .masonry-item{
  break-inside: avoid;
  margin-bottom: 1.1rem;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.masonry .masonry-item img{
  width: 100%; display:block;
  transition: transform 1s cubic-bezier(.22,1,.36,1), filter .6s ease;
}
.masonry .masonry-item:hover img{ transform: scale(1.06); }
.masonry .masonry-item .m-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(27,46,35,0) 55%, rgba(19,30,24,.85) 100%);
  opacity:0; transition: opacity .45s ease;
  display:flex; align-items:flex-end; padding:1rem 1.15rem;
}
.masonry .masonry-item:hover .m-overlay{ opacity:1; }

/* ---------- Lightbox ---------- */
#lightbox{
  position: fixed; inset:0; z-index: 200;
  background: rgba(19,30,24,.94);
  display:none;
  align-items:center; justify-content:center;
}
#lightbox.open{ display:flex; }
#lightbox img{
  max-width: 88vw; max-height: 82vh;
  border-radius: .5rem;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.7);
}
#lightbox .lb-close, #lightbox .lb-nav{
  color: #FAF7F1;
  transition: opacity .3s ease, transform .3s ease;
  opacity: .75;
}
#lightbox .lb-close:hover, #lightbox .lb-nav:hover{ opacity: 1; transform: scale(1.1); }

/* ---------- FAQ accordion ---------- */
.faq-item{ border-bottom: 1px solid var(--stone-light); }
.faq-q{
  cursor: pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-q .plus{
  transition: transform .4s ease;
  flex-shrink:0;
}
.faq-item.open .faq-q .plus{ transform: rotate(135deg); }
.faq-a{
  overflow:hidden;
  max-height:0;
  transition: max-height .5s ease, padding .5s ease, opacity .4s ease;
  opacity:.85;
}

/* ---------- Forms ---------- */
.field-input{
  width:100%;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--stone-light);
  border-radius: .7rem;
  padding: .95rem 1.15rem;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.field-input:focus{
  outline:none;
  border-color: var(--brook);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(78,124,140,.15);
}

/* ---------- Toast (non-blocking popup, replaces alert) ---------- */
#toast-container{
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 300;
  display:flex; flex-direction:column; gap:.7rem;
  max-width: min(92vw, 360px);
}
.toast{
  background: rgba(27,46,35,.94);
  color:#FAF7F1;
  border-left: 3px solid var(--moss-light);
  border-radius: .6rem;
  padding: .95rem 1.2rem;
  box-shadow: 0 15px 40px -15px rgba(0,0,0,.5);
  font-size:.88rem;
  letter-spacing:.02em;
  transform: translateX(120%);
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  opacity:0;
}
.toast.show{ transform: translateX(0); opacity:1; }

/* ---------- Section labels ---------- */
.eyebrow{
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--brook-dark);
}

/* ---------- Divider ---------- */
.divider-line{
  width: 3.2rem; height: 1px;
  background: var(--moss);
}

/* ---------- Misc ---------- */
.bg-texture{
  background-image: radial-gradient(circle at 20% 20%, rgba(124,139,90,.06), transparent 45%),
                     radial-gradient(circle at 85% 60%, rgba(78,124,140,.08), transparent 50%);
}

.line-clamp-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a, button{ cursor: pointer; }

.card-num{
  font-family:'Marcellus',serif;
  font-size: 3.4rem;
  color: rgba(47,74,60,.14);
  line-height:1;
}

.wave-underline{
  position: relative;
}
.wave-underline svg{
  position:absolute; left:0; bottom:-.6rem; width:4rem; height:.5rem;
}

@media (max-width: 767px){
  .hero-media img{ animation-duration: 22s; }
}