/* Section: home hero. */

.home-hero {
    position: relative;
    min-height: 100vh;
    /* background-image set via inline style in hero.php */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1e1b4b; /* fallback while image loads */
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding-bottom shifts the flex centre upward to sit inside the
       white TV screen area, which occupies the upper ~64% of the image */
    padding: 0 1.5rem 25vh;
    overflow: hidden;
}

.home-hero__inner {
    position: relative;
    z-index: 1;
    /* on mobile: near full-width; on desktop: tracks 48% of viewport
       so content stays inside the white screen regardless of display size */
    width: calc(100vw - 3rem);
    max-width: 780px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 900px) {
    .home-hero__inner {
        width: 48vw;
        max-width: 780px;
        margin-top: 5rem;

    }
}

.home-hero__screen {
    text-align: center;
}

.home-hero__screen-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.25;
    letter-spacing: var(--ls-title3);
    color: var(--color-dark-purple);
    margin-bottom: 1.25rem;
}

.home-hero__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    max-width: 520px;
    margin-bottom: 2rem;
}

.home-hero__desc strong {
    color: var(--color-dark-purple);
    font-weight: var(--fw-bold);
}

.home-hero__actions {
    display: flex;
    justify-content: center;
}



.home-hero {
    display: block;
    min-height: 0;
    padding: 4rem 0 0;
    padding-bottom: 0;
    background: var(--color-light-purple);
    color: var(--color-dark-purple);
    text-align: center;
    overflow: hidden;
}

.home-hero__intro {
    width: min(763px, calc(100% - 3rem));
    margin: 0 auto 2.625rem;
}

/* Sized on the display tier so the page's h1 outranks every section h2 —
   same 5.3vw slope as .hero-simple__title, so both heroes scale in step. */
.home-hero__title {
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.3vw, var(--text-display));
    font-weight: var(--fw-bold);
    line-height: var(--lh-display);
    letter-spacing: 0;
    text-wrap: balance;
    margin: 0 0 1rem;
}

.home-hero__desc {
    color: #636779;
    font-family: var(--font-body);
    font-size: var(--text-copy);
    line-height: var(--lh-copy);
    letter-spacing: 0;
    max-width: none;
    margin: 0;
}

.home-hero__desc strong {
    color: #636779;
    font-weight: var(--fw-bold);
}

.home-hero__media {
    width: 100%;
    margin: 0;
}

.home-hero__image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 420px;
    object-fit: cover;
    object-position: center top;
}

@media (max-width: 640px) {
    .home-hero {
        padding-top: 3rem;

    }

    /* 5.3vw bottoms out below ~755px, so drive the phone range off vw
       directly to keep the headline at 2–3 lines instead of 4. */
    .home-hero__title {
        font-size: clamp(2rem, 8.5vw, 2.5rem);
    }

    .home-hero__image {
        min-height: 300px;

    }
}

.home-hero.is-grid-migrated > .home-hero__grid {
    align-items: start;
}

.home-hero.is-grid-migrated > .home-hero__grid > .home-hero__intro {
    grid-column: 3 / 11;
    width: auto;
}

.home-hero.is-grid-migrated > .home-hero__grid > .home-hero__media {
    grid-column: 1 / -1;
}

.home-hero.is-grid-migrated .home-hero__image {
    width: 100%;
}

@media (max-width: 1024px) {
    .home-hero.is-grid-migrated > .home-hero__grid > .home-hero__intro {
        grid-column: 1 / -1;

    }
}

.section-home-hero {
    overflow: hidden;
}

/* ── Parallax illustration ──
   Four transparent PNGs share one canvas, so the stage holds the aspect ratio
   and each plane sits absolutely on top of it. The stack renders correctly
   with no JS; main.js only feeds --layer-shift and --layer-drift. */
.home-hero__media--parallax {
    width: 100%;
    margin: 0;
}

.home-hero__stage {
    /* Measured ink box: the artwork carries ~11% dead space above the logo and
       ~7% below the grass. Showing 90% of the canvas height recovers most of
       it, and what stays is headroom for the planes to travel into. */
    --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%;
    aspect-ratio: var(--hero-canvas-w, 1489) / calc(var(--hero-canvas-h, 1080) * var(--hero-keep));
    /* The planes travel past the crop, so the overspill is clipped here. */
    overflow: hidden;
}

.home-hero__layer {
    position: absolute;
    /* Pulled out to the full canvas either side of the crop, which keeps the
       box at the artwork's own ratio so object-fit lands it exactly. */
    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. Height is stated rather than left
       to the bottom inset, which a replaced element ignores. */
    top: calc(-100% * var(--hero-cut-top) / var(--hero-keep));
    width: 100%;
    height: calc(100% / var(--hero-keep));
    display: block;
    object-fit: contain;
    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));
}

/* Every plane sits at 1:1 — the crop headroom above already covers the edges,
   and an odd scale here would shear this layer off the ones it touches. */
.home-hero__layer--1 {
    z-index: 1;
}

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

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

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

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

/* ── Fit the first screen ──
   The intro takes the height it needs and the illustration gets the rest, so
   headline and scene are both visible without scrolling. The header is sticky
   and sits in the flow, so its height comes off the top. */
.home-hero {
    --hero-header: 109px;

    display: flex;
    flex-direction: column;
    /* Definite, so the stage's percentage cap below has something to resolve
       against; fit-content keeps a very short screen from clipping the intro. */
    height: calc(100svh - var(--hero-header));
    min-height: fit-content;
    padding-top: clamp(1rem, 3.5vh, 2.5rem);
    padding-bottom: 0;
}

.home-hero > .home-hero__grid {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: clamp(0.75rem, 2.5vh, 1.75rem);
}

.home-hero > .home-hero__grid > .home-hero__intro {
    margin-bottom: 0;
}

/* Headline tracks the short axis too, so a laptop screen doesn't spend its
   height on three lines of display type. */
.home-hero__title {
    font-size: clamp(2rem, min(5.3vw, 7.5vh), var(--text-display));
}

.home-hero > .home-hero__grid > .home-hero__media--parallax {
    align-self: stretch;
    min-height: 0;
}

/* Capping the stage lets object-fit do the fitting: the box may end up wider
   than the artwork, and the layers centre inside it against the bottom edge. */
.home-hero__media--parallax .home-hero__stage {
    max-height: 100%;
}

@media (max-width: 900px) {
    .home-hero {
        --hero-header: 92px;
    }
}

/* With the illustration running below as its own section there is nothing left
   to fill a screen's height, so the intro takes only what it needs. */
.home-hero--no-media {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
}

/* On a portrait screen the illustration is bound by width long before height,
   so holding the section to the viewport would only park dead space under the
   grass. Let it size to its content — it clears the fold either way. */
@media (max-aspect-ratio: 1 / 1) {
    .home-hero {
        height: auto;
        min-height: 0;
        padding-bottom: clamp(1rem, 3vh, 2rem);
    }
}

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