/* ============================================================
   "Wow" animation layer (design preview, /preview/home).
   Loaded only when the layout receives $wowMode. Pure presentation:
   the page content is byte-identical to the live homepage.
   ============================================================ */

/* ---- Pre-hide the hero so the GSAP entrance starts clean.
       wow.js restores everything; if anything fails, .wow-fallback
       force-reveals, and reduced-motion users never hide at all. */
.wow-mode section:first-of-type h1,
.wow-mode section:first-of-type h1 ~ *,
.wow-mode section:first-of-type picture {
    opacity: 0;
}
.wow-fallback section:first-of-type h1,
.wow-fallback section:first-of-type h1 ~ *,
.wow-fallback section:first-of-type picture {
    opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
    .wow-mode section:first-of-type h1,
    .wow-mode section:first-of-type h1 ~ *,
    .wow-mode section:first-of-type picture {
        opacity: 1 !important;
    }
}
/* Phones (portrait, < md): the wow layer is disabled in JS, so make sure the
   hero is never left in its pre-hidden state — no JS-timing flash. */
@media (max-width: 767px) {
    .wow-mode section:first-of-type h1,
    .wow-mode section:first-of-type h1 ~ *,
    .wow-mode section:first-of-type picture {
        opacity: 1 !important;
    }
}

/* ---- Scroll progress bar (brand gradient, top of viewport) */
.wow-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #224685, #3b82f6 55%, #8b5cf6);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 9999;
    pointer-events: none;
}

/* ---- Three.js hero canvas sits behind the hero content */
.wow-hero { position: relative; overflow: hidden; }
.wow-hero > .container-page { position: relative; z-index: 1; }
.wow-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ---- Headline word-reveal wrappers. The padding/negative-margin pair
       keeps descenders (g, y, p) inside the mask instead of clipped. */
.wow-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}
.wow-w > span { display: inline-block; will-change: transform; }

/* ---- Section-heading character reveal (3D flip + focus pull) */
.wow-ch-wrap { perspective: 700px; }
.wow-cw { display: inline-block; white-space: pre; }
.wow-c  {
    display: inline-block;
    will-change: transform, filter, opacity;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
}

/* ---- One-time light sweep over a landed heading. Implemented as an
       overlay bar (NOT background-clip:text, which goes invisible when
       the per-character spans carry their own transforms). */
.wow-sweep { position: relative; }
.wow-sweep::after {
    content: "";
    position: absolute;
    top: -10%; bottom: -10%;
    left: -30%;
    width: 22%;
    background: linear-gradient(105deg, transparent,
                var(--wow-sweep-c, rgba(59, 130, 246, .18)), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: wow-sweep .9s ease-in-out forwards;
}
@keyframes wow-sweep {
    from { left: -30%; }
    to   { left: 115%; }
}

/* ---- 3D tilt cards: cursor-tracked glow via CSS vars set in JS */
.wow-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
}
.wow-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
                rgba(59, 130, 246, 0.10), transparent 65%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.wow-tilt:hover::after { opacity: 1; }

/* ---- Primary pill buttons get a sheen sweep on hover */
.wow-mode a.rounded-full {
    position: relative;
    overflow: hidden;
}
.wow-mode a.rounded-full::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -75%;
    width: 50%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
}
.wow-mode a.rounded-full:hover::before { left: 125%; }

/* ---- Drifting colour orbs in tinted bands (bolder than v1) */
.wow-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.wow-orb-host { position: relative; overflow: hidden; }
.wow-orb-host > .container-page { position: relative; z-index: 1; }

/* ---- Cursor spotlight across the navy bands */
.wow-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%),
                rgba(255, 255, 255, .09), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 0;
}
.wow-spot:hover::after { opacity: 1; }

/* ---- 1-2-3 journey line (decorative SVG behind the step numbers) */
.wow-steps-svg {
    position: absolute;
    left: 0; right: 0;
    top: -18px;
    width: 100%;
    height: 150px;
    pointer-events: none;
}

/* ---- Sticky header lift once the page is scrolled */
.wow-mode header { transition: box-shadow .3s ease; }
.wow-scrolled header { box-shadow: 0 6px 24px -12px rgba(15, 23, 42, .25); }

/* ============================================================
   Brand intro overlay (~3.9s), v4: PURE CSS animations.
   Everything animates transform/opacity only, which Chrome runs on
   the compositor thread: the intro keeps gliding at 60fps even while
   the main thread is blocked by image decoding / font swaps / layout
   (the cause of every stutter the JS-driven versions had).
   wow-intro.js just handles skip logic + cleanup on animationend.
   ============================================================ */
#wow-intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 120% at 50% 40%, #101b30 0%, #080e1c 55%, #02050c 100%);
    /* The real exit + a late failsafe: either way it always leaves. */
    animation: wow-intro-fade .6s ease 4.9s forwards,
               wow-intro-bail .4s ease 7.2s forwards;
}
.wow-intro-skip { display: none !important; }
@keyframes wow-intro-fade {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes wow-intro-bail {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
    #wow-intro { display: none !important; }
}
.wow-intro-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The S: zooms from nowhere to the camera, holds, then flies past. */
.wow-intro-s {
    height: 220px;
    width: auto;
    opacity: 0;
    filter: drop-shadow(0 0 42px rgba(96, 165, 250, .5)); /* constant: never animated */
    will-change: transform, opacity;
    position: relative;
    z-index: 1;
    animation: wow-intro-s 5.2s both;
}
@keyframes wow-intro-s {
    0%   { transform: scale(.05); opacity: 0; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
    33%  { transform: scale(1);   opacity: 1; animation-timing-function: linear; }
    81%  { transform: scale(1);   opacity: 1; animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
    100% { transform: scale(2.4); opacity: 0; }
}

/* The word column: constant-speed rise, fading in low and out high.
   Keyframe transforms are spaced linearly so velocity never changes. */
.wow-intro-words {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.wow-intro-words span {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    opacity: 0;
    will-change: transform, opacity;
    white-space: nowrap;
    text-shadow: 0 2px 28px rgba(18, 37, 65, .85);
    animation: wow-intro-word 2.85s linear both;
}
.wow-intro-words span:nth-child(1) { animation-delay: 0.50s; }
.wow-intro-words span:nth-child(2) { animation-delay: 0.86s; }
.wow-intro-words span:nth-child(3) { animation-delay: 1.22s; }
.wow-intro-words span:nth-child(4) { animation-delay: 1.58s; }
.wow-intro-words span:nth-child(5) { animation-delay: 1.94s; }
@keyframes wow-intro-word {
    0%   { transform: translate(-50%, 32vh);    opacity: 0; }
    14%  { transform: translate(-50%, 23.04vh); opacity: 1; }
    86%  { transform: translate(-50%, -23.04vh); opacity: 1; }
    100% { transform: translate(-50%, -32vh);   opacity: 0; }
}
@media (max-width: 640px) {
    .wow-intro-s { height: 150px; }
    .wow-intro-words span { font-size: 2rem; }
}


/* ---- Night sky stars: three static box-shadow fields. Only each
       LAYER's opacity twinkles (compositor-cheap); the stars never
       individually animate. */
.wow-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.wow-stars i {
    position: absolute;
    top: 0; left: 0;
    border-radius: 50%;
    background: transparent;
}
.wow-stars i:nth-child(1) {
    width: 2.5px; height: 2.5px;
    box-shadow: 71vw 50vh #ffffff, 83vw 6vh #dbeafe, 83vw 71vh #bfdbfe, 8vw 82vh #ffffff, 27vw 56vh #dbeafe, 24vw 24vh #bfdbfe, 99vw 56vh #ffffff, 87vw 9vh #ffffff, 49vw 40vh #bfdbfe, 46vw 36vh #ffffff, 59vw 38vh #dbeafe, 16vw 87vh #ffffff, 52vw 83vh #dbeafe, 85vw 76vh #bfdbfe, 25vw 13vh #bfdbfe, 13vw 60vh #ffffff, 69vw 50vh #bfdbfe, 77vw 87vh #bfdbfe, 6vw 86vh #bfdbfe, 58vw 77vh #bfdbfe, 79vw 61vh #bfdbfe, 6vw 25vh #bfdbfe, 9vw 59vh #dbeafe, 54vw 92vh #ffffff, 58vw 73vh #bfdbfe, 65vw 22vh #ffffff, 95vw 75vh #ffffff, 84vw 18vh #dbeafe, 43vw 93vh #bfdbfe, 58vw 100vh #bfdbfe, 33vw 65vh #ffffff, 82vw 100vh #ffffff, 89vw 16vh #ffffff, 15vw 13vh #bfdbfe, 77vw 78vh #dbeafe, 60vw 95vh #ffffff, 49vw 0vh #bfdbfe, 90vw 10vh #dbeafe, 94vw 69vh #dbeafe, 66vw 90vh #bfdbfe, 94vw 79vh #dbeafe, 86vw 42vh #bfdbfe, 39vw 75vh #dbeafe, 87vw 64vh #dbeafe, 4vw 85vh #bfdbfe, 47vw 14vh #bfdbfe, 22vw 81vh #bfdbfe, 42vw 93vh #bfdbfe, 80vw 5vh #dbeafe, 31vw 29vh #dbeafe, 98vw 74vh #dbeafe, 62vw 87vh #bfdbfe, 53vw 18vh #ffffff, 55vw 57vh #bfdbfe, 49vw 61vh #dbeafe, 67vw 20vh #dbeafe, 42vw 6vh #dbeafe, 11vw 14vh #dbeafe, 62vw 89vh #ffffff, 22vw 38vh #ffffff, 98vw 93vh #ffffff, 26vw 14vh #ffffff, 9vw 87vh #dbeafe, 21vw 8vh #ffffff, 20vw 22vh #dbeafe, 73vw 9vh #dbeafe, 34vw 2vh #ffffff, 95vw 30vh #bfdbfe, 36vw 3vh #dbeafe, 70vw 44vh #dbeafe;
    animation: wow-twinkle 3.2s ease-in-out infinite alternate;
}
.wow-stars i:nth-child(2) {
    width: 1.8px; height: 1.8px;
    box-shadow: 86vw 60vh #ddd6fe, 76vw 8vh #bfdbfe, 41vw 29vh #e2e8f0, 83vw 85vh #bfdbfe, 81vw 51vh #ddd6fe, 11vw 48vh #bfdbfe, 14vw 55vh #e2e8f0, 89vw 6vh #bfdbfe, 49vw 78vh #e2e8f0, 29vw 5vh #ddd6fe, 21vw 33vh #ffffff, 75vw 92vh #ddd6fe, 33vw 12vh #e2e8f0, 90vw 39vh #ffffff, 66vw 68vh #bfdbfe, 40vw 12vh #e2e8f0, 93vw 4vh #ffffff, 50vw 53vh #e2e8f0, 90vw 32vh #bfdbfe, 61vw 8vh #e2e8f0, 88vw 76vh #e2e8f0, 87vw 55vh #ddd6fe, 62vw 22vh #bfdbfe, 38vw 86vh #e2e8f0, 20vw 52vh #bfdbfe, 93vw 13vh #ddd6fe, 0vw 33vh #ddd6fe, 12vw 55vh #e2e8f0, 80vw 71vh #ffffff, 21vw 64vh #e2e8f0, 28vw 64vh #e2e8f0, 97vw 67vh #e2e8f0, 96vw 14vh #e2e8f0, 59vw 63vh #bfdbfe, 97vw 80vh #ddd6fe, 94vw 9vh #ffffff, 70vw 80vh #ddd6fe, 44vw 46vh #ffffff, 47vw 95vh #ffffff, 61vw 96vh #bfdbfe, 42vw 9vh #bfdbfe, 8vw 87vh #ddd6fe, 72vw 5vh #ffffff, 48vw 39vh #ffffff, 42vw 5vh #ffffff, 73vw 67vh #e2e8f0, 70vw 58vh #ddd6fe, 67vw 97vh #e2e8f0, 30vw 85vh #ffffff, 52vw 74vh #ffffff, 62vw 6vh #ddd6fe, 28vw 73vh #ddd6fe, 22vw 18vh #bfdbfe, 33vw 27vh #bfdbfe, 86vw 55vh #ffffff, 42vw 20vh #e2e8f0, 3vw 64vh #ffffff, 91vw 0vh #ffffff, 12vw 54vh #bfdbfe, 69vw 58vh #ddd6fe, 97vw 42vh #ffffff, 55vw 65vh #ffffff, 23vw 45vh #e2e8f0, 38vw 29vh #bfdbfe, 41vw 81vh #ffffff, 63vw 19vh #ffffff, 8vw 17vh #ffffff, 79vw 79vh #ffffff, 89vw 17vh #ffffff, 1vw 82vh #ffffff, 48vw 65vh #ddd6fe, 90vw 31vh #ffffff, 97vw 92vh #ffffff, 30vw 98vh #bfdbfe, 98vw 86vh #e2e8f0, 62vw 18vh #ffffff, 58vw 83vh #ddd6fe, 9vw 59vh #bfdbfe, 90vw 7vh #bfdbfe, 84vw 33vh #ddd6fe, 26vw 76vh #ffffff, 44vw 18vh #ddd6fe, 79vw 96vh #ffffff, 0vw 54vh #e2e8f0, 100vw 10vh #ffffff, 70vw 13vh #e2e8f0, 39vw 15vh #e2e8f0, 89vw 76vh #e2e8f0, 78vw 83vh #e2e8f0, 58vw 95vh #e2e8f0, 13vw 0vh #ddd6fe, 74vw 7vh #ddd6fe, 73vw 87vh #bfdbfe, 40vw 28vh #e2e8f0, 65vw 40vh #e2e8f0, 55vw 29vh #ffffff, 52vw 97vh #ffffff, 23vw 65vh #ddd6fe, 92vw 58vh #bfdbfe, 22vw 40vh #ddd6fe, 49vw 31vh #ffffff, 94vw 16vh #e2e8f0, 2vw 81vh #ddd6fe, 70vw 15vh #ddd6fe, 22vw 6vh #e2e8f0, 67vw 89vh #ddd6fe, 71vw 57vh #e2e8f0, 30vw 26vh #bfdbfe, 83vw 9vh #ffffff, 6vw 73vh #ddd6fe, 87vw 41vh #bfdbfe, 76vw 59vh #ddd6fe, 16vw 24vh #ddd6fe, 94vw 61vh #ffffff, 64vw 79vh #ddd6fe, 86vw 51vh #ffffff, 72vw 1vh #bfdbfe, 70vw 100vh #e2e8f0, 57vw 85vh #ddd6fe, 39vw 15vh #ffffff, 9vw 96vh #bfdbfe, 67vw 41vh #e2e8f0, 23vw 92vh #ffffff, 91vw 56vh #e2e8f0, 50vw 80vh #ffffff, 42vw 7vh #ddd6fe, 21vw 41vh #e2e8f0, 91vw 100vh #ddd6fe, 22vw 73vh #ffffff, 37vw 37vh #e2e8f0;
    animation: wow-twinkle 4.5s ease-in-out .8s infinite alternate;
}
.wow-stars i:nth-child(3) {
    width: 1px; height: 1px;
    box-shadow: 56vw 36vh #cbd5e1, 50vw 72vh #cbd5e1, 51vw 56vh #ffffff, 61vw 77vh #cbd5e1, 71vw 27vh #ffffff, 93vw 87vh #cbd5e1, 54vw 54vh #ffffff, 66vw 56vh #cbd5e1, 64vw 77vh #ffffff, 85vw 33vh #e2e8f0, 34vw 44vh #ffffff, 10vw 49vh #cbd5e1, 40vw 74vh #ffffff, 2vw 79vh #cbd5e1, 95vw 49vh #cbd5e1, 78vw 18vh #ffffff, 36vw 37vh #cbd5e1, 47vw 98vh #ffffff, 38vw 24vh #e2e8f0, 44vw 77vh #ffffff, 19vw 86vh #ffffff, 3vw 9vh #ffffff, 60vw 2vh #e2e8f0, 81vw 48vh #ffffff, 96vw 28vh #cbd5e1, 84vw 59vh #cbd5e1, 93vw 23vh #e2e8f0, 85vw 37vh #ffffff, 84vw 23vh #ffffff, 4vw 32vh #ffffff, 36vw 39vh #cbd5e1, 68vw 53vh #cbd5e1, 17vw 45vh #ffffff, 75vw 31vh #cbd5e1, 27vw 46vh #ffffff, 49vw 74vh #e2e8f0, 24vw 33vh #cbd5e1, 99vw 0vh #ffffff, 97vw 91vh #cbd5e1, 85vw 81vh #cbd5e1, 77vw 81vh #e2e8f0, 26vw 77vh #e2e8f0, 75vw 69vh #ffffff, 46vw 70vh #ffffff, 82vw 84vh #cbd5e1, 20vw 58vh #cbd5e1, 40vw 63vh #ffffff, 86vw 81vh #ffffff, 48vw 74vh #cbd5e1, 61vw 47vh #ffffff, 43vw 65vh #cbd5e1, 86vw 56vh #ffffff, 36vw 26vh #cbd5e1, 2vw 18vh #e2e8f0, 51vw 91vh #cbd5e1, 46vw 20vh #ffffff, 58vw 55vh #ffffff, 61vw 95vh #ffffff, 0vw 57vh #cbd5e1, 48vw 58vh #ffffff, 8vw 96vh #cbd5e1, 29vw 73vh #ffffff, 89vw 4vh #ffffff, 73vw 65vh #cbd5e1, 63vw 14vh #e2e8f0, 23vw 100vh #cbd5e1, 62vw 36vh #e2e8f0, 22vw 13vh #cbd5e1, 26vw 43vh #e2e8f0, 41vw 62vh #cbd5e1, 5vw 33vh #e2e8f0, 64vw 74vh #cbd5e1, 13vw 63vh #ffffff, 79vw 70vh #ffffff, 99vw 84vh #ffffff, 85vw 37vh #cbd5e1, 43vw 94vh #e2e8f0, 61vw 49vh #cbd5e1, 61vw 16vh #ffffff, 28vw 95vh #ffffff, 57vw 65vh #cbd5e1, 28vw 5vh #cbd5e1, 45vw 42vh #e2e8f0, 16vw 11vh #ffffff, 28vw 88vh #e2e8f0, 48vw 31vh #ffffff, 15vw 18vh #e2e8f0, 89vw 98vh #e2e8f0, 38vw 57vh #cbd5e1, 61vw 66vh #e2e8f0, 91vw 62vh #cbd5e1, 65vw 61vh #ffffff, 56vw 69vh #ffffff, 99vw 38vh #ffffff, 94vw 52vh #e2e8f0, 83vw 29vh #ffffff, 77vw 94vh #ffffff, 70vw 91vh #ffffff, 94vw 61vh #ffffff, 76vw 66vh #ffffff, 12vw 36vh #cbd5e1, 64vw 60vh #cbd5e1, 56vw 14vh #e2e8f0, 0vw 95vh #cbd5e1, 21vw 36vh #cbd5e1, 30vw 83vh #ffffff, 24vw 81vh #cbd5e1, 98vw 1vh #cbd5e1, 39vw 57vh #cbd5e1, 97vw 51vh #ffffff, 32vw 31vh #e2e8f0, 32vw 12vh #e2e8f0, 31vw 52vh #ffffff, 90vw 11vh #cbd5e1, 63vw 94vh #e2e8f0, 92vw 7vh #ffffff, 5vw 40vh #cbd5e1, 63vw 72vh #e2e8f0, 67vw 24vh #e2e8f0, 6vw 59vh #ffffff, 22vw 16vh #e2e8f0, 2vw 24vh #e2e8f0, 17vw 96vh #cbd5e1, 29vw 63vh #e2e8f0, 60vw 20vh #cbd5e1, 48vw 68vh #e2e8f0, 95vw 78vh #ffffff, 13vw 15vh #e2e8f0, 14vw 43vh #cbd5e1, 49vw 19vh #cbd5e1, 94vw 31vh #e2e8f0, 92vw 42vh #ffffff, 70vw 22vh #cbd5e1, 80vw 9vh #e2e8f0, 81vw 95vh #cbd5e1, 47vw 65vh #ffffff, 59vw 83vh #e2e8f0, 67vw 75vh #cbd5e1, 15vw 8vh #cbd5e1, 51vw 60vh #cbd5e1, 13vw 99vh #ffffff, 48vw 22vh #ffffff, 50vw 47vh #ffffff, 24vw 91vh #ffffff, 44vw 40vh #cbd5e1, 7vw 26vh #ffffff, 71vw 95vh #ffffff, 9vw 64vh #ffffff, 90vw 36vh #ffffff, 4vw 17vh #cbd5e1, 40vw 3vh #ffffff, 90vw 3vh #e2e8f0, 89vw 33vh #e2e8f0, 91vw 41vh #ffffff, 17vw 41vh #ffffff, 95vw 46vh #cbd5e1, 55vw 24vh #cbd5e1, 31vw 55vh #e2e8f0, 67vw 41vh #cbd5e1, 6vw 4vh #cbd5e1, 7vw 74vh #cbd5e1, 94vw 31vh #e2e8f0, 57vw 69vh #cbd5e1, 27vw 91vh #cbd5e1, 41vw 66vh #cbd5e1, 42vw 86vh #cbd5e1, 57vw 48vh #ffffff, 15vw 23vh #e2e8f0, 4vw 21vh #cbd5e1, 1vw 10vh #cbd5e1, 63vw 29vh #ffffff, 29vw 76vh #e2e8f0, 10vw 31vh #cbd5e1, 15vw 1vh #e2e8f0, 66vw 19vh #ffffff, 0vw 67vh #cbd5e1, 5vw 48vh #ffffff, 55vw 3vh #cbd5e1, 24vw 77vh #cbd5e1, 98vw 77vh #e2e8f0, 90vw 86vh #e2e8f0, 6vw 55vh #e2e8f0, 30vw 70vh #e2e8f0, 5vw 26vh #cbd5e1, 0vw 79vh #e2e8f0, 1vw 8vh #cbd5e1, 88vw 66vh #ffffff, 35vw 83vh #cbd5e1, 11vw 80vh #ffffff, 88vw 79vh #cbd5e1, 37vw 64vh #ffffff, 100vw 65vh #cbd5e1, 8vw 24vh #ffffff, 72vw 12vh #e2e8f0, 80vw 49vh #cbd5e1, 76vw 64vh #e2e8f0, 34vw 66vh #cbd5e1, 30vw 89vh #cbd5e1, 36vw 25vh #ffffff, 47vw 46vh #cbd5e1, 73vw 96vh #e2e8f0, 43vw 73vh #ffffff, 7vw 69vh #ffffff, 44vw 11vh #ffffff, 1vw 9vh #e2e8f0, 29vw 30vh #cbd5e1, 78vw 53vh #e2e8f0, 72vw 56vh #cbd5e1, 44vw 42vh #cbd5e1, 77vw 74vh #cbd5e1, 1vw 76vh #cbd5e1, 1vw 55vh #ffffff, 0vw 93vh #e2e8f0, 59vw 51vh #e2e8f0, 86vw 51vh #ffffff, 74vw 9vh #e2e8f0, 75vw 8vh #cbd5e1, 93vw 55vh #ffffff, 65vw 87vh #ffffff, 24vw 25vh #e2e8f0;
    animation: wow-twinkle 5.5s ease-in-out 1.6s infinite alternate;
}
@keyframes wow-twinkle {
    from { opacity: .45; }
    to   { opacity: 1; }
}

/* ---- Fireworks: looping CSS particle bursts behind the S. Each burst
       is 18 sparks in two rings flung outward on transform/opacity only,
       so they live on the compositor with everything else. Nine burst
       points at different scales keep the sky constantly alive. */
.wow-intro-fireworks {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.wow-fw { position: absolute; width: 6px; height: 6px; }
.wow-fw-0 { left: 12%; top: 20%; --fwd: 0s;    transform: scale(1.65);  }
.wow-fw-1 { left: 84%; top: 26%; --fwd: .45s;  transform: scale(2.33); }
.wow-fw-2 { left: 22%; top: 62%; --fwd: .9s;   transform: scale(1.2);   }
.wow-fw-3 { left: 74%; top: 70%; --fwd: 1.3s;  transform: scale(1.88); }
.wow-fw-4 { left: 50%; top: 12%; --fwd: 1.7s;  transform: scale(2.1);  }
.wow-fw-5 { left: 8%;  top: 44%; --fwd: 2.05s; transform: scale(0.98);  }
.wow-fw-6 { left: 90%; top: 50%; --fwd: 2.4s;  transform: scale(1.5);    }
.wow-fw-7 { left: 34%; top: 86%; --fwd: 2.75s; transform: scale(1.8);  }
.wow-fw-8  { left: 64%; top: 16%; --fwd: 3.1s;  transform: scale(1.35);   }
.wow-fw-9  { left: 18%; top: 38%; --fwd: .25s;  transform: scale(2.03); }
.wow-fw-10 { left: 88%; top: 12%; --fwd: .65s;  transform: scale(1.12);  }
.wow-fw-11 { left: 40%; top: 26%; --fwd: 1.1s;  transform: scale(1.58); }
.wow-fw-12 { left: 60%; top: 82%; --fwd: 1.5s;  transform: scale(2.17); }
.wow-fw-13 { left: 6%;  top: 78%; --fwd: 1.9s;  transform: scale(1.5);    }
.wow-fw-14 { left: 94%; top: 74%; --fwd: 2.25s; transform: scale(1.05);   }
.wow-fw-15 { left: 30%; top: 8%;  --fwd: 2.6s;  transform: scale(1.88); }
.wow-fw-16 { left: 80%; top: 44%; --fwd: 2.95s; transform: scale(2.25);  }
.wow-fw-17 { left: 14%; top: 90%; --fwd: 3.3s;  transform: scale(1.65);  }
.wow-fw span {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    will-change: transform, opacity;
    animation: wow-fw-dot 2.2s linear var(--fwd, 0s) infinite;
}
/* Spark sizes: a mix of small, medium and big embers */
.wow-fw span:nth-child(2n)  { width: 4px;  height: 4px;  }
.wow-fw span:nth-child(5n)  { width: 9px;  height: 9px;  }
.wow-fw span:nth-child(7n)  { width: 12px; height: 12px; }
/* Spark colours: the full celebration palette */
.wow-fw span:nth-child(6n+1) { background: #fbbf24; } /* gold */
.wow-fw span:nth-child(6n+2) { background: #60a5fa; } /* sky */
.wow-fw span:nth-child(6n+3) { background: #f472b6; } /* pink */
.wow-fw span:nth-child(6n+4) { background: #a78bfa; } /* violet */
.wow-fw span:nth-child(6n+5) { background: #34d399; } /* emerald */
.wow-fw span:nth-child(6n)   { background: #fb923c; } /* orange */
.wow-fw span:nth-child(9n)   { background: #fff;    } /* white flashes */
.wow-fw span:nth-child(1) { --dx: 70px; --dy: 0px; }
.wow-fw span:nth-child(2) { --dx: 118px; --dy: 43px; }
.wow-fw span:nth-child(3) { --dx: 54px; --dy: 45px; }
.wow-fw span:nth-child(4) { --dx: 63px; --dy: 109px; }
.wow-fw span:nth-child(5) { --dx: 12px; --dy: 69px; }
.wow-fw span:nth-child(6) { --dx: -22px; --dy: 124px; }
.wow-fw span:nth-child(7) { --dx: -35px; --dy: 61px; }
.wow-fw span:nth-child(8) { --dx: -97px; --dy: 81px; }
.wow-fw span:nth-child(9) { --dx: -66px; --dy: 24px; }
.wow-fw span:nth-child(10) { --dx: -126px; --dy: 0px; }
.wow-fw span:nth-child(11) { --dx: -66px; --dy: -24px; }
.wow-fw span:nth-child(12) { --dx: -97px; --dy: -81px; }
.wow-fw span:nth-child(13) { --dx: -35px; --dy: -61px; }
.wow-fw span:nth-child(14) { --dx: -22px; --dy: -124px; }
.wow-fw span:nth-child(15) { --dx: 12px; --dy: -69px; }
.wow-fw span:nth-child(16) { --dx: 63px; --dy: -109px; }
.wow-fw span:nth-child(17) { --dx: 54px; --dy: -45px; }
.wow-fw span:nth-child(18) { --dx: 118px; --dy: -43px; }
@keyframes wow-fw-dot {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    4%   { opacity: 1; }
    42%  { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
    100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}

/* ---- "Celebrating 20 Years of Excellence": fades up from the deep
       background halfway through and holds beneath the show. */
.wow-intro-years {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    color: #bfdbfe;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    will-change: transform, opacity;
    text-shadow: 0 0 24px rgba(96, 165, 250, .6);
    animation: wow-intro-years 1.2s cubic-bezier(.22, .61, .36, 1) 0.9s forwards;
}
@keyframes wow-intro-years {
    from { opacity: 0; transform: translate(-50%, 34vh) scale(.55); }
    to   { opacity: 1; transform: translate(-50%, 34vh) scale(1); }
}
@media (max-width: 640px) {
    .wow-intro-years {
        font-size: 1.15rem;
        letter-spacing: .1em;
        /* Let the line wrap + centre instead of running off both edges and
           getting clipped. A fixed width (not max-width) is needed because
           the element is absolutely positioned with left:50% + translateX. */
        white-space: normal;
        width: 86vw;
        text-align: center;
        line-height: 1.35;
    }
}