/* ============================================================
   HS Footer — synthwave closing-hero
   Ported from Jimmy's synthwave-grid prototype + reveal animation.
   All color vars + component classes scoped under .hs-synthwave
   so nothing leaks into the rest of the theme.
   ============================================================ */

.hs-synthwave {
    --hs-cyan:       #00eaff;
    --hs-cyan-soft:  #22c4d9;
    --hs-cyan-deep:  #0a6a82;
    --hs-hot:        #eafcff;
    --hs-sky-top:    #050a1e;
    --hs-sky-mid:    #0a1638;
    --hs-sky-low:    #0e2e55;
    --hs-ink:        #02020a;

    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: #d8ecff;
    font-family: "Courier New", ui-monospace, monospace;
    background: linear-gradient(180deg,
        var(--hs-sky-top) 0%,
        var(--hs-sky-mid) 35%,
        var(--hs-sky-low) 55%,
        #020814 100%);
    border-top: 1px solid rgba(0, 234, 255, .15);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hs-synthwave *,
.hs-synthwave *::before,
.hs-synthwave *::after { box-sizing: border-box; }

/* ---- sky glow bleeding up from horizon ---- */
.hs-synthwave .sky-glow {
    position: absolute;
    left: -10%; right: -10%;
    bottom: 50%;
    height: 55%;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(0, 234, 255, .55) 0%,
        rgba(0, 234, 255, .18) 22%,
        rgba(0, 234, 255, 0)   55%);
    z-index: 1;
    pointer-events: none;
}

/* ---- stars, masked to dome over horizon ---- */
.hs-synthwave .stars {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 60%;
    overflow: hidden;
    z-index: 2;
    -webkit-mask-image: radial-gradient(ellipse 62% 105% at 50% 100%,
        #000 0%, #000 45%, rgba(0,0,0,.55) 70%, rgba(0,0,0,0) 92%);
            mask-image: radial-gradient(ellipse 62% 105% at 50% 100%,
        #000 0%, #000 45%, rgba(0,0,0,.55) 70%, rgba(0,0,0,0) 92%);
    background-image:
        radial-gradient(1px 1px at 3%  8%,  #fff, transparent),
        radial-gradient(1px 1px at 12% 22%, #e6f8ff, transparent),
        radial-gradient(1px 1px at 19% 5%,  #fff, transparent),
        radial-gradient(1px 1px at 27% 30%, #cfeeff, transparent),
        radial-gradient(1px 1px at 34% 14%, #fff, transparent),
        radial-gradient(1px 1px at 41% 38%, #fff, transparent),
        radial-gradient(2px 2px at 47% 10%, #fff, transparent),
        radial-gradient(1px 1px at 54% 28%, #cfeeff, transparent),
        radial-gradient(1px 1px at 60% 6%,  #fff, transparent),
        radial-gradient(1px 1px at 67% 20%, #fff, transparent),
        radial-gradient(2px 2px at 74% 33%, #fff, transparent),
        radial-gradient(1px 1px at 81% 12%, #cfeeff, transparent),
        radial-gradient(1px 1px at 88% 26%, #fff, transparent),
        radial-gradient(1px 1px at 94% 4%,  #fff, transparent),
        radial-gradient(1px 1px at 7%  42%, #fff, transparent),
        radial-gradient(1px 1px at 22% 48%, #cfeeff, transparent),
        radial-gradient(1px 1px at 38% 52%, #fff, transparent),
        radial-gradient(1px 1px at 56% 45%, #fff, transparent),
        radial-gradient(1px 1px at 71% 50%, #cfeeff, transparent),
        radial-gradient(1px 1px at 86% 44%, #fff, transparent),
        radial-gradient(2px 2px at 15% 58%, #fff, transparent),
        radial-gradient(1px 1px at 44% 62%, #fff, transparent),
        radial-gradient(1px 1px at 78% 60%, #fff, transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: hs-sw-twinkle 4s ease-in-out infinite alternate;
}
@keyframes hs-sw-twinkle { from { opacity: .55; } to { opacity: 1; } }

/* ---- griffins ---- */
.hs-synthwave .griffin {
    position: absolute;
    bottom: calc(50% + 5px);
    width: clamp(80px, 15vw, 200px);
    aspect-ratio: 220 / 224;
    height: auto;
    z-index: 5;
}
/* Griffin fill + DIM baseline glow, hidden via clip-path inset from the top.
   Side/bottom insets are -50% (extend the clip region OUTWARD on those
   edges) so when the griffin is fully revealed the drop-shadow glow can
   render well beyond the svg's bounding box without being chopped into a
   rectangle. Animating only the top inset from 100% → -50% reveals the
   element from the BOTTOM up — feet first, head last. */
.hs-synthwave .griffin svg {
    width: 100%; height: 100%; display: block;
    fill: var(--hs-hot);
    filter:
        drop-shadow(0 0 3px var(--hs-cyan))
        drop-shadow(0 0 10px rgba(0, 234, 255, .32));
    -webkit-clip-path: inset(100% -200% -200% -200%);
            clip-path: inset(100% -200% -200% -200%);
    opacity: 0;
}
.hs-synthwave .griffin.left-side  { left: 5%; }
.hs-synthwave .griffin.right-side { right: 5%; }
.hs-synthwave .griffin.right-side svg { transform: scaleX(-1); }

/* Matrix CLOUD canvas — not a beam, an egg-shaped blob of katakana rain
   that UFO-lands on the griffin, hovers, then dissolves top-to-bottom.
   The radial-gradient mask clips the rectangular canvas into the egg
   shape with a soft falloff at the edges. JS keeps the matrix glyphs
   cycling inside the egg the whole time. The canvas itself translates
   from above the viewport down to rest over the griffin on reveal; CSS
   transition handles the descent (ease-out, 1s, no bounce). */
.hs-synthwave .griffin-storm {
    position: absolute;
    left: -25%;
    bottom: -25%;
    width: 150%;
    height: 150%;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transform: translateY(-420%);
    -webkit-mask-image: radial-gradient(ellipse 40% 45% at 50% 50%,
        #000 0%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 40% 45% at 50% 50%,
        #000 0%, #000 62%, transparent 100%);
    transition:
        transform 1.5s cubic-bezier(.22, .55, .3, 1),
        opacity .25s ease;
}
.hs-synthwave.is-revealed .griffin-storm {
    opacity: 1;
    transform: translateY(0);
}

/* Pulse — dim → brighter → dim. 0% and 100% match the baseline filter so
   the animation picks up without a jump. Only plays after reveal + storm
   have finished (delay coordinates with the JS timeline in footer.js). */
@keyframes hs-griffin-pulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 3px var(--hs-cyan))
            drop-shadow(0 0 10px rgba(0, 234, 255, .32));
    }
    50% {
        filter:
            drop-shadow(0 0 6px var(--hs-cyan))
            drop-shadow(0 0 20px var(--hs-cyan))
            drop-shadow(0 0 40px rgba(0, 234, 255, .5));
    }
}
/* Final resting state set explicitly in static CSS so the griffin is
   guaranteed to hold opacity:1 / clip-path:inset(0) once is-revealed is
   present. The rise animation uses `backwards` fill-mode — during the
   1.25s delay the animation asserts the `from` state (hidden), then
   interpolates to the `to` state; after the animation ends, fill is
   released and the static values below take over. */
.hs-synthwave.is-revealed .griffin svg {
    opacity: 1;
    -webkit-clip-path: inset(-200% -200% -200% -200%);
            clip-path: inset(-200% -200% -200% -200%);
    animation:
        hs-griffin-rise .2s cubic-bezier(.3, .8, .25, 1.1) 1.75s backwards,
        hs-griffin-pulse 3.6s ease-in-out 2.3s infinite;
}

/* ---- horizon bloom ---- */
.hs-synthwave .horizon-bloom {
    position: absolute;
    left: -10%; right: -10%;
    bottom: 50%;
    height: 60px;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(234, 252, 255, .95) 0%,
        rgba(0, 234, 255, .55) 14%,
        rgba(0, 234, 255, .15) 40%,
        rgba(0, 234, 255, 0)   70%);
    transform: translateY(50%);
    filter: blur(2px);
    z-index: 3;
    pointer-events: none;
}

/* ---- horizon line ---- */
.hs-synthwave .horizon {
    position: absolute;
    left: 0; right: 0;
    bottom: 50%;
    height: 2px;
    background: var(--hs-hot);
    box-shadow:
        0 0 4px var(--hs-hot),
        0 0 10px var(--hs-cyan),
        0 0 28px var(--hs-cyan),
        0 0 60px var(--hs-cyan),
        0 0 120px rgba(0, 234, 255, .5);
    z-index: 4;
    transform-origin: 50% 50%;
}

/* ---- 3D laser grid ---- */
.hs-synthwave .grid-stage {
    position: absolute;
    left: -30%; right: -30%;
    bottom: 0;
    height: 50%;
    perspective: 320px;
    perspective-origin: 50% 0%;
    z-index: 3;
}
.hs-synthwave .grid {
    --cell: clamp(44px, 7vw, 110px);
    position: absolute; inset: 0;
    transform-origin: 50% 0%;
    transform: rotateX(64deg);
    background-image:
        linear-gradient(90deg,
            rgba(0, 234, 255, 0) 0,
            rgba(0, 234, 255, 0) calc(100% - 2px),
            var(--hs-cyan) calc(100% - 2px),
            var(--hs-cyan) 100%),
        linear-gradient(0deg,
            rgba(0, 234, 255, 0) 0,
            rgba(0, 234, 255, 0) calc(100% - 2px),
            var(--hs-cyan) calc(100% - 2px),
            var(--hs-cyan) 100%);
    background-size: var(--cell) var(--cell), var(--cell) var(--cell);
    filter:
        drop-shadow(0 0 3px var(--hs-cyan))
        drop-shadow(0 0 10px rgba(0, 234, 255, .5));
    animation: hs-sw-scroll 2.6s linear infinite;
}
@keyframes hs-sw-scroll {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 var(--cell), 0 var(--cell); }
}
.hs-synthwave .grid-stage::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        #020814 0%,
        rgba(2, 8, 20, .7) 8%,
        transparent 22%,
        transparent 100%);
    z-index: 5;
    pointer-events: none;
}
.hs-synthwave .grid-stage::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        #020814 0%, transparent 10%, transparent 90%, #020814 100%);
    z-index: 5;
    pointer-events: none;
}

/* ---- brand badge floating above horizon ---- */
.hs-synthwave .brand-badge {
    position: absolute;
    left: 50%;
    bottom: 72%;
    transform: translateX(-50%);
    z-index: 5;
    text-align: center;
    pointer-events: none;
    width: max-content;
}
.hs-synthwave .brand-name {
    font-family: "Vonca", "Impact", "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 5vw, 58px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hs-hot);
    text-shadow:
        0 0 6px var(--hs-cyan),
        0 0 16px var(--hs-cyan),
        0 0 30px var(--hs-cyan),
        0 0 60px rgba(0,234,255,.5);
    white-space: nowrap;
}
.hs-synthwave .brand-tagline {
    margin-top: 14px;
    font-family: "Vonca", "Impact", "Bebas Neue", "Arial Narrow Bold", "Arial Black", sans-serif;
    font-size: clamp(12px, 1.8vw, 22px);
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(207, 233, 247, .78);
    text-shadow: 0 0 4px rgba(0, 234, 255, .35);
    text-align: justify;
    text-align-last: justify;
}
.hs-synthwave .brand-tagline .tag-accent {
    color: var(--hs-hot);
    font-weight: 700;
    text-shadow:
        0 0 4px var(--hs-cyan),
        0 0 12px var(--hs-cyan),
        0 0 26px rgba(0, 234, 255, .5);
}
/* ---- Ophiuchus brand sigil (sits on the horizon, between the griffins) ---- */
.hs-synthwave .brand-sigil {
    position: absolute;
    left: 50%;
    bottom: calc(50% + 8px);
    transform: translateX(-50%);
    width: clamp(60px, 9vw, 110px);
    aspect-ratio: 401.71 / 399.33;
    z-index: 5;
    color: var(--hs-hot);
    pointer-events: none;
    /* Stacked drop-shadows mirror the wordmark text-shadow on .brand-name */
    filter:
        drop-shadow(0 0 6px var(--hs-cyan))
        drop-shadow(0 0 16px var(--hs-cyan))
        drop-shadow(0 0 30px var(--hs-cyan))
        drop-shadow(0 0 60px rgba(0, 234, 255, .5));
}
.hs-synthwave .brand-sigil svg { width: 100%; height: 100%; display: block; }
/* ---- grid-nav service cards ---- */
.hs-synthwave .grid-nav {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(16px, 2.4vw, 36px);
    font-family: "Courier New", ui-monospace, monospace;
    letter-spacing: .25em;
    text-transform: uppercase;
    width: 88%;
    max-width: 920px;
}

.hs-synthwave .service {
    position: relative;
    flex: 1 1 0;
    min-width: 140px;
    max-width: 260px;
    border: 1px solid rgba(255, 255, 255, .5);
    background:
        linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)),
        rgba(4, 12, 28, .7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 14px 18px;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow .35s ease, border-color .25s ease;
}
/* On hover the flux-ring ::before (declared in mega-menu.css as part of the
   matrix-portal family) takes over as the outline — border goes transparent. */
.hs-synthwave .service.hover-matrix {
    border-color: transparent;
    box-shadow: 0 0 32px rgba(0, 234, 255, .4);
}
.hs-synthwave .service:focus-visible { outline: 2px solid var(--hs-cyan); outline-offset: 3px; }

.hs-synthwave .service-label {
    display: block;
    position: relative;
    z-index: 2;
    text-align: center;
    color: rgba(216, 236, 255, .82);
    font-family: "Vonca", "Impact", "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 2vw, 22px);
    letter-spacing: .14em;
    text-shadow: 0 0 4px rgba(0, 234, 255, .25);
    transition: opacity .12s ease-out;
}

/* Matrix-rain hover — mega-menu.js injects a <canvas class="btn-matrix-canvas">
   child into each .service and toggles .hover-matrix on mouseenter/leave
   (same pattern as hamburger/cart). Label fades out, canvas fades in. */
.hs-synthwave .service.hover-matrix .service-label { opacity: 0; }

/* ---- Shadow Core signature ---- */
.hs-synthwave .footer-inner {
    position: relative;
    z-index: 6;
    padding: 28px 56px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-size: 18px;
    letter-spacing: .25em;
    text-transform: uppercase;
    background: linear-gradient(180deg, transparent 0%, rgba(2, 8, 20, .85) 100%);
}
.hs-synthwave .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* ---- Maker's tag (bottom-left) — mini heater shield + "Made in TARTARIA" ---- */
.hs-synthwave .maker-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: "Courier New", ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: clamp(10px, 1.1vw, 13px);
}
.hs-synthwave .maker-shield {
    width: 44px;
    height: 50px;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7px 7px 12px;
    background: rgba(10, 2, 20, .85);
    -webkit-clip-path: url(#hs-shield-clip);
            clip-path: url(#hs-shield-clip);
    flex-shrink: 0;
    /* Subtle cyan rim glow so the shield doesn't look like a void blob. */
    box-shadow: inset 0 0 0 1px rgba(0, 234, 255, .25);
}
.hs-synthwave .maker-shield svg {
    width: 30px;
    height: 30px;
    fill: var(--hs-hot);
    filter: drop-shadow(0 0 3px rgba(0, 234, 255, .5));
}
.hs-synthwave .maker-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.hs-synthwave .maker-lead {
    color: #7592b6;
    font-size: .82em;
}
.hs-synthwave .maker-place {
    color: var(--hs-hot);
    font-weight: 700;
    letter-spacing: .26em;
    font-size: 1.1em;
    text-shadow:
        0 0 4px var(--hs-cyan),
        0 0 12px var(--hs-cyan),
        0 0 26px rgba(0, 234, 255, .5);
}

.hs-synthwave .signature {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    background: rgba(4, 12, 28, .55);
    border: 1px solid rgba(0, 234, 255, .35);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    font-family: "Courier New", ui-monospace, monospace;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: clamp(10px, 1.1vw, 13px);
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}
.hs-synthwave .sig-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 234, 255, .05);
    border-bottom: 1px solid rgba(0, 234, 255, .2);
}

/* Mini 3D rotating cube — replaces the Mac traffic-light dots that made
   the signature read as window chrome. Cyan wireframe, slow Y-spin with a
   slight downward X-tilt so the top face occasionally peeks into view.
   Sells the "running daemon" feel for the corner stamp. */
.hs-synthwave .sig-cube {
    position: relative;
    display: inline-block;
    width: 18px; height: 18px;
    flex-shrink: 0;
    transform-style: preserve-3d;
    transform: rotateX(-22deg);
    animation: hs-cube-spin 6s linear infinite;
}
.hs-synthwave .sig-cube .face {
    position: absolute;
    inset: 0;
    background: rgba(0, 234, 255, .08);
    border: 1px solid rgba(0, 234, 255, .65);
    box-shadow: 0 0 6px rgba(0, 234, 255, .35);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hs-synthwave .sig-cube .f-front  { transform: translateZ(9px); }
.hs-synthwave .sig-cube .f-back   { transform: rotateY(180deg) translateZ(9px); }
.hs-synthwave .sig-cube .f-right  { transform: rotateY(90deg)  translateZ(9px); }
.hs-synthwave .sig-cube .f-left   { transform: rotateY(-90deg) translateZ(9px); }
.hs-synthwave .sig-cube .f-top    { transform: rotateX(90deg)  translateZ(9px); }
.hs-synthwave .sig-cube .f-bottom { transform: rotateX(-90deg) translateZ(9px); }

@keyframes hs-cube-spin {
    from { transform: rotateX(-22deg) rotateY(0deg); }
    to   { transform: rotateX(-22deg) rotateY(360deg); }
}
.hs-synthwave .sig-path {
    font-size: clamp(9px, .95vw, 11px);
    letter-spacing: .1em;
    text-transform: lowercase;
    color: #6f8fb3;
    transition: color .25s ease;
}
.hs-synthwave .sig-line {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px 12px 18px;
    perspective: 140px;
}
.hs-synthwave .signature:hover {
    border-color: transparent;
    box-shadow:
        0 0 16px rgba(0, 234, 255, .35),
        inset 0 0 12px rgba(0, 234, 255, .12);
    transform: translateY(-1px);
}
.hs-synthwave .signature:hover .sig-cube .face {
    background: rgba(0, 234, 255, .18);
    border-color: var(--hs-cyan);
    box-shadow: 0 0 10px rgba(0, 234, 255, .55);
}
.hs-synthwave .signature:hover .sig-path { color: var(--hs-cyan); }
.hs-synthwave .signature:hover .sig-core {
    text-shadow: 0 0 6px var(--hs-cyan), 0 0 18px var(--hs-cyan), 0 0 34px rgba(0, 234, 255, .55);
}
.hs-synthwave .signature:hover .sig-cursor { animation-duration: .4s; }

.hs-synthwave .sig-lead { color: #7592b6; }
.hs-synthwave .sig-dash { color: rgba(0, 234, 255, .7); letter-spacing: 0; }
.hs-synthwave .sig-core {
    font-family: "Courier New", ui-monospace, monospace;
    font-weight: 700;
    letter-spacing: .22em;
    font-size: clamp(14px, 1.5vw, 18px);
    color: var(--hs-hot);
    text-shadow:
        0 0 4px var(--hs-cyan),
        0 0 12px var(--hs-cyan),
        0 0 26px rgba(0, 234, 255, .5);
}
.hs-synthwave .sig-cursor {
    display: inline-block;
    width: 9px;
    height: clamp(14px, 1.7vw, 20px);
    background: var(--hs-hot);
    box-shadow: 0 0 6px var(--hs-cyan), 0 0 12px rgba(0, 234, 255, .6);
    animation: hs-sw-blink 1s steps(2, end) infinite;
    flex-shrink: 0;
}
@keyframes hs-sw-blink { 50% { opacity: 0; } }

/* Live status ticker — footer.js rotates the line every ~2.8s so the
   signature reads as running infrastructure instead of a static caption.
   Reduced-motion holds the first line. */
.hs-synthwave .sig-tick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 22px 10px;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: clamp(9px, .9vw, 11px);
    color: rgba(0, 234, 255, .75);
    text-transform: lowercase;
    letter-spacing: .08em;
    border-top: 1px dashed rgba(0, 234, 255, .15);
}
.hs-synthwave .tick-prompt {
    color: var(--hs-hot);
    font-weight: 700;
    text-shadow: 0 0 4px rgba(0, 234, 255, .55);
}
.hs-synthwave .tick-text {
    transition: opacity .25s ease;
}
.hs-synthwave .tick-text.is-swap { opacity: 0; }

/* ---- CRT scanlines (scoped to footer) ---- */
.hs-synthwave::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0, rgba(255,255,255,0) 2px,
        rgba(255,255,255,.022) 3px, rgba(255,255,255,0) 4px
    );
    pointer-events: none;
    z-index: 9;
}

/* ---- mobile: stack service cards ---- */
@media (max-width: 640px) {
    .hs-synthwave .grid-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hs-synthwave .service {
        flex: 0 0 auto;
        max-width: none;
    }
}

/* ============================================================
   REVEAL ANIMATION
   Staged IntersectionObserver entry — horizon powers on, grid
   comes into focus, griffins fly in from the edges, brand badge
   blooms, service cards stagger up, Shadow Core boots last.
   ============================================================ */

.hs-synthwave .sky-glow,
.hs-synthwave .stars,
.hs-synthwave .horizon-bloom,
.hs-synthwave .grid-stage,
.hs-synthwave .brand-badge,
.hs-synthwave .brand-sigil,
.hs-synthwave .footer-inner {
    opacity: 0;
    transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .3, 1.1), filter 1.1s ease;
}

/* Griffin container is always painted; the svg inside handles the reveal
   via a bottom-to-top mask wipe (see .griffin svg above). The delay on
   is-revealed is tuned to land just as the matrix stream is finishing its
   descent — "rain streams down, then he gets up fast from feet to head." */

.hs-synthwave .horizon {
    opacity: 0;
    transform: scaleX(0);
    transition: opacity .6s ease, transform 1.2s cubic-bezier(.19, 1, .22, 1);
}

.hs-synthwave .grid-stage { filter: blur(10px); }
.hs-synthwave .brand-badge { transform: translate(-50%, 24px); }
.hs-synthwave .brand-sigil { transform: translate(-50%, 24px); }
.hs-synthwave .footer-inner { transform: translateY(14px); }

.hs-synthwave .service {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .55s ease,
        transform .55s cubic-bezier(.2, .8, .3, 1.1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* --- revealed state --- */
.hs-synthwave.is-revealed .sky-glow    { opacity: 1; transition-delay: .05s; }
.hs-synthwave.is-revealed .stars       { opacity: 1; transition-delay: .1s; }
.hs-synthwave.is-revealed .horizon     { opacity: 1; transform: scaleX(1); transition-delay: .3s; }
.hs-synthwave.is-revealed .horizon-bloom { opacity: 1; transition-delay: .45s; }
.hs-synthwave.is-revealed .grid-stage  { opacity: 1; filter: blur(0); transition-delay: .5s; }
/* Rise animation keyframes — fast bottom-to-top clip-path wipe. */
@keyframes hs-griffin-rise {
    from {
        opacity: 0;
        -webkit-clip-path: inset(100% -200% -200% -200%);
                clip-path: inset(100% -200% -200% -200%);
    }
    to {
        opacity: 1;
        -webkit-clip-path: inset(-200% -200% -200% -200%);
                clip-path: inset(-200% -200% -200% -200%);
    }
}
.hs-synthwave.is-revealed .brand-badge { opacity: 1; transform: translate(-50%, 0); transition-delay: .95s; }
.hs-synthwave.is-revealed .brand-sigil { opacity: .7; transform: translate(-50%, 0); transition-delay: 1.05s; }

.hs-synthwave.is-revealed .service { opacity: 1; transform: translateY(0); }
.hs-synthwave.is-revealed .service:nth-child(1) { transition-delay: 1.15s, 1.15s, 0s, 0s, 0s; }
.hs-synthwave.is-revealed .service:nth-child(2) { transition-delay: 1.3s, 1.3s, 0s, 0s, 0s; }
.hs-synthwave.is-revealed .service:nth-child(3) { transition-delay: 1.45s, 1.45s, 0s, 0s, 0s; }

.hs-synthwave.is-revealed .footer-inner { opacity: 1; transform: translateY(0); transition-delay: 1.65s; }

/* accessibility — respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hs-synthwave .sky-glow,
    .hs-synthwave .stars,
    .hs-synthwave .horizon,
    .hs-synthwave .horizon-bloom,
    .hs-synthwave .grid-stage,
    .hs-synthwave .griffin,
    .hs-synthwave .brand-badge,
    .hs-synthwave .service,
    .hs-synthwave .footer-inner {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    /* Sigil keeps its drop-shadow glow — only opacity/transform are reset. */
    .hs-synthwave .brand-sigil {
        opacity: .7 !important;
        transition: none !important;
    }
    .hs-synthwave .griffin.right-side svg { transform: scaleX(-1) !important; }
    .hs-synthwave .brand-badge { transform: translateX(-50%) !important; }
    .hs-synthwave .brand-sigil { transform: translateX(-50%) !important; }
    .hs-synthwave .grid { animation: none !important; }
    .hs-synthwave .stars { animation: none !important; }
    .hs-synthwave .sig-cursor { animation: none !important; }
    .hs-synthwave .sig-cube { animation: none !important; }
    .hs-synthwave .griffin-storm { display: none !important; }
    .hs-synthwave.is-revealed .griffin svg { animation: none !important; }
}