/* =========================================================
   HERO
========================================================= */

.experience {
    min-height: calc(100vh - 92px);

    padding: 30px 4vw 50px;

    display: grid;
    grid-template-columns: 37% 63%;
    align-items: center;
}

.intro {
    position: relative;
    z-index: 5;
}

.intro h1 {
    margin: 28px 0 0;

    font-size: clamp(80px, 7.5vw, 138px);
    line-height: .77;
    letter-spacing: -.085em;
}

.intro h1 em {
    color: var(--orange);
    font-style: normal;
}

.intro p {
    margin: 40px 0 30px;

    font-size: 18px;
    line-height: 1.5;
}


/* =========================================================
   PRIMARY CTA
========================================================= */

.primary {
    width: 240px;
    height: 60px;

    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 0;

    background: var(--black);
    color: var(--white);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;

    transition:
        background .25s ease,
        transform .25s ease;
}

.primary b {
    color: var(--orange);
    font-size: 21px;
}

.primary:hover {
    background: var(--red);
    transform: translateY(-2px);
}

.intro-hint {
    margin-top: 14px;

    color: #999;

    font: 700 7px monospace;
    letter-spacing: 2px;
}


/* =========================================================
   HERO STATS
========================================================= */

.hero-stats {
    display: flex;
    gap: 26px;

    margin-top: 54px;
}

.hero-stats > div {
    min-width: 76px;

    padding-right: 25px;

    border-right: 1px solid var(--line);
}

.hero-stats > div:last-child {
    border-right: 0;
}

.hero-stats strong {
    display: block;

    font-size: 26px;
    line-height: 1;
}

.hero-stats span {
    display: block;

    margin-top: 6px;

    color: #888;

    font: 700 7px monospace;
    letter-spacing: 2px;
}

.hero-principle {
    margin-top: 18px;

    color: #999;

    font: 700 7px monospace;
    letter-spacing: 1.6px;
}

.hero-principle i {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 7px;

    border-radius: 50%;

    background: var(--orange);
}


/* =========================================================
   SUNSHINE UNIVERSE
========================================================= */

.universe {
    position: relative;
    min-width: 0;
}

.universe-label {
    display: flex;
    justify-content: space-between;

    margin: 0 7% 10px;

    color: #999;

    font: 700 7px monospace;
    letter-spacing: 2px;
}

#stage {
    position: relative;

    width: 100%;
    height: min(78vh, 780px);
    min-height: 600px;

    overflow: hidden;
}

#world {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}


/* =========================================================
   16 YEARS / ORBITS
========================================================= */

.halo {
    fill: url(#haloGradient);
}

.year-orbit {
    fill: none;

    stroke: #E8CFC2;
    stroke-width: 1;

    opacity: .42;
}

.connection {
    stroke: url(#rayGradient);
    stroke-width: 1.2;

    opacity: .36;
}

.particle {
    fill: var(--orange);
    opacity: .25;
}


/* =========================================================
   CENTRAL SUN
========================================================= */

.sun-glow {
    fill: var(--orange);

    opacity: .13;

    filter: url(#softGlow);

    transform-box: fill-box;
    transform-origin: center;

    animation: sunshineBreathe 5s ease-in-out infinite;
}

.sun-core {
    fill: url(#sunGradient);

    transform-box: fill-box;
    transform-origin: center;

    filter:
        drop-shadow(
            0 15px 38px
            rgba(208, 51, 43, .25)
        );
}

.sun-kicker,
.sun-title,
.sun-count {
    fill: var(--white);
    text-anchor: middle;
}

.sun-kicker {
    font: 700 8px monospace;
    letter-spacing: 4px;
}

.sun-title {
    font: 900 25px Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
}

.sun-divider {
    stroke: var(--white);
    opacity: .5;
}

.sun-count {
    font: 700 8px monospace;
    letter-spacing: 2px;
}


/* =========================================================
   PEOPLE / LIGHTS
========================================================= */

.real-person {
    opacity: 0;

    cursor: default;

    animation: personAppear .9s ease forwards;
}

.person-dot {
    fill: var(--orange);
}

.person-halo {
    fill: var(--orange);
    opacity: .13;
}

.person-name {
    fill: #171717;

    font:
        700 11px
        Arial,
        Helvetica,
        sans-serif;
}

.person-number {
    fill: #999;

    font: 700 6px monospace;
    letter-spacing: 1px;
}


/* Newly added person */

.real-person.priority .person-dot {
    fill: var(--red);
}

.real-person.priority .person-halo {
    opacity: .38;

    transform-box: fill-box;
    transform-origin: center;

    animation:
        priorityPulse
        1s ease-in-out
        infinite;
}

.real-person.priority .person-name {
    fill: var(--red);

    font-size: 14px;
    font-weight: 900;
}


/* =========================================================
   COUNTER INSIDE VISUALIZATION
========================================================= */

.stage-note {
    position: absolute;

    right: 5%;
    bottom: 6%;

    display: flex;
    align-items: center;
    gap: 12px;

    pointer-events: none;
}

.stage-note strong {
    color: var(--orange);

    font-size: 28px;
}

.stage-note span {
    color: #888;

    font: 700 7px/1.5 monospace;
    letter-spacing: 1.5px;
}


/* =========================================================
   SUN BRIGHTNESS
========================================================= */

body.sun-brighter #sunCore {
    animation:
        sunBurst
        1.8s ease;
}

body.sun-brighter #sunGlow {
    animation:
        sunGlowBurst
        2s ease;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes sunshineBreathe {

    0%,
    100% {
        transform: scale(1);
        opacity: .13;
    }

    50% {
        transform: scale(1.08);
        opacity: .20;
    }
}

@keyframes personAppear {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes priorityPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .38;
    }

    50% {
        transform: scale(1.7);
        opacity: .08;
    }
}

@keyframes sunBurst {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.14);

        filter:
            drop-shadow(
                0 0 55px
                rgba(240, 129, 67, .8)
            );
    }

    100% {
        transform: scale(1);
    }
}

@keyframes sunGlowBurst {

    0% {
        transform: scale(1);
        opacity: .13;
    }

    35% {
        transform: scale(1.35);
        opacity: .38;
    }

    100% {
        transform: scale(1);
        opacity: .13;
    }
}

/* =========================================================
   VISUAL SCALE — FINAL
========================================================= */

.experience {
    grid-template-columns: 34% 66%;
}

#stage {
    height: min(84vh, 860px);
    min-height: 680px;
}

.person-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.15px;
}

.person-number {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .8px;
}

.universe-label {
    font-size: 8px;
    letter-spacing: 2.4px;
}

.stage-note strong {
    font-size: 34px;
}

.stage-note span {
    font-size: 8px;
}

.sun-kicker {
    font-size: 9px;
}

.sun-title {
    font-size: 28px;
}

.sun-count {
    font-size: 9px;
}

.connection {
    opacity: .43;
    stroke-width: 1.35;
}

/* One light changes at a time */

.real-person {
    opacity: 1;
    animation: none !important;
    transition: opacity .7s ease;
}

.real-person.person-leaving,
.real-person.person-entering {
    opacity: 0;
}

.real-person.person-visible {
    opacity: 1;
}

.connection {
    transition: opacity .7s ease;
}

.connection.person-leaving,
.connection.person-entering {
    opacity: .06;
}

.connection.person-visible {
    opacity: .43;
}

/* =========================================================
   PEOPLE LABELS — COLLISION FIX
========================================================= */

.person-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.25px;
}

.person-number {
    font-size: 7px;
    letter-spacing: .9px;
}

.person-halo {
    opacity: .10;
}

/* =========================================================
   MICRO TYPOGRAPHY — FINAL
========================================================= */

.intro .eyebrow {
    color: #68635f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.intro-hint {
    color: #706b67;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.hero-stats span {
    color: #696460;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.hero-principle {
    color: #6f6a66;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.35px;
}

.universe-label {
    color: #696460;
    font-size: 8.5px;
    font-weight: 800;
}

.stage-note span {
    color: #696460;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.person-number {
    fill: #716c68;
    font-weight: 800;
}

/* =========================================================
   SECRET SUN — CINEMATIC EASTER EGG
========================================================= */

#stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/*
 * Two real screen-sized light layers.
 * Unlike the SVG halo these can illuminate the whole stage.
 */

#stage::before,
#stage::after {
    content: "";
    position: absolute;

    left: 50%;
    top: 50%;

    width: 150vmax;
    height: 150vmax;

    transform:
        translate(-50%, -50%)
        scale(.03);

    border-radius: 50%;

    opacity: 0;
    pointer-events: none;

    z-index: 1;
}

#stage::before {
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.98) 0%,
            rgba(255,222,150,.92) 4%,
            rgba(255,174,72,.72) 12%,
            rgba(240,129,67,.42) 24%,
            rgba(240,129,67,.16) 40%,
            rgba(240,129,67,0) 63%
        );

    filter: blur(5px);
}

#stage::after {
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(255,183,79,.20) 8deg,
            transparent 19deg,
            transparent 42deg,
            rgba(255,207,111,.23) 51deg,
            transparent 64deg,
            transparent 88deg,
            rgba(255,163,65,.20) 98deg,
            transparent 111deg,
            transparent 137deg,
            rgba(255,215,126,.22) 147deg,
            transparent 161deg,
            transparent 190deg,
            rgba(255,172,70,.20) 201deg,
            transparent 216deg,
            transparent 244deg,
            rgba(255,212,119,.22) 255deg,
            transparent 270deg,
            transparent 301deg,
            rgba(255,168,67,.20) 312deg,
            transparent 326deg,
            transparent 360deg
        );

    filter: blur(12px);
}


/* SVG must stay above screen glow */

#universe {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   NORMAL FACE STATE
--------------------------------------------------------- */

#sun {
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
}

.sun-face {
    pointer-events: none;
}

.sun-glasses {
    opacity: 0;

    transform:
        translateY(115px)
        scale(.72);

    transform-box: fill-box;
    transform-origin: center;
}

.sun-smile {
    fill: none;

    stroke: #090909;
    stroke-width: 6;
    stroke-linecap: round;

    opacity: 0;

    stroke-dasharray: 90;
    stroke-dashoffset: 90;
}

.glass-lens {
    fill: #080808;
    stroke: #171717;
    stroke-width: 5;
}

.glass-bridge,
.glass-arm {
    fill: none;
    stroke: #080808;
    stroke-width: 7;
    stroke-linecap: round;
}

.glass-shine {
    fill: none;
    stroke: rgba(255,255,255,.38);
    stroke-width: 5;
    stroke-linecap: round;
}


/* ---------------------------------------------------------
   HANDS
--------------------------------------------------------- */

.sun-arms {
    opacity: 0;
}

.arm-line {
    fill: none;

    stroke: #d63c2f;
    stroke-width: 13;
    stroke-linecap: round;
}

.sun-hand {
    fill: #f58b43;

    stroke: #d63c2f;
    stroke-width: 5;
}

.sun-arm {
    transform-box: fill-box;
    transform-origin: center;
}


/* ---------------------------------------------------------
   HIDE PEOPLE
--------------------------------------------------------- */

#people,
#connections {
    transition:
        opacity .55s ease,
        filter .55s ease;
}

.secret-sun-active #people,
.secret-sun-active #connections {
    opacity: 0;
}


/* Logo disappears */

.secret-sun-active .sun-kicker,
.secret-sun-active .sun-title,
.secret-sun-active .sun-divider,
.secret-sun-active .sun-count {
    animation:
        secretLogoAway
        .35s
        ease
        forwards;
}


/* ---------------------------------------------------------
   REAL FULL-SCREEN FLASH
--------------------------------------------------------- */

.secret-sun-active #stage::before {
    animation:
        secretLightExplosion
        10s
        cubic-bezier(.18,.75,.2,1)
        forwards;
}

.secret-sun-active #stage::after {
    animation:
        secretRaysExplosion
        10s
        cubic-bezier(.18,.75,.2,1)
        forwards;
}


/* ---------------------------------------------------------
   ORBITS / PARTICLES
--------------------------------------------------------- */

.secret-sun-active #years {
    animation:
        secretOrbitPulse
        2.2s
        ease-in-out
        infinite;
}

.secret-sun-active #particles {
    animation:
        secretParticles
        1.15s
        ease-in-out
        infinite alternate;

    filter:
        drop-shadow(
            0 0 7px
            rgba(240,129,67,.95)
        );
}


/* ---------------------------------------------------------
   SUN BODY
--------------------------------------------------------- */

.secret-sun-active #sun {
    animation:
        secretSunEntrance
        1.55s
        cubic-bezier(.16,.85,.25,1)
        forwards;
}

.secret-sun-active #sunCore {
    animation:
        secretSunHeartbeat
        .9s
        ease-in-out
        2.9s
        infinite alternate;
}

.secret-sun-active #sunGlow {
    animation:
        secretSvgGlow
        1s
        ease-in-out
        infinite alternate;
}


/* ---------------------------------------------------------
   HANDS PUT ON GLASSES
--------------------------------------------------------- */

.secret-sun-active .sun-arms {
    animation:
        secretHandsVisible
        2.2s
        ease
        1.05s
        forwards;
}

.secret-sun-active .sun-arm-left {
    animation:
        secretLeftHand
        2.15s
        cubic-bezier(.22,.75,.25,1)
        1.05s
        forwards;
}

.secret-sun-active .sun-arm-right {
    animation:
        secretRightHand
        2.15s
        cubic-bezier(.22,.75,.25,1)
        1.05s
        forwards;
}

.secret-sun-active .sun-glasses {
    animation:
        secretGlasses
        2.15s
        cubic-bezier(.22,.75,.25,1)
        1.05s
        forwards;
}

.secret-sun-active .sun-smile {
    animation:
        secretSmile
        .6s
        ease-out
        3.05s
        forwards;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes secretLogoAway {
    to {
        opacity: 0;
        transform: scale(.7);
    }
}


/*
 * White-hot center expands,
 * fills most of the screen,
 * then settles into a huge warm aura.
 */

@keyframes secretLightExplosion {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.015);
    }

    7% {
        opacity: .25;
    }

    18% {
        opacity: .98;
        transform:
            translate(-50%, -50%)
            scale(.34);
    }

    30% {
        opacity: .72;
        transform:
            translate(-50%, -50%)
            scale(.58);
    }

    45% {
        opacity: .55;
        transform:
            translate(-50%, -50%)
            scale(.78);
    }

    78% {
        opacity: .43;
        transform:
            translate(-50%, -50%)
            scale(.92);
    }

    92% {
        opacity: .22;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/*
 * Rotating radial rays.
 */

@keyframes secretRaysExplosion {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.04)
            rotate(0deg);
    }

    16% {
        opacity: .85;
    }

    32% {
        transform:
            translate(-50%, -50%)
            scale(.47)
            rotate(18deg);
    }

    70% {
        opacity: .55;

        transform:
            translate(-50%, -50%)
            scale(.82)
            rotate(55deg);
    }

    92% {
        opacity: .2;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(75deg);
    }
}


@keyframes secretSunEntrance {

    0% {
        transform:
            scale(1)
            rotate(0);
    }

    14% {
        transform:
            scale(.82)
            rotate(0);
    }

    32% {
        transform:
            scale(1.25)
            rotate(-5deg);
    }

    48% {
        transform:
            scale(1.08)
            rotate(4deg);
    }

    63% {
        transform:
            scale(1.16)
            rotate(-2deg);
    }

    100% {
        transform:
            scale(1.12)
            rotate(0);
    }
}


@keyframes secretSunHeartbeat {

    from {
        filter:
            brightness(1.05)
            saturate(1.05)
            drop-shadow(
                0 0 30px
                rgba(240,129,67,.65)
            );
    }

    to {
        filter:
            brightness(1.42)
            saturate(1.2)
            drop-shadow(
                0 0 85px
                rgba(240,129,67,1)
            )
            drop-shadow(
                0 0 150px
                rgba(255,188,76,.55)
            );
    }
}


@keyframes secretSvgGlow {

    from {
        opacity: .18;
        transform: scale(1);
    }

    to {
        opacity: .7;
        transform: scale(2.25);
    }
}


@keyframes secretOrbitPulse {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: .85;
    }
}


@keyframes secretParticles {

    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}


@keyframes secretHandsVisible {

    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/*
 * Both hands start outside/below the face.
 * They meet the glasses, lift them to the eyes,
 * pause, then release.
 */

@keyframes secretLeftHand {

    0% {
        transform:
            translate(-85px, 105px)
            rotate(-45deg);
    }

    20% {
        transform:
            translate(-55px, 82px)
            rotate(-32deg);
    }

    45% {
        transform:
            translate(18px, 40px)
            rotate(12deg);
    }

    68% {
        transform:
            translate(44px, -52px)
            rotate(40deg);
    }

    78% {
        transform:
            translate(42px, -57px)
            rotate(38deg);
    }

    100% {
        transform:
            translate(-100px, 75px)
            rotate(-55deg);
    }
}


@keyframes secretRightHand {

    0% {
        transform:
            translate(85px, 105px)
            rotate(45deg);
    }

    20% {
        transform:
            translate(55px, 82px)
            rotate(32deg);
    }

    45% {
        transform:
            translate(-18px, 40px)
            rotate(-12deg);
    }

    68% {
        transform:
            translate(-44px, -52px)
            rotate(-40deg);
    }

    78% {
        transform:
            translate(-42px, -57px)
            rotate(-38deg);
    }

    100% {
        transform:
            translate(100px, 75px)
            rotate(55deg);
    }
}


/*
 * Glasses travel at approximately the same rhythm
 * as the hands.
 */

@keyframes secretGlasses {

    0% {
        opacity: 0;

        transform:
            translateY(125px)
            scale(.65);
    }

    12% {
        opacity: 1;
    }

    20% {
        transform:
            translateY(100px)
            scale(.72);
    }

    45% {
        transform:
            translateY(68px)
            scale(.84);
    }

    68% {
        transform:
            translateY(-5px)
            scale(1.08);
    }

    78% {
        transform:
            translateY(3px)
            scale(.97);
    }

    88% {
        transform:
            translateY(-1px)
            scale(1.02);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes secretSmile {

    from {
        opacity: 0;
        stroke-dashoffset: 90;
    }

    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}


/* =========================================================
   SECRET SUN — REAL FX LAYER
========================================================= */

.secret-fx {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;
}


/*
 * Центр сцены совпадает с центром SVG.
 */

.secret-flash,
.secret-corona,
.secret-wave,
.secret-sparks {
    position: absolute;

    left: 50%;
    top: 50%;

    pointer-events: none;
}


/* =========================================================
   INITIAL WHITE/ORANGE FLASH
========================================================= */

.secret-flash {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(.1);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,1) 0%,
            rgba(255,244,188,.98) 8%,
            rgba(255,193,79,.88) 22%,
            rgba(240,129,67,.56) 42%,
            rgba(240,129,67,.16) 65%,
            transparent 76%
        );

    opacity: 0;

    animation:
        fxFlash
        1.35s
        cubic-bezier(.12,.75,.2,1)
        forwards;
}


@keyframes fxFlash {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.1);
    }

    8% {
        opacity: 1;
    }

    32% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(13);
    }

    65% {
        opacity: .72;

        transform:
            translate(-50%, -50%)
            scale(24);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(34);
    }
}


/* =========================================================
   SUN CORONA
========================================================= */

.secret-corona {
    width: 650px;
    height: 650px;

    transform:
        translate(-50%, -50%)
        scale(.15);

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(255,245,184,.48) 0%,
            rgba(255,183,73,.30) 18%,
            rgba(240,129,67,.16) 38%,
            rgba(240,129,67,.05) 58%,
            transparent 72%
        );

    filter: blur(10px);

    animation:
        fxCorona
        8.8s
        ease-out
        .25s
        forwards;
}


@keyframes fxCorona {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.15);
    }

    12% {
        opacity: .9;

        transform:
            translate(-50%, -50%)
            scale(.85);
    }

    35% {
        opacity: .65;

        transform:
            translate(-50%, -50%)
            scale(1.35);
    }

    75% {
        opacity: .5;

        transform:
            translate(-50%, -50%)
            scale(1.55);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.8);
    }
}


/* =========================================================
   ROTATING LIGHT RAYS
========================================================= */

.secret-rays {
    position: absolute;

    inset: -140px;

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255,194,79,.00) 0deg,
            rgba(255,194,79,.00) 9deg,
            rgba(255,213,112,.28) 11deg,
            rgba(255,255,215,.48) 13deg,
            rgba(255,193,76,.20) 16deg,
            rgba(255,193,76,0) 22deg
        );

    mask-image:
        radial-gradient(
            circle,
            transparent 0%,
            transparent 13%,
            black 24%,
            rgba(0,0,0,.72) 58%,
            transparent 80%
        );

    opacity: 0;

    animation:
        fxRays
        7.5s
        linear
        .55s
        forwards;
}


@keyframes fxRays {

    0% {
        opacity: 0;
        transform: rotate(0deg);
    }

    12% {
        opacity: 1;
    }

    75% {
        opacity: .72;
    }

    100% {
        opacity: 0;
        transform: rotate(105deg);
    }
}


/* =========================================================
   SHOCKWAVES
========================================================= */

.secret-wave {
    width: 120px;
    height: 120px;

    margin:
        -60px
        0
        0
        -60px;

    border:
        3px solid
        rgba(255,175,66,.72);

    border-radius: 50%;

    opacity: 0;

    box-shadow:
        0 0 20px rgba(255,188,73,.55),
        inset 0 0 15px rgba(255,188,73,.35);
}


.wave-one {
    animation:
        fxWave
        1.8s
        ease-out
        .15s
        forwards;
}

.wave-two {
    animation:
        fxWave
        2.05s
        ease-out
        .55s
        forwards;
}

.wave-three {
    animation:
        fxWave
        2.3s
        ease-out
        .95s
        forwards;
}


@keyframes fxWave {

    0% {
        opacity: .95;
        transform: scale(.35);
    }

    70% {
        opacity: .38;
    }

    100% {
        opacity: 0;
        transform: scale(7.5);
    }
}


/* =========================================================
   FLYING SPARKS
========================================================= */

.secret-sparks {
    width: 1px;
    height: 1px;
}


.secret-sparks i {
    position: absolute;

    left: 0;
    top: 0;

    width: var(--size);
    height: var(--size);

    margin:
        calc(var(--size) / -2);

    border-radius: 50%;

    background: #fff6c7;

    box-shadow:
        0 0 5px #fff,
        0 0 12px rgba(255,204,83,.95),
        0 0 24px rgba(240,129,67,.8);

    opacity: 0;

    transform:
        rotate(var(--angle))
        translateX(45px)
        scale(.2);

    animation:
        fxSpark
        var(--duration)
        cubic-bezier(.12,.72,.3,1)
        var(--delay)
        forwards;
}


.secret-sparks i:nth-child(3n) {
    border-radius: 1px;

    transform:
        rotate(var(--angle))
        translateX(45px)
        rotate(45deg)
        scale(.2);
}


@keyframes fxSpark {

    0% {
        opacity: 0;

        transform:
            rotate(var(--angle))
            translateX(40px)
            scale(.2);
    }

    15% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            rotate(var(--angle))
            translateX(var(--distance))
            scale(1.15);
    }
}


/* =========================================================
   EXTRA SUN ENERGY DURING EASTER EGG
========================================================= */

.secret-sun-active #sunCore {
    animation:
        fxSunEnergy
        .65s
        ease-in-out
        1.5s
        infinite alternate !important;
}


@keyframes fxSunEnergy {

    from {
        filter:
            brightness(1.1)
            saturate(1.1)
            drop-shadow(
                0 0 25px
                rgba(255,151,55,.7)
            );
    }

    to {
        filter:
            brightness(1.55)
            saturate(1.3)
            drop-shadow(
                0 0 65px
                rgba(255,178,61,1)
            )
            drop-shadow(
                0 0 130px
                rgba(240,129,67,.8)
            );
    }
}


/* =========================================================
   SECRET SUN — FAST / HOT OVERRIDES
========================================================= */

/*
 * Всё шоу быстрее.
 * Свет появляется практически мгновенно.
 */

.secret-flash {
    animation-duration: .65s !important;
}

.secret-corona {
    animation-duration: 4.8s !important;
    animation-delay: .05s !important;
}

.secret-rays {
    animation-duration: 3.8s !important;
    animation-delay: .12s !important;
}

.wave-one {
    animation-duration: .85s !important;
    animation-delay: .05s !important;
}

.wave-two {
    animation-duration: 1s !important;
    animation-delay: .20s !important;
}

.wave-three {
    animation-duration: 1.15s !important;
    animation-delay: .35s !important;
}


/*
 * Солнце сразу реагирует.
 */

.secret-sun-active #sun {
    animation-duration: .72s !important;
}

.secret-sun-active #sunGlow {
    animation-duration: .42s !important;
}

.secret-sun-active #years {
    animation-duration: .72s !important;
}

.secret-sun-active #particles {
    animation-duration: .32s !important;
}


/*
 * Очки надеваются быстрее.
 */

.secret-sun-active .sun-arms {
    animation-duration: 1.15s !important;
    animation-delay: .32s !important;
}

.secret-sun-active .sun-arm-left,
.secret-sun-active .sun-arm-right {
    animation-duration: 1.15s !important;
    animation-delay: .32s !important;
}

.secret-sun-active .sun-glasses {
    animation-duration: 1.15s !important;
    animation-delay: .32s !important;
}


/*
 * РОТ:
 * раньше было 3.05 секунды — поэтому была задержка.
 *
 * Теперь улыбка начинает рисоваться через 0.72 сек,
 * пока очки ещё заканчивают движение.
 */

.secret-sun-active .sun-smile {
    animation:
        secretSmileFast
        .24s
        ease-out
        .72s
        forwards !important;
}


@keyframes secretSmileFast {

    0% {
        opacity: 0;
        stroke-dashoffset: 90;
        transform: scaleX(.55);
        transform-origin: center;
    }

    55% {
        opacity: 1;
        stroke-dashoffset: 18;
        transform: scaleX(1.08);
    }

    100% {
        opacity: 1;
        stroke-dashoffset: 0;
        transform: scaleX(1);
    }
}


/*
 * Более мощная постоянная солнечная пульсация.
 */

.secret-sun-active #sunCore {
    animation:
        secretInfernoCore
        .34s
        ease-in-out
        .8s
        infinite alternate !important;
}


@keyframes secretInfernoCore {

    from {
        filter:
            brightness(1.15)
            saturate(1.25)
            drop-shadow(
                0 0 35px
                rgba(255,150,40,.95)
            )
            drop-shadow(
                0 0 80px
                rgba(240,80,30,.55)
            );
    }

    to {
        filter:
            brightness(1.75)
            saturate(1.55)
            drop-shadow(
                0 0 85px
                rgba(255,205,70,1)
            )
            drop-shadow(
                0 0 180px
                rgba(255,100,25,.95)
            )
            drop-shadow(
                0 0 300px
                rgba(240,70,20,.45)
            );
    }
}


/*
 * Лучи вращаются значительно быстрее.
 */

.secret-rays {
    animation-name: secretInfernoRays !important;
}


@keyframes secretInfernoRays {

    0% {
        opacity: 0;
        transform:
            rotate(0deg)
            scale(.35);
    }

    8% {
        opacity: 1;
    }

    28% {
        opacity: .95;
        transform:
            rotate(45deg)
            scale(.9);
    }

    55% {
        opacity: .85;
        transform:
            rotate(110deg)
            scale(1.25);
    }

    82% {
        opacity: .55;
        transform:
            rotate(190deg)
            scale(1.5);
    }

    100% {
        opacity: 0;
        transform:
            rotate(260deg)
            scale(1.8);
    }
}


/*
 * Corona быстро расширяется далеко за солнце.
 */

.secret-corona {
    animation-name: secretInfernoCorona !important;
}


@keyframes secretInfernoCorona {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.12);
    }

    8% {
        opacity: 1;
    }

    25% {
        opacity: .95;
        transform:
            translate(-50%, -50%)
            scale(1.15);
    }

    50% {
        opacity: .75;
        transform:
            translate(-50%, -50%)
            scale(1.85);
    }

    80% {
        opacity: .52;
        transform:
            translate(-50%, -50%)
            scale(2.35);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(2.7);
    }
}


/*
 * Искры быстрее выстреливают наружу.
 */

.secret-sparks i {
    animation-name: secretInfernoSpark !important;
}


@keyframes secretInfernoSpark {

    0% {
        opacity: 0;

        transform:
            rotate(var(--angle))
            translateX(35px)
            scale(.15);
    }

    8% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: .9;
    }

    100% {
        opacity: 0;

        transform:
            rotate(var(--angle))
            translateX(var(--distance))
            scale(1.65);
    }
}


/* =========================================================
   COLLECTIVE SUN LEVELS
========================================================= */

#sunCore,
#sunGlow,
#sunHalo,
#particles {
    transition:
        opacity 1.4s ease,
        filter 1.4s ease,
        transform 1.4s ease;
}


/* 0 PEOPLE */

.sun-level-0 #sunCore {
    filter:
        saturate(.82)
        brightness(.94)
        drop-shadow(
            0 10px 25px
            rgba(208,51,43,.12)
        );
}

.sun-level-0 #sunGlow {
    opacity: .07;
}


/* 1–15 PEOPLE */

.sun-level-1 #sunCore {
    filter:
        saturate(.95)
        brightness(1)
        drop-shadow(
            0 12px 30px
            rgba(240,129,67,.20)
        );
}

.sun-level-1 #sunGlow {
    opacity: .12;
}


/* 16–49 PEOPLE */

.sun-level-2 #sunCore {
    filter:
        saturate(1.05)
        brightness(1.04)
        drop-shadow(
            0 0 38px
            rgba(240,129,67,.32)
        );
}

.sun-level-2 #sunGlow {
    opacity: .20;
    transform: scale(1.12);
}

.sun-level-2 #sunHalo {
    opacity: .18;
}


/* 50–99 PEOPLE */

.sun-level-3 #sunCore {
    filter:
        saturate(1.16)
        brightness(1.08)
        drop-shadow(
            0 0 48px
            rgba(240,129,67,.48)
        );
}

.sun-level-3 #sunGlow {
    opacity: .29;
    transform: scale(1.30);
}

.sun-level-3 #sunHalo {
    opacity: .25;
}

.sun-level-3 #particles {
    opacity: .65;
    filter:
        drop-shadow(
            0 0 4px
            rgba(240,129,67,.5)
        );
}


/* 100+ PEOPLE */

.sun-level-4 #sunCore {
    filter:
        saturate(1.28)
        brightness(1.14)
        drop-shadow(
            0 0 58px
            rgba(240,129,67,.62)
        )
        drop-shadow(
            0 0 105px
            rgba(240,129,67,.22)
        );
}

.sun-level-4 #sunGlow {
    opacity: .38;
    transform: scale(1.48);

    animation:
        collectiveSunBreath
        2.8s
        ease-in-out
        infinite;
}

.sun-level-4 #sunHalo {
    opacity: .32;
}

.sun-level-4 #particles {
    opacity: .85;

    filter:
        drop-shadow(
            0 0 6px
            rgba(240,129,67,.7)
        );
}


@keyframes collectiveSunBreath {

    0%,
    100% {
        transform: scale(1.40);
        opacity: .30;
    }

    50% {
        transform: scale(1.62);
        opacity: .43;
    }
}


/* =========================================================
   NEW PARTICIPANT — BECOMES LIGHT
========================================================= */

#stage {
    position: relative;
}

.new-light-fx {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 50;
}


/* ---------------------------------------------------------
   TRAVELLING NAME
--------------------------------------------------------- */

.new-light-traveller {
    position: absolute;

    left: var(--start-x);
    top: var(--start-y);

    display: flex;
    align-items: center;

    gap: 8px;

    white-space: nowrap;

    color: #D0332B;

    font-size: 14px;
    font-weight: 900;

    opacity: 0;

    filter:
        drop-shadow(
            0 0 8px
            rgba(240,129,67,.6)
        );

    animation:
        newLightFly
        .68s
        cubic-bezier(.55,.02,.82,.38)
        forwards;
}


.new-light-star {
    display: inline-block;

    color: #F08143;

    font-size: 25px;

    filter:
        drop-shadow(
            0 0 7px
            rgba(240,129,67,.95)
        )
        drop-shadow(
            0 0 18px
            rgba(240,129,67,.65)
        );

    animation:
        newLightStarSpin
        .18s
        linear
        infinite;
}


@keyframes newLightFly {

    0% {
        left: var(--start-x);
        top: var(--start-y);

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.65);
    }

    12% {
        opacity: 1;
    }

    68% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {
        left: var(--sun-x);
        top: var(--sun-y);

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.12);
    }
}


@keyframes newLightStarSpin {

    to {
        transform:
            rotate(360deg);
    }
}


/* ---------------------------------------------------------
   IMPACT FLASH
--------------------------------------------------------- */

.new-light-impact {
    position: absolute;

    left: var(--sun-x);
    top: var(--sun-y);

    width: 28px;
    height: 28px;

    border-radius: 50%;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.1);

    background:
        radial-gradient(
            circle,
            #FFFFFF 0%,
            #FFF1B4 16%,
            #F08143 38%,
            rgba(240,129,67,.38) 60%,
            transparent 76%
        );

    animation:
        newLightImpact
        .48s
        ease-out
        .57s
        forwards;
}


@keyframes newLightImpact {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.1);
    }

    18% {
        opacity: 1;
    }

    55% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(8);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(17);
    }
}


/* ---------------------------------------------------------
   ENERGY WAVE
--------------------------------------------------------- */

.new-light-wave {
    position: absolute;

    left: var(--sun-x);
    top: var(--sun-y);

    width: 80px;
    height: 80px;

    margin:
        -40px
        0
        0
        -40px;

    border:
        3px solid
        rgba(240,129,67,.85);

    border-radius: 50%;

    opacity: 0;

    box-shadow:
        0 0 15px
        rgba(240,129,67,.65);

    animation:
        newLightWave
        .55s
        ease-out
        .62s
        forwards;
}


@keyframes newLightWave {

    0% {
        opacity: .9;
        transform: scale(.25);
    }

    100% {
        opacity: 0;
        transform: scale(5.5);
    }
}


/* ---------------------------------------------------------
   NEW LIGHT BEAM
--------------------------------------------------------- */

.new-light-beam {
    position: absolute;

    left: var(--sun-x);
    top: var(--sun-y);

    width: 340px;
    height: 3px;

    transform-origin:
        left center;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            #FFFFFF 0%,
            #FFD66D 10%,
            #F08143 48%,
            rgba(240,129,67,0) 100%
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(240,129,67,.95)
        );

    animation:
        newLightBeam
        .52s
        ease-out
        .68s
        forwards;
}


@keyframes newLightBeam {

    0% {
        opacity: 0;
        transform:
            rotate(-18deg)
            scaleX(.02);
    }

    18% {
        opacity: 1;
    }

    65% {
        opacity: .9;

        transform:
            rotate(-18deg)
            scaleX(1);
    }

    100% {
        opacity: 0;

        transform:
            rotate(-18deg)
            scaleX(1.12);
    }
}


/* ---------------------------------------------------------
   IMPACT SPARKS
--------------------------------------------------------- */

.new-light-sparks {
    position: absolute;

    left: var(--sun-x);
    top: var(--sun-y);

    width: 1px;
    height: 1px;
}


.new-light-sparks i {
    position: absolute;

    width: 5px;
    height: 5px;

    margin:
        -2.5px;

    border-radius: 50%;

    background: #FFF4B5;

    opacity: 0;

    box-shadow:
        0 0 6px #FFFFFF,
        0 0 14px #F08143;

    transform:
        rotate(var(--spark-angle))
        translateX(15px);

    animation:
        newLightSpark
        .48s
        ease-out
        .62s
        forwards;
}


@keyframes newLightSpark {

    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            rotate(var(--spark-angle))
            translateX(
                var(--spark-distance)
            )
            scale(.25);
    }
}


/* ---------------------------------------------------------
   SUN IMPACT
--------------------------------------------------------- */

.new-light-impact-active #sunCore {
    filter:
        brightness(1.65)
        saturate(1.35)
        drop-shadow(
            0 0 55px
            rgba(255,196,70,1)
        )
        drop-shadow(
            0 0 115px
            rgba(240,129,67,.75)
        ) !important;
}


/* =========================================================
   NEW LIGHT — TIMING FIX
========================================================= */

.new-light-traveller {
    z-index: 100;

    font-size: 16px !important;

    animation-duration:
        .88s !important;

    filter:
        drop-shadow(0 0 5px #fff)
        drop-shadow(0 0 12px rgba(240,129,67,.95))
        drop-shadow(0 0 28px rgba(240,129,67,.70)) !important;
}


.new-light-star {
    font-size: 31px !important;

    filter:
        drop-shadow(0 0 5px #fff)
        drop-shadow(0 0 13px rgba(255,190,70,1))
        drop-shadow(0 0 30px rgba(240,129,67,.95)) !important;
}


/*
 * Impact происходит примерно тогда,
 * когда traveller достигает солнца.
 */

.new-light-impact {
    animation-delay:
        .80s !important;
}

.new-light-wave {
    animation-delay:
        .82s !important;
}

.new-light-beam {
    animation-delay:
        .86s !important;
}

.new-light-sparks i {
    animation-delay:
        .82s !important;
}


/* =========================================================
   UNITED WE SHINE — FINAL PRESENTATION
========================================================= */

.people-total {
    cursor: pointer;
}

.people-total:active {
    transform: scale(.98);
}


/* ---------------------------------------------------------
   FINAL OVERLAY
--------------------------------------------------------- */

.united-final-overlay {
    position: absolute;
    inset: 0;

    z-index: 80;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    pointer-events: none;

    opacity: 0;

    transition: opacity .25s ease;
}


.united-final-flash {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(0);

    opacity: 0;

    background: #FFFFFF;

    box-shadow:
        0 0 80px 50px rgba(255,255,255,.95),
        0 0 180px 110px rgba(255,211,108,.85),
        0 0 320px 180px rgba(240,129,67,.65);
}


/* ---------------------------------------------------------
   FINAL TEXT
--------------------------------------------------------- */

.united-final-copy {
    position: relative;

    z-index: 5;

    width: min(92%, 1000px);

    text-align: center;

    opacity: 0;

    transform:
        scale(.72)
        translateY(30px);

    filter: blur(12px);
}


.united-final-kicker {
    margin-bottom: 18px;

    font:
        800 10px/1
        monospace;

    letter-spacing: 4px;

    color: #D0332B;

    opacity: 0;
}


.united-final-title {
    display: flex;
    flex-direction: column;

    font-weight: 900;

    font-size:
        clamp(
            58px,
            9vw,
            145px
        );

    line-height: .78;

    letter-spacing: -.075em;

    text-transform: uppercase;
}


.united-final-title span:first-child {
    color: #0A0A0A;
}


.united-final-title span:last-child {
    color: #F08143;
}


.united-final-meta {
    margin-top: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    opacity: 0;
}


.united-final-meta strong {
    color: #D0332B;

    font-size: 28px;

    line-height: 1;
}


.united-final-meta span {
    color: #57514D;

    font:
        800 9px/1.4
        monospace;

    letter-spacing: 2px;
}


/* =========================================================
   PHASE 1 — PEOPLE BEGIN TO DISAPPEAR
========================================================= */

.united-final-active #stage {
    isolation: isolate;
}


.united-final-active #people {
    transition:
        opacity 1.2s ease,
        filter 1.2s ease,
        transform 1.2s
        cubic-bezier(.2,.8,.2,1);

    transform-box: fill-box;
    transform-origin: center;
}


.united-final-active #connections {
    transition:
        opacity 1.4s ease,
        filter 1.4s ease,
        transform 1.5s
        cubic-bezier(.2,.8,.2,1);

    transform-box: fill-box;
    transform-origin: center;
}


.united-final-active #particles {
    transition:
        opacity .8s ease,
        filter .8s ease,
        transform 1.5s ease;

    transform-box: fill-box;
    transform-origin: center;
}


.united-final-active #years {
    transition:
        opacity 1s ease,
        transform 1.5s ease;

    transform-box: fill-box;
    transform-origin: center;
}


/* =========================================================
   PHASE 2 — GATHER ALL LIGHT
========================================================= */

.united-final-gather #people {
    opacity: 0;

    filter: blur(5px);

    transform:
        scale(.18);
}


.united-final-gather #years {
    opacity: .08;

    transform:
        scale(.68)
        rotate(8deg);
}


.united-final-gather #connections {
    opacity: 1;

    filter:
        brightness(2.5)
        drop-shadow(
            0 0 5px
            rgba(240,129,67,.9)
        )
        drop-shadow(
            0 0 15px
            rgba(240,129,67,.55)
        );

    transform:
        scale(.18);
}


.united-final-gather #particles {
    opacity: 1;

    filter:
        brightness(2.2)
        drop-shadow(
            0 0 8px
            rgba(240,129,67,.95)
        );

    transform:
        scale(.35)
        rotate(25deg);

    animation:
        unitedParticlesRush
        .32s
        ease-in-out
        infinite alternate;
}


@keyframes unitedParticlesRush {

    from {
        opacity: .35;
    }

    to {
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   SUN CHARGING
--------------------------------------------------------- */

.united-final-gather #sun {
    transform-box: fill-box;
    transform-origin: center;

    animation:
        unitedSunCharge
        1.55s
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


@keyframes unitedSunCharge {

    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(.94);
    }

    45% {
        transform: scale(1.08);
    }

    65% {
        transform: scale(.98);
    }

    82% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1.35);
    }
}


.united-final-gather #sunGlow {
    filter:
        url(#softGlow)
        drop-shadow(
            0 0 18px
            rgba(240,129,67,.9)
        );

    opacity: .65;
}


/* =========================================================
   PHASE 3 — IMPACT
========================================================= */

.united-final-impact
.united-final-overlay {
    opacity: 1;
}


.united-final-impact
.united-final-flash {

    animation:
        unitedFlash
        1.05s
        cubic-bezier(.12,.8,.2,1)
        forwards;
}


@keyframes unitedFlash {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0);
    }

    12% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(5);
    }

    38% {
        opacity: .95;

        transform:
            translate(-50%, -50%)
            scale(35);
    }

    70% {
        opacity: .65;

        transform:
            translate(-50%, -50%)
            scale(75);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(110);
    }
}


.united-final-impact #sun {
    animation:
        unitedSunImpact
        1.2s
        cubic-bezier(.12,.85,.18,1)
        forwards;
}


@keyframes unitedSunImpact {

    0% {
        transform: scale(1.35);
    }

    18% {
        transform: scale(2.1);
    }

    42% {
        transform: scale(4.8);
    }

    100% {
        transform: scale(7.5);
    }
}


.united-final-impact #sunGlow {
    opacity: .95;

    filter:
        url(#softGlow)
        brightness(2);
}


.united-final-impact #sunHalo {
    animation:
        unitedHaloImpact
        1.1s
        ease-out
        forwards;

    transform-box: fill-box;
    transform-origin: center;
}


@keyframes unitedHaloImpact {

    0% {
        opacity: .3;
        transform: scale(1);
    }

    45% {
        opacity: .9;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: scale(2.4);
    }
}


/* =========================================================
   PHASE 4 — UNITED WE SHINE
========================================================= */

.united-final-message
.united-final-copy {

    animation:
        unitedCopyEntrance
        .85s
        cubic-bezier(.16,.86,.22,1)
        forwards;
}


@keyframes unitedCopyEntrance {

    0% {
        opacity: 0;

        transform:
            scale(.7)
            translateY(35px);

        filter:
            blur(15px);
    }

    55% {
        opacity: 1;

        transform:
            scale(1.045)
            translateY(0);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0);
    }
}


.united-final-message
.united-final-kicker {

    animation:
        unitedSmallCopy
        .5s
        .35s
        ease-out
        forwards;
}


.united-final-message
.united-final-meta {

    animation:
        unitedSmallCopy
        .6s
        .55s
        ease-out
        forwards;
}


@keyframes unitedSmallCopy {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*
 * Small final heartbeat.
 */

.united-final-message
.united-final-title span:last-child {

    animation:
        unitedShineHeartbeat
        1.8s
        .75s
        ease-in-out
        infinite;
}


@keyframes unitedShineHeartbeat {

    0%,
    100% {
        transform: scale(1);

        text-shadow:
            0 0 0
            rgba(240,129,67,0);
    }

    50% {
        transform: scale(1.025);

        text-shadow:
            0 0 28px
            rgba(240,129,67,.28);
    }
}


/* =========================================================
   RETURN TO NORMAL SCENE
========================================================= */

.united-final-return
.united-final-overlay {

    opacity: 0;

    transition:
        opacity .8s ease;
}


.united-final-return #sun,
.united-final-return #sunHalo,
.united-final-return #sunGlow,
.united-final-return #people,
.united-final-return #connections,
.united-final-return #particles,
.united-final-return #years {

    transition:
        transform 1.15s
        cubic-bezier(.2,.75,.2,1),

        opacity 1s ease,

        filter 1s ease !important;

    animation: none !important;

    transform:
        scale(1)
        rotate(0deg);

    opacity: 1;

    filter: none;
}


/*
 * sunGlow normally uses SVG blur.
 * Restore it during return.
 */

.united-final-return #sunGlow {
    filter:
        url(#softGlow);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .united-final-title {
        font-size:
            clamp(
                50px,
                17vw,
                92px
            );
    }

    .united-final-meta {
        flex-direction: column;

        gap: 8px;
    }

    .united-final-meta span {
        font-size: 8px;
    }
}



/* =========================================================
   UNITED FINAL — COMPOSITION FIX
========================================================= */

/*
 * During final presentation hide the normal
 * typography inside the SVG sun.
 */

.united-final-gather #sun .sun-kicker,
.united-final-gather #sun .sun-title,
.united-final-gather #sun .sun-divider,
.united-final-gather #sun .sun-count,
.united-final-impact #sun .sun-kicker,
.united-final-impact #sun .sun-title,
.united-final-impact #sun .sun-divider,
.united-final-impact #sun .sun-count,
.united-final-message #sun .sun-kicker,
.united-final-message #sun .sun-title,
.united-final-message #sun .sun-divider,
.united-final-message #sun .sun-count {
    opacity: 0 !important;
}


/*
 * Final copy gets its own clean readable field.
 */

.united-final-copy {
    width: min(88%, 900px) !important;

    padding: 50px 35px !important;

    box-sizing: border-box;

    text-align: center;
}


/*
 * Do not let UNITED and WE SHINE collide.
 */

.united-final-title {
    display: flex !important;
    flex-direction: column !important;

    gap: 16px !important;

    font-size:
        clamp(
            54px,
            7.2vw,
            112px
        ) !important;

    line-height: .82 !important;

    letter-spacing: -.065em !important;
}


.united-final-title span {
    display: block !important;
    position: relative;

    line-height: .82 !important;
}


.united-final-title span:first-child {
    color: #0A0A0A;

    transform: none;
}


.united-final-title span:last-child {
    color: #FFFFFF;

    transform: none;
}


/*
 * Meta gets enough distance from headline.
 */

.united-final-meta {
    margin-top: 42px !important;

    gap: 16px !important;
}


.united-final-meta strong {
    font-size: 32px !important;
}


.united-final-meta span {
    font-size: 10px !important;

    letter-spacing: 2.4px !important;
}


/*
 * Remove visual garbage behind final copy.
 * Keep the sun / glow itself.
 */

.united-final-message #people,
.united-final-message #connections,
.united-final-message #years,
.united-final-message #particles {
    opacity: 0 !important;
}


/*
 * The overlay must be above the SVG scene.
 */

.united-final-message
.united-final-overlay {
    opacity: 1;

    z-index: 100;
}


/*
 * Final title must remain above the expanding sun.
 */

.united-final-message
.united-final-copy {
    z-index: 110;
}


/* MOBILE */

@media (max-width: 700px) {

    .united-final-copy {
        width: 94% !important;
        padding: 35px 18px !important;
    }

    .united-final-title {
        gap: 12px !important;

        font-size:
            clamp(
                48px,
                15vw,
                78px
            ) !important;
    }

    .united-final-meta {
        margin-top: 30px !important;
    }
}



/* =========================================================
   UNITED WE SHINE — FINAL FIX v116
========================================================= */


/* ---------- faster gathering ---------- */

.united-final-gather #people {
    transition-duration: .45s !important;
}

.united-final-gather #connections,
.united-final-gather #years {
    transition-duration: .55s !important;
}

.united-final-gather #particles {
    transition-duration: .45s !important;
}

.united-final-gather #sun {
    animation-duration: .65s !important;
}

.united-final-impact #sun {
    animation-duration: .65s !important;
}

.united-final-impact .united-final-flash {
    animation-duration: .65s !important;
}


/* =========================================================
   REMOVE ORIGINAL SUN CONTENT
========================================================= */

.united-final-gather #sun .sun-kicker,
.united-final-gather #sun .sun-title,
.united-final-gather #sun .sun-divider,
.united-final-gather #sun .sun-count,

.united-final-impact #sun .sun-kicker,
.united-final-impact #sun .sun-title,
.united-final-impact #sun .sun-divider,
.united-final-impact #sun .sun-count,

.united-final-message #sun .sun-kicker,
.united-final-message #sun .sun-title,
.united-final-message #sun .sun-divider,
.united-final-message #sun .sun-count {
    opacity: 0 !important;
}


/* =========================================================
   FINAL FRAME:
   physical sun disappears after explosion
========================================================= */

.united-final-message #sunCore {
    opacity: 0 !important;

    transition:
        opacity .22s ease !important;
}


/*
 * Glow remains, but no visible orange circle.
 */

.united-final-message #sunGlow {
    opacity: .10 !important;

    transform:
        scale(4) !important;

    filter:
        url(#softGlow)
        blur(16px) !important;

    transition:
        opacity .35s ease,
        transform .55s ease !important;
}


.united-final-message #sunHalo {
    opacity: .08 !important;

    transform:
        scale(1.8) !important;

    transition:
        opacity .4s ease,
        transform .55s ease !important;
}


/*
 * Everything else disappears behind final copy.
 */

.united-final-message #people,
.united-final-message #connections,
.united-final-message #particles,
.united-final-message #years {
    opacity: 0 !important;
}


/* =========================================================
   CLEAN FINAL TYPOGRAPHY
========================================================= */

.united-final-copy {
    width: min(90%, 1050px) !important;

    padding: 30px !important;

    box-sizing: border-box;
}


.united-final-title {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 5px !important;

    font-size:
        clamp(
            68px,
            8.2vw,
            128px
        ) !important;

    line-height: .86 !important;

    letter-spacing: -.065em !important;
}


.united-final-title span {
    display: block !important;

    line-height: .86 !important;
}


.united-final-title span:first-child {
    color: #0A0A0A !important;
}


.united-final-title span:last-child {
    color: #F08143 !important;

    text-shadow:
        0 0 35px
        rgba(240,129,67,.16);
}


/* ---------- subtitle ---------- */

.united-final-kicker {
    margin-bottom: 24px !important;
}


/* ---------- bottom information ---------- */

.united-final-meta {
    margin-top: 48px !important;

    gap: 16px !important;
}


.united-final-meta strong {
    font-size: 34px !important;
}


.united-final-meta span {
    color: #4D4743 !important;

    font-size: 10px !important;

    letter-spacing: 2.3px !important;
}


/* =========================================================
   ATMOSPHERIC LIGHT BEHIND TEXT
========================================================= */

.united-final-overlay::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: min(78vw, 900px);

    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(.65);

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(240,129,67,.17) 0%,
            rgba(240,129,67,.09) 25%,
            rgba(240,129,67,.035) 47%,
            transparent 70%
        );

    pointer-events: none;
}


.united-final-message
.united-final-overlay::before {

    animation:
        unitedFinalCleanGlow
        .8s
        ease-out
        forwards;
}


@keyframes unitedFinalCleanGlow {

    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.65);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .united-final-copy {
        width: 94% !important;

        padding:
            25px 15px !important;
    }

    .united-final-title {
        font-size:
            clamp(
                50px,
                15vw,
                82px
            ) !important;

        gap: 4px !important;
    }

    .united-final-meta {
        margin-top: 34px !important;
    }
}



/* COLLECTIVE UNLOCK SUN REACTION v117 */
.collective-unlock-active #sunCore { animation:collectiveUnlockSun .8s ease-out 2 !important; }
.collective-unlock-active #sunGlow { opacity:.34 !important; transform:scale(1.5); transition:.45s ease; }
@keyframes collectiveUnlockSun { 50% { transform:scale(1.13); filter:drop-shadow(0 0 55px rgba(240,129,67,.72)); } }