/* ============================================================
   SHIRAUME LODGE — Enhancements
   Features ported from the interactive prototype (index 2),
   restyled onto the approved design system in style.css.
   Splash intro · ink logo · custom cursor · scroll progress ·
   page transitions · lightbox · interlude · seasons strip ·
   journal · room detail views + booking · floating inquire.
   ============================================================ */

:root {
  --jpfont: 'Noto Serif JP', serif;
  --gold2: #b8956a;      /* muted gold used on dark panels */
  --lacquer: #a07448;    /* warm lacquer accent */
  --lacquer-hover: #7a5a30;
  --ink2: #17150f;       /* deep ink for dark panels (matches dark bg) */
  --washi2: #f4f0e8;     /* light text on ink */
}

/* ─── CUSTOM CURSOR ─────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body.cursor-on, body.cursor-on * { cursor: none !important; }
  body.cursor-on input, body.cursor-on textarea, body.cursor-on select { cursor: text !important; }
}
#cursor {
  position: fixed; z-index: 9999;
  width: 10px; height: 10px;
  background: var(--lacquer);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
  mix-blend-mode: multiply;
  left: -100px; top: -100px;
}
#cursor.grow { width: 36px; height: 36px; background: rgba(160,116,72,0.18); }
.dark #cursor { mix-blend-mode: normal; background: var(--gold2); }
.dark #cursor.grow { background: rgba(184,149,106,0.22); }
@media (hover: none), (pointer: coarse) { #cursor { display: none; } }

/* ─── SCROLL PROGRESS HAIRLINE ──────────────────────────── */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600;
  pointer-events: none;
}
#progress::after {
  content: ''; display: block; height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--lacquer) 55%, var(--gold2));
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* ─── PAGE WIPE TRANSITION ──────────────────────────────── */
#wipe {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--ink2);
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}
#wipe.in  { animation: wipeIn  0.5s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
#wipe.out { animation: wipeOut 0.5s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes wipeIn  { from { transform: scaleY(0); transform-origin: top }    to { transform: scaleY(1); transform-origin: top } }
@keyframes wipeOut { from { transform: scaleY(1); transform-origin: bottom } to { transform: scaleY(0); transform-origin: bottom } }

/* ─── VIEWS (home / room detail) ────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ─── INK LOGO MARK (header · footer · splash) ──────────── */
.logo-ink-mark { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.site-header .logo-ink-mark { width: 46px; height: 46px; }
.logo-ink-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: brightness(0) invert(0.12);
  clip-path: circle(0% at 50% 50%);
  animation: inkReveal 1.3s 0.15s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.logo:hover .logo-ink-img { transform: rotate(24deg); }
@keyframes inkReveal {
  0%   { clip-path: circle(0% at 60% 40%); opacity: 0; }
  40%  { opacity: 1; }
  100% { clip-path: circle(75% at 50% 50%); opacity: 1; }
}
/* Light-on-dark contexts: transparent header over hero, mobile menu, dark mode.
   The footer is light in light mode, so it keeps the default dark ink there. */
.site-header:not(.scrolled) .logo-ink-img,
.mobile-menu .logo-ink-img,
.dark .logo-ink-img { filter: brightness(0) invert(0.92); }
.dark .site-header.scrolled .logo-ink-img { filter: brightness(0) invert(0.92); }
.petal {
  position: absolute; top: 62%; left: 60%; width: 4px; height: 4px;
  border-radius: 50% 0 50% 50%;
  background: var(--gold2); opacity: 0; pointer-events: none;
}
.petal.p1 { animation: petalFloat 4.5s 1.6s ease-in infinite; }
.petal.p2 { animation: petalFloat 5.2s 2.6s ease-in infinite; }
.petal.p3 { animation: petalFloat 3.8s 3.4s ease-in infinite; }
@keyframes petalFloat {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.8); }
  8%   { opacity: 0.85; }
  100% { opacity: 0; transform: translate(22px, -26px) rotate(160deg) scale(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-ink-img, .petal { animation: none; clip-path: circle(75% at 50% 50%); opacity: 1; }
}

/* ─── SPLASH INTRO ──────────────────────────────────────── */
#splash {
  position: fixed; inset: 0; z-index: 9000;
  background: #f7f3ec;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.9s ease;
}
#splash.hidden { opacity: 0; pointer-events: none; }
.splash-kanji-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.splash-kanji-bg {
  font-family: var(--jpfont); font-weight: 400;
  font-size: clamp(160px, 30vw, 320px);
  color: rgba(184, 149, 106, 0.07); line-height: 1; letter-spacing: -0.05em;
  user-select: none;
}
.splash-logo {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.2rem;
  margin-bottom: 2rem;
}
.splash-ink-mark { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.splash-ink-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: brightness(0) invert(0.1) blur(0px);
  opacity: 0;
  --sweep: 0deg;
  -webkit-mask-image: conic-gradient(from 58deg, transparent 0deg, transparent calc(360deg - var(--sweep)), #000 calc(360deg - var(--sweep) + 10deg), #000 360deg);
  mask-image: conic-gradient(from 58deg, transparent 0deg, transparent calc(360deg - var(--sweep)), #000 calc(360deg - var(--sweep) + 10deg), #000 360deg);
  animation: splashInkDraw 1.9s 1.1s linear forwards;
}
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes splashInkDraw {
  0%    { --sweep: 0deg; opacity: 0; filter: brightness(0) invert(0.1) blur(2.5px); }
  6%    { opacity: 1; }
  90%   { filter: brightness(0) invert(0.1) blur(0px); }
  100%  { --sweep: 360deg; opacity: 1; filter: brightness(0) invert(0.1) blur(0px); -webkit-mask-image: none; mask-image: none; }
}
.splash-petal {
  position: absolute; top: 62%; left: 60%; width: 5px; height: 5px;
  border-radius: 50% 0 50% 50%;
  background: var(--gold2); opacity: 0; pointer-events: none;
}
.splash-petal.sp1 { animation: splashPetal 4.5s 3.2s ease-in infinite; }
.splash-petal.sp2 { animation: splashPetal 5.2s 4.2s ease-in infinite; }
.splash-petal.sp3 { animation: splashPetal 3.8s 5.0s ease-in infinite; }
@keyframes splashPetal {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.8); }
  8%   { opacity: 0.85; }
  100% { opacity: 0; transform: translate(30px, -34px) rotate(160deg) scale(0.4); }
}
.splash-name { display: flex; flex-direction: column; gap: 2px; opacity: 0; animation: splashFadeIn 0.8s 0.3s ease forwards; }
.splash-en {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.6rem); color: #1e1c18; letter-spacing: 0.02em; line-height: 1;
}
.splash-sub {
  font-family: var(--font-body); font-size: 0.72rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold2);
}
.splash-tagline {
  position: relative; z-index: 2;
  font-family: var(--jpfont); font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  text-align: center; letter-spacing: 0.18em;
  min-height: 2.5em;
  display: flex; justify-content: center; align-items: center; flex-wrap: nowrap;
}
.splash-skip {
  position: absolute; bottom: 2.5rem;
  font-family: var(--font-body); font-size: 0.62rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: #a89c8d; transition: color 0.2s; cursor: pointer;
}
.splash-skip:hover { color: var(--gold2); }
@keyframes splashFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash-ink-img { animation: none; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  .splash-petal { animation: none; }
}

/* ─── TICKER CHARACTERS (splash tagline + hero ticker) ──── */
.ticker-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-10px);
  color: var(--gold2);
  text-shadow: none;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              text-shadow 1.2s ease;
}
.ticker-char.show {
  opacity: 0.92;
  transform: translateY(0);
  text-shadow: 0 0 14px rgba(184, 149, 106, 0.55), 0 0 32px rgba(184, 149, 106, 0.2);
}
.ticker-char.hide {
  opacity: 0;
  transform: translateY(10px);
  text-shadow: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── HERO ENHANCEMENTS ─────────────────────────────────── */
/* Everything here is gated on body.hero-enhanced.
   TO REVERT TO THE ORIGINAL HERO exactly as approved:
   remove the "hero-enhanced" class from <body> in index.html. */
#hero-ticker {
  display: none;
  position: absolute;
  right: 3rem; bottom: 3rem; z-index: 3;
  align-items: center; justify-content: flex-end;
  pointer-events: none;
  max-width: 42vw;
}
body.hero-enhanced #hero-ticker { display: flex; }
.ticker-col {
  font-family: var(--jpfont); font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  display: flex; flex-direction: row; flex-wrap: nowrap;
  justify-content: flex-end; align-items: center;
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 860px) { body.hero-enhanced #hero-ticker { display: none; } }
body.hero-enhanced .hero-in {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
body.hero-enhanced .hero-in.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.hero-enhanced .hero-in { opacity: 1; transform: none; }
}

/* ─── HERO TITLE, JAPANESE ──────────────────────────────────
   These declarations used to sit in a style="" attribute on the span.
   Inline styles outrank the [data-lang="en"] .ja { display: none }
   rule, so the Japanese headline stayed visible in English mode and
   made the English hero taller than one screen — which scaled the
   background photo up. As a class it obeys the language toggle. */
.hero-title-jp {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: var(--text-3xl);
}
[data-lang="ja"] .hero-title-jp { display: block; }

/* The English headline is three long lines where the Japanese is two, so on
   short windows it would still outgrow one screen and scale the photo up.
   Capping it against viewport height keeps both languages exactly 100dvh.
   Above 880px tall — every common presentation display — the cap never
   applies and the headline keeps its approved size. */
@media (max-height: 880px) {
  [data-lang="en"] .hero-content { padding-top: 5rem; }
  [data-lang="en"] .hero-title { font-size: min(var(--text-hero), 11vh); }
}
@media (max-height: 700px) {
  [data-lang="en"] .hero-title { font-size: min(var(--text-hero), 8.5vh); }
}

/* ════════════════════════════════════════════════════════
   REFINEMENTS
   Drawn from the reference site the client admired: a signature
   architectural shape used as an image frame, hairline drawn icons in
   place of emoji, and separators that fade out at both ends. The shapes
   are the Japanese counterparts — a temple window arch and the ink
   circle already used as the mark — rather than the Moorish motifs.
   ════════════════════════════════════════════════════════ */

/* ─── DRAWN ICONS (replacing emoji) ─────────────────────── */
.spot-icon {
  font-size: 0; /* kills the whitespace an inline svg would sit on */
  width: 2.25rem;
  padding-top: 0;
  color: var(--color-cedar);
  opacity: 0.85;
  transition: color var(--transition-interactive), opacity var(--transition-interactive);
}
.spot-icon svg { width: 26px; height: 26px; display: block; }
.spot-card:hover .spot-icon { color: var(--color-primary); opacity: 1; }

/* ─── 火灯窓 KATOMADO FRAME ──────────────────────────────── */
/* The bell-shaped window of a Zen temple hall: the line leaves the sill
   vertically, flares OUT at the shoulder, then curves back IN to a soft
   point at the crown. That outward flare is the whole difference between
   this and a plain dome — a dome only ever curves one way.
   Used on both feature photographs so it reads as a repeated motif
   rather than an ornament stuck on one picture. */
.katomado-frame {
  position: relative;
  clip-path: url(#katomado);
  /* the clip supplies the whole silhouette, so the rectangle's own
     corner radius and drop shadow have to come off or they fight it */
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.katomado-frame img {
  display: block;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.katomado-frame:hover img { transform: scale(1.05); }

/* A second line, drawn a little inside the edge — the way a real window
   has a frame within its opening. preserveAspectRatio="none" on the SVG
   makes it stretch exactly as the clip does, so the two stay parallel at
   any width; non-scaling-stroke keeps the line hairline-thin regardless. */
.katomado-ring {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 700px) {
  .katomado-ring { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
}

/* The parent wrappers were carrying the rectangle's own framing. */
.area-img-wrap { border-radius: 0; box-shadow: none; overflow: visible; }

/* ─── SECTION LABELS ────────────────────────────────────── */
/* Wider tracking and a hairline trailing off the end of each label —
   the reference pairs every small caps label with one, and it is what
   makes them read as considered rather than merely small. */
.section-eyebrow {
  letter-spacing: 0.2em;
}
.section-eyebrow::after {
  content: '';
  flex: 0 0 auto;
  align-self: center;
  width: 44px;
  height: 1px;
  margin-left: 0.9rem;
  background: linear-gradient(90deg, var(--color-cedar), transparent);
  opacity: 0.55;
}

/* ─── KANJI WATERMARKS ──────────────────────────────────── */
.kanji-bg {
  position: absolute;
  font-family: var(--jpfont); font-weight: 400;
  color: var(--color-text);
  opacity: 0.032;
  line-height: 1; pointer-events: none; user-select: none;
  letter-spacing: -0.05em;
  z-index: 0;
}
.story-section, .rooms-section, .experience-section { position: relative; overflow: hidden; }
.story-section .container, .rooms-section .container, .experience-section .container { position: relative; z-index: 1; }
.story-k  { font-size: 20rem; bottom: -3rem; right: -2rem; }
.rooms-kanji { font-size: 26rem; top: -4rem; right: -2rem; }
.exp-kanji { font-size: 24rem; top: -2rem; left: -1rem; }

/* ─── ROOM CARDS → DETAIL PAGES ─────────────────────────── */
.room-card[data-room] { cursor: pointer; }
.room-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: var(--space-4);
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 500;
}
.room-cta::after { content: '→'; transition: transform 0.25s ease; }
.room-card:hover .room-cta { color: var(--color-primary-hover); }
.room-card:hover .room-cta::after { transform: translateX(5px); }

/* ─── STATS COUNTER (no visual change; JS animates text) ── */

/* ─── INTERLUDE (contemplative band) ────────────────────── */
.interlude-section {
  position: relative; overflow: hidden;
  background: var(--ink2);
  padding: 7.5rem 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='none' stroke='%23B8956A' stroke-opacity='0.055' stroke-width='1'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='20' cy='20' r='12'/%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='0' cy='10' r='18'/%3E%3Ccircle cx='0' cy='10' r='12'/%3E%3Ccircle cx='0' cy='10' r='6'/%3E%3Ccircle cx='40' cy='10' r='18'/%3E%3Ccircle cx='40' cy='10' r='12'/%3E%3Ccircle cx='40' cy='10' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
.interlude-inner { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.interlude-eyebrow {
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold2); margin-bottom: 1rem;
}
.interlude-quote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.7;
  color: rgba(247, 243, 236, 0.88);
  margin: 1.6rem auto 1.5rem;
  max-width: none;
}
.interlude-quote em { font-style: italic; color: var(--gold2); }
.interlude-jp-line {
  font-family: var(--jpfont); font-weight: 200;
  font-size: 0.8rem; letter-spacing: 0.3em;
  color: rgba(247, 243, 236, 0.4);
  max-width: none;
}
.interlude-sep { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 2.4rem; }
.interlude-sep::before, .interlude-sep::after { content: ''; height: 1px; width: 56px; }
.interlude-sep::before { background: linear-gradient(90deg, transparent, rgba(184, 149, 106, 0.55)); }
.interlude-sep::after  { background: linear-gradient(90deg, rgba(184, 149, 106, 0.55), transparent); }
.interlude-ume {
  width: 12px; height: 12px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23B8956A'%3E%3Ccircle cx='6' cy='2.8' r='2.1'/%3E%3Ccircle cx='2.96' cy='5.01' r='2.1'/%3E%3Ccircle cx='4.12' cy='8.59' r='2.1'/%3E%3Ccircle cx='7.88' cy='8.59' r='2.1'/%3E%3Ccircle cx='9.04' cy='5.01' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='6' r='1.15' fill='%23141210'/%3E%3C/svg%3E") center/contain no-repeat;
}
.interlude-kanji {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%);
  font-family: var(--jpfont); font-weight: 400; font-size: clamp(14rem, 26vw, 24rem);
  color: rgba(247, 243, 236, 0.035);
  pointer-events: none; user-select: none; line-height: 1;
}

/* ─── SEASONS PHOTO STRIP (auto-drift carousel) ─────────── */
.seasons-scroll-wrap { position: relative; overflow: hidden; margin-top: var(--space-12); }
.seasons-track {
  display: flex; gap: 0;
  width: max-content;
  animation: seasonsDrift 28s linear infinite;
}
.seasons-track:hover { animation-play-state: paused; }
@keyframes seasonsDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.season-panel {
  position: relative; width: 30vw; min-width: 260px; aspect-ratio: 9/14;
  overflow: hidden; flex-shrink: 0;
  background: var(--color-surface-offset-2);
}
.season-panel img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.55) brightness(0.78);
  transition: filter 0.5s;
}
.season-panel:hover img { filter: saturate(0.9) brightness(0.88); }
.season-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 18, 16, 0.75) 0%, transparent 50%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 2.5rem;
}
.s-kanji {
  font-family: var(--jpfont); font-size: 2.8rem; font-weight: 200;
  color: var(--washi2); letter-spacing: 0.1em;
}
.s-en { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold2); margin-top: 0.3rem; }
.s-months { font-size: 0.62rem; color: rgba(247, 243, 236, 0.38); margin-top: 0.2rem; }
.seasons-strip-hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .seasons-track { animation: none; } }

/* ─── JOURNAL (renovation notes) ────────────────────────── */
.journal-section {
  position: relative; overflow: hidden;
  background: var(--color-surface-offset);
  padding: var(--space-24) 0;
}
.journal-kanji {
  position: absolute; font-family: var(--jpfont); font-size: 22rem; font-weight: 400;
  color: var(--color-text); opacity: 0.028; top: -3rem; left: -2rem;
  pointer-events: none; user-select: none; line-height: 1;
}
.journal-section .container { position: relative; z-index: 1; }
.journal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
  margin-top: var(--space-12);
}
.j-entry {
  border-top: 1px solid var(--color-divider);
  padding-top: 1.6rem;
  display: flex; flex-direction: column;
  transition: border-color 0.4s;
}
.j-entry:hover { border-top-color: var(--color-cedar); }
.j-date {
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--color-cedar); margin-bottom: 0.8rem;
}
.j-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: var(--color-text); line-height: 1.4; margin-bottom: 0.3rem;
}
.j-jp {
  font-family: var(--jpfont); font-weight: 300; font-size: 0.7rem;
  letter-spacing: 0.15em; color: var(--color-text-faint); margin-bottom: 0.9rem;
}
.j-body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.85; flex-grow: 1; }
.j-note {
  margin-top: var(--space-12); font-size: 0.75rem; color: var(--color-text-muted);
  letter-spacing: 0.05em; font-style: italic; opacity: 0.7;
}
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ─── FLOATING INQUIRE BUTTON ───────────────────────────── */
#float-inq {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 450;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(23, 21, 15, 0.92);
  border: 1px solid rgba(184, 149, 106, 0.45);
  color: var(--gold2);
  font-family: var(--jpfont); font-weight: 200; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s, border-color 0.3s, color 0.3s;
  box-shadow: 0 6px 24px rgba(20, 18, 16, 0.25);
}
#float-inq.on { opacity: 1; transform: none; pointer-events: all; }
#float-inq:hover { background: var(--lacquer); border-color: var(--lacquer); color: var(--washi2); }
#float-inq::after {
  content: 'Inquire · お問い合わせ';
  position: absolute; right: calc(100% + 0.9rem); top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-text-muted); opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
#float-inq:hover::after { opacity: 1; }
@media (max-width: 760px) { #float-inq { bottom: 1.2rem; right: 1.2rem; width: 46px; height: 46px; } }

/* ─── AMBIENT SOUND TOGGLE ──────────────────────────────── */
#float-snd {
  position: fixed; bottom: 5.6rem; right: 2rem; z-index: 450;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid rgba(160, 116, 72, 0.4);
  color: var(--lacquer);
  font-family: var(--jpfont); font-weight: 200; font-size: 0.95rem;
  display: none; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s, border-color 0.3s, color 0.3s;
  box-shadow: 0 6px 20px rgba(20, 18, 16, 0.18);
}
#float-snd.ready { display: flex; }
#float-snd.on { opacity: 1; transform: none; pointer-events: all; }
#float-snd:hover { border-color: var(--lacquer); color: var(--color-text); }
#float-snd.playing { background: var(--lacquer); border-color: var(--lacquer); color: var(--washi2); }
#float-snd .snd-waves {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(160, 116, 72, 0.5); opacity: 0;
}
#float-snd.playing .snd-waves { animation: sndPulse 2.6s ease-out infinite; }
@keyframes sndPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.55); opacity: 0; } }
@media (max-width: 760px) { #float-snd { bottom: 4.6rem; right: 1.2rem; width: 40px; height: 40px; } }

/* ─── LIGHTBOX ──────────────────────────────────────────── */
#lightbox {
  position: fixed; inset: 0; z-index: 7000;
  background: rgba(20, 18, 16, 0.95);
  display: none; align-items: center; justify-content: center;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; width: auto; height: auto; }
#lightbox-close {
  position: absolute; top: 1.5rem; right: 2rem;
  background: none; border: none; font-size: 1.8rem;
  color: rgba(247, 243, 236, 0.5); transition: color 0.2s;
}
#lightbox-close:hover { color: var(--washi2); }

/* ─── FORM STATUS & SPAM TRAP ───────────────────────────── */
/* Off-screen rather than display:none — bots skip hidden fields but
   happily fill this one, which is exactly what we want to detect. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.form-status {
  font-size: var(--text-xs);
  line-height: 1.6;
  margin-top: var(--space-3);
  text-align: center;
}
.form-status:empty { display: none; }
.form-status.is-error { color: var(--destructive); }
.form-status.is-note { color: var(--color-primary); }
.bc-note + .form-status, .booking-card .form-status { text-align: left; }
button[disabled] { opacity: 0.6; cursor: default; }

/* ─── INQUIRY SUCCESS STATE ─────────────────────────────── */
.form-success { display: none; text-align: center; padding: 3rem 0; }
.form-success.show { display: block; }
.form-success-icon { font-size: 2.2rem; margin-bottom: 0.8rem; }
.form-success h3 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--color-text); margin-bottom: 0.5rem;
}
.form-success p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; margin: 0 auto; }

/* ════════════════════════════════════════════════════════
   ROOM DETAIL VIEW
   ════════════════════════════════════════════════════════ */
#view-room { background: var(--color-bg); }
.rdh {
  position: relative; height: 88svh; min-height: 540px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.rdh-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.rdh-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(20, 18, 16, 0.05) 0%, rgba(20, 18, 16, 0.75) 100%);
}
.rdh-content {
  position: relative; z-index: 2;
  padding: 0 4rem 5rem;
  width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem;
}
.rdh-back {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(247, 243, 236, 0.6); background: rgba(247, 243, 236, 0.08);
  border: 1px solid rgba(247, 243, 236, 0.18);
  padding: 0.55rem 1.1rem; margin-bottom: 2rem;
  backdrop-filter: blur(6px); transition: color 0.2s, background 0.2s;
  font-family: var(--font-body);
}
.rdh-back::before { content: '←'; margin-right: 0.2rem; }
.rdh-back:hover { color: var(--washi2); background: rgba(247, 243, 236, 0.15); }
.rdh-type { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold2); margin-bottom: 0.6rem; font-family: var(--font-body); }
.rdh-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: var(--washi2);
}
.rdh-jp {
  font-family: var(--jpfont); font-weight: 200; font-size: 1.1rem;
  letter-spacing: 0.3em; color: rgba(247, 243, 236, 0.45); margin-top: 0.4rem;
}
.rdh-right { text-align: right; flex-shrink: 0; }
.rdh-size {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 400;
  color: rgba(247, 243, 236, 0.25); line-height: 1.1;
}
.rdh-price-badge { font-size: 0.75rem; letter-spacing: 0.1em; color: rgba(247, 243, 236, 0.6); margin-top: 0.4rem; }

.rdb {
  display: grid; grid-template-columns: 3fr 2fr;
  align-items: start;
  max-width: 1280px; margin: 0 auto;
}
.rdb-main { padding: 5rem 4rem 6rem; border-right: 1px solid var(--color-divider); }
.rdb-eyebrow {
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--color-cedar); margin-bottom: 1rem;
}
.rdb-lead {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 500;
  line-height: 1.65; color: var(--color-text); margin-bottom: 1.5rem;
}
.rdb-body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.95; margin-bottom: 0.8rem; }
.rdb-body.jp { font-family: var(--jpfont); font-weight: 300; font-size: 0.85rem; letter-spacing: 0.04em; line-height: 1.9; }
.rdb-feats-lbl {
  font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--color-cedar); margin: 2rem 0 1rem; font-family: var(--font-body);
}
.rdb-feats { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.feat {
  font-size: 0.75rem; letter-spacing: 0.08em;
  padding: 0.4rem 0.9rem; border: 1px solid var(--color-border);
  color: var(--color-text-muted); background: var(--color-surface-offset);
  transition: border-color 0.2s, color 0.2s;
}
.feat:hover { border-color: var(--color-cedar); color: var(--color-cedar); }
.feat .feat-jp { font-family: var(--jpfont); font-size: 0.65rem; color: var(--color-cedar); margin-left: 0.3rem; }
.gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 2rem; }
.gal-grid img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in;
  transition: transform 0.4s, filter 0.3s; filter: brightness(0.95);
}
.gal-grid img:first-child { grid-column: 1 / -1; aspect-ratio: 16/7; }
.gal-grid img:hover { transform: scale(1.02); filter: brightness(1); }
.concept-notice {
  margin: 1rem 0; padding: 1rem 1.2rem;
  background: var(--color-surface-offset); border-left: 2px solid var(--color-gold);
  font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.75;
}
.rdb-side { padding: 4rem 3rem; position: sticky; top: 5rem; }
.booking-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: 2rem; }
.bc-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; }
.bc-price { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--color-cedar); margin-bottom: 1.8rem; }
.bc-div { height: 1px; background: var(--color-divider); margin: 1.5rem 0; }
.bc-note { font-size: 0.73rem; color: var(--color-text-faint); line-height: 1.75; margin-top: 1rem; }
.fg { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.2rem; }
.fg label { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); font-family: var(--font-body); }
.fg input, .fg select, .fg textarea {
  padding: 0.85rem 1rem; background: var(--color-surface-2);
  border: 1px solid var(--color-border); color: var(--color-text);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 300;
  outline: none; transition: border-color 0.25s;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--color-primary); }
.fg textarea { resize: vertical; min-height: 90px; }
.btn-book {
  width: 100%; justify-content: center;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 0.95rem 2rem;
  background: var(--color-primary); color: var(--color-text-inverse);
  border: none; transition: background 0.3s, transform 0.15s ease;
}
.btn-book:hover { background: var(--color-primary-hover); }
.btn-book:active { transform: scale(0.97); }
.bk-success { display: none; text-align: center; padding: 1.5rem 0; }
.bk-success.show { display: block; }
.bk-success-icon { font-size: 2.2rem; margin-bottom: 0.8rem; }
.bk-success h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; }
.bk-success p { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.8; margin: 0 auto; }
.other-rooms { margin-top: 2rem; }
.other-lbl { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1rem; font-family: var(--font-body); }
.other-link {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 0; border-top: 1px solid var(--color-divider);
  cursor: pointer; transition: padding-left 0.2s;
}
.other-link:hover { padding-left: 0.4rem; }
.other-link img { width: 52px; height: 40px; object-fit: cover; flex-shrink: 0; }
.other-en { font-size: 0.85rem; font-weight: 500; color: var(--color-text); }
.other-jp { font-family: var(--jpfont); font-size: 0.68rem; color: var(--color-cedar); letter-spacing: 0.1em; }
.rm-footer {
  background: var(--ink2); color: var(--color-text-muted); padding: 2.5rem 3rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.rm-footer-logo {
  font-family: var(--jpfont); font-weight: 200; font-size: 1.1rem;
  letter-spacing: 0.2em; color: var(--washi2);
  background: none; border: none; padding: 0;
}
.btn-ghost-d {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 0.85rem 1.8rem;
  background: transparent; color: rgba(247, 243, 236, 0.6);
  border: 1px solid rgba(247, 243, 236, 0.25);
  transition: border-color 0.3s, color 0.3s;
}
.btn-ghost-d:hover { border-color: var(--gold2); color: var(--gold2); }

@media (max-width: 960px) {
  .rdb { grid-template-columns: 1fr; }
  .rdb-main { border-right: none; padding: 4rem 2rem; }
  .rdb-side { position: relative; top: 0; border-top: 1px solid var(--color-divider); padding: 3rem 2rem; }
  .rdh-right { display: none; }
  .rdh-content { padding: 0 2rem 4rem; }
}

/* ═══════════════════════════════════════════════════════════
   EDITORIAL DETAIL
   Small things, each one repeated somewhere else on the page,
   so nothing reads as a one-off flourish.
   ═══════════════════════════════════════════════════════════ */

/* ─── THE RING DRAWS ITSELF IN ──────────────────────────── */
/* pathLength="1" on the path lets the dash be written in plain
   fractions instead of measured pixels, so one rule covers both
   frames at any size. The line traces itself as the photograph
   scrolls up — the same gesture as a brush laid down once. */
.katomado-ring path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(0.33, 1, 0.68, 1) 0.35s;
}
.reveal.visible .katomado-ring path { stroke-dashoffset: 0; }

/* ─── DROP CAP ──────────────────────────────────────────── */
/* Only on the English opening. Japanese has no tradition of one,
   and setting a kanji three lines tall looks like a mistake. */
.story-lede::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.14em 0 0;
  color: var(--color-cedar);
}
[data-lang="ja"] .story-lede::first-letter { float: none; font-size: inherit; color: inherit; padding: 0; }

/* ─── PHOTOGRAPH CAPTIONS ───────────────────────────────── */
/* The Est. 1917 badge hangs off the photograph, so it needs the
   photograph as its containing block — not the whole column, or
   the caption below would push it away from the picture. */
.story-figure { position: relative; }

.fig-caption {
  margin-top: 2.4rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--color-divider);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 34ch;
}
.fig-caption .ja {
  font-family: 'Noto Serif JP', serif;
  font-style: normal;
  font-size: 0.82rem;
}

/* ─── UME RULE BETWEEN MOVEMENTS ────────────────────────── */
/* The same five-petal plum mark that closes the interlude. It opens
   each new movement of the page from inside that section, so it always
   sits on one flat ground — the sections alternate their background,
   and a rule laid across the seam looks like a printing error. */
.ume-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem;
  max-width: 1200px;
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
  opacity: 1; transform: none;  /* the parts animate, not the row */
}
/* The two hairlines grow outward from the mark and the mark scales in —
   the reference animates its divider open on scroll rather than having it
   simply appear, and that is what makes it feel drawn rather than placed. */
.ume-line {
  height: 1px; width: 0; opacity: 0;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}
.ume-line:first-child  { background: linear-gradient(90deg, transparent, var(--color-divider)); }
.ume-line:last-child   { background: linear-gradient(90deg, var(--color-divider), transparent); }
.ume-rule.visible .ume-line { width: 200px; opacity: 1; }
.ume-mark {
  transform: scale(0) rotate(-40deg); opacity: 0;
  transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) 0.35s, opacity 0.6s ease 0.35s;
}
.ume-rule.visible .ume-mark { transform: scale(1) rotate(0deg); opacity: 0.7; }
.ume-mark {
  width: 11px; height: 11px; flex: 0 0 auto; opacity: 0.7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23B8956A'%3E%3Ccircle cx='6' cy='2.8' r='2.1'/%3E%3Ccircle cx='2.96' cy='5.01' r='2.1'/%3E%3Ccircle cx='4.12' cy='8.59' r='2.1'/%3E%3Ccircle cx='7.88' cy='8.59' r='2.1'/%3E%3Ccircle cx='9.04' cy='5.01' r='2.1'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

/* ─── REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #splash { display: none; }
  .seasons-track, .petal, .splash-petal { animation: none !important; }
  .katomado-ring path { transition: none; stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════
   INTERACTION — drawn from the reference site the client admires
   Each block below names the component it comes from, so the
   lineage is checkable rather than asserted.
   ═══════════════════════════════════════════════════════════ */

/* The hero carried a drawn katomado outline for a moment, mirroring the
   reference's keyhole arch. It came out: the hero photograph is a torii —
   an actual gateway — and outlining a gateway over a picture of a gateway
   is noise, not a motif. It was also invisible against that much foliage. */

/* ─── ROOM CARDS · IDENTITY BAR AND DOT ─────────────────────
   Their suite cards give each suite a colour: a 3px bar beneath
   the photograph that thickens on hover, and a dot of the same
   colour beside the name. Five rooms, five colours drawn from
   what each room actually is — moss, stone, cedar, hinoki,
   east-mountain dusk. */
.room-bar {
  height: 2px; width: 100%;
  background: var(--tint, var(--color-cedar));
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.room-card:hover .room-bar { height: 4px; }
.room-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tint, var(--color-cedar));
  margin-right: 0.6rem;
  vertical-align: 0.12em;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.room-card:hover .room-dot { transform: scale(1.35); }

/* ─── EXPERIENCE CARDS · GROWING HAIRLINE ───────────────────
   Their .discover-card__line runs 32px → 56px on hover. Theirs
   also hides the description until hover; ours are text-only
   cards, so hiding the text would leave six near-empty boxes.
   The line and the numeral carry the movement instead. */
.exp-line {
  height: 1px; width: 30px;
  margin: 0.9rem 0 0.2rem;
  background: linear-gradient(90deg, var(--color-cedar), transparent);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.exp-card:hover .exp-line { width: 64px; }
.exp-num { transition: color 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.exp-card:hover .exp-num { color: var(--color-cedar); transform: translateY(-2px); }

/* ─── LINKS · UNDERLINE GROWS FROM THE LEFT ─────────────────
   Their .link-luxury::after, scaleX(0) → scaleX(1) from the
   left edge. Used on every navigation link they have. */
.nav-links a,
.footer-nav-links a,
.mobile-nav-link { position: relative; }
.nav-links a::after,
.footer-nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after,
.footer-nav-links a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .ume-line { width: 200px !important; opacity: 1 !important; }
  .ume-mark { transform: none !important; opacity: 0.7 !important; }
}

/* ═══════════════════════════════════════════════════════════
   THE GATE — the splash opens instead of fading
   ═══════════════════════════════════════════════════════════ */

/* The splash itself no longer paints the cream; the gate does, so that a
   hole can be cut in it. */
#splash { background: transparent; }

#gate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
#gate-fill { fill: #f7f3ec; }

/* The hole and the drawing are different shapes now, so they cannot share a
   bounding box. transform-box: view-box puts both in the SVG's own
   coordinate space and JS pins the origin to the centre of the opening, so
   they still move as one. */
#gate-hole, #gate-draw {
  transform-box: view-box;
  transform-origin: var(--gx, 50%) var(--gy, 50%);
}
#gate-hole { transform: scale(0); }

/* Each piece of the gate traces itself, in the order it would be built:
   the posts rise, the beams cross them, then the plaque and the footings.
   pathLength="1" lets one rule cover pieces of very different lengths. */
#gate-draw path {
  stroke: rgba(139, 74, 47, 0.62);
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: gateTrace var(--dd, 1.6s) cubic-bezier(0.22, 1, 0.36, 1) var(--dl, 0s) forwards;
}
@keyframes gateTrace { to { stroke-dashoffset: 0; } }

/* Everything that belongs to the cream world sits above the gate and
   fades as the doorway opens. */
.splash-kanji-wrap { z-index: 1; }
.splash-logo, .splash-tagline { position: relative; z-index: 2; }
/* The skip is pinned to the foot of the screen by .splash-skip above; give
   it a stacking level without disturbing that, or it drops back into the
   flow and lands on top of the tagline. */
.splash-skip { z-index: 2; }

/* ─── OPENING ───────────────────────────────────────────────
   One continuous move: the hole grows from nothing to exactly the
   traced line (the 42% keyframe), then keeps going until it has left
   the screen. The line rides with it from that moment and fades. */
#splash.opening { pointer-events: none; }
#splash.opening #gate-hole { animation: gateOpen 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#splash.opening #gate-draw { animation: gateLineOpen 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
/* The opening animation would replace gateTrace on each piece, and with it
   the forwards fill holding the lines drawn — so the offset is pinned here
   or the whole gate blinks out the instant it starts to move. */
#splash.opening #gate-draw path { stroke-dashoffset: 0; animation: none; }
#splash.opening .splash-kanji-wrap,
#splash.opening .splash-logo,
#splash.opening .splash-tagline,
#splash.opening .splash-skip {
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* The doorway fills with the mountain until it reaches the traced line,
   holds there for a beat — that pause is the whole point of the shot, the
   moment you are standing in the gateway — and only then sweeps outward. */
@keyframes gateOpen {
  0%   { transform: scale(0); }
  40%  { transform: scale(1); }
  56%  { transform: scale(1); }
  100% { transform: scale(9); }
}
@keyframes gateLineOpen {
  0%, 56% { transform: scale(1); opacity: 1; }
  100%    { transform: scale(9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #gate-draw path { animation: none; stroke-dashoffset: 0; }
}

/* ─── THE GATE AT NIGHT ─────────────────────────────────────
   Japan time decides day or night before the splash paints, so at night
   a cream doorway would flash white in front of a dark site. The gate,
   the ink mark and the lettering all turn over together. */
.dark #gate-fill { fill: #17150f; }
.dark #gate-draw path { stroke: rgba(184, 149, 106, 0.5); }
.dark .splash-ink-img,
.dark .splash-ink-img[style] { filter: brightness(0) invert(0.92); }
.dark .splash-en { color: #f4f0e8; }
.dark .splash-kanji-bg { color: rgba(184, 149, 106, 0.045); }
.dark .splash-skip { color: rgba(244, 240, 232, 0.5); }
.dark .splash-tagline { color: rgba(244, 240, 232, 0.72); }

.dark .splash-ink-img { animation-name: splashInkDrawDark; }
@keyframes splashInkDrawDark {
  0%    { --sweep: 0deg; opacity: 0; filter: brightness(0) invert(0.92) blur(2.5px); }
  6%    { opacity: 1; }
  90%   { filter: brightness(0) invert(0.92) blur(0px); }
  100%  { --sweep: 360deg; opacity: 1; filter: brightness(0) invert(0.92) blur(0px); -webkit-mask-image: none; mask-image: none; }
}

/* ─── THE SPLASH ON A SMALL SCREEN ──────────────────────────
   This gate has a wide lintel and a comparatively narrow opening, so on a
   phone a torii large enough to hold the wordmark at full size would run
   right off both edges and stop reading as a gate. The wordmark comes down
   instead, which lets the whole gate fit on the screen around it. */
@media (max-width: 560px) {
  .splash-ink-mark { width: 74px; height: 74px; }
  .splash-logo { gap: 0.85rem; margin-bottom: 1.1rem; }
  .splash-en { font-size: 1.55rem; }
  .splash-sub { font-size: 0.6rem; letter-spacing: 0.22em; }
  .splash-tagline { font-size: 0.82rem; letter-spacing: 0.1em; min-height: 2em; }
}

/* ─── SCROLL LOCK WITHOUT A JUMP ────────────────────────────
   The splash locks scrolling while it plays. Removing the scrollbar
   changes the viewport width, which fires a resize in the middle of the
   sequence — the gate is measured from the viewport, so it would step
   sideways as the camera started moving. Reserving the gutter for good
   means locking and releasing changes nothing about the layout. */
html { scrollbar-gutter: stable; }

/* ─── SEIGAIHA ON THE FOOTER · DARK ONLY ─────────────────────────────
   The same 青海波 wave tile the interlude carries, on the footer, so the
   page opens and closes on the same texture. Byte for byte the same data
   URI — one pattern used twice, not two patterns that nearly match.

   Dark only, and deliberately so. On the light footer the tile sits on a
   near-white panel where the gold line has real contrast and reads as
   wallpaper; on the dark panel it stays a texture you notice only after
   the words. Kept at the interlude's own 0.055 stroke so the two bands
   are the same weight of quiet. */
.dark .site-footer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='none' stroke='%23B8956A' stroke-opacity='0.055' stroke-width='1'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='20' cy='20' r='12'/%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='0' cy='10' r='18'/%3E%3Ccircle cx='0' cy='10' r='12'/%3E%3Ccircle cx='0' cy='10' r='6'/%3E%3Ccircle cx='40' cy='10' r='18'/%3E%3Ccircle cx='40' cy='10' r='12'/%3E%3Ccircle cx='40' cy='10' r='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ─── ROOM CARDS · DARK MODE ─────────────────────────────────────────
   The card body text was inheriting --color-primary, which in dark mode
   is the sage green (#7eaa8a) — so a whole paragraph of description came
   up green. Body copy is body copy; it reads in the text colour. */
.dark .room-desc,
.dark .room-desc .ja { color: var(--color-text); }

/* The feature tags, filled rather than outlined: a quiet green panel with
   the sage on top of it, which is the pairing the palette already uses
   for .accent / .accent-foreground. Now that --radius-full resolves,
   these are the pills they were always written to be. */
.dark .room-feature {
  background: var(--color-primary-highlight);
  border-color: transparent;
  color: var(--color-primary);
}

/* View Room & Rates picks up the same muted gold as the interlude's
   eyebrow, so the two smallest voices on the page agree. */
.dark .room-cta { color: var(--gold2); }
.dark .room-card:hover .room-cta { color: #d3b183; }