/* ════════════════════════════════════════════════════════════════════
   OceanSuite v5 preview — pool-scrub hero + wordmark splash.
   Loaded after css/styles.css, so it uses that file's :root variables
   (--font-display, --font-mono, --accent, etc.) directly. Everything
   in this file is additive/new for v5 — nothing here overrides v4
   selectors other than the two hooks noted inline.
   ════════════════════════════════════════════════════════════════════ */

/* ── Pool-scrub hero (adapted from pool-hero-scroll-v1, restyled to
   the v4 palette/type system) ──────────────────────────────────────── */
#hero-track {
  position: relative;
  height: 545vh;
}
/* Desktop only: taller track = more physical scroll px behind the same
   fractional windows below, so each wheel notch moves the wordmark/lines
   write-in a smaller amount (finer steps) without touching the windows
   themselves (same travel distance, same scroll-range fractions). Mobile
   touch scrolling is continuous, not notched, so it doesn't need this. */
@media (min-width: 701px) {
  #hero-track { height: 680vh; }
}
#hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12,20,32,.5) 0%,
    rgba(12,20,32,.12) 30%,
    rgba(12,20,32,.28) 60%,
    rgba(12,20,32,.68) 100%
  );
  pointer-events: none;
}

/* Scroll-scrubbed "Six rooms..." / "The Arabian Sea..." pair: sits in
   normal flow at the top of #hero-ending (its small, white, bottom-left
   rest state) and is transform-scaled to appear centred and large while
   writing in — same technique as .hero__title below, so nothing ever
   reflows/wraps, it only scales. Colour is fixed white for its whole
   life (never switches to the ink/blue palette). */
.hero-lines {
  position: relative;
  z-index: 2;
  width: max-content;
  margin: 22px 0 0;
  will-change: transform;
}
.hero-lines__line {
  display: block;
  width: max-content;
  margin: 0;
  color: #fff;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.4;
  font-size: clamp(16px, 1.6vw, 19px);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hl-letter {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(18px);
  will-change: opacity, transform, filter;
}

/* ── Ending block: v4's hero__content, parked bottom-left, driven
   purely by scroll (engine.js). #hero-pin is switched to grid so the
   single flow child (#hero-ending) sits bottom-left, matching v4's
   .hero__stage { place-items: end start }. Absolutely-positioned
   siblings (canvas, scrim, hero-text-layer) all set inset:0 so this
   doesn't move them. The v4 load-time animations (.hline, hero__sub
   / hero__ctas fade-up) are neutralised here — JS sets opacity/
   transform inline every frame instead. ────────────────────────── */
#hero-pin { display: grid; place-items: end start; }

#hero-ending {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
/* .hero__title itself stays visible/static — its letters (.hl-letter,
   split at runtime) carry the write-in reveal, same as the two lines. */
#hero-ending .eyebrow {
  opacity: 0;
}
#hero-ending .hero__ctas {
  opacity: 1;
  animation: none;
}
/* Start booking / WhatsApp now fade in on their own separate windows
   (js/engine.js CTA_WINS), not the container together. */
#hero-ending .hero__ctas .btn { opacity: 0; }
.hero-ending-line { display: block; }

@media (max-width: 700px) {
  .hero-line { font-size: clamp(1.4rem, 6vw, 2.2rem); }
}

/* ── Wordmark splash ─────────────────────────────────────────────────
   Centred letter-by-letter reveal of "OceanSuite", then a FLIP
   (transform: translate + scale only, never font-size) lands it on
   the real .nav__brand. Driven by js/hero-splash.js. ─────────────────*/
#wordmark-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.wordmark-splash__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(5,10,14,.05), rgba(5,10,14,.15));
}

.wordmark-splash__mark-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wordmark-splash__mark {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 108px);
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
  will-change: transform, opacity;
}
.wordmark-splash__suite { opacity: .65; }

/* "Boutique Hotel" sits under the wordmark, wipes in with it, then fades
   out (still moving with it) early in the flight — see js/hero-splash.js.
   Centred under the wordmark with a modest letter-spacing between the
   two words, rather than justified to the wordmark's width. */
.wordmark-splash__sub {
  margin-top: 3px;
  display: flex;
  justify-content: center;
  gap: .5em;
  align-items: baseline;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(11px, 2.3vw, 27px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  will-change: transform, opacity;
}
.wordmark-splash__sub-word { display: inline-block; white-space: nowrap; }

.wm-letter {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(18px);
  animation: wm-letter-in .7s cubic-bezier(.22,.8,.24,1) forwards;
  animation-delay: calc(var(--d) * 55ms + .15s);
}
@keyframes wm-letter-in {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Hook on the real nav brand: stays invisible (but laid out, so the
   nav never shifts) until js/hero-splash.js reveals it on landing. */
.nav__brand[data-nav-brand] { visibility: hidden; }
.nav.is-ready .nav__brand[data-nav-brand] { visibility: visible; }

/* Nav links/actions fade in as the wordmark lands. */
.nav__links, .nav__actions {
  opacity: 0;
  transition: opacity .5s ease;
}
.nav.is-ready .nav__links, .nav.is-ready .nav__actions {
  opacity: 1;
}