html, body{
    height:100%;
    margin:0;
    overflow:hidden;
}

.landing-body{
    background:
        radial-gradient(ellipse at 20% 50%, rgba(167,139,250,.1) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(167,139,250,.06) 0%, transparent 50%),
        var(--win-desktop);
    color:var(--win-text);
}

.landing-root{
    position:relative;
    width:100vw;
    height:100dvh;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 50% 42%, rgba(162,140,243,.2) 0%, rgba(162,140,243,.04) 25%, transparent 55%),
        radial-gradient(circle at 22% 24%, rgba(82,224,255,.12) 0%, transparent 28%),
        radial-gradient(circle at 78% 76%, rgba(162,140,243,.14) 0%, transparent 32%),
        radial-gradient(ellipse at 20% 50%, rgba(167,139,250,.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(167,139,250,.1) 0%, transparent 50%),
        var(--win-desktop);
}

.landing-noise,
.landing-grid,
.landing-beam,
.landing-particles,
.landing-particle-ring,
.landing-core{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.landing-noise{
    opacity:.08;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:3px 3px, 3px 3px;
    mix-blend-mode:soft-light;
}

.landing-grid{
    inset:-10%;
    background-image:
        linear-gradient(rgba(162,140,243,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(162,140,243,.12) 1px, transparent 1px);
    background-size:56px 56px;
    transform:perspective(920px) rotateX(76deg) scale(1.6) translateY(16%);
    transform-origin:center bottom;
    opacity:.32;
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.9) 36%, rgba(0,0,0,1) 100%);
}

.landing-beam{
    width:48vw;
    height:48vw;
    max-width:620px;
    max-height:620px;
    min-width:320px;
    min-height:320px;
    margin:auto;
    filter:blur(26px);
    opacity:.42;
    border-radius:50%;
    animation:landingFloat 9s ease-in-out infinite;
}

.landing-beam-a{
    inset:auto auto 18% 12%;
    background:radial-gradient(circle, rgba(85,220,255,.28) 0%, rgba(85,220,255,.09) 42%, transparent 72%);
}

.landing-beam-b{
    inset:14% 10% auto auto;
    background:radial-gradient(circle, rgba(162,140,243,.3) 0%, rgba(162,140,243,.08) 42%, transparent 72%);
    animation-delay:-4.5s;
}

.landing-particles{
    overflow:hidden;
}

.landing-particle{
    position:absolute;
    left:var(--particle-left);
    top:var(--particle-top);
    width:var(--particle-size);
    height:var(--particle-size);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(82,224,255,.55) 42%, rgba(82,224,255,0) 72%);
    box-shadow:0 0 9px rgba(82,224,255,.14);
    opacity:.36;
    transform:translate3d(0,0,0);
    animation:
        landingParticleFloat var(--particle-duration) ease-in-out infinite,
        landingParticleFlicker var(--particle-flicker) ease-in-out infinite;
    animation-delay:var(--particle-delay), var(--particle-delay);
}

.landing-particle-ring{
    width:min(50vw, 660px);
    height:min(50vw, 660px);
    margin:auto;
    inset:0;
    transform:translate3d(var(--landing-shift-x, 0px), var(--landing-shift-y, 0px), 0);
    filter:drop-shadow(0 0 20px rgba(162,140,243,.12));
}

.landing-particle-ring-b{
    width:min(38vw, 500px);
    height:min(38vw, 500px);
    transform:translate3d(calc(var(--landing-shift-x, 0px) * -.45), calc(var(--landing-shift-y, 0px) * -.45), 0);
}

.landing-ring-particle{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--ring-particle-size);
    height:var(--ring-particle-size);
    margin-left:calc(var(--ring-particle-size) * -.5);
    margin-top:calc(var(--ring-particle-size) * -.5);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(82,224,255,.7) 44%, rgba(82,224,255,0) 74%);
    opacity:var(--ring-particle-opacity);
    box-shadow:0 0 10px rgba(82,224,255,.14);
    transform:
        rotate(var(--ring-angle))
        translateY(calc(var(--ring-radius) * -1))
        scale(var(--ring-scale));
    animation:
        landingRingBreath var(--ring-duration) ease-in-out infinite,
        landingParticleFlicker var(--ring-flicker) ease-in-out infinite;
    animation-delay:var(--ring-delay), var(--ring-delay);
}

.landing-particle-ring-b .landing-ring-particle{
    background:radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(162,140,243,.72) 46%, rgba(162,140,243,0) 74%);
    box-shadow:0 0 10px rgba(162,140,243,.14);
}

.landing-core{
    display:grid;
    place-items:center;
}

.landing-glow{
    position:absolute;
    width:min(42vw, 560px);
    height:min(42vw, 560px);
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(162,140,243,.26) 0%, rgba(162,140,243,.1) 34%, rgba(82,224,255,.08) 56%, transparent 74%);
    filter:blur(12px);
    transform:translate3d(calc(var(--landing-shift-x, 0px) * .55), calc(var(--landing-shift-y, 0px) * .55), 0);
}

.landing-logo-wrap{
    position:relative;
    z-index:2;
    display:grid;
    place-items:center;
    width:min(34vw, 420px);
    height:min(34vw, 420px);
    min-width:210px;
    min-height:210px;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 44%, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 30%, rgba(10,8,20,.08) 62%, rgba(10,8,20,0) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 0 42px rgba(162,140,243,.16),
        0 0 120px rgba(82,224,255,.08);
    transform:translate3d(var(--landing-shift-x, 0px), var(--landing-shift-y, 0px), 0);
}

.landing-logo-wrap::after{
    content:"";
    position:absolute;
    inset:-8%;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(82,224,255,.08) 0%, rgba(82,224,255,.04) 38%, rgba(162,140,243,.08) 54%, transparent 72%);
    filter:blur(10px);
    opacity:.95;
}

.landing-logo{
    position:relative;
    z-index:3;
    width:min(22vw, 270px);
    min-width:150px;
    height:auto;
    display:block;
    filter:
        drop-shadow(0 0 14px rgba(162,140,243,.24))
        drop-shadow(0 0 48px rgba(82,224,255,.12));
    transform:translateZ(0);
    animation:landingPulse 6.8s ease-in-out infinite;
}

@keyframes landingFloat{
    0%, 100%{ transform:translate3d(0, 0, 0) scale(1); }
    50%{ transform:translate3d(0, -14px, 0) scale(1.05); }
}

@keyframes landingPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.035); }
}

@keyframes landingParticleFloat{
    0%, 100%{ transform:translate3d(0, 0, 0) scale(1); }
    50%{ transform:translate3d(var(--particle-x), var(--particle-y), 0) scale(1.18); }
}

@keyframes landingParticleFlicker{
    0%, 100%{ opacity:.18; }
    30%{ opacity:.64; }
    60%{ opacity:.34; }
}

@keyframes landingRingBreath{
    0%, 100%{
        opacity:var(--ring-particle-opacity);
        transform:
            rotate(var(--ring-angle))
            translateY(calc(var(--ring-radius) * -1))
            scale(var(--ring-scale));
    }
    50%{
        opacity:calc(var(--ring-particle-opacity) + .22);
        transform:
            rotate(var(--ring-angle))
            translateY(calc((var(--ring-radius) + var(--ring-depth)) * -1))
            scale(calc(var(--ring-scale) + .14));
    }
}

@media (max-width: 768px){
    .landing-grid{
        background-size:40px 40px;
        transform:perspective(720px) rotateX(76deg) scale(1.85) translateY(22%);
        opacity:.28;
    }

    .landing-logo-wrap{
        width:min(62vw, 320px);
        height:min(62vw, 320px);
        min-width:180px;
        min-height:180px;
    }

    .landing-logo{
        width:min(40vw, 210px);
        min-width:128px;
    }

    .landing-particle-ring{
        width:min(82vw, 440px);
        height:min(82vw, 440px);
    }

    .landing-particle-ring-b{
        width:min(62vw, 330px);
        height:min(62vw, 330px);
    }
}

/* ===== SPARICA Landing Reboot ===== */
.landing-root{
    background:
        linear-gradient(180deg, rgba(7, 8, 16, .48) 0%, rgba(7, 8, 16, .32) 100%),
        radial-gradient(circle at 50% calc(48% - 50px), rgba(162,140,243,.1) 0%, rgba(162,140,243,.03) 39%, transparent 84%),
        radial-gradient(circle at 18% 18%, rgba(82,224,255,.05) 0%, transparent 42%),
        radial-gradient(circle at 82% 72%, rgba(162,140,243,.07) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 50%, rgba(167,139,250,.09) 0%, transparent 90%),
        radial-gradient(ellipse at 80% 20%, rgba(167,139,250,.05) 0%, transparent 75%),
        var(--win-desktop);
    --landing-shift-x:0px;
    --landing-shift-y:0px;
}

.landing-noise,
.landing-grid,
.landing-stars,
.landing-aurora,
.landing-flash,
.landing-shell,
.landing-panel,
.landing-core-glow,
.landing-logo-stage{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.landing-noise{
    opacity:.06;
}

.landing-grid{
    inset:-14%;
    background-image:
        linear-gradient(rgba(162,140,243,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(162,140,243,.1) 1px, transparent 1px);
    background-size:56px 56px;
    transform:perspective(960px) rotateX(78deg) scale(1.6) translateY(18%);
    transform-origin:center bottom;
    opacity:.18;
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.86) 34%, rgba(0,0,0,1) 100%);
}

.landing-stars{
    overflow:hidden;
    opacity:.74;
}

.landing-star{
    position:absolute;
    width:var(--star-size);
    height:var(--star-size);
    left:var(--star-left);
    top:var(--star-top);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(82,224,255,.5) 55%, rgba(82,224,255,0) 80%);
    opacity:.2;
    box-shadow:0 0 4px rgba(82,224,255,.08);
    animation:
        landingStarTwinkle var(--star-twinkle) ease-in-out infinite,
        landingStarDrift var(--star-drift) ease-in-out infinite;
    animation-delay:var(--star-delay), var(--star-delay);
}

.landing-aurora{
    width:72vw;
    height:72vw;
    max-width:1020px;
    max-height:1020px;
    min-width:480px;
    min-height:480px;
    margin:auto;
    border-radius:50%;
    filter:blur(28px);
    opacity:.18;
}

.landing-aurora-a{
    inset:auto auto 8% 8%;
    background:radial-gradient(circle, rgba(82,224,255,.14) 0%, rgba(82,224,255,.035) 44%, transparent 74%);
    animation:landingAuroraFloat 10s ease-in-out infinite;
}

.landing-aurora-b{
    inset:10% 10% auto auto;
    background:radial-gradient(circle, rgba(162,140,243,.3) 0%, rgba(162,140,243,.08) 42%, transparent 72%);
    animation:landingAuroraFloat 12s ease-in-out infinite reverse;
}

.landing-flash{
    width:min(70vw, 980px);
    height:min(70vw, 980px);
    margin:auto;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(162,140,243,.14) 16%, rgba(82,224,255,.04) 32%, transparent 66%);
    display:none;
}

.landing-shell{
    display:grid;
    place-items:center;
}

.landing-panel{
    position:relative;
    z-index:16;
    width:min(520px, calc(100vw - 56px));
    min-height:340px;
    margin:auto;
    background:transparent;
    box-shadow:none;
    overflow:visible;
    transform:
        translate3d(var(--landing-shift-x), var(--landing-shift-y), 0)
        translateY(42px)
        scale(.86);
    opacity:0;
    transition:transform .18s ease-out;
}

.landing-root.is-live .landing-panel{
    animation:landingPanelEnter 1.25s cubic-bezier(.18,.86,.2,1) forwards;
}

.landing-core-glow{
    z-index:1;
    width:min(87%, 390px);
    height:min(87%, 390px);
    margin:auto;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle, rgba(162,140,243,.09) 0%, rgba(82,224,255,.028) 34%, transparent 68%);
    filter:blur(10px);
    transform:translate3d(calc(var(--landing-shift-x) * .4), calc(var(--landing-shift-y) * .4 - 50px), 0);
}

.landing-hero{
    position:absolute;
    inset:0;
    z-index:4;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:translate3d(0, 18px, 0);
    will-change:transform, opacity;
    backface-visibility:hidden;
    width:100%;
    text-align:center;
}

.landing-root.is-live .landing-hero{
    animation:landingHeroSequence 3s cubic-bezier(.22,1,.36,1) .08s forwards;
}

.landing-logo-stage{
    display:grid;
    place-items:center;
    width:min(323px, 71vw);
    height:min(186px, 41vw);
    margin-inline:auto;
}

.landing-logo-link{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    pointer-events:auto;
    touch-action:manipulation;
}

.landing-logo{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center center;
    will-change:transform, opacity, filter;
    backface-visibility:hidden;
    filter:
        drop-shadow(0 0 7px rgba(162,140,243,.12))
        drop-shadow(0 0 17px rgba(82,224,255,.06));
    transform:translateY(18px);
    opacity:0;
}

.landing-root.is-live .landing-logo{
    animation:landingLogoEnterDesktop 3s cubic-bezier(.16,.86,.2,1) .08s forwards;
}

.landing-cta{
    position:absolute;
    left:50%;
    bottom:68px;
    z-index:6;
    width:107px;
    margin-left:-53.5px;
    display:grid;
    place-items:center;
    opacity:0;
    transform:translate3d(0, 22px, 0) scale(.92);
    pointer-events:auto;
    touch-action:manipulation;
    transition:transform .18s ease, filter .18s ease;
    will-change:transform, opacity;
    backface-visibility:hidden;
    background:transparent;
    border:0;
    outline:none;
    box-shadow:none;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    font-size:0;
    line-height:0;
}

.landing-root.is-live .landing-cta{
    animation:landingCtaReveal .88s ease-out 2.05s forwards;
}

.landing-showcase{
    display:none;
    position:absolute;
    left:50%;
    bottom:-280px;
    z-index:5;
    width:min(430px, calc(100vw - 28px));
    transform:translate3d(-50%, 24px, 0) scale(.96);
    opacity:0;
    pointer-events:none;
    will-change:transform, opacity;
}

.landing-root.is-live .landing-showcase{
    animation:landingShowcaseReveal 1s cubic-bezier(.18,.82,.24,1) 2.14s forwards;
}

.landing-showcase-image{
    display:block;
    width:100%;
    height:auto;
}

.landing-cta:hover{
    transform:translateY(-2px) scale(1.02);
}

.landing-cta:focus,
.landing-cta:focus-visible,
.landing-cta:active{
    outline:none;
    background:transparent;
    box-shadow:none;
}

.landing-cta-icon{
    width:107px;
    height:auto;
    display:block;
    vertical-align:top;
    filter:
        drop-shadow(0 0 5px rgba(167,139,250,.12))
        drop-shadow(0 0 10px rgba(82,224,255,.08));
}

@keyframes landingPanelEnter{
    0%{
        opacity:0;
        transform:
            translate3d(var(--landing-shift-x), var(--landing-shift-y), 0)
            translateY(42px)
            scale(.86);
    }
    44%{
        opacity:1;
        transform:
            translate3d(var(--landing-shift-x), var(--landing-shift-y), 0)
            translateY(-8px)
            scale(1.03);
    }
    100%{
        opacity:1;
        transform:
            translate3d(var(--landing-shift-x), var(--landing-shift-y), 0)
            translateY(0)
            scale(1);
    }
}

@keyframes landingHeroSequence{
    0%{
        opacity:0;
        transform:translate3d(0, 16px, 0);
    }
    24%{
        opacity:1;
        transform:translate3d(0, 0, 0);
    }
    58%{
        opacity:1;
        transform:translate3d(0, 0, 0);
    }
    100%{
        opacity:1;
        transform:translate3d(0, -100px, 0);
    }
}

@keyframes landingLogoEnterDesktop{
    0%{
        opacity:0;
        transform:translateY(18px);
        filter:
            drop-shadow(0 0 11px rgba(162,140,243,.12))
            drop-shadow(0 0 27px rgba(82,224,255,.08))
            blur(8px);
    }
    40%{
        opacity:1;
        transform:translateY(-2px);
    }
    58%{
        opacity:1;
        transform:translateY(0);
        filter:
            drop-shadow(0 0 7px rgba(162,140,243,.12))
            drop-shadow(0 0 17px rgba(82,224,255,.06));
    }
    100%{
        opacity:1;
        transform:translateY(0);
        filter:
            drop-shadow(0 0 7px rgba(162,140,243,.12))
            drop-shadow(0 0 17px rgba(82,224,255,.06));
    }
}

@keyframes landingCtaReveal{
    from{
        opacity:0;
        transform:translateY(22px) scale(.92);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes landingShowcaseReveal{
    from{
        opacity:0;
        transform:translate3d(-50%, 24px, 0) scale(.96);
    }
    to{
        opacity:1;
        transform:translate3d(-50%, 0, 0) scale(1);
    }
}

@keyframes landingOpeningFlash{
    0%{
        opacity:0;
        transform:scale(.46);
    }
    26%{
        opacity:.92;
        transform:scale(1.04);
    }
    100%{
        opacity:0;
        transform:scale(1.42);
    }
}

@keyframes landingAuroraFloat{
    0%, 100%{ transform:translate3d(0, 0, 0) scale(1); }
    50%{ transform:translate3d(0, -18px, 0) scale(1.08); }
}

@keyframes landingStarTwinkle{
    0%, 100%{ opacity:.16; }
    35%{ opacity:.7; }
    60%{ opacity:.28; }
}

@keyframes landingStarDrift{
    0%, 100%{ transform:translate3d(0, 0, 0) scale(1); }
    50%{ transform:translate3d(var(--star-drift-x), var(--star-drift-y), 0) scale(1.16); }
}

@media (max-width: 768px){
    .landing-grid{
        background-size:42px 42px;
        transform:perspective(760px) rotateX(78deg) scale(1.82) translateY(24%);
        opacity:.16;
    }

    .landing-panel{
        width:min(420px, calc(100vw - 28px));
        min-height:320px;
    }

    .landing-logo{
        width:100%;
        height:100%;
    }

    .landing-logo-link{
        pointer-events:none;
        touch-action:none;
        cursor:default;
    }

    .landing-hero{
    }

    .landing-logo-stage{
        width:min(239px, 60vw);
        height:min(137px, 34vw);
    }

    .landing-root.is-live .landing-logo{
        animation-name:landingLogoEnterMobile;
    }

    @keyframes landingLogoEnterMobile{
        0%{
            opacity:0;
            transform:translateY(18px) scale(1.18);
            filter:
                drop-shadow(0 0 11px rgba(162,140,243,.12))
                drop-shadow(0 0 27px rgba(82,224,255,.08))
                blur(8px);
        }
        40%{
            opacity:1;
            transform:translateY(-2px) scale(1.03);
        }
        58%{
            opacity:1;
            transform:translateY(0) scale(1);
            filter:
                drop-shadow(0 0 7px rgba(162,140,243,.12))
                drop-shadow(0 0 17px rgba(82,224,255,.06));
        }
        100%{
            opacity:1;
            transform:translateY(0) scale(.7);
            filter:
                drop-shadow(0 0 7px rgba(162,140,243,.12))
                drop-shadow(0 0 17px rgba(82,224,255,.06));
        }
    }

    @keyframes landingHeroSequence{
        0%{
            opacity:0;
            transform:translate3d(0, 16px, 0);
        }
        24%{
            opacity:1;
            transform:translate3d(0, 0, 0);
        }
        58%{
            opacity:1;
            transform:translate3d(0, 0, 0);
        }
        100%{
            opacity:1;
            transform:translate3d(0, -190px, 0);
        }
    }

    .landing-cta{
        bottom:-82px;
        width:96px;
        margin-left:-48px;
        pointer-events:auto;
    }

    .landing-cta-icon{
        width:96px;
        height:auto;
    }

    .landing-showcase{
        display:block;
        bottom:-12px;
        width:min(221px, calc(100vw - 20px));
    }
}

.landing-intro-cloud,
.landing-orbit-particles{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.landing-intro-cloud{
    display:grid;
    place-items:center;
    perspective:1400px;
    transform-style:preserve-3d;
    z-index:6;
    mix-blend-mode:normal;
    opacity:1;
    animation:landingIntroCloudFade 8.2s ease-out forwards;
}

.landing-orbit-particles{
    display:grid;
    place-items:center;
    opacity:0;
    z-index:7;
}

.landing-root.is-live .landing-orbit-particles{
    animation:landingOrbitReveal 1.2s ease-out 1.25s forwards;
}

.landing-intro-particle{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--intro-size);
    height:var(--intro-size);
    margin-left:calc(var(--intro-size) * -.5);
    margin-top:calc(var(--intro-size) * -.5);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(82,224,255,.74) 46%, rgba(162,140,243,.28) 68%, rgba(162,140,243,0) 100%);
    box-shadow:0 0 9px rgba(82,224,255,.14), 0 0 17px rgba(162,140,243,.08);
    opacity:0;
    transform-style:preserve-3d;
}

.landing-root.is-live .landing-intro-particle{
    animation:landingIntroParticle var(--intro-duration) cubic-bezier(.14,.84,.2,1) forwards;
    animation-delay:var(--intro-delay);
}

.landing-orbit-particle{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--orbit-size);
    height:var(--orbit-size);
    margin-left:calc(var(--orbit-size) * -.5);
    margin-top:calc(var(--orbit-size) * -.5);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(82,224,255,.72) 42%, rgba(162,140,243,.2) 70%, rgba(162,140,243,0) 100%);
    box-shadow:0 0 6px rgba(82,224,255,.1);
    opacity:var(--orbit-opacity);
    transform:
        rotate(var(--orbit-angle))
        translateY(calc(var(--orbit-radius) * -1))
        translateZ(var(--orbit-depth));
    animation:
        landingOrbitSpin 28s linear infinite,
        landingOrbitFlicker var(--orbit-flicker) ease-in-out infinite;
    animation-delay:0s, var(--orbit-delay);
}

@keyframes landingIntroParticle{
    0%{
        opacity:0;
        transform:
            rotateX(var(--intro-rot-x))
            rotateY(var(--intro-rot-y))
            rotateZ(var(--intro-rot-z))
            translate3d(0, 0, 0)
            scale(.2);
    }
    16%{
        opacity:calc(var(--intro-opacity) + .08);
    }
    42%{
        opacity:calc(var(--intro-opacity) + .22);
        transform:
            rotateX(var(--intro-rot-x))
            rotateY(var(--intro-rot-y))
            rotateZ(var(--intro-rot-z))
            translate3d(var(--intro-spread-x), var(--intro-spread-y), var(--intro-depth))
            scale(1.08);
    }
    54%{
        opacity:calc(var(--intro-opacity) + .04);
        transform:
            rotateX(var(--intro-rot-x))
            rotateY(var(--intro-rot-y))
            rotateZ(var(--intro-rot-z))
            translate3d(var(--intro-spread-x), var(--intro-spread-y), var(--intro-depth))
            scale(1.08);
    }
    64%{
        opacity:0;
        transform:
            rotateX(var(--intro-rot-x))
            rotateY(var(--intro-rot-y))
            rotateZ(var(--intro-rot-z))
            translate3d(var(--intro-spread-x), var(--intro-spread-y), var(--intro-depth))
            scale(1.08);
    }
    100%{
        opacity:0;
        transform:
            rotateX(var(--intro-rot-x))
            rotateY(var(--intro-rot-y))
            rotateZ(var(--intro-rot-z))
            translate3d(var(--intro-spread-x), var(--intro-spread-y), var(--intro-depth))
            scale(1.08);
    }
}

@keyframes landingIntroCloudFade{
    0%, 56%{
        opacity:1;
    }
    66%, 100%{
        opacity:0;
    }
}

@keyframes landingOrbitReveal{
    from{
        opacity:0;
        transform:scale(.92);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes landingOrbitSpin{
    from{
        transform:
            rotate(var(--orbit-angle))
            translateY(calc(var(--orbit-radius) * -1))
            translateZ(var(--orbit-depth));
    }
    to{
        transform:
            rotate(calc(var(--orbit-angle) + 360deg))
            translateY(calc(var(--orbit-radius) * -1))
            translateZ(var(--orbit-depth));
    }
}

@keyframes landingOrbitFlicker{
    0%, 100%{ opacity:var(--orbit-opacity); }
    45%{ opacity:calc(var(--orbit-opacity) + .08); }
    72%{ opacity:calc(var(--orbit-opacity) - .04); }
}

@media (max-width: 768px){
    .landing-intro-cloud{
        perspective:980px;
    }
}