/* ─────────────────────────────────────────────────────────
   YUNAGI 夕凪 — Japanese Wellness
   Evening calm. Dark, moody, ryokan-luxe.
───────────────────────────────────────────────────────── */

:root {
  --bg:        #0a0907;
  --bg-2:      #100c08;
  --ink:       #f0e6d4;
  --ink-warm:  #ead7b5;
  --ink-dim:   rgba(240, 230, 212, 0.62);
  --ink-faint: rgba(240, 230, 212, 0.28);
  --amber:     #c89863;
  --amber-hi:  #e3b87b;
  --hair:      rgba(240, 230, 212, 0.18);
  --hair-soft: rgba(240, 230, 212, 0.10);

  --font-display: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Times New Roman", serif;
  --font-logo:    "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Times New Roman", serif;
  --font-ui:      "Mulish", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Helvetica Neue", system-ui, sans-serif;

  --ease-calm:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-deep:   cubic-bezier(0.65, 0.05, 0.36, 1);
  /* Bespoke curves */
  --ease-arrive: cubic-bezier(0.16, 0.84, 0.24, 1);      /* slow approach, gentle settle (enter) */
  --ease-recede: cubic-bezier(0.86, 0.02, 0.58, 0.98);   /* linger, then drop (exit) */
  --ease-bloom:  cubic-bezier(0.18, 1.0, 0.32, 1.0);     /* breathing reveal (headline) */
  --ease-veil:   cubic-bezier(0.32, 0.0, 0.18, 1.0);     /* veil/overlay openings */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

/* Lock scroll while the loader is on screen */
html.is-locked, html.is-locked body {
  overflow: hidden !important;
  height: 100vh;
  touch-action: none;
}

img, video { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.amb  { display: none; }

/* ── Lenis smooth scroll ─────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ─────────────────────────────────────────────────
   LOADER
───────────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0d0a07;        /* one flat warm-near-black, no gradient → no banding */
  overflow: hidden;
  pointer-events: none;
}
.loader__veil { display: none; }
.loader__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}
.loader__mark {
  font-family: var(--font-logo);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-warm);
  opacity: 0;
  transform: translateY(8px);
  animation: loader-in 1.8s var(--ease-calm) 0.2s forwards;
}
.loader__tag {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
  animation: loader-in 1.8s var(--ease-calm) 0.6s forwards;
}
.loader__bar {
  margin-top: 1.6rem;
  width: 120px;
  height: 1px;
  background: var(--hair-soft);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: loader-in 1.8s var(--ease-calm) 1s forwards;
}
.loader__bar > span {
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: translateX(-100%);
  animation: loader-bar 2.6s var(--ease-calm) 0.6s forwards;
}
@keyframes loader-in { to { opacity: 1; transform: none; } }
@keyframes loader-bar { to { transform: translateX(0); } }

.loader.is-leaving {
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-calm);
}
.loader.is-gone-final { display: none; }


/* ─────────────────────────────────────────────────
   NAV
───────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.8rem 2.6rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-calm) 0.2s, transform 1.4s var(--ease-calm) 0.2s;
  transform: translateY(-8px);
}
.nav.is-in { opacity: 1; transform: none; }
.nav > * { pointer-events: auto; }

.nav__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__name {
  font-family: var(--font-logo);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-warm);
}
.nav__tag {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.nav__links { display: none; }   /* replaced by full-screen overlay */

.nav__right {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  justify-self: end;
}
.nav__menu {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  transition: color 0.4s var(--ease-calm);
}

.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.nav__lang-opt {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.4s var(--ease-calm);
}
.nav__lang-opt.is-active { color: var(--ink); }
.nav__lang-opt:hover { color: var(--amber-hi); }
.nav__lang-sep {
  color: var(--ink-faint);
  font-size: 0.7rem;
  opacity: 0.6;
}
.nav__lang:hover, .nav__menu:hover, .nav__sound:hover, .nav__reserve:hover { color: var(--amber-hi); }

.nav__reserve {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.55rem 1.1rem 0.5rem;
  border: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  transition: color 1.0s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 1.0s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav__reserve::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.0s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
}
.nav__reserve:hover {
  color: var(--bg);
  border-color: var(--amber);
}
.nav__reserve:hover::before { transform: scaleX(1); }
.nav__reserve:not(:hover)::before { transform-origin: right center; }
.nav__burger {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 0.4rem;
}
.nav__burger i {
  width: 20px;
  height: 1px;
  background: currentColor;
  display: block;
  transition: transform 0.6s var(--ease-calm), opacity 0.4s var(--ease-calm);
  transform-origin: center;
}
.nav__menu[aria-expanded="true"] .nav__burger i:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__burger i:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }
.nav__menu-label--close { display: none; }
.nav__menu[aria-expanded="true"] .nav__menu-label { display: none; }
.nav__menu[aria-expanded="true"] .nav__menu-label--close { display: inline; }


/* ─────────────────────────────────────────────────
   MENU OVERLAY
───────────────────────────────────────────────── */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-calm);
}
.menu-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}
.menu-overlay[hidden] { display: block; }   /* override default; toggling via class */
.menu-overlay__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 7, 0.0);
  backdrop-filter: blur(0px) saturate(0.7) brightness(0.45);
  -webkit-backdrop-filter: blur(0px) saturate(0.7) brightness(0.45);
  transition: background 0.9s var(--ease-veil), backdrop-filter 0.9s var(--ease-veil), -webkit-backdrop-filter 0.9s var(--ease-veil);
}
.menu-overlay.is-open .menu-overlay__veil {
  background: rgba(10, 9, 7, 0.78);
  backdrop-filter: blur(22px) saturate(0.7) brightness(0.45);
  -webkit-backdrop-filter: blur(22px) saturate(0.7) brightness(0.45);
}
.menu-overlay__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 2.6rem 2.6rem;
  max-width: 1200px;
  margin: 0 auto;
}
.menu-overlay__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.menu-overlay__list li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-calm), transform 0.9s var(--ease-calm);
}
.menu-overlay.is-open .menu-overlay__list li { opacity: 1; transform: none; }
.menu-overlay.is-open .menu-overlay__list li:nth-child(1) { transition-delay: 0.10s; }
.menu-overlay.is-open .menu-overlay__list li:nth-child(2) { transition-delay: 0.16s; }
.menu-overlay.is-open .menu-overlay__list li:nth-child(3) { transition-delay: 0.22s; }
.menu-overlay.is-open .menu-overlay__list li:nth-child(4) { transition-delay: 0.28s; }
.menu-overlay.is-open .menu-overlay__list li:nth-child(5) { transition-delay: 0.34s; }
.menu-overlay.is-open .menu-overlay__list li:nth-child(6) { transition-delay: 0.40s; }
.menu-overlay__list a {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: 0.6rem 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 4.4rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-warm);
  position: relative;
  transition: color 0.4s var(--ease-calm), padding-left 0.6s var(--ease-calm);
}
@media (max-width: 760px) {
  .menu-overlay__list a {
    font-size: clamp(1.3rem, 6vw, 1.9rem);
    letter-spacing: 0.12em;
    gap: 1rem;
    padding: 0.4rem 0;
  }
  .menu-overlay__num { font-size: 0.6rem; letter-spacing: 0.32em; min-width: 2.4ch; }
  .menu-overlay__inner { padding: 5rem 1.6rem 2rem; }
}
.menu-overlay__list a:hover {
  color: var(--amber-hi);
  padding-left: 1.2rem;
}
.menu-overlay__num {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
  min-width: 3ch;
}
.menu-overlay__meta {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity 0.8s var(--ease-calm) 0.6s;
}
.menu-overlay__meta a { transition: color 0.4s var(--ease-calm); }
.menu-overlay__meta a:hover { color: var(--amber-hi); }
.menu-overlay.is-open .menu-overlay__meta { opacity: 1; }

/* Dedicated X close button in the overlay's top-right */
.menu-overlay__close {
  position: absolute;
  top: 1.8rem;
  right: 2.6rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.4s var(--ease-calm);
  opacity: 0;
  transform: translateY(-6px);
  transition: color 0.4s var(--ease-calm),
              opacity 0.5s var(--ease-calm) 0.05s,
              transform 0.6s var(--ease-calm) 0.05s;
}
.menu-overlay.is-open .menu-overlay__close { opacity: 1; transform: none; }
.menu-overlay__close:hover { color: var(--amber-hi); }
.menu-overlay__close-x {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}
.menu-overlay__close-x i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: center;
}
.menu-overlay__close-x i:nth-child(1) { transform: rotate(45deg); }
.menu-overlay__close-x i:nth-child(2) { transform: rotate(-45deg); }
@media (max-width: 980px) {
  .menu-overlay__close { top: 1.2rem; right: 1.4rem; }
  .menu-overlay__close-label { display: none; }
}

/* Sound toggle (live waveform bars when on, flat when muted) */
.nav__sound {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  transition: color 0.4s var(--ease-calm);
}
.nav__sound.is-on { color: var(--amber-hi); }
.nav__sound-icon {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  margin-left: 0.4rem;
}
.nav__sound-icon i {
  display: block;
  width: 2px;
  background: currentColor;
  height: 4px;
  border-radius: 1px;
  transform-origin: bottom center;
  transition: height 0.4s var(--ease-calm);
}
.nav__sound.is-on .nav__sound-icon i { animation: sound-bar 1.2s ease-in-out infinite; }
.nav__sound.is-on .nav__sound-icon i:nth-child(1) { animation-delay: 0s; }
.nav__sound.is-on .nav__sound-icon i:nth-child(2) { animation-delay: 0.2s; }
.nav__sound.is-on .nav__sound-icon i:nth-child(3) { animation-delay: 0.4s; }
@keyframes sound-bar {
  0%, 100% { height: 4px; }
  50%      { height: 12px; }
}


/* ─────────────────────────────────────────────────
   SCROLL CUE
───────────────────────────────────────────────── */
.cue {
  position: fixed;
  bottom: 2rem;
  left: 2.6rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  transition: opacity 0.8s var(--ease-calm);
}
.cue.is-in { opacity: 1; }
.cue.is-out { opacity: 0; }
.cue__line {
  width: 32px;
  height: 1px;
  background: var(--ink-dim);
  position: relative;
  overflow: hidden;
}
.cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: translateX(-100%);
  animation: cue-slide 3.2s var(--ease-calm) infinite;
}
@keyframes cue-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.cue__text {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink-dim);
}


/* ─────────────────────────────────────────────────
   JOURNEY · ROOMS
───────────────────────────────────────────────── */
.journey {
  position: relative;
  width: 100%;
}
.journey__pin {
  position: relative;
  width: 100%;
  height: 600vh;            /* 6 rooms × 100vh of scroll; JS may override */
}
.journey__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  perspective: 1400px;
  background: var(--bg);
}

.room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: scale(0.86);
  transform-origin: center center;
  will-change: opacity, transform;
  pointer-events: none;
}
.room:first-of-type { opacity: 1; transform: scale(1); pointer-events: auto; }
.room.is-current { pointer-events: auto; }

.room__bgwrap {
  position: absolute;
  inset: -5%;          /* room for parallax + zoom */
  z-index: 0;
  will-change: transform;
  transform-origin: center center;
}
.room__bg {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.room__bg--video {
  filter: brightness(1.02) saturate(1.05);
}
.room__bg--video-b {
  opacity: 0;
  z-index: 0;
}

.room__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 28% 70%, rgba(10,9,7,0.0) 0%, rgba(10,9,7,0.55) 78%),
    linear-gradient(180deg, rgba(10,9,7,0.62) 0%, rgba(10,9,7,0.15) 28%, rgba(10,9,7,0.15) 68%, rgba(10,9,7,0.72) 100%);
  pointer-events: none;
}
.room__veil--strong {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(10,9,7,0.18) 0%, rgba(10,9,7,0.72) 75%),
    linear-gradient(180deg, rgba(10,9,7,0.78) 0%, rgba(10,9,7,0.45) 35%, rgba(10,9,7,0.55) 65%, rgba(10,9,7,0.88) 100%);
}

.room__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
.room__content--hero {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  align-items: center;
  text-align: center;
}
.room__content--hero .room__title { align-items: center; }
.room__content--hero .room__sub { max-width: 46ch; }

.hero-prompt {
  margin-top: 3rem;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.5s var(--ease-calm);
  opacity: 0;
  transform: translateY(8px);
}
.room.is-in .hero-prompt {
  opacity: 1;
  transform: none;
  transition: opacity 1.4s var(--ease-calm) 0.9s,
              transform 1.4s var(--ease-calm) 0.9s,
              color 0.5s var(--ease-calm);
}
.hero-prompt__line {
  width: 34px;
  height: 1px;
  background: var(--ink-faint);
  position: relative;
  overflow: hidden;
  transition: background 0.5s var(--ease-calm);
}
.hero-prompt__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: translateX(-100%);
  animation: hero-prompt-slide 3.4s var(--ease-calm) infinite;
}
.hero-prompt__line:last-child::after { animation-delay: 1.7s; }
@keyframes hero-prompt-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.hero-prompt:hover { color: var(--amber-hi); }
.hero-prompt:hover .hero-prompt__line { background: var(--amber); }

/* Right-aligned text, block sitting just past centre (e.g. The Ritual Stone) */
.room__content--right {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(8%);
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  align-items: flex-end;
  text-align: right;
}
.room__content--right .room__title { align-items: flex-end; }
.room__content--right .room__sub { max-width: 46ch; }

/* Stronger right push (e.g. Rituals) */
.room__content--right-far {
  transform: translateX(22%);
}

/* Mirror of --right: text block sitting left of centre (e.g. The Sanctuary) */
.room__content--left {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-8%);
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  align-items: flex-start;
  text-align: left;
}
.room__content--left .room__title { align-items: flex-start; }
.room__content--left .room__sub  { max-width: 46ch; }

/* Stronger left push */
.room__content--left-far {
  transform: translateX(-22%);
}
@media (max-width: 980px) {
  .room__content--right { transform: none; }
  .room__content--right-far { transform: none; }
}

.room__eyebrow {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  transform: translateY(8px);
}
.room.is-in .room__eyebrow { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-calm) 0.2s, transform 1.2s var(--ease-calm) 0.2s; }

.room__title {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink-warm);
  font-size: clamp(2.8rem, 7.4vw, 7.8rem);
  line-height: 1.05;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 0.06em;
  text-shadow: 0 6px 60px rgba(0,0,0,0.45);
}
.room--hero .room__title {
  font-size: clamp(3rem, 8vw, 8.4rem);
  letter-spacing: 0.22em;
}
.room__title-line {
  display: block;
  opacity: 0;
  filter: blur(40px);
  transform: translateY(28px);
  letter-spacing: 0.32em;
  transition:
    opacity 1.6s var(--ease-calm),
    filter 1.6s var(--ease-calm),
    transform 1.6s var(--ease-calm),
    letter-spacing 1.8s var(--ease-deep);
}
.room.is-in .room__title-line {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  letter-spacing: 0.06em;
}
.room.is-in .room__title-line:nth-child(2) { transition-delay: 0.22s; }

.room__sub {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  max-width: 38ch;
  margin-top: 0.6rem;
  opacity: 0;
  transform: translateY(10px);
}
.room__sub--wide { max-width: 52ch; }
.room.is-in .room__sub {
  opacity: 1; transform: none;
  transition: opacity 1.4s var(--ease-calm) 0.5s, transform 1.4s var(--ease-calm) 0.5s;
}

.room__cta {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition: color 0.4s var(--ease-calm), border-color 0.4s var(--ease-calm);
}
.room.is-in .room__cta {
  opacity: 1; transform: none;
  transition: opacity 1.4s var(--ease-calm) 0.7s, transform 1.4s var(--ease-calm) 0.7s, color 0.4s var(--ease-calm), border-color 0.4s var(--ease-calm);
}
.room__cta::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -1px;
  height: 1px;
  background: var(--amber);
  transition: right 0.8s var(--ease-calm);
}
.room__cta:hover { color: var(--amber-hi); border-color: var(--amber); }
.room__cta:hover::after { right: 0; }

.room__cta--primary {
  font-size: 0.78rem;
  letter-spacing: 0.46em;
  padding: 1.05rem 2.4rem 0.95rem;
  border: 1px solid var(--hair);
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  transition: color 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.room__cta--primary::after { display: none; }
.room__cta--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
}
.room__cta--primary > span { position: relative; z-index: 1; }
.room__cta--primary:hover {
  color: var(--bg);
  border-color: var(--amber);
}
.room__cta--primary:hover::before { transform: scaleX(1); }
.room__cta--primary:not(:hover)::before { transform-origin: right center; }

.room__link {
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hair);
  align-self: flex-start;
  transition: color 0.4s var(--ease-calm), border-color 0.4s var(--ease-calm);
  opacity: 0;
  transform: translateY(10px);
}
.room.is-in .room__link {
  opacity: 1; transform: none;
  transition: opacity 1.4s var(--ease-calm) 0.8s, transform 1.4s var(--ease-calm) 0.8s, color 0.4s var(--ease-calm), border-color 0.4s var(--ease-calm);
}
.room__link:hover { color: var(--amber-hi); border-color: var(--amber); }

.room__fineprint {
  margin-top: 1.6rem;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
}
.room.is-in .room__fineprint {
  opacity: 1;
  transition: opacity 1.4s var(--ease-calm) 1s;
}

/* Photo credit on the hero — small, bottom-right, very quiet */
.room__credit {
  position: absolute;
  bottom: 1.8rem;
  right: 2.6rem;
  z-index: 3;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(6px);
}
.room.is-in .room__credit {
  opacity: 1; transform: none;
  transition: opacity 1.4s var(--ease-calm) 1.4s, transform 1.4s var(--ease-calm) 1.4s;
}

@media (max-width: 760px) {
  .room__credit { right: 1.4rem; bottom: 1.4rem; letter-spacing: 0.32em; }

  /* On mobile we collapse the desktop left/right pushes — narrow viewport
     can't accommodate translateX(±22%); content centres naturally instead. */
  .room__content,
  .room__content--right,
  .room__content--right-far,
  .room__content--left,
  .room__content--left-far {
    transform: none;
    margin: 0 auto;
    padding: 0 1.4rem;
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }
  .room__content--right .room__title,
  .room__content--right-far .room__title,
  .room__content--left .room__title,
  .room__content--left-far .room__title {
    align-items: flex-start;
  }
  /* Move room copy to the top quarter so the reveal cards have the centre. */
  .room:not(.room--hero) .room__content {
    margin-top: 0;
    align-self: flex-start;
    padding-top: clamp(5rem, 14vh, 8rem);
  }
  .room__title  { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .room__sub    { font-size: clamp(0.82rem, 3.4vw, 0.95rem); line-height: 1.6; }
  .room__eyebrow{ font-size: 0.58rem; letter-spacing: 0.36em; }

  /* Hero — slightly smaller display size + breathing room above the prompt. */
  .room--hero .room__title { font-size: clamp(3rem, 16vw, 5rem); }
  .room--hero .room__sub  { font-size: clamp(0.86rem, 3.6vw, 1rem); max-width: 28ch; }
  .hero-prompt { margin-top: 1.8rem; font-size: 0.58rem; letter-spacing: 0.36em; }
}


/* ─────────────────────────────────────────────────
   REVEAL — three cards rotate in from the left as
   scroll progresses through a room's dwell zone.
   JS sets --p (0..1 per card) on each .reveal__card.
───────────────────────────────────────────────── */
.reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
/* Dimming veil that fades in during the dwell so the cards "pop". JS sets
   --veil-op (0..1) on the parent .reveal as scroll progresses through the
   dwell zone. Sits below the cards, above the room background + copy. */
.reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 7, 5, var(--veil-op, 0));
  transition: none;       /* scroll drives it directly */
  pointer-events: none;
}
.reveal__card { z-index: 2; }   /* always above the veil */
.reveal__card {
  position: absolute;
  left: 12vw;
  top: 50%;
  width: clamp(480px, 44vw, 720px);
  margin: 0;
  transform-origin: 0% 50%;
  opacity: 0;
  will-change: transform, opacity, filter;
  /* Per-card resting tilt — three subtly different angles for editorial feel. */
  --rest-rot: 0deg;
  /* JS-driven values; defaults keep the card off-stage. */
  --tx:    0vw;     /* horizontal offset */
  --ty:    0vh;     /* vertical drift */
  --rot:   0deg;    /* rotation atop resting tilt */
  --scale: 1.04;    /* scale (fade reveal grows from 1.04 → 1.0) */
  --blur:  6px;     /* defocus blur (fade reveal sharpens from 6px → 0) */
  --op:    0;       /* opacity */
  transform:
    translate(0, -50%)
    translate(var(--tx), var(--ty))
    rotate(calc(var(--rest-rot) + var(--rot)))
    scale(var(--scale));
  filter: blur(var(--blur));
  opacity: var(--op);
}
.reveal__card[data-card="0"] { --rest-rot: -1deg; }
.reveal__card[data-card="1"] { --rest-rot:  0.6deg; }
.reveal__card[data-card="2"] { --rest-rot: -0.4deg; }

/* Right-anchored reveal — cards drift in from the right instead.
   JS already mirrors --tx/--rot sign when the parent room has this attribute. */
[data-reveal-side="right"] .reveal__card {
  left: auto;
  right: 12vw;
  transform-origin: 100% 50%;
}

.reveal__num {
  position: absolute;
  top: -2.4rem;
  left: 0.2rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  color: var(--amber);
}
.reveal__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid rgba(240, 230, 212, 0.10);
  box-shadow:
    0 2.4rem 4.8rem -1.6rem rgba(0, 0, 0, 0.55),
    0 0.4rem 1.2rem -0.2rem rgba(0, 0, 0, 0.45);
  filter: brightness(0.96);
}
.reveal__cap {
  margin-top: 1.1rem;
  max-width: 32rem;
  color: var(--ink);
}
.reveal__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-warm);
}
.reveal__lede {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.92rem, 1.18vw, 1.05rem);
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--ink-warm);
}
.reveal__body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: 0.86;
}
/* Cadence triplets — short lines deserve more breath between them. */
.reveal__body--cadence {
  line-height: 2.0;
}

/* Reveal copy is paired with a darker reading veil applied at room level.
   We push the room's existing right-far content slightly farther right so
   the card stack on the left has uncluttered space. */
.room[data-reveal] .room__content--right-far {
  --content-right-extra: 0vw;   /* hook for future tuning */
}

@media (max-width: 1500px) {
  .reveal__card { width: clamp(380px, 32vw, 520px); left: 7vw; }
  [data-reveal-side="right"] .reveal__card { right: 7vw; }
}
@media (max-width: 1100px) {
  .reveal__card { width: clamp(240px, 32vw, 320px); }
}
@media (max-width: 760px) {
  /* Mobile reveal: full width centered, no horizontal slide (the desktop
     left-edge anchor doesn't make sense in portrait). The fade animator
     stays in charge of opacity/scale/blur. */
  .reveal__card,
  [data-reveal-side="right"] .reveal__card {
    left: 6vw;
    right: 6vw;
    width: auto;
    max-width: none;
    top: 52%;
    transform-origin: 50% 50%;
    /* Drop the horizontal --tx component on mobile so cards just fade in place. */
    transform:
      translateY(-50%)
      translateY(var(--ty))
      rotate(calc(var(--rest-rot) + var(--rot)))
      scale(var(--scale));
  }
  .reveal__num    { top: -1.6rem; font-size: 1.05rem; letter-spacing: 0.22em; }
  .reveal__cap    { margin-top: 0.85rem; }
  .reveal__title  { font-size: clamp(0.95rem, 4vw, 1.2rem); letter-spacing: 0.2em; }
  .reveal__lede   { font-size: clamp(0.84rem, 3.4vw, 1rem); line-height: 1.5; }
  .reveal__body   { font-size: clamp(0.74rem, 3vw, 0.86rem); line-height: 1.6; }
  .reveal__body--cadence { line-height: 1.85; }
}


/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
.foot {
  position: relative;
  z-index: 4;
  padding: 1.8rem 2.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--hair-soft);
  background: var(--bg);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

/* ─────────────────────────────────────────────────
   i18n — sibling spans with lang="en"/"ja" attributes.
   The active language is whatever `html[lang=…]` is set
   to by the JP toggle in main.js; the other set is hidden.
───────────────────────────────────────────────── */
html[lang="en"] [lang="ja"] { display: none !important; }
html[lang="ja"] [lang="en"] { display: none !important; }
.foot__credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 230, 212, 0.18);
  transition: color 0.4s var(--ease-calm), border-color 0.4s var(--ease-calm);
}
.foot__credit a:hover {
  color: var(--amber-hi);
  border-bottom-color: var(--amber);
}

/* Stamped chop mark — vertical 夕凪 in red, slightly rotated */
.seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 2.4em;
  padding: 0.1em 0.2em;
  border: 1.5px solid #b6392f;
  background: rgba(182, 57, 47, 0.05);
  color: #c64435;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 0.5px rgba(182, 57, 47, 0.25);
  filter: contrast(1.05) saturate(1.05);
}
.seal > span + span { margin-top: 0.08em; }


/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav {
    grid-template-columns: 1fr auto;
    padding: 1.2rem 1.4rem;
  }
  .nav > span:not([class]) { display: none; }   /* drop the empty centre filler */
  .nav__links { display: none; }
  .nav__tag { display: none; }
  .cue { left: 1.4rem; bottom: 1.4rem; }
  .room__content { padding: 0 1.6rem; }
  .room__content--hero { padding-left: 1.6rem; }
  .foot { padding: 1.4rem; gap: 1rem; flex-wrap: wrap; }
}

/* Mobile: collapse all nav controls into the menu overlay, drop the footer. */
.menu-overlay__mobile { display: none; }
@media (max-width: 760px) {
  /* Strip the top nav down to just the burger */
  .nav__brand { display: none; }
  .nav__right .nav__reserve,
  .nav__right .nav__sound,
  .nav__right .nav__lang { display: none; }
  .nav__menu .nav__menu-label,
  .nav__menu .nav__menu-label--close { display: none; }
  .foot { display: none; }

  /* Reveal the consolidated controls + signoff inside the menu */
  .menu-overlay__mobile {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--hair-soft);
  }
  .menu-overlay__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .menu-overlay__action {
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--ink-dim);
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.45rem 0;
    background: none;
    border: 0;
    transition: color 0.4s var(--ease-calm);
  }
  .menu-overlay__action:hover,
  .menu-overlay__action.is-on { color: var(--amber-hi); }
  .menu-overlay__action .nav__sound-icon { margin-left: 0.4rem; }
  .menu-overlay__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0;
  }
  .menu-overlay__signoff {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.8rem;
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: 0.62rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .menu-overlay__signoff .foot__brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .room__title { letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .room__title-line { filter: none; transform: none; opacity: 1; letter-spacing: 0.06em; }
  .room__bgwrap { transform: none !important; }
  /* Drop pinned stage in favour of natural document flow for reduced motion */
  .journey__pin { height: auto !important; }
  .journey__stage { position: static; height: auto; perspective: none; overflow: visible; }
  .room {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100vh;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto;
  }
}