/* =============================================================================
 * hero-animated.css — Scroll-Scrubbed Mask Reveal Hero
 * -----------------------------------------------------------------------------
 * Root class: .section-hero-animated
 * Every rule is scoped to this class — no bare global selectors.
 *
 * Three-layer architecture:
 *   __bg          (z-index 1) — dark base + red glow + vignette
 *   __tiles       (z-index 3) — 24 branded background tiles
 *   __main-icons  (z-index 4) — 4 primary app icons
 *   __window      (z-index 5) — transparent div, box-shadow white frame
 *   __hero-glow   (z-index 6) — warm radial, mix-blend-mode: multiply
 *   __content     (z-index 10) — pill, H1, subtitle, CTA (never moves)
 *
 * Design tokens
 * --color-readi-black:  #2E2925
 * --color-readi-red:    #E51F37
 * --color-royal-blue:   #3D6BEA
 * --color-white:        #FFFFFF
 * --color-seasalt:      #F8F9FA
 * --color-platinum:     #DEE2E6
 * --color-french-grey:  #ADB5BD
 * --color-outer-space:  #495057
 * --color-parchment-60: #F7F3E5
 * --font-heading:       'Space Grotesk', sans-serif
 * --font-body:          'Roboto', sans-serif
 *
 * Breakpoints:
 *   Desktop  >1199px  — full animation
 *   Tablet   768–1199px — full-width window, height animates 280px → 100vh
 *   Mobile   <768px   — no animation; static State 2
 * ============================================================================= */

/* ─── White base — z-0, always behind all layers ───────────────────────────── */

.section-hero-animated__white-base {
    position: absolute;
    inset: 0;
    background-color: #ffffff;
    z-index: 0;
    pointer-events: none;
}

/* ─── Dark world container — z-1, clip-path driven by JS ───────────────────── */
/*
 * Wraps __bg (dark base), __tiles, and __main-icons.
 * JS sets clip-path: inset(top right bottom left round rx) each scroll frame.
 * This single CSS mutation is GPU-composited in Safari (no SVG layout recalc).
 *
 * will-change: clip-path promotes this layer to its own compositor tile,
 * giving Safari the same smooth performance Chrome has had all along.
 *
 * Initial clip-path approximates the S1 window for the 1920×1024 design frame
 * (552/1024 top, 18.75vw sides, 96/1024 bottom). JS corrects to exact viewport
 * values immediately on load. Without this, the dark world would be unconstrained
 * before JS runs.
 */
.section-hero-animated__dark-world {
    position: absolute;
    inset: 0;
    z-index: 1;
    will-change: clip-path;
    /* w = min(80vw, 1200px), h = 376px (fixed). Window top ≈ 540px (content bottom + 48px gap).
       top    ≈ 540px (nav 96 + gap 96 + content ~300 + window-gap 48)
       right  = (vw − min(0.8vw, 1200)) / 2 ≈ 18.75vw (exact at 1920px, approx elsewhere)
       bottom = vh − 540 − 376 = vh − 916 → calc(100vh − 916px)
       JS overrides with exact pixel values immediately on load. */
    clip-path: inset(540px 18.75vw calc(100vh - 916px) 18.75vw round 15px);
    pointer-events: none;
}

/* ─── Outer wrapper ─────────────────────────────────────────────────────────── */

.section-hero-animated {
    position: relative;
    min-height: 300vh;
    /* Establish a stacking context so z-indices are self-contained */
    isolation: isolate;
}

/* ─── Sticky track + shell ──────────────────────────────────────────────────── */

.section-hero-animated__track {
    position: relative;
    height: 300vh; /* explicit — shell sticky scroll room = track(300vh) - shell(100vh) = 200vh */
}

.section-hero-animated__shell {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* When WP admin bar is present (logged-in users), the body gets margin-top:32px.
   The shell must stick immediately at the admin-bar bottom — otherwise there is
   a brief non-sticky phase during the first 32px of scroll where the content
   appears to move up before pinning. */
.admin-bar .section-hero-animated__shell {
    top: var(--wp-admin--admin-bar--height, 32px);
    height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

/* ─── LAYER 1 — Background ──────────────────────────────────────────────────── */

.section-hero-animated__bg {
    position: absolute;
    inset: 0;
    /* Red glow baked directly into this element — avoids child-width
       inheritance issues that can offset the gradient centre. */
    background:
        radial-gradient(
            circle 600px at 50% 50%,
            rgba(229, 31, 55, 0.55) 0%,
            rgba(229, 31, 55, 0.15) 50%,
            transparent 100%
        ),
        #2E2925;
    z-index: 1;
}

/* __bg-glow kept in PHP but rendered as display:none — glow is on __bg now */
.section-hero-animated__bg-glow {
    display: none;
}

/* Dark vignette — transparent centre, rgba(0,0,0,0.66) at edges */
.section-hero-animated__bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        transparent 30%,
        rgba(0, 0, 0, 0.66) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* ─── Scattered background tiles ────────────────────────────────────────────── */

.section-hero-animated__tiles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Float keyframe — gentle vertical levitation on revealed tiles */
@keyframes ha-tile-pulse {
    0%, 100% { transform: translateY(0px);  }
    50%       { transform: translateY(-6px); }
}

.section-hero-animated__tile {
    position: absolute;
    border-radius: 5px;
    overflow: visible; /* badge renders outside tile bounds */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Tiles start hidden; JS fades them in as the window reveals them.
       NO transition here — JS owns all opacity transitions via inline styles. */
    opacity: 0;
}

/* Applied by JS once a tile is fully inside the expanding window. */
.section-hero-animated__tile.ha-pulse {
    animation: ha-tile-pulse 4s ease-in-out infinite;
}

/* Size variants — depth hierarchy: small tiles are softer and blurrier */
.section-hero-animated__tile--25 { width: 25px;  height: 25px;  filter: blur(1px); }
.section-hero-animated__tile--50 { width: 50px;  height: 50px;  /* no blur */ }
.section-hero-animated__tile--75 { width: 75px;  height: 75px;  /* no blur */      }

/* ─── Tile warning icon (scan activation) ──────────────────────────────────── */

.section-hero-animated__tile-warning {
    /* position, size, left, top, transform, z-index all set by JS */
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.50));
}

/* ─── Tile red glow (scan activation) ──────────────────────────────────────── */

/* top/left set by JS (offset calc from tile size) so glow centres correctly
   on both 50px and 75px tiles. z-index: 2 keeps it above the dark-world bg
   but below the icon img (z-index: 3) and warning icon (z-index: 10). */
.section-hero-animated__tile-glow {
    position: absolute;
    /* top and left set by JS — do not add them here */
    width:  150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(229, 31, 55, 0.7)  0%,
        rgba(229, 31, 55, 0.2) 50%,
        rgba(229, 31, 55, 0)   100%
    );
    pointer-events: none;
    z-index: 2;
    filter: blur(8px);
    opacity: 0;
}

/* Flash animation — fires while ha-warning--active class is present */
@keyframes ha-warning-flash {
    0%, 100% { opacity: 1;    }
    50%       { opacity: 0.1; }
}

.section-hero-animated__tile-warning.ha-warning--active {
    animation: ha-warning-flash 0.55s ease-in-out infinite;
    transition: none; /* suppress any inherited transition during flash */
}

/* Reduced motion — hide scan effect */
@media (prefers-reduced-motion: reduce) {
    .section-hero-animated__tile-warning,
    .section-hero-animated__tile-glow {
        display: none;
    }
}

/* Tile backgrounds removed — icons only, no card/gradient frame.
   Any built-in SVG backgrounds (e.g. Adobe tile) remain intact. */
.section-hero-animated__tile--brand-aws,
.section-hero-animated__tile--brand-azure,
.section-hero-animated__tile--brand-ms,
.section-hero-animated__tile--brand-asana,
.section-hero-animated__tile--brand-deloitte,
.section-hero-animated__tile--brand-datadog,
.section-hero-animated__tile--brand-adobe,
.section-hero-animated__tile--brand-armis,
.section-hero-animated__tile--brand-terminalapp,
.section-hero-animated__tile--brand-legacyapp,
.section-hero-animated__tile--brand-win32app {
    background: transparent;
}

/* Logo fills the full tile. position:relative + z-index:3 keeps the icon
   above the glow layer (z-index:2) so the glow appears as a backlit halo. */
.section-hero-animated__tile img {
    width:  100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 3;
}

/* ─── 4 main app icons ───────────────────────────────────────────────────────── */

.section-hero-animated__main-icons {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.section-hero-animated__main-icon {
    position: absolute;
    width:  75px;
    height: 75px;
    /* No background card — icons render directly, no white square */
    display: flex;
    align-items: center;
    justify-content: center;
    /* left and top are set by JS positionIcons() on load and resize.
       The PHP inline style provides a non-JS fallback using bottom anchoring. */
}

.section-hero-animated__main-icon img {
    width:  100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ─── LAYERS 5 & 6 — Glow layers ───────────────────────────────────────────── */
/*
 * Stacking context summary (within __shell):
 *   z-0  __white-base    solid white fallback
 *   z-1  __dark-world    clip-path container (bg + tiles + icons inside)
 *   z-6  __hero-glow     warm radial gradient (JS fades opacity 1→0)
 *   z-7  __dots-light    dot mesh overlay
 *   z-8  __state1-glow   top-centre ambient glow (multiply blend)
 *   z-8  __governed-label  "Governed Applications" text (JS-positioned)
 *   z-10 __content       pill, H1, subtitle, CTA
 *
 * NOTE: __overlay (SVG setAttribute approach) has been removed and replaced
 * by clip-path: inset() on __dark-world (GPU-composited, Safari-smooth).
 */

/* z-6: hero glow — matches the 404 page (section.header-slider) gradient.
   No mix-blend-mode needed: the gradient fades to transparent before it
   reaches the window's y-position (bottom of hero), so it is naturally
   invisible inside the dark window area.
   JS fades opacity 1 → 0 as the dark world reveals. */
.section-hero-animated__hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        45.95% 45.95% at 50% 0%,
        rgba(247, 110, 110, 0.25) 0%,
        rgba(253, 239, 220, 0.05) 100%
    );
    z-index: 6;
    pointer-events: none;
}

/* z-8: State 1 ambient glow — warm radial at top centre.
   mix-blend-mode: multiply → visible as a warm tint over the white overlay
   in State 1; invisible against the dark bg inside the window (multiply
   with #2E2925 ≈ no change). No JS fade needed. */
.section-hero-animated__state1-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 40% at 50% 0%,
        rgba(229, 31, 55, 0.18) 0%,
        transparent 70%
    );
    z-index: 8;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* z-8: Governed Applications label — positioned by JS positionLabel().
   At z-8 it floats above the overlay, appearing as window content.
   mix-blend-mode: multiply keeps it invisible on dark bg outside the window. */
.section-hero-animated__governed-label {
    position: absolute;
    /* top set by JS positionLabel() */
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.28px;
    color: #DEE2E6;
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
    margin: 0;
}

/* ─── LAYER 3 — Content ─────────────────────────────────────────────────────── */

.section-hero-animated__content {
    /* !important on position + top: style_new.css (which loads after this file)
       sets position:relative + margin:72px auto 0 for the old card-flip build.
       Those rules would shift the content far below 192px without this override.
       margin-top !important overrides the 72px from that same margin shorthand. */
    position: absolute !important;
    top: 192px !important; /* nav (96px) + gap (96px) */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 768px;
    z-index: 10;
    text-align: center;
    margin-top: 6px !important;    /* override style_new.css margin:72px auto 0 */
    will-change: transform;
    pointer-events: auto;
    user-select: text;
}

/* ── Announcement pill ────────────────────────────────────────────────────── */

.section-hero-animated__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F7F3E5;
    border-radius: 30px;
    padding: 10px 18px;
    margin-bottom: 48px !important;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.section-hero-animated__pill-prefix {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6C757D;
}

.section-hero-animated__pill-link {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #3D6BEA;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: opacity 0.15s ease;
}

.section-hero-animated__pill-link:hover {
    opacity: 0.80;
    color: #3D6BEA;
}

/* ── H1 — two stacked layers ─────────────────────────────────────────────── */

.section-hero-animated__heading {
    position: relative;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 66px;
    text-align: center;
    margin: 0 0 24px !important;
    padding: 0 !important;
    /* Height set by whichever layer is taller — both are stacked */
}

.section-hero-animated__heading-layer {
    display: block;
}

.section-hero-animated__heading-layer--a {
    /* State 1: dark text, visible at start */
    color: #2E2925;
    opacity: 1;
}

.section-hero-animated__heading-layer--b {
    /* State 2: white text, invisible at start, fades in via JS */
    position: absolute;
    inset: 0;
    color: #ffffff;
    opacity: 0;
}

/* ── Subtitle — two stacked layers ──────────────────────────────────────── */

.section-hero-animated__subtitle {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    text-align: center;
    /* No bottom margin — the 48px gap to the pills row comes entirely from
       .section-hero-animated__pills { margin-top: 48px }, not from here. */
    margin: 0 !important;
    padding: 0 !important;
}

.section-hero-animated__subtitle-layer {
    display: block;
}

.section-hero-animated__subtitle-layer--a {
    color: #495057;
    opacity: 1;
}

.section-hero-animated__subtitle-layer--b {
    position: absolute;
    inset: 0;
    color: #F8F9FA;
    opacity: 0;
}

/* ── Feature pills row ───────────────────────────────────────────────────── */
/*
 * Three animated-border pills below the subtitle.
 * Each pill has a rotating conic-gradient stroke (--pill-angle custom property)
 * that Safari + Chrome both GPU-accelerate via @property interpolation.
 *
 * Stage 1: red stroke + label (#F76E6E).
 * Stage 2: JS adds .hero-pill--stage2 at progress=1, switching to blue.
 */

.section-hero-animated__pills {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow: visible; /* glow layers bleed outside each pill — must not clip */
    /* !important: style_new.css flex gap:0 on the content container would
       otherwise leave this margin unguarded. 48px is the sole source of
       spacing between the subtitle and the pills row. */
    margin-top: 48px !important;
}

/*
 * Pill layer stack (back → front):
 *   z-index -1  __pill-glow    blurred radial — behind white fill
 *   z-index  0  white fill     pill background
 *   z-index  1  __pill-stroke  sharp border highlight
 *   z-index  2  content        icon-wrap + label
 *
 * z-index: 0 on the pill creates a stacking context; within it, glow at -1
 * is composited first (behind the fill) and stroke/content at 1/2 on top.
 */
.section-hero-animated__pill-feature {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 24px 0 12px;
    border-radius: 30px;
    background: #ffffff; /* solid white fill */
    border: 2px solid rgba(229, 31, 55, 0.20);
    overflow: visible; /* CRITICAL — allow glow to render outside */
    z-index: 0;
}

/* Glow — behind the pill, blurs outward from the border */
.section-hero-animated__pill-glow {
    position: absolute;
    inset: -12px; /* extends outside the pill bounds */
    border-radius: 40px; /* slightly larger than pill's 30px */
    pointer-events: none;
    filter: blur(8px);
    opacity: 0.7;
    z-index: -1; /* behind the pill white background */
    will-change: background;
}

/* Stroke — on the border edge, above white fill */
.section-hero-animated__pill-stroke {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.9;
    z-index: 1; /* above white fill, below content */
    will-change: background;
    /* Mask to border ring only */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
}

/* Icon wrapper — stacks s1 and s2 icons on top of each other.
   z-index: 2 keeps content above the stroke layer (z-1). */
.section-hero-animated__pill-icon-wrap {
    position: relative;
    width:  24px;
    height: 24px;
    flex-shrink: 0;
    z-index: 2;
}

/* Both icons are absolutely positioned inside the wrapper */
.section-hero-animated__pill-icon {
    position: absolute;
    inset: 0;
    width:  24px;
    height: 24px;
    object-fit: contain;
}

.section-hero-animated__pill-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #F76E6E;
    white-space: nowrap;
    position: relative;
    z-index: 2; /* above stroke layer */
}

/* Stage 2 — switched by JS when window top reaches pills bottom */
.section-hero-animated__pill-feature.hero-pill--stage2 {
    --pill-color: #3D6BEA;
    border-color: rgba(236, 240, 253, 0.30);
}

.section-hero-animated__pill-feature.hero-pill--stage2
.section-hero-animated__pill-label {
    color: #3D6BEA;
}

/* Reduced motion — hide orbiting glow + stroke layers, show static border only */
@media (prefers-reduced-motion: reduce) {
    .section-hero-animated__pill-glow,
    .section-hero-animated__pill-stroke {
        display: none;
    }

    .section-hero-animated__pill-feature {
        border-color: #E51F37;
    }
}

/* ── Window label — below icons, inside dark window (z-1, covered by white outside) ── */

.section-hero-animated__window-text {
    position: absolute;
    /* ~800/1024 of viewport height — below icon centres (703/1024) + 75px icon */
    top: calc(800 / 1024 * 100%);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #DEE2E6;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.28px;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    pointer-events: none;
}

/* Scroll prompt removed — element deleted from PHP template. */

/* ─── Dot mesh overlay — visible over the white State-1 frame ──────────────── */
/* Sits at z-7 (above __window z-5 and __hero-glow z-6, below __content z-10).
   As the window expands the dark background beneath takes over — the overlay
   fades via the CSS variable --hp that JS writes each frame (0 at rest → 1 full). */

.section-hero-animated__dots-light {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23E51F37'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 20px 20px;
    opacity: 0.12;
    /* Fade out as the dark background reveals — JS sets --hp on the section */
    transition: opacity 0.1s linear;
}

/* When the window is fully open (--hp close to 1) we hide the overlay so the
   dark-bg grid (z-1) is the only one visible. JS sets --hp each frame. */
.section-hero-animated[style*="--hp"] .section-hero-animated__dots-light {
    opacity: calc(0.12 * (1 - var(--hp, 0)));
}

/* ─── Below 1280px — Static Stage 2, no animation, no tiles ────────────────── */

@media (max-width: 1279px) {

    /* Remove scroll height — section is only 100vh */
    .section-hero-animated {
        min-height: 100vh;
        margin-top: 0;
        padding-top: 0;
    }

    /* Remove scroll track height */
    .section-hero-animated__track {
        height: 100vh;
    }

    /* Unstick the shell */
    .section-hero-animated__shell {
        position: relative;
        top: auto;
        height: 100vh;
        margin-top: 0;
    }

    /* Remove clip — dark bg fills viewport */
    .section-hero-animated__dark-world {
        clip-path: none;
    }

    /* Hide white base and State 1 glow — not needed in Stage 2 */
    .section-hero-animated__white-base,
    .section-hero-animated__state1-glow {
        display: none;
    }

    /* Hide glows, light-dots, app icons, labels */
    .section-hero-animated__hero-glow,
    .section-hero-animated__dots-light,
    .section-hero-animated__main-icons,
    .section-hero-animated__window-text,
    .section-hero-animated__governed-label {
        display: none;
    }

    /* Hide ALL scattered tiles */
    .section-hero-animated__tiles {
        display: none;
    }

    /* Hide State 1 text layers — show State 2 only */
    .section-hero-animated__heading-layer--a,
    .section-hero-animated__subtitle-layer--a {
        display: none;
    }

    .section-hero-animated__heading-layer--b {
        position: static;
        color: #ffffff;
        opacity: 1;
    }

    .section-hero-animated__subtitle-layer--b {
        position: static;
        color: rgba(222, 226, 230, 0.87);
        opacity: 1;
    }

    /* CTA always visible */
    .section-hero-animated__cta-wrap {
        opacity: 1;
        transform: none;
    }

    /* Pills in Stage 2 state */
    .section-hero-animated__pill-feature {
        border-color: rgba(236, 240, 253, 0.30);
    }

    .section-hero-animated__pill-label {
        color: #3D6BEA;
    }

    /* Content block — top anchor from nav */
    .section-hero-animated__content {
        top: 120px;
        padding: 0 24px;
    }
}

/* ─── Below 768px — vertical pill stack, smaller type, tighter spacing ──────── */

@media (max-width: 767px) {

    /* Stack pills vertically */
    .section-hero-animated__pills {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
    }

    /* Reduce H1 size on mobile */
    .section-hero-animated__heading {
        font-size: 36px;
        line-height: 42px;
    }

    /* Reduce subtitle size on mobile */
    .section-hero-animated__subtitle {
        font-size: 16px;
        line-height: 22px;
    }

    /* Tighter content top on mobile */
    .section-hero-animated__content {
        top: 96px;
        padding: 0 20px;
    }

    /* Announcement pill — wrap and centre on mobile */
    .section-hero-animated__pill {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        padding: 8px 14px;
        white-space: normal;
        text-align: center;
    }

    .section-hero-animated__pill-prefix,
    .section-hero-animated__pill-link {
        font-size: 13px;
        letter-spacing: 0.4px;
    }

    /* CTA sizing on mobile */
    .section-hero-animated__cta {
        font-size: 18px;
        padding: 14px 22px;
    }
}

/* ─── Reduced motion ────────────────────────────────────────────────────────── */

/* ─── Dots mesh texture ──────────────────────────────────────────────────────── */
/* 2px dots (r=1), 10px gap → 12×12px tile, one centred dot per cell           */

.section-hero-animated__grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23E51F37'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 20px 20px;
}


/* ─── Signal pulses (shared base) ───────────────────────────────────────────── */

.section-hero-animated__pulse {
    position: absolute;
    border-radius: 1px;
    filter: blur(2px);
    opacity: 0;
}

/* ─── Horizontal pulses ──────────────────────────────────────────────────────── */

.section-hero-animated__pulse--h {
    width:  96px;
    height: 1px;
    left: -96px;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: hero-pulse-h;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(229, 31, 55, 0.35) 30%,
        rgba(229, 31, 55, 0.35) 70%,
        transparent 100%
    );
}

.section-hero-animated__pulse--h1 { top: calc(48px *  3); animation-duration: 7.2s; animation-delay: 0s;   }
.section-hero-animated__pulse--h2 { top: calc(48px *  6); animation-duration: 8.8s; animation-delay: 1.4s; }
.section-hero-animated__pulse--h3 { top: calc(48px *  9); animation-duration: 6.5s; animation-delay: 3.1s; }
.section-hero-animated__pulse--h4 { top: calc(48px * 12); animation-duration: 9.3s; animation-delay: 0.8s; }
.section-hero-animated__pulse--h5 { top: calc(48px * 15); animation-duration: 7.7s; animation-delay: 2.5s; }
.section-hero-animated__pulse--h6 { top: calc(48px * 18); animation-duration: 8.1s; animation-delay: 4.7s; }

@keyframes hero-pulse-h {
    0%   { left: -96px;               opacity: 0; }
    3%   { opacity: 1;                            }
    97%  { opacity: 1;                            }
    100% { left: calc(100vw + 96px);  opacity: 0; }
}

/* ─── Vertical pulses ────────────────────────────────────────────────────────── */

.section-hero-animated__pulse--v {
    width:  1px;
    height: 96px;
    top: -96px;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: hero-pulse-v;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(229, 31, 55, 0.35) 30%,
        rgba(229, 31, 55, 0.35) 70%,
        transparent 100%
    );
}

.section-hero-animated__pulse--v1 { left: calc(48px *  4); animation-duration: 9.1s;  animation-delay: 0.6s; }
.section-hero-animated__pulse--v2 { left: calc(48px *  8); animation-duration: 10.4s; animation-delay: 2.2s; }
.section-hero-animated__pulse--v3 { left: calc(48px * 14); animation-duration: 8.7s;  animation-delay: 1.0s; }
.section-hero-animated__pulse--v4 { left: calc(48px * 20); animation-duration: 11.2s; animation-delay: 3.8s; }
.section-hero-animated__pulse--v5 { left: calc(48px * 27); animation-duration: 9.6s;  animation-delay: 0.3s; }
.section-hero-animated__pulse--v6 { left: calc(48px * 34); animation-duration: 10.8s; animation-delay: 5.1s; }

@keyframes hero-pulse-v {
    0%   { top: -96px;               opacity: 0; }
    3%   { opacity: 1;                           }
    97%  { opacity: 1;                           }
    100% { top: calc(100vh + 96px);  opacity: 0; }
}

/* ─── Animated glow circles ─────────────────────────────────────────────────── */

.section-hero-animated__glow-circles {
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.section-hero-animated__glow-circle {
    position: absolute;
    border-radius: 50%;
    background-color: #E51F37;
    opacity: 0;
    transform-origin: center center;
    animation-name: hero-glow-pulse;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    /* top/left anchor at container centre; keyframes handle the -50% offset */
    top: 50%;
    left: 50%;
}

.section-hero-animated__glow-circle--01 {
    width:  598.5px;
    height: 598.5px;
    filter: blur(4px);
    animation-duration: 3s;
    animation-delay: 0s;
}

.section-hero-animated__glow-circle--02 {
    width:  760.594px;
    height: 760.594px;
    filter: blur(8px);
    animation-duration: 3s;
    animation-delay: 0.35s;
}

.section-hero-animated__glow-circle--03 {
    width:  897.75px;
    height: 897.75px;
    filter: blur(12px);
    animation-duration: 3s;
    animation-delay: 0.70s;
}

.section-hero-animated__glow-circle--04 {
    width:  1047.375px;
    height: 1047.375px;
    filter: blur(16px);
    animation-duration: 3s;
    animation-delay: 1.05s;
}

.section-hero-animated__glow-circle--05 {
    width:  1197px;
    height: 1197px;
    filter: blur(20px);
    animation-duration: 3s;
    animation-delay: 1.40s;
}

@keyframes hero-glow-pulse {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.92); }
    20%  { opacity: 0.20; transform: translate(-50%, -50%) scale(1);    }
    60%  { opacity: 0.20; transform: translate(-50%, -50%) scale(1);    }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.04); }
}

/* ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ─── ── */

@media (prefers-reduced-motion: reduce) {

    /* JS bails on reduced-motion — show a clean static State 1 */
    .section-hero-animated {
        min-height: 100vh;
    }

    .section-hero-animated__track {
        height: 100vh;
    }

    .section-hero-animated__shell {
        position: relative;
    }

    /* Reduced-motion: hide glow; dark-world's CSS clip-path approximation
       shows the window cutout without any JS or animation. */
    .section-hero-animated__hero-glow {
        display: none;
    }

    /* hero-window geometry is set by JS via getS1() — no static fallback needed. */
    /* Scroll prompt element has been removed from markup. */

    /* Grid pulses + light-dots overlay: hide on reduced motion */
    .section-hero-animated__pulse,
    .section-hero-animated__dots-light {
        display: none;
    }

    /* Glow circles: freeze at a gentle static state */
    .section-hero-animated__glow-circle {
        animation: none;
        opacity: 0.08;
        transform: translate(-50%, -50%) scale(1);
    }
}