/* ──────────────────────────────────────────────────────────────────────
   Hero video background — looping MP4 behind the landing hero.
   Scoped under .landing-root so nothing leaks to other surfaces.

   Layout:
     .landing-root .l-hero          becomes the positioning + stacking
                                    context (relative + isolate)
       └── .l-hero-video            absolute layer behind the content
             ├── <video>            object-fit: cover, autoplay loop
             └── .l-hero-video-veil dark gradient overlay so the
                                    headline copy stays readable
       └── .l-hero-copy             bumped to z-index: 2 by the
       └── .l-hero-panel            `> :not(.l-hero-video)` rule

   The veil is two layers stacked:
     1. a full-frame radial gradient that darkens the centre slightly
     2. a left-side linear gradient that gives the copy column its
        own contrast region so white headline text on a bright video
        frame never fails WCAG AA
   ──────────────────────────────────────────────────────────────────── */

.landing-root .l-hero {
  position: relative;
  isolation: isolate;
  /* Min-height so a short hero (compact viewport) still gives the
     video room to breathe at native aspect, instead of clipping the
     subject down to a thin band. */
  min-height: min(680px, 88vh);
  overflow: hidden;
}

/* Bump every direct hero child above the video layer — copy + chart
   panel sit on top without needing inline z-index. */
.landing-root .l-hero > :not(.l-hero-video) {
  position: relative;
  z-index: 2;
}

.landing-root .l-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;            /* clicks pass through to the hero */
}

.landing-root .l-hero-video video {
  /* Fill the hero box no matter the aspect ratio — crops rather
     than letterboxes so the subject keeps its weight. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Slight saturate + brightness pull so the loop blends with the
     terminal-dark surface instead of glowing brighter than the
     foreground UI. */
  filter: saturate(115%) brightness(0.75);
  /* Hint the GPU upfront — saves a paint hop on first frame. */
  will-change: transform, opacity;
  /* Cross-fade in once the first frame is ready (see JS toggling
     .is-ready). Prevents a black flash before autoplay kicks in. */
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-root .l-hero-video.is-ready video {
  opacity: 1;
}

/* Dark veil — two stacked gradients in a single ::before so the
   video has exactly one extra paint layer above it. */
.landing-root .l-hero-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Left-side contrast wash for the copy column (EN: hero text
       sits in the left half). Fades to transparent past the centre
       so the right-side chart panel still sees the video clearly. */
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.55) 28%,
      rgba(0, 0, 0, 0.20) 55%,
      rgba(0, 0, 0, 0.10) 100%
    ),
    /* Vertical fade so the top + bottom edges meet the surrounding
       black surfaces (navbar, the bottom border-strip) cleanly. */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.10) 30%,
      rgba(0, 0, 0, 0.10) 70%,
      rgba(0, 0, 0, 0.65) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── Reduced motion ─────────────────────────────────────────────────
   Respect the OS preference: pause the video and freeze on the first
   frame. Users who explicitly disabled motion shouldn't see a loop
   playing in their peripheral vision. */
@media (prefers-reduced-motion: reduce) {
  .landing-root .l-hero-video video {
    animation-play-state: paused;
  }
}

/* ── Mobile ─────────────────────────────────────────────────────────
   On phones the right-side chart panel stacks below the copy. The
   left-side dark wash would land at the wrong place, so swap to a
   uniform vertical fade and tighten the min-height. */
@media (max-width: 720px) {
  .landing-root .l-hero {
    min-height: min(560px, 100vh);
  }
  .landing-root .l-hero-video::before {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.45) 60%,
        rgba(0, 0, 0, 0.78) 100%
      );
  }
  .landing-root .l-hero-video video {
    /* Slightly stronger crop on mobile so the subject keeps centre
       framing on a portrait viewport. */
    object-position: center center;
  }
}