/* ============================================================
   Homepage hero slider ("sunlit coastal scrapbook")
   Markup: app/pages/home.php (the <!-- Hero --> section). Behaviour: assets/js/hero.js.
   Overrides the legacy .hero rules in style.css.

   Layers inside .hero (one stacking context):
     0-1  slide photo, overlay and paper plane (.hero-slide__media; the active slide on top)
     2    ambient doodles: sun and gulls        (.hero__ambient)
     3    slide text, wave                      (.hero__content, .hero__wave)
     4    controls                              (.hero__controls)
   Without JS, slide 1 shows on its own and the controls stay hidden.
   Per-slide knobs (inline style on .hero-slide): --pos / --pos-sm (photo focal point),
   --kb-origin (Ken Burns drift), --fl-x / --fl-y (where the plane parks), --shade (overlay).
   ============================================================ */

.hero {
    --hero-navy: 18 42 76;                       /* rgb() triplet for the scrims */
    --hero-wave-h: clamp(46px, 7vw, 100px);
    --hero-controls-h: 48px;
    /* How far the homepage fact strip (home.css .fact-strip --fs-overlap) rises over the hero; keep in sync */
    --hero-lift: calc(var(--hero-wave-h) * .6 + clamp(26px, 3vw, 44px));
    --hero-spring: cubic-bezier(.34, 1.56, .64, 1);
    --hero-out: cubic-bezier(.22, 1, .36, 1);
    --hero-fade: 1s;

    position: relative;
    display: block;
    min-height: 0;
    margin-top: calc(-1 * var(--header-height));
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #1B3554;                         /* behind the photo until it paints */
    background-image: none;
    color: var(--color-white);
}

/* --- Slides --------------------------------------------------- */
.hero__slides {
    display: grid;
    min-height: clamp(680px, 86vh, 760px);
    padding: calc(var(--header-height) + .5rem) 0 calc(var(--hero-lift) + 1.25rem + var(--hero-controls-h) + 2.5rem);
}

.hero-slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    min-width: 0;
    visibility: hidden;
}
.hero-slide.is-active,
.hero-slide.is-leaving {
    visibility: visible;
}

.hero-slide__inner {
    min-width: 0;
}
/* The outgoing slide's words fade quickly while the next photo cross-fades in */
.hero-slide.is-leaving .hero-slide__inner {
    opacity: 0;
    transition: opacity .35s ease;
}

/* --- Photo + overlay ------------------------------------------ */
.hero-slide__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    background: #1B3554;
}
/* Slides 2+ stay display:none (so their lazy images are not fetched) until hero.js primes them */
.hero-slide:not(.is-active):not(.is-leaving):not(.is-primed) .hero-slide__media {
    display: none;
}
.hero-slide.is-active .hero-slide__media {
    z-index: 1;
    opacity: 1;
    transition: opacity var(--hero-fade) ease;
}
.hero-slide.is-leaving .hero-slide__media {
    opacity: 1;
}

.hero-slide__media picture,
.hero-slide__media img {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-slide__media img {
    position: absolute;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    transform: scale(1);
    transform-origin: var(--kb-origin, 50% 50%);
    /* Snap back to scale(1) only once the slide is fully hidden */
    transition: transform 0s linear calc(var(--hero-fade) + .2s);
}

/* Warm navy scrims: a dark pool behind the words, a top band so the white nav reads,
   a soft floor for the controls; the rest of the photo keeps its colour.
   Tablet/phone (centred text) first, desktop (left text) below. */
.hero-slide__media::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: var(--shade, 1);
    background:
        radial-gradient(ellipse 58% 44% at 50% 56%, rgb(var(--hero-navy) / .82) 0%, rgb(var(--hero-navy) / .58) 55%, rgb(var(--hero-navy) / 0) 100%),
        linear-gradient(180deg, rgb(var(--hero-navy) / .74) 0%, rgb(var(--hero-navy) / .3) 30%, rgb(var(--hero-navy) / .24) 70%, rgb(var(--hero-navy) / .6) 100%);
}

/* --- Text ----------------------------------------------------- */
.hero .hero__content {
    position: relative;
    z-index: 3;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.hero .hero__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3em;
    margin: 0 0 var(--space-md);
    padding: .12em .9em .1em;
    background: var(--color-red-btn, #D2341D);
    color: var(--color-white);
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transform: rotate(-3deg);
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55);
    animation: none;
}
/* Stitched-patch edge */
.hero .hero__badge::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1.5px dashed rgba(255, 255, 255, .55);
    border-radius: inherit;
    pointer-events: none;
}
.hero__badge-arrow {
    width: .62em;
    height: .62em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s var(--hero-out);
}
a.hero__badge {
    transition: transform .25s var(--hero-out), box-shadow .25s ease, background-color .2s ease;
}
a.hero__badge:hover {
    color: var(--color-white);
    background: var(--color-red-btn-hover, #B42C18);
    transform: rotate(-1.5deg) translateY(-2px);
    box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .6);
}
a.hero__badge:hover .hero__badge-arrow {
    transform: translateX(3px);
}
a.hero__badge:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 4px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin: 0 0 .35rem;
    color: var(--color-marigold-light, #FFD166);
    font-size: clamp(.9rem, .85rem + .25vw, 1.05rem);
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgb(12 30 58 / .8), 0 0 12px rgb(12 30 58 / .6);
}
/* Little hand-drawn dash before the eyebrow */
.hero__eyebrow::before {
    content: '';
    width: 1.9em;
    height: .5em;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10'%3E%3Cpath d='M2 6.2c6-3 11.5-3.4 17.6-1.2 5.6 2 10.6 1.6 16.4-1.8' fill='none' stroke='%23FFD166' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero .hero__title {
    margin: 0 0 var(--space-md);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(3rem, 1.5rem + 7.5vw, 7rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: .01em;
    text-wrap: balance;
    text-shadow: 0 0 2px rgb(12 30 58 / .85), 0 0 12px rgb(12 30 58 / .75), 0 4px 28px rgb(12 30 58 / .6);
}
.hero .hero__title--sub {
    font-size: clamp(3rem, 1.6rem + 5.2vw, 6.1rem);
    line-height: 1;
}

.hero__word {
    position: relative;
    display: inline-block;
}
.hero .hero__title .word-play { color: var(--color-marigold-light, #FFD166); }
.hero .hero__title .word-learn { color: var(--color-white); }
.hero .hero__title .word-grow { color: #FFAE9C; }        /* warm coral, AA-large on the scrim */
.hero .hero__title .hero__word--accent { color: var(--color-marigold-light, #FFD166); }

/* Hand-drawn underline under the accent word */
.hero__scribble {
    position: absolute;
    left: -3%;
    bottom: -.04em;
    width: 106%;
    height: .17em;
    overflow: visible;
    pointer-events: none;
}
.hero__scribble path {
    fill: none;
    stroke: var(--color-marigold, #FFAF1C);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.hero__word--accent .hero__scribble path {
    stroke: #FF9A85;
}

/* Small doodle tucked after the last word (sparkle, stars, heart, arrow) */
.hero__flourish {
    position: absolute;
    left: 100%;
    top: -.06em;
    width: .34em;
    height: .34em;
    margin-left: .06em;
    pointer-events: none;
}
.hero__flourish svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.hero__flourish .fill { fill: var(--color-marigold-light, #FFD166); }
.hero__flourish .line {
    fill: none;
    stroke: var(--color-marigold-light, #FFD166);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero__flourish--stars { width: .44em; top: -.12em; }
.hero__flourish--heart { top: .02em; }
.hero__flourish--heart .line { stroke: #FFAE9C; fill: rgb(255 174 156 / .28); }
.hero__flourish--arrow { width: .4em; height: .4em; top: -.14em; margin-left: .02em; }

.hero .hero__text {
    max-width: 36em;
    margin: 0 auto var(--space-xl);
    color: var(--color-white);
    font-size: clamp(1.05rem, .96rem + .38vw, 1.28rem);
    line-height: 1.6;
    text-wrap: pretty;
    text-shadow: 0 1px 2px rgb(12 30 58 / .7), 0 0 16px rgb(12 30 58 / .55);
}

.hero__nowrap {
    white-space: nowrap;
}

.hero .hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
}
.hero .btn--lg {
    padding: .9em 2em;
    font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
}
/* Outline button: a light navy glass so it stays legible on any photo */
.hero .btn--outline {
    background: rgb(var(--hero-navy) / .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero .btn--outline:hover {
    background: var(--color-white);
}
.hero .btn--light {
    color: var(--color-ocean-dark, #2D5A8A);
}
.hero .btn--light::after {
    content: '\2192';
    content: '\2192' / '';                       /* decorative: keep it out of the link name */
    transition: transform .2s var(--hero-out);
}
.hero .btn--light:hover {
    color: var(--color-ocean-dark, #2D5A8A);
}
.hero .btn--light:hover::after {
    transform: translateX(3px);
}

/* --- Ambient doodles ------------------------------------------ */
.hero__ambient {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: min(var(--max-width, 1200px), 100%);
    transform: translateX(-50%);
    pointer-events: none;
}
.hero-doodle {
    position: absolute;
}
.hero-doodle svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hero-doodle--sun {
    top: calc(var(--header-height) + 4px);
    right: 6px;
    width: 64px;
}
.hero-doodle--sun .sun-disc {
    fill: rgb(255 209 102 / .9);
    stroke: var(--color-marigold, #FFAF1C);
    stroke-width: 2.5;
}
.hero-doodle--sun .sun-rays {
    fill: none;
    stroke: var(--color-marigold-light, #FFD166);
    stroke-width: 3;
    stroke-linecap: round;
}
.hero-doodle--sun svg {
    filter: drop-shadow(0 0 10px rgb(255 190 80 / .45));
}

.hero-doodle--gull {
    display: none;
    transition: opacity .6s ease;
}
.hero-doodle--gull path {
    fill: none;
    stroke: #FFFDF6;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-doodle--gull svg {
    filter: drop-shadow(0 1px 2px rgb(12 30 58 / .5));
}
/* Slide 2 parks its paper plane up here, so the gulls step aside */
.hero[data-slide="2"] .hero-doodle--gull {
    opacity: 0;
}

/* Paper plane + looping dashed trail. One per slide (inside the slide's media, above its
   overlay), parked clear of faces by --fl-x (from the content's left edge) and --fl-y. */
.hero-flight {
    display: none;
    position: absolute;
    z-index: 2;
    left: calc(max(0px, (100% - var(--max-width, 1200px)) / 2) + var(--fl-x, 700px));
    top: var(--fl-y, 500px);
    width: 300px;
    height: 100px;
    pointer-events: none;
}
.hero-flight__trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgb(12 30 58 / .5));
}
.hero-flight__trail path {
    fill: none;
    stroke: #FFFDF6;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 7 9;
}
.hero-flight__plane {
    position: absolute;
    right: -30px;
    top: -18px;
    width: 52px;
    transform: rotate(-12deg);
}
.hero-flight__plane svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 3px 4px rgb(12 30 58 / .45));
}
.hero-flight__plane .plane-body {
    fill: #FFFDF6;
    stroke: var(--color-ocean, #3E79B5);
    stroke-width: 2.2;
    stroke-linejoin: round;
}
.hero-flight__plane .plane-line {
    fill: none;
    stroke: var(--color-ocean, #3E79B5);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-slide__media::after {
    z-index: 1;
}

/* --- Controls ------------------------------------------------- */
.hero__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--hero-lift) + 1.25rem);
    z-index: 4;
    pointer-events: none;
}
.hero__controls[hidden] {
    display: none;
}
.hero__controls-inner {
    display: flex;
    justify-content: center;
}
.hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: var(--radius-pill, 999px);
    background: rgb(var(--hero-navy) / .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px -12px rgb(0 0 0 / .6);
    pointer-events: auto;
}
.hero__ctrl {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color .2s ease;
}
.hero__ctrl:hover {
    background: rgb(255 255 255 / .16);
}
.hero__ctrl svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero__ctrl--toggle .icon-play { display: none; }
.hero.is-stopped .hero__ctrl--toggle .icon-play { display: block; }
.hero.is-stopped .hero__ctrl--toggle .icon-pause { display: none; }
.hero__ctrl--toggle .icon-play path { fill: currentColor; stroke-width: 2; }
.hero__ctrl--toggle[hidden] { display: none; }

.hero__dots {
    display: flex;
    align-items: center;
}
.hero__dot {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 42px;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: none;
    cursor: pointer;
}
.hero__dot-track {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    overflow: hidden;
    border-radius: var(--radius-pill, 999px);
    background: rgb(255 255 255 / .55);
    transition: width .35s var(--hero-out), background-color .2s ease;
}
.hero__dot:hover .hero__dot-track {
    background: rgb(255 255 255 / .85);
}
.hero__dot[aria-current="true"] .hero__dot-track {
    width: 34px;
    background: rgb(255 255 255 / .38);
}
.hero__dot-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-marigold-light, #FFD166);
    transform: scaleX(0);
    transform-origin: left center;
}
.hero__dot[aria-current="true"] .hero__dot-fill {
    transform: scaleX(1);
}
/* Autoplay progress: hero.js advances when this animation ends */
.hero.is-autoplay .hero__dot[aria-current="true"] .hero__dot-fill {
    animation: hero-progress var(--hero-interval, 7s) linear both;
}
.hero.is-paused .hero__dot-fill {
    animation-play-state: paused !important;
}

.hero .hero__ctrl:focus-visible,
.hero .hero__dot:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px rgb(var(--hero-navy) / .9);
}

/* --- Wave into "What We Offer" -------------------------------- */
.hero .hero__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 3;
    width: 100%;
    height: var(--hero-wave-h);
    pointer-events: none;
}
.hero .hero__wave svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Sea foam, a marigold sand line, then the sunshine section */
.hero__wave .wave-back { fill: var(--color-seafoam-dark, #D0E8E0); opacity: .9; }
.hero__wave .wave-mid { fill: var(--color-marigold, #FFAF1C); }
.hero__wave .wave-front { fill: var(--color-sunshine, #FFF8E7); }

/* --- Breakpoints ---------------------------------------------- */
@media (min-width: 640px) {
    .hero-doodle--sun { width: 84px; right: 14px; }
}

/* Desktop: text on the left, the photo's subject on the right */
@media (min-width: 1024px) {
    .hero .hero__content {
        max-width: 690px;
        margin: 0;
        text-align: left;
    }
    .hero .hero__text { max-width: 33em; }
    .hero .hero__text { margin-left: 0; }
    .hero .hero__buttons { justify-content: flex-start; }
    /* Controls sit bottom-right over the photo, clear of the text column */
    .hero__slides { padding-bottom: calc(var(--hero-lift) + 3.25rem); }
    .hero__controls { bottom: calc(var(--hero-lift) + 1.25rem); }
    .hero__controls-inner { justify-content: flex-end; }

    .hero-slide__media::after {
        background:
            linear-gradient(180deg, rgb(var(--hero-navy) / .7) 0, rgb(var(--hero-navy) / .42) 150px, rgb(var(--hero-navy) / .12) 240px, rgb(var(--hero-navy) / 0) 320px),
            radial-gradient(ellipse 34% 105px at 74% calc(var(--header-height) / 2), rgb(var(--hero-navy) / .58) 0%, rgb(var(--hero-navy) / .42) 60%, rgb(var(--hero-navy) / 0) 100%),
            radial-gradient(ellipse 620px 64% at calc(max(0px, (100% - var(--max-width, 1200px)) / 2) + 330px) 60%, rgb(var(--hero-navy) / .86) 0%, rgb(var(--hero-navy) / .64) 52%, rgb(var(--hero-navy) / 0) 100%),
            linear-gradient(90deg, rgb(var(--hero-navy) / .58) 0%, rgb(var(--hero-navy) / .34) 36%, rgb(var(--hero-navy) / .08) 62%, rgb(var(--hero-navy) / .04) 100%),
            linear-gradient(0deg, rgb(var(--hero-navy) / .5) 0, rgb(var(--hero-navy) / 0) 34%);
    }

    .hero-doodle--sun {
        top: calc(var(--header-height) + 2px);
        right: 8px;
        width: 100px;
    }
    .hero-doodle--gull { display: block; }
    .hero-doodle--gull-1 { top: calc(var(--header-height) - 22px); right: 112px; width: 40px; }
    .hero-doodle--gull-2 { top: calc(var(--header-height) + 4px); right: 156px; width: 30px; }
}

/* Wide enough for the plane to sit beside the text column */
@media (min-width: 1200px) {
    .hero-flight { display: block; }
}

@media (max-width: 1023px) {
    .hero__slides {
        min-height: 620px;
        padding-top: calc(var(--header-height) + 1.25rem);
    }
}

@media (max-width: 768px) {
    .hero__slides {
        min-height: 600px;
        padding-top: calc(var(--header-height) + .75rem);
    }
    .hero-slide__media img {
        object-position: var(--pos-sm, 50% 50%);
    }
    .hero-slide__media::after {
        background:
            radial-gradient(ellipse 100% 48% at 50% 52%, rgb(var(--hero-navy) / .78), rgb(var(--hero-navy) / .52) 70%, rgb(var(--hero-navy) / .36)),
            linear-gradient(180deg, rgb(var(--hero-navy) / .66), rgb(var(--hero-navy) / .26) 24%, rgb(var(--hero-navy) / .3) 70%, rgb(var(--hero-navy) / .62));
    }
    .hero .hero__title { margin-bottom: .75rem; }
    .hero .hero__text { margin-bottom: var(--space-lg); }
}

@media (max-width: 640px) {
    .hero__slides { min-height: 0; }
}

@media (max-width: 480px) {
    .hero .hero__buttons {
        flex-direction: column;
        align-items: stretch;
        max-width: 340px;
        margin-inline: auto;
    }
    .hero .hero__buttons .btn { width: 100%; }
    .hero-doodle--sun { display: none; }
}

/* --- Motion (all of it opts in; reduced motion gets a still hero) ---- */
@media (prefers-reduced-motion: no-preference) {
    /* Ken Burns: hero.js adds .hero--js, so the first slide starts at scale(1) and drifts in */
    .hero--js .hero-slide.is-active .hero-slide__media img {
        transform: scale(1.06);
        transition: transform 9s cubic-bezier(.3, .1, .3, 1);
    }

    /* Entrance choreography (about 1.2s) */
    .hero-slide.is-active .hero__badge {
        animation: hero-badge-drop .75s var(--hero-spring) .1s both;
    }
    .hero-slide.is-active .hero__eyebrow {
        animation: hero-rise .5s var(--hero-out) .15s both;
    }
    .hero-slide.is-active .hero__word {
        animation: hero-word-pop .6s var(--hero-spring) calc(.28s + var(--i, 0) * .1s) both;
    }
    .hero-slide.is-active .hero__scribble path {
        animation: hero-draw .55s ease-out .85s both;
    }
    .hero-slide.is-active .hero__text {
        animation: hero-rise .55s var(--hero-out) .6s both;
    }
    .hero-slide.is-active .hero__buttons {
        animation: hero-rise .55s var(--hero-out) .72s both;
    }
    /* Pop in once (on the span), then a gentle loop (on the svg, which the pause button stops) */
    .hero-slide.is-active .hero__flourish {
        animation: hero-pop .5s var(--hero-spring) 1s both;
    }
    .hero-slide.is-active .hero__flourish svg {
        animation: hero-twinkle 2.6s ease-in-out 1.6s infinite alternate;
    }
    .hero-slide.is-active .hero__flourish--heart svg {
        animation: hero-beat 2.4s ease-in-out 1.6s infinite;
    }
    .hero-slide.is-active .hero__flourish--arrow svg {
        animation: hero-nudge 2.2s ease-in-out 1.6s infinite alternate;
    }

    /* Ambient layer: transforms and opacity only */
    .hero-doodle--sun svg {
        animation: hero-spin 70s linear infinite;
    }
    .hero-doodle--gull-1 svg {
        animation: hero-glide 6.5s ease-in-out infinite alternate;
    }
    .hero-doodle--gull-2 svg {
        animation: hero-glide 8s ease-in-out -3s infinite alternate-reverse;
    }
    /* The plane flies in along its trail as each slide enters, then drifts */
    .hero-slide.is-active .hero-flight__trail {
        animation: hero-trail-reveal 1.3s cubic-bezier(.45, .05, .35, 1) .45s both;
    }
    .hero-slide.is-active .hero-flight__plane {
        animation: hero-plane-in 1.3s cubic-bezier(.45, .05, .35, 1) .45s both;
    }
    .hero-slide.is-active .hero-flight__plane svg {
        animation: hero-drift 7s ease-in-out 1.75s infinite;
    }

    /* Pause button (WCAG 2.2.2) and an off-screen hero freeze the ambient loops too */
    .hero.is-stopped .hero__ambient svg,
    .hero.is-stopped .hero__flourish svg,
    .hero.is-stopped .hero-flight__plane svg,
    .hero.is-offscreen .hero__ambient svg,
    .hero.is-offscreen .hero__flourish svg,
    .hero.is-offscreen .hero-flight__plane svg {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero { --hero-fade: .35s; }
    .hero-slide.is-leaving .hero-slide__inner { transition: none; }
}

@keyframes hero-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes hero-badge-drop {
    0%   { opacity: 0; transform: translateY(-34px) rotate(-14deg) scale(.92); }
    55%  { opacity: 1; transform: translateY(4px) rotate(1.5deg) scale(1.02); }
    78%  { transform: translateY(-2px) rotate(-4.5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(-3deg); }
}
@keyframes hero-word-pop {
    0%   { opacity: 0; transform: translateY(.32em) scale(.72) rotate(-4deg); }
    60%  { opacity: 1; transform: translateY(-.04em) scale(1.05) rotate(1deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes hero-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
@keyframes hero-pop {
    0%   { opacity: 0; transform: scale(.2) rotate(-40deg); }
    70%  { opacity: 1; transform: scale(1.18) rotate(8deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes hero-twinkle {
    from { transform: scale(1) rotate(0); opacity: 1; }
    to   { transform: scale(.74) rotate(22deg); opacity: .7; }
}
@keyframes hero-beat {
    0%, 60%, 100% { transform: scale(1); }
    15% { transform: scale(1.16); }
    30% { transform: scale(.96); }
    45% { transform: scale(1.08); }
}
@keyframes hero-nudge {
    from { transform: translate(0, 0); }
    to   { transform: translate(3px, -4px); }
}
@keyframes hero-spin {
    to { transform: rotate(360deg); }
}
@keyframes hero-glide {
    0%   { transform: translate(0, 0) rotate(-4deg); }
    50%  { transform: translate(7px, -6px) rotate(3deg); }
    100% { transform: translate(14px, 2px) rotate(-2deg); }
}
@keyframes hero-trail-reveal {
    from { clip-path: inset(-12px 100% -12px -12px); }
    to   { clip-path: inset(-12px -12px -12px -12px); }
}
@keyframes hero-plane-in {
    0%   { opacity: 0; transform: translate(-280px, 62px) rotate(-4deg); }
    12%  { opacity: 1; }
    45%  { transform: translate(-140px, 30px) rotate(6deg); }
    100% { opacity: 1; transform: rotate(-12deg); }
}
@keyframes hero-drift {
    0%   { transform: translate(0, 0) rotate(0); }
    25%  { transform: translate(5px, -6px) rotate(4deg); }
    50%  { transform: translate(10px, -1px) rotate(-2deg); }
    75%  { transform: translate(4px, 5px) rotate(-6deg); }
    100% { transform: translate(0, 0) rotate(0); }
}

@media print {
    .hero__controls,
    .hero__ambient,
    .hero__wave { display: none; }
    .hero-slide:not(:first-child) { display: none; }
}