/* Homepage hero — 5 product-line cards over a dark rock photo; the hovered card widens and turns yellow.
   Tokens: css/design/tokens.css */

.lp-hero {
    --lp-header-h: 110px;                       /* synced to the real header height by hero-v2.php */
    --lp-media-h: clamp(180px, 30vh, 340px);
    --lp-ease: cubic-bezier(0.33, 1, 0.68, 1);  /* ease-out cubic: soft, no snap at the start */
    --lp-ease-width: cubic-bezier(0.45, 0, 0.25, 1); /* gentle in-and-out for the card widening */
    --lp-dur: 800ms;
    position: relative;
    padding: var(--lp-header-h) 0 0;            /* overrides the generic `section` padding in screen.css */
    overflow-x: clip;                           /* the enlarged edge cards must not create a sideways scroll */
    background:
        linear-gradient(to bottom, rgba(10, 10, 11, 0.7) 0, rgba(10, 10, 11, 0.74) 260px, rgba(10, 10, 11, 0.7) 45%, rgba(10, 10, 11, 0.92) 72%, var(--color-graphite-void) 90%),
        image-set(url('../../img/hero/hero-rocks-1440.webp') type('image/webp'), url('../../img/hero/hero-rocks-1440.jpg') type('image/jpeg')) center / cover no-repeat,
        var(--color-graphite-void);
    font-family: var(--font-geist-sans);
    color: var(--color-parchment-cream);
    -webkit-font-smoothing: antialiased;
}

.lp-hero__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    min-height: calc(100vh - var(--lp-header-h));
    min-height: calc(100svh - var(--lp-header-h));
    border-top: 1px solid var(--color-hairline);
}

/* phones get a 1100px version, large and high-density screens the 2560px one (source: img/locobg2.png).
   Keep these media queries in sync with the preload links in template-parts/header.php. */
@media (max-width: 600px) {
    .lp-hero {
        background:
            linear-gradient(to bottom, rgba(10, 10, 11, 0.7) 0, rgba(10, 10, 11, 0.74) 260px, rgba(10, 10, 11, 0.7) 45%, rgba(10, 10, 11, 0.92) 72%, var(--color-graphite-void) 90%),
            image-set(url('../../img/hero/hero-rocks-1100.webp') type('image/webp'), url('../../img/hero/hero-rocks-1100.jpg') type('image/jpeg')) center / cover no-repeat,
            var(--color-graphite-void);
    }
}

@media (min-width: 1441px), (min-width: 601px) and (min-resolution: 1.5dppx) {
    .lp-hero {
        background:
            linear-gradient(to bottom, rgba(10, 10, 11, 0.7) 0, rgba(10, 10, 11, 0.74) 260px, rgba(10, 10, 11, 0.7) 45%, rgba(10, 10, 11, 0.92) 72%, var(--color-graphite-void) 90%),
            image-set(url('../../img/hero/hero-rocks-2560.webp') type('image/webp'), url('../../img/hero/hero-rocks-2560.jpg') type('image/jpeg')) center / cover no-repeat,
            var(--color-graphite-void);
    }
}

/* ---------------------------------------------------------------- card */
.lp-hero__col {
    position: relative;
    isolation: isolate;
    container-type: inline-size;                /* title size follows the card width (cqi) */
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;                /* title / text / button / image rows shared by all cards */
    row-gap: 0;
    justify-items: center;
    padding: var(--spacing-64) var(--spacing-20) var(--spacing-120); /* images sit well above the card edge */
    text-align: center;
    cursor: pointer;
    z-index: 1;
    transform-origin: 50% 0;                    /* grows down and sideways, never up into the navigation */
    transition:
        transform var(--lp-dur) var(--lp-ease),
        box-shadow var(--lp-dur) var(--lp-ease),
        z-index var(--lp-dur) linear,           /* a card that is being left steps down from 10 → 1 while it shrinks,
                                                   so it is always under the newly active card (10) */
        color 300ms linear;                     /* the drawing (currentColor) and texts fade between cream and graphite */
}

.lp-hero__col + .lp-hero__col {
    border-left: 1px solid var(--color-hairline);
}

/* active card background (cross-faded in) */
.lp-hero__col::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-signal-yellow);     /* solid yellow active card, black type */
    opacity: 0;
    transition: opacity 280ms linear;           /* leaving: quick fade-out, no muddy half-yellow band */
}

/* ---------------------------------------------------------------- content */
.lp-hero .lp-hero__title {
    align-self: end;
    margin: 0 0 var(--spacing-16);
    color: inherit;
    font-family: var(--font-geist-sans);
    font-size: clamp(20px, 10.5cqi, 56px);   /* capitals (client): 10.5cqi = largest size at which the longest line (SK, in caps) still fits */
    font-weight: var(--font-weight-medium);
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    transition: color var(--duration-color-fast) linear, opacity var(--lp-dur) var(--lp-ease), filter var(--lp-dur) var(--lp-ease);
}

.lp-hero__line {
    display: block;
    white-space: nowrap;
}

.lp-hero__sub {
    max-width: 30ch;
    margin: 0 0 var(--spacing-24);
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body-sm);
    transition: color var(--duration-color-fast) linear, opacity var(--lp-dur) var(--lp-ease), filter var(--lp-dur) var(--lp-ease);
}

.lp-hero__btn {
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    min-height: 40px;
    padding: var(--spacing-8) var(--spacing-16);
    position: relative;
    z-index: 3;                                 /* above the card's click area */
    border-radius: var(--radius-default);
    /* light CTA like every other CTA on the site; on hover a pure-white fill sweeps in from the left */
    background:
        linear-gradient(#fff, #fff) left center / 0% 100% no-repeat,
        var(--color-parchment-cream);
    color: var(--color-graphite-void);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    opacity: 0;                                 /* revealed on card hover / focus only */
    transform: translateY(12px);
    transition:
        opacity calc(var(--lp-dur) * 0.6) var(--lp-ease),
        transform var(--lp-dur) var(--lp-ease),
        background-size 420ms var(--lp-ease),
        color 260ms linear;
}

.lp-hero__btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-ui-default) ease;
}

/* button hover / keyboard focus: white sweeps in, the arrow travels further */
.lp-hero .lp-hero__btn:hover,
.lp-hero .lp-hero__btn:focus-visible {
    background-size: 100% 100%, auto;
}

.lp-hero .lp-hero__btn:hover svg,
.lp-hero .lp-hero__btn:focus-visible svg {
    transform: translateX(6px);
}

.lp-hero .lp-hero__col .lp-hero__btn:active {
    transform: translateY(1px);
}

.lp-hero__btn:focus-visible {
    outline: 2px solid var(--color-graphite-void);
    outline-offset: 3px;
}

/* every image sits in the same box, anchored to its bottom edge → one common baseline */
.lp-hero__media {
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    position: relative;
    height: var(--lp-media-h);
    margin-top: var(--spacing-48);
    transition: opacity var(--lp-dur) var(--lp-ease), filter var(--lp-dur) var(--lp-ease);
    /* every machine gets the same visual SIZE (area), not just the same height: --k = sqrt(1.6 / aspect ratio),
       so the long crusher is a little lower and the short ore car a little taller.  --img-base follows the card
       width (cqi), so the active, widened card shows a larger machine — which may stick out of the card. */
    --img-base: min(56cqi, calc(var(--lp-media-h) * 0.85));
    --k: 1;
    --img-h: calc(var(--img-base) * var(--k));
    --ar: 1.6;                                  /* aspect ratio of the image, used for the shadow width */
}

/* the renders' baked shadows were cut at the file edge, so they were removed (img/v2/hero-*-clean.png);
   every machine gets the same soft ground shadow instead */
.lp-hero__media::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    z-index: -1;
    width: calc(var(--img-h) * var(--ar) * 0.9);
    height: 22px;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    transform: translateX(-50%);
    transition: transform calc(var(--lp-dur) * 1.2) var(--lp-ease), opacity var(--lp-dur) var(--lp-ease);
}

/* aspect ratios of the trimmed renders (img/v2/hero-*-clean.png) */
.lp-hero__media--tunnel-shunting    { --ar: 1.74; --k: 0.82; }   /* the three rail machines a notch smaller (client) */
.lp-hero__media--mining-locomotives { --ar: 1.56; --k: 0.86; }
.lp-hero__media--rolling-stock      { --ar: 1.40; --k: 0.90; }
.lp-hero__media--crushing-screening { --ar: 2.32; --k: 0.70; }   /* capped below √: at rest the long crusher must stay
                                                                    inside its card (≈ 91 % of the card's content width) */
.lp-hero__media--smart-circular { --k: 1.1; }   /* the 3D drawing leaves air at the top of its viewBox */
.lp-hero__media--smart-circular::after { display: none; }

.lp-hero__media img,
.lp-hero__fig {
    transform-origin: 50% 100%;
    transition: transform calc(var(--lp-dur) * 1.2) var(--lp-ease), filter var(--lp-dur) var(--lp-ease);
}

.lp-hero__media img {
    display: block;
    width: auto;
    height: var(--img-h);
    max-width: none;
}

/* Smart & Circular figure (img/v2/smart-hero.svg, inlined): its colours follow the card state */
.lp-hero__fig svg {
    display: block;
    width: auto;
    height: var(--img-h);                       /* same height as the machines */
}

.lp-hero__fig .smart-fig {
    color: inherit;                             /* cream at rest, graphite on the active card */
    transition: color 300ms linear;
}

.lp-hero__fig .sf-dot,
.lp-hero__fig .sf-value {
    transition: fill 300ms linear;
}

.lp-hero__fig .sf-accent {
    transition: stroke 300ms linear;
}

.lp-hero__grid:not(:hover) .lp-hero__fig .sf-dot,
.lp-hero__grid:not(:hover) .lp-hero__fig .sf-value,
.lp-hero__grid:not(:hover) .lp-hero__fig .sf-accent {
    transition-duration: 650ms;
}

/* 3D drawing (img/v2/smart-iso.svg): faces are solid in the dark hero ground at rest and turn yellow on the
   yellow active card, so the machine reads as a graphite line drawing there */
.lp-hero__fig .sf-solid {
    fill: rgba(10, 10, 11, 0.82);
    transition: fill 300ms linear;
}

.lp-hero__fig .sf-solid.sf-top   { fill: rgba(22, 22, 24, 0.88); }
.lp-hero__fig .sf-solid.sf-glass { fill: rgba(30, 30, 34, 0.9); }

.lp-hero__col:hover .lp-hero__fig .sf-solid,
.lp-hero__col:focus-within .lp-hero__fig .sf-solid {
    fill: var(--color-signal-yellow);
}

.lp-hero__col:hover .lp-hero__fig .sf-solid.sf-glass,
.lp-hero__col:focus-within .lp-hero__fig .sf-solid.sf-glass {
    fill: #e6c616;                              /* windows a shade darker than the body */
}

.lp-hero__fig .sf-grid-iso {
    opacity: 0.18;
}

/* graphite drawing on the yellow active card */
.lp-hero__col:hover .lp-hero__fig,
.lp-hero__col:focus-within .lp-hero__fig {
    color: var(--color-graphite-void);
}

.lp-hero__col:hover .lp-hero__fig .sf-dot,
.lp-hero__col:focus-within .lp-hero__fig .sf-dot,
.lp-hero__col:hover .lp-hero__fig .sf-value,
.lp-hero__col:focus-within .lp-hero__fig .sf-value {
    fill: var(--color-graphite-void);
}

.lp-hero__col:hover .lp-hero__fig .sf-accent,
.lp-hero__col:focus-within .lp-hero__fig .sf-accent {
    stroke: var(--color-graphite-void);
}

/* ---------------------------------------------------------------- active card (hover / keyboard focus) */
.lp-hero__col:hover,
.lp-hero__col:focus-within {
    z-index: 10;
    transition-duration: var(--lp-dur), var(--lp-dur), 0s, 300ms; /* jump on top immediately */
    color: var(--color-graphite-void);
    transform: scale(1.07);
}

.lp-hero__col:hover::before,
.lp-hero__col:focus-within::before {
    opacity: 1;
    transition-duration: 160ms;                 /* entering: the yellow is opaque almost at once, so no overlap shows through */
}

.lp-hero__col:hover .lp-hero__sub,
.lp-hero__col:focus-within .lp-hero__sub {
    color: rgba(10, 10, 11, 0.75);
}

.lp-hero__col:hover .lp-hero__btn,
.lp-hero__col:focus-within .lp-hero__btn {
    opacity: 1;
    transform: none;
    transition-delay: 80ms, 80ms, 0s, 0s;
}

.lp-hero__col:hover .lp-hero__btn svg,
.lp-hero__col:focus-within .lp-hero__btn svg {
    transform: translateX(3px);
}

.lp-hero__col:hover .lp-hero__media img,
.lp-hero__col:focus-within .lp-hero__media img {
    transform: translateY(-28px) scale(1.12);   /* the widening card already makes the machine 1.6× larger */
}

/* no shadows on the active card: neither under the machine nor around the card (client) */
.lp-hero__col:hover .lp-hero__media::after,
.lp-hero__col:focus-within .lp-hero__media::after {
    opacity: 0;
}

/* the figure already spans the card width, so it grows less */
.lp-hero__col:hover .lp-hero__fig,
.lp-hero__col:focus-within .lp-hero__fig {
    transform: translateY(-16px);
}

/* edge cards: the enlarged image grows inwards instead of off the screen */
.lp-hero__col:first-child .lp-hero__media img {
    transform-origin: 0 100%;
}

.lp-hero__col:last-child .lp-hero__media img,
.lp-hero__col:last-child .lp-hero__fig {
    transform-origin: 100% 100%;
}

/* desktop: the active card widens (1fr → 1.6fr), the others give way; titles keep one fixed size */
@media (hover: hover) and (min-width: 1191px) {
    .lp-hero__grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* same notation as the hover states below — the browser can
                                                      only animate between track lists written the same way */
        transition: grid-template-columns var(--lp-dur) var(--lp-ease-width);
    }

    /* card dividers fade out towards the bottom, like the photo, instead of stopping hard at the hero's edge */
    .lp-hero__col + .lp-hero__col {
        border-left-color: transparent;
    }

    .lp-hero__col + .lp-hero__col::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1px;
        width: 1px;
        z-index: -2;
        background: linear-gradient(to bottom, var(--color-hairline) 0, var(--color-hairline) 45%, rgba(246, 243, 236, 0) 85%);
        pointer-events: none;
    }

    /* fixed title size = the size of an inactive (narrow) card, so text never resizes while the columns move */
    .lp-hero .lp-hero__title {
        font-size: clamp(20px, calc((100vw / 5.6 - 2 * var(--spacing-20)) * 0.105), 56px);
    }

    .lp-hero__grid:has(> .lp-hero__col:nth-child(1):hover) { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
    .lp-hero__grid:has(> .lp-hero__col:nth-child(2):hover) { grid-template-columns: 1fr 1.6fr 1fr 1fr 1fr; }
    .lp-hero__grid:has(> .lp-hero__col:nth-child(3):hover) { grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr; }
    .lp-hero__grid:has(> .lp-hero__col:nth-child(4):hover) { grid-template-columns: 1fr 1fr 1fr 1.6fr 1fr; }
    .lp-hero__grid:has(> .lp-hero__col:nth-child(5):hover) { grid-template-columns: 1fr 1fr 1fr 1fr 1.6fr; }

    /* width now carries the emphasis: no scale, the card keeps its place under the navigation */
    .lp-hero__col:hover,
    .lp-hero__col:focus-within {
        transform: none;
    }

    /* the text block keeps the width of a narrow card, so it never re-wraps while the columns move */
    .lp-hero__sub {
        width: calc(100vw / 5.6 - 2 * var(--spacing-20));
        max-width: none;
    }

    /* leaving the cards altogether (not moving to another card): everything returns slowly, no blink.
       Card-to-card switching keeps the quick 280ms yellow fade-out, so no half-yellow band appears. */
    .lp-hero__grid:not(:hover) .lp-hero__col::before {
        transition: opacity 900ms var(--lp-ease-width);
    }

    .lp-hero__grid:not(:hover) .lp-hero__col {
        transition-duration: var(--lp-dur), var(--lp-dur), var(--lp-dur), 650ms;
    }

    .lp-hero__grid:not(:hover) .lp-hero__title,
    .lp-hero__grid:not(:hover) .lp-hero__sub {
        transition-duration: 650ms, var(--lp-dur), var(--lp-dur);
    }

    .lp-hero__grid:not(:hover) .lp-hero__btn {
        transition-duration: 450ms, var(--lp-dur), 420ms, 260ms;
    }

    /* the other cards step back while one is active */
    .lp-hero__grid:hover .lp-hero__col:not(:hover) > :not(.lp-hero__btn) {
        opacity: 0.4;
        filter: saturate(0.5);
    }
}

/* ---------------------------------------------------------------- touch screens: no hover, so the button is always there */
@media (hover: none) {
    .lp-hero__btn {
        opacity: 1;
        transform: none;
        background: var(--color-parchment-cream);
        color: var(--color-graphite-void);
    }
}

/* ---------------------------------------------------------------- tablet: 2 per row, LocoTwin full width */
@media (max-width: 1190px) {
    .lp-hero {
        --lp-media-h: 220px;
    }

    .lp-hero__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: auto;
        min-height: 0;
    }

    .lp-hero__col {
        padding: var(--spacing-48) var(--spacing-24) var(--spacing-32);
        border-bottom: 1px solid var(--color-hairline);
    }

    .lp-hero__col + .lp-hero__col {
        border-left: 0;
    }

    .lp-hero__col:nth-child(even) {
        border-left: 1px solid var(--color-hairline);
    }

    .lp-hero__col:last-child {
        grid-column: 1 / -1;
    }

    .lp-hero .lp-hero__col:last-child .lp-hero__title {
        font-size: clamp(22px, 5.6cqi, 64px);   /* full-width card: same size as the half-width neighbours */
    }

    .lp-hero__col:hover,
    .lp-hero__col:focus-within {
        transform: scale(1.03);
    }
}

/* ---------------------------------------------------------------- phone: all five product lines on the first screen
   A grid of tiles, 2 per row (Smart full width): the render on top, the title below (client chose this over a
   list, 2026-11-12; the earlier horizontal strip hid four of the five lines). The "see more" button is hidden:
   the whole tile is the link (script in hero-v2.php). */
@media (max-width: 600px) {
    .lp-hero .lp-hero__btn,
    .lp-hero__sub {
        display: none;
    }

    .lp-hero__col:hover,
    .lp-hero__col:focus-within {
        transform: none;
    }

    .lp-hero__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-hero__col {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-20) var(--spacing-12) var(--spacing-24);
        border-left: 0;
        border-bottom: 1px solid var(--color-hairline);
    }

    .lp-hero__col:nth-child(even) {
        border-left: 1px solid var(--color-hairline);
    }

    .lp-hero__col:last-child {
        grid-column: 1 / -1;
    }

    .lp-hero__media {
        order: -1;
        height: 112px;
        margin: 0 0 var(--spacing-16);
        --img-base: 96px;
    }

    .lp-hero .lp-hero__title,
    .lp-hero .lp-hero__col:last-child .lp-hero__title {
        width: 100%;
        margin: 0;
        font-size: clamp(13px, 4vw, 15px);      /* "KOĽAJOVÉ VOZIDLÁ" fits a 320px phone's half tile */
        line-height: 1.15;
        letter-spacing: 0.01em;
        text-align: center;
    }

    .lp-hero__line {
        display: block;
    }
}

/* touch screens: a tap must not leave the tile yellow (a touch "hover" sticks until the next tap elsewhere).
   The tile flashes yellow only while the finger is down (:active), then goes back to rest. */
@media (hover: none) {
    .lp-hero__col:hover::before,
    .lp-hero__col:focus-within::before {
        opacity: 0;
    }

    .lp-hero__col:hover,
    .lp-hero__col:focus-within,
    .lp-hero__col:hover .lp-hero__fig,
    .lp-hero__col:focus-within .lp-hero__fig {
        color: var(--color-parchment-cream);
    }

    .lp-hero__col:hover .lp-hero__sub,
    .lp-hero__col:focus-within .lp-hero__sub {
        color: var(--color-text-medium);
    }

    /* the Smart drawing keeps its rest colours (solid dark faces, yellow values) */
    .lp-hero__col:hover .lp-hero__fig .sf-solid,
    .lp-hero__col:focus-within .lp-hero__fig .sf-solid {
        fill: rgba(10, 10, 11, 0.82);
    }

    .lp-hero__col:hover .lp-hero__fig .sf-solid.sf-top,
    .lp-hero__col:focus-within .lp-hero__fig .sf-solid.sf-top {
        fill: rgba(22, 22, 24, 0.88);
    }

    .lp-hero__col:hover .lp-hero__fig .sf-solid.sf-glass,
    .lp-hero__col:focus-within .lp-hero__fig .sf-solid.sf-glass {
        fill: rgba(30, 30, 34, 0.9);
    }

    .lp-hero__col:hover .lp-hero__fig .sf-dot,
    .lp-hero__col:focus-within .lp-hero__fig .sf-dot,
    .lp-hero__col:hover .lp-hero__fig .sf-value,
    .lp-hero__col:focus-within .lp-hero__fig .sf-value {
        fill: var(--color-signal-yellow);
    }

    .lp-hero__col:hover .lp-hero__fig .sf-accent,
    .lp-hero__col:focus-within .lp-hero__fig .sf-accent {
        stroke: var(--color-signal-yellow);
    }

    .lp-hero__col:hover .lp-hero__media::after,
    .lp-hero__col:focus-within .lp-hero__media::after {
        opacity: 1;
    }

    .lp-hero__col:hover .lp-hero__media img,
    .lp-hero__col:focus-within .lp-hero__media img,
    .lp-hero__col:hover .lp-hero__fig,
    .lp-hero__col:focus-within .lp-hero__fig {
        transform: none;
    }

    .lp-hero__col:active::before {
        opacity: 0.18;
        transition-duration: 0ms;
    }
}

/* ---------------------------------------------------------------- page-load entrance
   starts on first render (footer.php adds .lp-ready to <html>): cards come in left → right,
   texts rise first, machines follow from below. `backwards` = the hover transitions take over afterwards.
   Movement only, no fade from opacity 0: hidden content counts as not painted, so a fade-in held back the
   Largest Contentful Paint by ~2 s in PageSpeed Insights. */
@keyframes lp-hero-rise {
    from {
        transform: translateY(28px);
    }
}

@keyframes lp-hero-machine {
    from {
        transform: translateY(64px);
    }
}

.lp-hero__col:nth-child(1) { --n: 0; }
.lp-hero__col:nth-child(2) { --n: 1; }
.lp-hero__col:nth-child(3) { --n: 2; }
.lp-hero__col:nth-child(4) { --n: 3; }
.lp-hero__col:nth-child(5) { --n: 4; }

.lp-ready .lp-hero__title,
.lp-ready .lp-hero__sub {
    animation: lp-hero-rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(150ms + var(--n) * 90ms);
}

.lp-ready .lp-hero__sub {
    animation-delay: calc(250ms + var(--n) * 90ms);
}

.lp-ready .lp-hero__media {
    animation: lp-hero-machine 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(450ms + var(--n) * 110ms);
}

/* keep the card-widening transition in this list: a bare `transition: border-top-color …` here used to replace
   the `grid-template-columns` transition of the desktop block, so the cards snapped instead of easing */
.lp-hero__grid {
    border-top-color: transparent;
    transition: border-top-color 900ms ease 200ms, grid-template-columns var(--lp-dur) var(--lp-ease-width);
}

.lp-ready .lp-hero__grid {
    border-top-color: var(--color-hairline);
}

@media (prefers-reduced-motion: reduce) {
    .lp-ready .lp-hero__title,
    .lp-ready .lp-hero__sub,
    .lp-ready .lp-hero__media {
        animation: none;
    }

    .lp-hero__col,
    .lp-hero__col::before,
    .lp-hero__btn,
    .lp-hero__media img,
    .lp-hero__fig {
        transition: none;
    }

    .lp-hero__col:hover,
    .lp-hero__col:focus-within,
    .lp-hero__grid:hover .lp-hero__col:not(:hover) {
        transform: none;
    }
}