/* Internals of the three-act hero (js/hero-cinematic.js).

   This file owns the video layers and the scrim, and nothing else — the hero's size, its copy,
   its buttons and its type are the page's business. Include it before landing.css so the page
   can override anything here.

   The stage is whatever element you hand to Hero.mount(); it needs to establish a stacking
   context and clip, both of which are set below. The module writes two attributes on it that
   everything here keys off:

       data-mode="cinematic|loop|still"    which of the three delivery paths this visit got
       data-beat="reveal|settled|looping"  how far through the sequence it is

   `data-beat="reveal"` is the one that matters: it lands the instant the intro dissolves into
   the settle shot, and it is the cue to dim the footage and bring the copy in. Hang the page's
   own reveal animations off `[data-beat] .whatever` and they stay in step with the film for
   free, on every path — including the degraded ones, where the beat fires immediately. */

.ld-hero-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background-color: #0d0b09;
    /* Own stacking context, so nothing in the hero's content ever has to out-index the video. */
    isolation: isolate;
}

.ld-hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The footage is a wide crane shot; biasing the crop upward keeps the square and the
       characters in frame when the viewport is tall and narrow. */
    object-position: 50% 42%;

    opacity: 0;
    /* The module writes --ld-dissolve per hand-off — 900 ms into the settle shot, 500 ms into
       the loop. Linear, because a cross-dissolve between two eased curves dips in the middle:
       both layers are part-transparent at once and the background shows through. */
    --ld-dissolve: 500ms;
    transition: opacity var(--ld-dissolve) linear;

    /* Two things at once during a dissolve, so keep both on their own layer. */
    will-change: opacity;
    pointer-events: none;
}

.ld-hero-layer.is-front {
    opacity: 1;
}

/* ── the dim ─────────────────────────────────────────────────────────────────────────────
   "Make the video less noticeable once the cinematic lands." A colour-matrix filter on the
   video element is cheap — brightness and saturate are per-pixel multiplies the compositor
   already does. A blur is not: it forces a full-resolution separable pass every frame at 60 fps.
   The softening below is done with a scrim instead, which costs one composited quad. */

.ld-hero-stage[data-mode="cinematic"] .ld-hero-layer {
    /* Slight overscale during the overture, easing back to rest as the copy arrives. Reads as
       the camera settling; costs nothing, since the layer is composited either way. */
    transform: scale(1.06);
    transition: opacity var(--ld-dissolve) linear, transform 2400ms cubic-bezier(0.16, 1, 0.3, 1),
                filter 1200ms ease;
}

.ld-hero-stage[data-beat] .ld-hero-layer {
    transform: scale(1);
    filter: saturate(0.74) brightness(0.62) contrast(1.04);
}

/* Paths that never play the overture start dimmed — there is no cinematic moment to protect,
   and the copy is on screen from the first frame. */
.ld-hero-stage[data-mode="loop"] .ld-hero-layer,
.ld-hero-stage[data-mode="still"] {
    filter: saturate(0.74) brightness(0.62) contrast(1.04);
}

/* The scrim. Two gradients: a vertical one that anchors the header and the copy, and a soft
   vignette that pulls the eye to the middle. Both start out of the way and ramp in on the beat,
   so the overture is seen clean. */
.ld-hero-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1100ms ease;
    background:
        radial-gradient(120% 85% at 50% 42%, transparent 38%, rgba(8, 6, 5, 0.55) 100%),
        linear-gradient(to bottom,
            rgba(8, 6, 5, 0.72) 0%,
            rgba(8, 6, 5, 0.28) 26%,
            rgba(8, 6, 5, 0.40) 62%,
            rgba(13, 11, 9, 0.94) 100%);
}

.ld-hero-stage[data-beat]::after,
.ld-hero-stage[data-mode="loop"]::after,
.ld-hero-stage[data-mode="still"]::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ld-hero-layer,
    .ld-hero-stage[data-mode="cinematic"] .ld-hero-layer,
    .ld-hero-stage::after {
        transition: none;
    }

    .ld-hero-stage[data-mode="cinematic"] .ld-hero-layer {
        transform: none;
    }
}