/* The header. Layers are the video's whole frame; the header shows its bottom 90%, leaving room
   for parallax up to data-depth 0.11. Aspects come from header.json (header-video.js).
   No z-index here: order is in stacking.css. */
.hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #8ec3ee;
    aspect-ratio: var(--hero-aspect, 2.7778);
}

.hero-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    aspect-ratio: var(--frame-aspect, 2.5);
    will-change: transform;
}

.hero-layer > img,
.hero-layer > canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

.hero-layer > canvas {
    visibility: hidden;
}

.hero.is-live .hero-layer > canvas {
    visibility: visible;
}

.hero.is-live .hero-layer > img {
    visibility: hidden;
}

.hero-layer[data-layer="bg"] {
    z-index: var(--z-header-background);
}

.hero-layer[data-layer="fg1"] {
    z-index: var(--z-header-water);
}

.hero-layer[data-layer="fg2"] {
    z-index: var(--z-header-near-waves);
    opacity: 0.8;
}

/* Covers a hairline seam at the header's bottom edge while scrolling. */
.hero-seam {
    position: relative;
    z-index: var(--z-header-fade);
    height: 0;
}

.hero-seam::before {
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    height: 28px;
    background: linear-gradient(to bottom, rgba(82, 166, 233, 0), #52a6e9 70%);
    content: "";
    pointer-events: none;
}

.hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-header-fade);
    height: 10%;
    background: linear-gradient(to bottom, rgba(82, 166, 233, 0), #52a6e9);
    content: "";
    pointer-events: none;
}

/* Upright phones (layout.js): the frame zoomed in with its sides cropped, all of it shown (the
   page doesn't scroll, so no parallax room is needed), and extra sky above it. */
@media (orientation: portrait) and (max-width: 820px) {
    :root {
        --hero-zoom: 1.6;
        --hero-sky: 14vw;
        --hero-height: calc(100vw * var(--hero-zoom) / var(--frame-aspect, 2.5) + var(--hero-sky));
    }

    .hero {
        height: var(--hero-height);
        background: linear-gradient(to bottom, #6aa9ea, #88bef3 var(--hero-sky));
        aspect-ratio: auto;
    }

    .hero-layer {
        left: calc((1 - var(--hero-zoom)) * 50%);
        width: calc(var(--hero-zoom) * 100%);
    }

    /* The frame's top edge fades into the extra sky. */
    .hero-layer[data-layer="bg"] {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%);
        mask-image: linear-gradient(to bottom, transparent, #000 14%);
    }
}