/* Section: hero scene — the layered illustration on its own, held to one screen. */

/* ── Stage and planes ──
   Repeated from _section-home_hero.css on purpose: section stylesheets only
   load for the layouts a page actually uses, so this section has to carry its
   own copy of the stack or it renders unstyled without the home hero present. */
.hero-scene .home-hero__media--parallax {
    width: 100%;
    margin: 0;
}

.hero-scene .home-hero__stage {
    /* Measured ink box: the artwork carries dead space above the logo and below
       the grass, and trimming it here is what lets the scene fill the screen. */
    --hero-cut-top: 0.08;
    --hero-cut-bottom: 0.02;
    --hero-keep: 0.9; /* 1 - cut-top - cut-bottom */
    /* Travel of the fastest plane over one pass, in px. Every plane is drawn
       floating on the section background rather than flush to a frame edge, so
       the scene takes a long throw without exposing a seam. */
    --layer-range: 140;

    position: relative;
    width: 100%;
    /* Height-driven rather than ratio-driven: the box takes the screen it is
       given and object-fit lands the artwork inside it. */
    height: 100%;
    overflow: hidden;
}

.hero-scene .home-hero__layer {
    position: absolute;
    left: 0;
    right: 0;
    /* The box carries the whole canvas and hangs above the stage by the cut, so
       the stage frames the middle of it. */
    top: calc(-100% * var(--hero-cut-top) / var(--hero-keep));
    width: 100%;
    height: calc(100% / var(--hero-keep));
    display: block;
    object-fit: cover;
    object-position: center bottom;
    will-change: transform;
    transform:
        translate3d(
            calc(var(--layer-drift-x, 0) * var(--layer-depth, 0) * 1px),
            calc(
                (var(--layer-shift, 0) * var(--layer-depth, 0) * -1px) +
                (var(--layer-drift-y, 0) * var(--layer-depth, 0) * 1px) +
                /* Entrance offset, set per plane by main.js and already in the
                   distance that plane should travel — depth stays out of it. */
                (var(--layer-enter, 0) * 1px)
            ),
            0
        )
        scale(var(--layer-scale, 1));
}

.hero-scene .home-hero__layer--1 {
    z-index: 1;
}

.hero-scene .home-hero__layer--2 {
    z-index: 2;
}

.hero-scene .home-hero__layer--3 {
    z-index: 3;
}

.hero-scene .home-hero__layer--4 {
    z-index: 4;
}

/* ── Fit the screen ──
   The section is the viewport. When it opens the page the sticky header sits in
   the flow above it, so that height comes off the top; anywhere else it gets
   the whole screen. */
.hero-scene {
    --hero-scene-header: 0px;

    position: relative;
    display: flex;
    height: calc(100svh - var(--hero-scene-header));
    min-height: 320px;
    overflow: hidden;
}

.site-main > .section-bg:first-child .hero-scene {
    --hero-scene-header: 109px;
}

.hero-scene__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-scene__media {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Contained: the whole scene stays on screen and the section's background fills
   whatever the artwork's ratio leaves over. */
.hero-scene--contained .home-hero__layer {
    object-fit: contain;
}

/* A portrait screen is far taller than the artwork, so pinning to the bottom
   would leave the scene stranded under a block of empty background. */
@media (max-aspect-ratio: 1 / 1) {
    .hero-scene--contained .home-hero__layer {
        object-position: center center;
    }
}

/* ── Portrait screens ──
   The artwork is bound by width long before height here, so `contain` draws it
   far shorter than the screen it is given: 277px of scene inside 844px of
   section on a phone, 728px inside 1366px on a portrait tablet. Holding the
   section to the viewport only parks half a screen of empty background around
   it, so the stage goes back to the canvas ratio the home hero's own copy uses
   and the section takes whatever height that leaves. `contain` then fits the
   box exactly, which is what keeps the planes' travel and crop unchanged. */
@media (max-aspect-ratio: 1 / 1) {
    .hero-scene {
        height: auto;
        min-height: 0;
    }

    .hero-scene__inner,
    .hero-scene__media {
        height: auto;
    }

    .hero-scene .home-hero__stage {
        height: auto;
        aspect-ratio: var(--hero-canvas-w, 1489) / calc(var(--hero-canvas-h, 1080) * var(--hero-keep));
    }
}

@media (max-width: 900px) {
    .site-main > .section-bg:first-child .hero-scene {
        --hero-scene-header: 92px;
    }
}

@media (max-width: 640px) {
    /* Shorter travel keeps the scene from tearing apart on a small canvas. */
    .hero-scene .home-hero__stage {
        --layer-range: 80;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scene .home-hero__layer {
        transform: none;
        will-change: auto;
    }
}