/* ==========================================================================
   ABADAA — home page hero only.

   The full-bleed VGPU "FFT ocean surface" WebGPU animation replaces the
   photographic hero on index.html. Everything here is scoped to `body.home`
   so the interior pages (which share .nav / .band-hero / site.css) are
   completely unaffected.

   Palette is unchanged: cream #F4F1EA, forest #1B3A2F, gold #B8912F.
   Nav presentation: plain white text links — no pills, borders, backgrounds
   or button chrome.
   ========================================================================== */

.home {
  --nav-h: clamp(66px, 8.6vh, 86px);
  --sea-ink: #07141c;
}

/* ---------------------------------------------------------------- 01 nav */
.home .nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .4s ease, border-color .4s ease;
}
.home .nav__inner { min-height: var(--nav-h); }

/* Plain white text links: the default link chrome is stripped, the
   scaleX underline is kept (typographic, not button chrome). */
.home .brand__name { color: #fff; }
.home .brand__sub { color: var(--gold-bright); }
.home .nav__list > li { border-top-color: rgba(255, 255, 255, .18); }
.home .nav__links a { color: #fff; }
.home .nav__links a:hover { color: #fff; }
.home .nav__links a::after { background: var(--gold-bright); }
.home .nav__sub-toggle { color: #fff; }
.home .nav__toggle { border-color: rgba(255, 255, 255, .42); color: #fff; }
.home .nav__toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }

/* Once the hero has scrolled past, the bar takes the forest ground back so
   white type never lands on cream. */
.home .nav.is-scrolled {
  background: rgba(20, 41, 31, .93);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, .3);
}

.home #services,
.home #book { scroll-margin-top: calc(var(--nav-h) + 8px); }

/* --------------------------------------------------------------- 02 hero */
.home .band-hero {
  position: relative;
  display: block;
  min-height: 100svh;
  margin-top: calc(-1 * var(--nav-h));
  background: var(--sea-ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}

/* The stage is the full-bleed animation: photograph underneath (always
   present), canvas revealed only once the GPU has presented a frame. */
.home .band-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sea-ink);
}
.home .band-hero__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
}
/* The universal ocean layer. The exact same FFT sea, pre-rendered at the same
   settings to a silent 10s loop, so every device sees the water — WebGPU is
   then only an upgrade painted on top. Sits above the photograph (DOM order +
   z-index) and below the canvas and the scrim. */
.home .band-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  opacity: 1;
  transition: opacity .9s ease;
  z-index: 1;
  /* must never swallow page scroll or taps aimed at the nav */
  pointer-events: none;
  background: transparent;
}
/* WebGPU said it was live but is painting nothing (device loss, driver failure):
   bring the clip back to the front instead of stranding the photograph. */
.home .band-hero__video--rescue { opacity: 1 !important; }
/* The clip cannot play at all (no codec, decode failure, data-saver): drop it
   so the photograph underneath is what shows. Never a black box. */
.home .band-hero__video--dead { display: none !important; }

.home .band-hero__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
  z-index: 2;
  /* must never swallow page scroll or taps aimed at the nav */
  pointer-events: none;
  touch-action: auto;
}
/* WebGPU has presented a frame: it takes over and we stop decoding video behind it. */
.home .ocean-stage--live .band-hero__canvas { opacity: 1; }
.home .ocean-stage--fallback .band-hero__canvas { opacity: 0; }
.home .ocean-stage--live .band-hero__video { opacity: 0; }
.home .ocean-stage--fallback .band-hero__video { opacity: 1; }

/* Legibility scrim: weight on the left under the copy, clear on the right so
   the water is the thing you look at. */
.home .band-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 20, 28, .58) 0%, rgba(7, 20, 28, .04) 24%),
    linear-gradient(90deg, rgba(7, 20, 28, .68) 0%, rgba(7, 20, 28, .34) 38%, rgba(7, 20, 28, .04) 66%, rgba(7, 20, 28, 0) 100%);
}

/* ------------------------------------------------------------ 03 content */
.home .band-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(18px, 5vh, 56px));
  padding-bottom: clamp(34px, 9vh, 96px);
}
.home .band-hero__copy-col {
  width: min(100%, 46rem);
  max-width: 52%;
  margin-right: auto;
}
.home .band-hero__eyebrow { color: var(--gold-bright); }
.home .band-hero__title {
  color: #FCFAF4;
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  margin: 14px 0 0;
}
.home .band-hero__copy {
  margin-top: 22px;
  padding-top: 18px;
  max-width: 42ch;
  border-top: 1px solid rgba(227, 211, 168, .34);
  color: rgba(244, 241, 234, .9);
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  line-height: 1.72;
}

/* Calls to action are plain white text links — no fill, no pill, no box. */
.home .band-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(22px, 3vw, 44px);
  margin-top: clamp(22px, 3.4vh, 38px);
}
.home .band-hero__links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 4px 0;
  color: #fff;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.home .band-hero__links a:hover,
.home .band-hero__links a:focus-visible {
  color: var(--gold-bright);
  text-decoration-color: var(--gold-bright);
}
.home .band-hero__links .ico { width: 16px; height: 16px; }

/* --------------------------------------------------------- 04 responsive */
@media (max-width: 899px) {
  /* The mobile nav opens as a translucent forest panel with the same plain
     white links — never a cream sheet over the water. */
  .home .nav__menu {
    background: rgba(12, 28, 22, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 0;
  }
  .home .nav__list > li { border-top-color: rgba(255, 255, 255, .14); }
  .home .nav__links a { color: #fff; padding: 16px 0; }
  .home .nav__sub a { color: rgba(255, 255, 255, .82); }

  .home .band-hero__inner {
    align-items: flex-end;
    padding-bottom: clamp(30px, 8vh, 64px);
  }
  .home .band-hero__copy-col { max-width: none; width: 100%; }
  .home .band-hero__scrim {
    background:
      linear-gradient(180deg, rgba(7, 20, 28, .6) 0%, rgba(7, 20, 28, .12) 26%, rgba(7, 20, 28, .52) 68%, rgba(7, 20, 28, .88) 100%);
  }
  .home .band-hero__copy { max-width: 40ch; }
}

@media (max-width: 420px) {
  .home .brand__mark { width: 28px; }
}

/* Motion: no cross-fades, and the canvas holds its single static frame
   (handled in JS by rendering one frame and stopping the loop). The video loop
   is stopped too — it holds its poster frame instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .home .band-hero__canvas { transition: none !important; }
  .home .band-hero__video { transition: none !important; }
}

@media print {
  .home .band-hero { min-height: 0; }
  .home .band-hero__stage { position: relative; aspect-ratio: 16 / 9; }
}