/* ============================================================
   СВОИ | Новости России
   PREMIUM MOTION INTRO 2026
   Concept: «СВОИ — ИМПУЛЬС РОССИИ»
   HTML5 + CSS3 + Vanilla JavaScript
   ============================================================ */


/* ============================================================
   ROOT
   ============================================================ */

.svoi-intro {
    --svoi-intro-bg: #030a13;
    --svoi-intro-bg-2: #061221;
    --svoi-intro-bg-3: #0a1a2d;

    --svoi-intro-surface: rgba(10,26,45,.82);

    --svoi-intro-white: #ffffff;

    --svoi-intro-blue: #1677ff;
    --svoi-intro-blue-bright: #4da3ff;

    --svoi-intro-red: #e3314b;
    --svoi-intro-red-bright: #ff5368;

    --svoi-intro-text: #f7f9fd;
    --svoi-intro-muted: #8f9daf;

    --svoi-intro-duration: 2900ms;
    --svoi-intro-exit-duration: 420ms;

    --svoi-intro-pointer-x: 50%;
    --svoi-intro-pointer-y: 42%;

    --svoi-intro-ribbon-x: 0px;
    --svoi-intro-ribbon-y: 0px;
    --svoi-intro-ribbon-rx: 0deg;
    --svoi-intro-ribbon-ry: 0deg;

    --svoi-intro-mx: 0px;
    --svoi-intro-my: 0px;
    --svoi-intro-near: 0;

    position: fixed;

    z-index: 2147480000;

    inset: 0;

    width: 100vw;

    min-height: 100vh;
    min-height: 100dvh;

    overflow: hidden;

    color: var(--svoi-intro-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle 760px
            at var(--svoi-intro-pointer-x)
            var(--svoi-intro-pointer-y),
            rgba(31,121,255,.16),
            transparent 67%
        ),
        radial-gradient(
            circle 540px
            at 90% 82%,
            rgba(227,49,75,.065),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            #020810 0%,
            #061321 47%,
            #030a13 100%
        );

    isolation: isolate;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}


.svoi-intro.is-mounted {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.svoi-intro.is-finished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


.svoi-intro *,
.svoi-intro *::before,
.svoi-intro *::after {
    box-sizing: border-box;
}


.svoi-intro button {
    font: inherit;
    color: inherit;
}


/* ============================================================
   MASTER STAGE
   ============================================================ */

.svoi-intro__stage {
    position: absolute;

    inset: 0;

    overflow: hidden;

    perspective: 1400px;

    background:
        radial-gradient(
            circle 900px at 50% 46%,
            rgba(12,43,76,.18),
            transparent 72%
        );
}


/* cinematic vignette */

.svoi-intro__stage::after {
    content: "";

    position: absolute;
    z-index: 40;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 38%,
            rgba(0,0,0,.13) 72%,
            rgba(0,0,0,.43) 120%
        );
}


/* ============================================================
   DIGITAL GRID
   ============================================================ */

.svoi-intro__grid {
    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.65) 48%,
            transparent 82%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.65) 48%,
            transparent 82%
        );
}


.svoi-intro.is-playing
.svoi-intro__grid {
    animation:
        svoi-intro-grid-in
        .8s ease
        .08s forwards;
}


@keyframes svoi-intro-grid-in {
    from {
        opacity: 0;
        transform: scale(1.035);
    }

    to {
        opacity: .17;
        transform: scale(1);
    }
}


/* ============================================================
   AMBIENT LIGHT
   ============================================================ */

.svoi-intro__aura {
    position: absolute;
    z-index: 2;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(20px);

    opacity: 0;
}


.svoi-intro__aura--blue {
    left: -8%;
    top: -8%;

    width: 60vw;
    height: 56vh;

    background:
        radial-gradient(
            ellipse at center,
            rgba(34,124,255,.20),
            rgba(34,124,255,.035) 52%,
            transparent 72%
        );
}


.svoi-intro__aura--red {
    right: -12%;
    bottom: -18%;

    width: 50vw;
    height: 50vh;

    background:
        radial-gradient(
            ellipse at center,
            rgba(227,49,75,.12),
            rgba(30,87,166,.025) 55%,
            transparent 74%
        );
}


.svoi-intro.is-playing
.svoi-intro__aura--blue {
    animation:
        svoi-intro-blue-aura
        3.2s ease-out forwards;
}


.svoi-intro.is-playing
.svoi-intro__aura--red {
    animation:
        svoi-intro-red-aura
        3.2s ease-out forwards;
}


@keyframes svoi-intro-blue-aura {
    0% {
        opacity: 0;
        transform:
            translate3d(-45px,-25px,0)
            scale(.88);
    }

    35% {
        opacity: .65;
    }

    100% {
        opacity: .42;
        transform:
            translate3d(45px,25px,0)
            scale(1.05);
    }
}


@keyframes svoi-intro-red-aura {
    0% {
        opacity: 0;
        transform:
            translate3d(55px,35px,0)
            scale(.9);
    }

    48% {
        opacity: .36;
    }

    100% {
        opacity: .22;
        transform:
            translate3d(-25px,-20px,0)
            scale(1.04);
    }
}


/* ============================================================
   ARCHITECTURAL PLANES
   ============================================================ */

.svoi-intro__architecture {
    position: absolute;
    z-index: 5;

    inset: 0;

    pointer-events: none;
}


.svoi-intro__panel {
    position: absolute;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(10,27,46,.98),
            rgba(3,11,20,.995)
        );

    border:
        1px solid rgba(255,255,255,.045);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 30px 90px rgba(0,0,0,.26);

    will-change:
        transform,
        opacity;
}


/* TOP LEFT */

.svoi-intro__panel--top {
    left: -5%;
    top: -9%;

    width: 68%;
    height: 56%;

    opacity: 0;

    transform:
        translate3d(-7%,-9%,0)
        rotate(-2deg)
        scale(1.06);

    clip-path:
        polygon(
            0 0,
            100% 0,
            89% 77%,
            61% 84%,
            54% 100%,
            0 91%
        );
}


/* BOTTOM RIGHT */

.svoi-intro__panel--bottom {
    right: -5%;
    bottom: -10%;

    width: 72%;
    height: 58%;

    opacity: 0;

    transform:
        translate3d(8%,10%,0)
        rotate(1.5deg)
        scale(1.06);

    clip-path:
        polygon(
            17% 5%,
            42% 0,
            49% 17%,
            100% 9%,
            100% 100%,
            0 100%,
            4% 29%
        );
}


/* LEFT SMALL CUT */

.svoi-intro__panel--left {
    left: -5%;
    top: 33%;

    width: 26%;
    height: 45%;

    opacity: 0;

    transform:
        translate3d(-20%,12%,0)
        rotate(2deg);

    background:
        linear-gradient(
            150deg,
            rgba(7,21,37,.93),
            rgba(3,10,18,.96)
        );

    clip-path:
        polygon(
            0 0,
            100% 16%,
            82% 76%,
            37% 100%,
            0 85%
        );
}


/* RIGHT SMALL CUT */

.svoi-intro__panel--right {
    right: -4%;
    top: 16%;

    width: 24%;
    height: 39%;

    opacity: 0;

    transform:
        translate3d(22%,-10%,0)
        rotate(-2deg);

    background:
        linear-gradient(
            145deg,
            rgba(7,23,41,.91),
            rgba(3,12,22,.97)
        );

    clip-path:
        polygon(
            19% 0,
            100% 0,
            100% 100%,
            0 80%
        );
}


/* panel subtle inner lines */

.svoi-intro__panel::after {
    content: "";

    position: absolute;

    inset: 10%;

    border:
        1px solid rgba(255,255,255,.025);

    opacity: .7;

    transform: skewX(-6deg);
}


.svoi-intro.is-playing
.svoi-intro__panel--top {
    animation:
        svoi-intro-panel-top-in
        .75s cubic-bezier(.18,.72,.22,1)
        .04s forwards;
}


.svoi-intro.is-playing
.svoi-intro__panel--bottom {
    animation:
        svoi-intro-panel-bottom-in
        .78s cubic-bezier(.18,.72,.22,1)
        .07s forwards;
}


.svoi-intro.is-playing
.svoi-intro__panel--left {
    animation:
        svoi-intro-panel-left-in
        .7s cubic-bezier(.18,.72,.22,1)
        .15s forwards;
}


.svoi-intro.is-playing
.svoi-intro__panel--right {
    animation:
        svoi-intro-panel-right-in
        .72s cubic-bezier(.18,.72,.22,1)
        .12s forwards;
}


@keyframes svoi-intro-panel-top-in {
    to {
        opacity: .92;

        transform:
            translate3d(0,0,0)
            rotate(-.7deg)
            scale(1);
    }
}


@keyframes svoi-intro-panel-bottom-in {
    to {
        opacity: .94;

        transform:
            translate3d(0,0,0)
            rotate(.5deg)
            scale(1);
    }
}


@keyframes svoi-intro-panel-left-in {
    to {
        opacity: .62;

        transform:
            translate3d(0,0,0)
            rotate(.5deg);
    }
}


@keyframes svoi-intro-panel-right-in {
    to {
        opacity: .58;

        transform:
            translate3d(0,0,0)
            rotate(-.5deg);
    }
}


/* ============================================================
   ARCHITECTURAL MICRO LINES
   ============================================================ */

.svoi-intro__signal {
    position: absolute;
    z-index: 9;

    pointer-events: none;
}


.svoi-intro__signal--one {
    left: 7%;
    top: 16%;

    width: 145px;
    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.37),
            var(--svoi-intro-blue),
            transparent
        );

    transform: rotate(-4deg);
}


.svoi-intro__signal--two {
    right: 9%;
    bottom: 17%;

    width: 105px;
    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--svoi-intro-blue),
            var(--svoi-intro-red),
            transparent
        );

    transform: rotate(3deg);
}


.svoi-intro.is-playing
.svoi-intro__signal--one {
    animation:
        svoi-intro-signal-one
        1.4s ease
        .25s forwards;
}


.svoi-intro.is-playing
.svoi-intro__signal--two {
    animation:
        svoi-intro-signal-two
        1.5s ease
        .45s forwards;
}


@keyframes svoi-intro-signal-one {
    0% {
        opacity: 0;
        transform:
            translateX(-50px)
            rotate(-4deg)
            scaleX(.35);
    }

    45% {
        opacity: .8;
    }

    100% {
        opacity: .28;
        transform:
            translateX(15px)
            rotate(-4deg)
            scaleX(1);
    }
}


@keyframes svoi-intro-signal-two {
    0% {
        opacity: 0;
        transform:
            translateX(55px)
            rotate(3deg)
            scaleX(.35);
    }

    55% {
        opacity: .72;
    }

    100% {
        opacity: .25;
        transform:
            translateX(-15px)
            rotate(3deg)
            scaleX(1);
    }
}


/* ============================================================
   LIGHT RIFT
   ============================================================ */

.svoi-intro__rift {
    position: absolute;
    z-index: 14;

    left: 51%;
    top: 19%;

    width: min(34vw, 510px);
    height: 52px;

    transform:
        translateX(-50%)
        rotate(-8deg)
        skewX(-16deg);

    overflow: hidden;

    pointer-events: none;

    opacity: 0;
}


.svoi-intro__rift::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 2px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28) 18%,
            #ffffff 32%,
            var(--svoi-intro-blue) 52%,
            var(--svoi-intro-red) 72%,
            rgba(227,49,75,.14) 87%,
            transparent
        );

    box-shadow:
        0 0 8px rgba(255,255,255,.14),
        0 0 20px rgba(25,117,255,.17),
        0 0 17px rgba(227,49,75,.08);
}


.svoi-intro__rift::after {
    content: "";

    position: absolute;

    top: 3px;
    bottom: 3px;

    width: 74px;

    left: -100px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.42),
            rgba(47,139,255,.27),
            transparent
        );

    filter: blur(7px);
}


.svoi-intro.is-playing
.svoi-intro__rift {
    animation:
        svoi-intro-rift-in
        .6s ease
        .25s forwards;
}


.svoi-intro.is-playing
.svoi-intro__rift::after {
    animation:
        svoi-intro-rift-sweep
        1.15s cubic-bezier(.18,.75,.2,1)
        .72s forwards;
}


@keyframes svoi-intro-rift-in {
    to {
        opacity: .8;
    }
}


@keyframes svoi-intro-rift-sweep {
    0% {
        left: -110px;
        opacity: 0;
    }

    15% {
        opacity: .95;
    }

    70% {
        opacity: .72;
    }

    100% {
        left: calc(100% + 110px);
        opacity: 0;
    }
}


/* ============================================================
   KINETIC TRICOLOR RIBBON
   ============================================================ */

.svoi-intro__ribbon-stage {
    position: absolute;
    z-index: 12;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    perspective: 1300px;
}


.svoi-intro__ribbon-reactor {
    position: absolute;

    inset: -7% -5%;

    transform:
        translate3d(
            var(--svoi-intro-ribbon-x),
            var(--svoi-intro-ribbon-y),
            0
        )
        rotateX(
            var(--svoi-intro-ribbon-rx)
        )
        rotateY(
            var(--svoi-intro-ribbon-ry)
        );

    transform-origin: center;

    transition:
        transform .9s cubic-bezier(.18,.72,.22,1);
}


.svoi-intro__ribbon-svg {
    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;

    transform:
        scale(1.04);

    transform-origin: center;
}


/* base trajectory */

.svoi-intro__ribbon-base {
    fill: none;

    stroke-linecap: round;

    stroke-width: 2;

    opacity: 0;
}


.svoi-intro__ribbon-base--white {
    stroke: rgba(255,255,255,.24);
}


.svoi-intro__ribbon-base--blue {
    stroke: rgba(38,133,255,.26);
}


.svoi-intro__ribbon-base--red {
    stroke: rgba(238,60,87,.23);
}


.svoi-intro.is-playing
.svoi-intro__ribbon-base {
    animation:
        svoi-intro-ribbon-base-in
        .6s ease
        .35s forwards;
}


@keyframes svoi-intro-ribbon-base-in {
    to {
        opacity: .09;
    }
}


/* moving glow */

.svoi-intro__ribbon-glow {
    fill: none;

    stroke-linecap: round;

    stroke-width: 16;

    pathLength: 100;

    stroke-dasharray: 22 78;

    stroke-dashoffset: 116;

    opacity: 0;

    filter: blur(9px);
}


.svoi-intro__ribbon-glow--white {
    stroke: rgba(255,255,255,.75);
}


.svoi-intro__ribbon-glow--blue {
    stroke: rgba(34,128,255,.95);
}


.svoi-intro__ribbon-glow--red {
    stroke: rgba(235,54,80,.82);
}


/* actual moving lines */

.svoi-intro__ribbon-motion {
    fill: none;

    stroke-linecap: round;

    stroke-width: 4.2;

    pathLength: 100;

    stroke-dasharray: 24 76;

    stroke-dashoffset: 116;

    opacity: 0;

    filter:
        drop-shadow(
            0 0 5px currentColor
        );
}


.svoi-intro__ribbon-motion--white {
    color: #ffffff;
    stroke: #ffffff;
}


.svoi-intro__ribbon-motion--blue {
    color: #2685ff;
    stroke: #2685ff;
}


.svoi-intro__ribbon-motion--red {
    color: #ed3d58;
    stroke: #ed3d58;
}


/* individual timing */

.svoi-intro.is-playing
.svoi-intro__ribbon-glow--white,
.svoi-intro.is-playing
.svoi-intro__ribbon-motion--white {
    animation:
        svoi-intro-ribbon-flight-white
        1.63s
        cubic-bezier(.28,.04,.27,1)
        .40s forwards;
}


.svoi-intro.is-playing
.svoi-intro__ribbon-glow--blue,
.svoi-intro.is-playing
.svoi-intro__ribbon-motion--blue {
    animation:
        svoi-intro-ribbon-flight-blue
        1.58s
        cubic-bezier(.28,.04,.27,1)
        .44s forwards;
}


.svoi-intro.is-playing
.svoi-intro__ribbon-glow--red,
.svoi-intro.is-playing
.svoi-intro__ribbon-motion--red {
    animation:
        svoi-intro-ribbon-flight-red
        1.65s
        cubic-bezier(.28,.04,.27,1)
        .49s forwards;
}


@keyframes svoi-intro-ribbon-flight-white {
    0% {
        opacity: 0;
        stroke-dashoffset: 120;
    }

    12% {
        opacity: .95;
    }

    48% {
        stroke-dashoffset: 57;
        opacity: 1;
    }

    83% {
        opacity: .93;
    }

    100% {
        stroke-dashoffset: -33;
        opacity: .22;
    }
}


@keyframes svoi-intro-ribbon-flight-blue {
    0% {
        opacity: 0;
        stroke-dashoffset: 125;
    }

    11% {
        opacity: 1;
    }

    50% {
        stroke-dashoffset: 51;
        opacity: 1;
    }

    83% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -39;
        opacity: .25;
    }
}


@keyframes svoi-intro-ribbon-flight-red {
    0% {
        opacity: 0;
        stroke-dashoffset: 130;
    }

    11% {
        opacity: .96;
    }

    52% {
        stroke-dashoffset: 50;
        opacity: .98;
    }

    84% {
        opacity: .93;
    }

    100% {
        stroke-dashoffset: -43;
        opacity: .22;
    }
}


/* ============================================================
   CENTRAL GATHERING POINT
   «ИМПУЛЬС СВОИХ»
   ============================================================ */

.svoi-intro__gather {
    position: absolute;
    z-index: 28;

    left: 50%;
    top: 47%;

    width: 330px;
    height: 94px;

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

    pointer-events: none;
}


.svoi-intro__gather-line {
    position: absolute;

    left: 3px;

    width: 132px;
    height: 2px;

    border-radius: 100px;

    opacity: 0;

    transform-origin:
        right center;
}


.svoi-intro__gather-line--white {
    top: 26px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95)
        );
}


.svoi-intro__gather-line--blue {
    top: 45px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--svoi-intro-blue-bright)
        );
}


.svoi-intro__gather-line--red {
    top: 64px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--svoi-intro-red-bright)
        );
}


.svoi-intro__gather-point {
    position: absolute;

    left: 161px;
    top: 43px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #fff;

    opacity: 0;

    transform: scale(.4);

    box-shadow:
        0 0 10px rgba(255,255,255,.8),
        0 0 25px rgba(43,134,255,.4);
}


.svoi-intro__gather-ray {
    position: absolute;

    left: 168px;
    top: 46px;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #fff,
            var(--svoi-intro-blue),
            rgba(227,49,75,.65),
            transparent
        );

    opacity: 0;
}


.svoi-intro.is-playing
.svoi-intro__gather-line--white {
    animation:
        svoi-intro-gather-line
        .62s cubic-bezier(.2,.7,.2,1)
        .94s forwards;
}


.svoi-intro.is-playing
.svoi-intro__gather-line--blue {
    animation:
        svoi-intro-gather-line
        .62s cubic-bezier(.2,.7,.2,1)
        1.00s forwards;
}


.svoi-intro.is-playing
.svoi-intro__gather-line--red {
    animation:
        svoi-intro-gather-line
        .62s cubic-bezier(.2,.7,.2,1)
        1.06s forwards;
}


.svoi-intro.is-playing
.svoi-intro__gather-point {
    animation:
        svoi-intro-gather-point
        .58s ease-out
        1.22s forwards;
}


.svoi-intro.is-playing
.svoi-intro__gather-ray {
    animation:
        svoi-intro-gather-ray
        .65s ease-out
        1.34s forwards;
}


@keyframes svoi-intro-gather-line {
    0% {
        opacity: 0;
        transform:
            translateX(-60px)
            scaleX(.3);
    }

    40% {
        opacity: 1;
    }

    75% {
        opacity: .95;

        transform:
            translateX(23px)
            scaleX(1);
    }

    100% {
        opacity: .1;

        transform:
            translateX(29px)
            scaleX(.12);
    }
}


@keyframes svoi-intro-gather-point {
    0% {
        opacity: 0;
        transform: scale(.35);
    }

    38% {
        opacity: 1;

        transform: scale(1.55);

        box-shadow:
            0 0 8px rgba(255,255,255,.95),
            0 0 25px rgba(49,140,255,.85),
            0 0 44px rgba(227,49,75,.17),
            0 0 0 0 rgba(255,255,255,.30);
    }

    67% {
        box-shadow:
            0 0 7px rgba(255,255,255,.8),
            0 0 20px rgba(49,140,255,.6),
            0 0 40px rgba(227,49,75,.10),
            0 0 0 18px rgba(255,255,255,0);
    }

    100% {
        opacity: .2;
        transform: scale(.7);
    }
}


@keyframes svoi-intro-gather-ray {
    0% {
        width: 0;
        opacity: 0;
    }

    22% {
        opacity: .95;
    }

    100% {
        width: 135px;
        opacity: 0;
    }
}


/* ============================================================
   CENTRAL BRAND SCENE
   ============================================================ */

.svoi-intro__center {
    position: absolute;
    z-index: 35;

    left: 50%;
    top: 50%;

    width:
        min(calc(100% - 40px), 760px);

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

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    pointer-events: none;
}


/* optional context */

.svoi-intro__context {
    min-height: 18px;

    margin-bottom: 12px;

    color:
        var(--svoi-intro-blue-bright);

    font-size: 10px;
    line-height: 1;

    font-weight: 780;

    letter-spacing: .14em;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(7px);
}


.svoi-intro__context:empty {
    display: none;
}


.svoi-intro.is-playing
.svoi-intro__context:not(:empty) {
    animation:
        svoi-intro-meta-in
        .42s ease
        1.12s forwards;
}


/* ============================================================
   LOGO
   ============================================================ */

.svoi-intro__brand {
    position: relative;

    min-height: 112px;

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


.svoi-intro__logo {
    display: none;

    width: auto;
    height:
        clamp(70px, 8vw, 112px);

    max-width:
        min(62vw, 480px);

    object-fit: contain;

    opacity: 0;

    transform:
        translateY(14px)
        scale(.975);

    filter:
        drop-shadow(
            0 18px 44px
            rgba(0,0,0,.32)
        );
}


.svoi-intro.has-logo
.svoi-intro__logo {
    display: block;
}


.svoi-intro.has-logo
.svoi-intro__brand-word {
    display: none;
}


.svoi-intro.is-playing.has-logo
.svoi-intro__logo {
    animation:
        svoi-intro-logo-in
        .57s cubic-bezier(.18,.78,.22,1)
        1.18s forwards;
}


@keyframes svoi-intro-logo-in {
    0% {
        opacity: 0;

        transform:
            translateY(14px)
            scale(.975);

        filter:
            drop-shadow(
                0 18px 44px
                rgba(0,0,0,.32)
            );
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            drop-shadow(
                0 0 17px
                rgba(255,255,255,.06)
            )
            drop-shadow(
                0 0 34px
                rgba(38,129,255,.13)
            )
            drop-shadow(
                0 18px 44px
                rgba(0,0,0,.32)
            );
    }
}


/* ============================================================
   TEXTUAL BRAND
   ============================================================ */

.svoi-intro__brand-word {
    position: relative;

    display: inline-block;

    color: #fff;

    font-size:
        clamp(80px, 8.3vw, 126px);

    line-height: .82;

    font-weight: 900;

    letter-spacing: -.07em;

    opacity: 0;

    transform:
        translateY(16px)
        scale(.975);

    text-shadow:
        0 20px 55px rgba(0,0,0,.33);

    white-space: nowrap;
}


/* brand controlled highlight */

.svoi-intro__brand-word::before {
    content: "";

    position: absolute;

    inset: -20px -25px;

    pointer-events: none;

    background:
        linear-gradient(
            112deg,
            transparent 25%,
            rgba(255,255,255,.17) 47%,
            transparent 66%
        );

    opacity: 0;

    transform:
        translateX(-120%);

    mix-blend-mode: screen;
}


.svoi-intro.is-playing
.svoi-intro__brand-word {
    animation:
        svoi-intro-brand-in
        .62s cubic-bezier(.18,.78,.22,1)
        1.18s forwards;
}


.svoi-intro.is-playing
.svoi-intro__brand-word::before {
    animation:
        svoi-intro-brand-shine
        .85s ease
        1.43s forwards;
}


@keyframes svoi-intro-brand-in {
    0% {
        opacity: 0;

        letter-spacing: -.035em;

        transform:
            translateY(16px)
            scale(.975);
    }

    72% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        letter-spacing: -.07em;

        transform:
            translateY(0)
            scale(1);

        text-shadow:
            0 0 18px rgba(255,255,255,.06),
            0 0 36px rgba(34,125,255,.14),
            0 20px 55px rgba(0,0,0,.33);
    }
}


@keyframes svoi-intro-brand-shine {
    0% {
        opacity: 0;
        transform:
            translateX(-120%);
    }

    35% {
        opacity: .85;
    }

    100% {
        opacity: 0;
        transform:
            translateX(120%);
    }
}


/* ============================================================
   BRAND UNDERLINE
   ============================================================ */

.svoi-intro__brand-line {
    position: relative;

    width: 154px;
    height: 3px;

    margin-top: 27px;

    border-radius: 100px;

    overflow: hidden;

    opacity: 0;

    transform:
        scaleX(.14);

    background:
        linear-gradient(
            90deg,
            #fff 0 31%,
            var(--svoi-intro-blue) 31% 67%,
            var(--svoi-intro-red) 67% 100%
        );

    box-shadow:
        0 0 13px rgba(255,255,255,.08),
        0 0 18px rgba(31,121,255,.18),
        0 0 13px rgba(227,49,75,.09);
}


.svoi-intro__brand-line::after {
    content: "";

    position: absolute;

    top: -4px;
    bottom: -4px;

    width: 28px;

    left: -36px;

    background:
        rgba(255,255,255,.8);

    filter: blur(6px);
}


.svoi-intro.is-playing
.svoi-intro__brand-line {
    animation:
        svoi-intro-brand-line
        .53s cubic-bezier(.18,.75,.22,1)
        1.48s forwards;
}


.svoi-intro.is-playing
.svoi-intro__brand-line::after {
    animation:
        svoi-intro-line-sweep
        .65s ease
        1.62s forwards;
}


@keyframes svoi-intro-brand-line {
    to {
        opacity: .94;
        transform: scaleX(1);
    }
}


@keyframes svoi-intro-line-sweep {
    to {
        left: calc(100% + 35px);
    }
}


/* ============================================================
   DESCRIPTOR
   ============================================================ */

.svoi-intro__descriptor {
    margin-top: 18px;

    color: #edf3fa;

    font-size:
        clamp(16px,1.4vw,21px);

    line-height: 1.2;

    font-weight: 720;

    letter-spacing: .035em;

    opacity: 0;

    transform:
        translateY(9px);
}


.svoi-intro.is-playing
.svoi-intro__descriptor {
    animation:
        svoi-intro-meta-in
        .45s cubic-bezier(.18,.75,.22,1)
        1.58s forwards;
}


/* ============================================================
   TAGLINE
   ============================================================ */

.svoi-intro__tagline {
    margin-top: 8px;

    color:
        var(--svoi-intro-muted);

    font-size:
        clamp(12px,1vw,15px);

    line-height: 1.4;

    font-weight: 540;

    letter-spacing: .01em;

    opacity: 0;

    transform:
        translateY(8px);
}


.svoi-intro.is-playing
.svoi-intro__tagline {
    animation:
        svoi-intro-meta-in
        .45s cubic-bezier(.18,.75,.22,1)
        1.72s forwards;
}


@keyframes svoi-intro-meta-in {
    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


/* ============================================================
   SKIP AREA

   Pointer-events are restored only here.
   ============================================================ */

.svoi-intro__skip-wrap {
    position: relative;
    z-index: 70;

    margin-top:
        clamp(35px,4vh,53px);

    pointer-events: auto;

    opacity: 0;

    transform:
        translateY(11px);
}


.svoi-intro.is-ready
.svoi-intro__skip-wrap {
    animation:
        svoi-intro-skip-in
        .4s cubic-bezier(.18,.75,.22,1)
        .12s forwards;
}


@keyframes svoi-intro-skip-in {
    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   PREMIUM SKIP BUTTON
   ============================================================ */

.svoi-intro__skip {
    --svoi-intro-mx: 0px;
    --svoi-intro-my: 0px;
    --svoi-intro-near: 0;

    position: relative;

    width:
        clamp(215px,18vw,252px);

    min-height: 54px;

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

    gap: 11px;

    padding:
        0 22px;

    overflow: hidden;

    border:
        1px solid transparent;

    border-radius:
        15px 15px 9px 15px;

    background:
        linear-gradient(
            180deg,
            rgba(11,30,52,.94),
            rgba(5,18,33,.97)
        )
        padding-box,

        linear-gradient(
            120deg,
            rgba(255,255,255,.48),
            rgba(255,255,255,.11) 28%,
            rgba(22,119,255,.58) 59%,
            rgba(227,49,75,.40)
        )
        border-box;

    color: #eef5fc;

    font-size: 12.5px;
    line-height: 1;

    font-weight: 690;

    letter-spacing: .005em;

    cursor: pointer;

    pointer-events: auto;

    transform:
        translate3d(
            var(--svoi-intro-mx),
            var(--svoi-intro-my),
            0
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),

        0 14px 35px rgba(0,0,0,.24),

        0 0 calc(
            7px +
            var(--svoi-intro-near) * 25px
        )
        rgba(35,127,255,.14);

    transition:
        transform .14s ease,
        color .22s ease,
        box-shadow .25s ease;
}


.svoi-intro__skip::before {
    content: "";

    position: absolute;

    inset: -60%;

    background:
        conic-gradient(
            from 190deg,

            transparent 0deg,

            rgba(255,255,255,.11) 65deg,

            rgba(22,119,255,.18) 135deg,

            transparent 205deg,

            rgba(227,49,75,.10) 285deg,

            transparent 360deg
        );

    opacity:
        calc(
            .09 +
            var(--svoi-intro-near) * .43
        );

    transform: rotate(-25deg);

    transition:
        opacity .25s ease;

    animation:
        svoi-intro-button-energy
        9s linear infinite;
}


@keyframes svoi-intro-button-energy {
    to {
        transform: rotate(335deg);
    }
}


/* button light sweep */

.svoi-intro__skip::after {
    content: "";

    position: absolute;

    top: -18%;
    bottom: -18%;

    left: -42%;

    width: 26%;

    transform:
        skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.26),
            transparent
        );

    opacity: 0;

    transition:
        left .56s ease,
        opacity .2s ease;
}


.svoi-intro__skip:hover {
    color: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),

        0 17px 42px rgba(0,0,0,.27),

        0 0 29px rgba(33,126,255,.15),

        0 0 18px rgba(227,49,75,.035);
}


.svoi-intro__skip:hover::after {
    left: 120%;
    opacity: .82;
}


.svoi-intro__skip-text,
.svoi-intro__skip-arrow {
    position: relative;
    z-index: 4;
}


.svoi-intro__skip-arrow {
    color:
        var(--svoi-intro-blue-bright);

    font-size: 17px;

    transition:
        transform .22s ease,
        color .22s ease;
}


.svoi-intro__skip:hover
.svoi-intro__skip-arrow {
    color: #fff;

    transform:
        translateX(3px);
}


/* ============================================================
   RIPPLE
   ============================================================ */

.svoi-intro__ripple {
    position: absolute;
    z-index: 2;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,

            rgba(255,255,255,.58),

            rgba(34,127,255,.28) 41%,

            rgba(227,49,75,.10) 59%,

            transparent 74%
        );

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

    animation:
        svoi-intro-ripple
        .58s ease-out forwards;
}


@keyframes svoi-intro-ripple {
    to {
        transform:
            translate(-50%,-50%)
            scale(13);

        opacity: 0;
    }
}


/* ============================================================
   SKIP KEYBOARD FOCUS
   ============================================================ */

.svoi-intro__skip:focus-visible {
    outline:
        2px solid rgba(102,180,255,.98);

    outline-offset: 4px;
}


/* ============================================================
   MICRO CAPTION
   ============================================================ */

.svoi-intro__skip-caption {
    display: block;

    margin-top: 10px;

    color: #5f6f82;

    font-size: 9.5px;
    line-height: 1;

    font-weight: 540;

    letter-spacing: .04em;
}


/* ============================================================
   FINAL CUT / PAGE REVEAL
   ============================================================ */

.svoi-intro__reveal-cut {
    position: absolute;
    z-index: 120;

    left: 50%;
    top: 50%;

    width: 120vw;
    height: 3px;

    transform:
        translate(-50%,-50%)
        rotate(-7deg)
        scaleX(0);

    transform-origin:
        center;

    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.1) 13%,
            #fff 32%,
            var(--svoi-intro-blue) 52%,
            var(--svoi-intro-red) 71%,
            rgba(227,49,75,.1) 88%,
            transparent 100%
        );

    box-shadow:
        0 0 8px rgba(255,255,255,.18),
        0 0 24px rgba(37,128,255,.32),
        0 0 20px rgba(227,49,75,.10);
}


/* ============================================================
   EXIT STATE
   ============================================================ */

.svoi-intro.is-exiting
.svoi-intro__reveal-cut {
    animation:
        svoi-intro-reveal-cut
        var(--svoi-intro-exit-duration)
        cubic-bezier(.25,.7,.2,1)
        forwards;
}


@keyframes svoi-intro-reveal-cut {
    0% {
        opacity: 0;
        transform:
            translate(-50%,-50%)
            rotate(-7deg)
            scaleX(.08);
    }

    24% {
        opacity: 1;
    }

    58% {
        opacity: .95;

        transform:
            translate(-50%,-50%)
            rotate(-7deg)
            scaleX(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            rotate(-7deg)
            scaleX(1.28);
    }
}


.svoi-intro.is-exiting
.svoi-intro__panel--top {
    animation: none;

    opacity: .98;

    transition:
        transform
        var(--svoi-intro-exit-duration)
        cubic-bezier(.35,.02,.18,1),
        opacity
        var(--svoi-intro-exit-duration)
        ease;

    transform:
        translate3d(11vw,-112%,0)
        rotate(4deg)
        scale(1.04);
}


.svoi-intro.is-exiting
.svoi-intro__panel--bottom {
    animation: none;

    opacity: .98;

    transition:
        transform
        var(--svoi-intro-exit-duration)
        cubic-bezier(.35,.02,.18,1),
        opacity
        var(--svoi-intro-exit-duration)
        ease;

    transform:
        translate3d(-12vw,112%,0)
        rotate(-4deg)
        scale(1.04);
}


.svoi-intro.is-exiting
.svoi-intro__panel--left {
    animation: none;

    transition:
        transform
        var(--svoi-intro-exit-duration)
        ease,
        opacity
        var(--svoi-intro-exit-duration)
        ease;

    opacity: 0;

    transform:
        translate3d(-120%,30%,0)
        rotate(-7deg);
}


.svoi-intro.is-exiting
.svoi-intro__panel--right {
    animation: none;

    transition:
        transform
        var(--svoi-intro-exit-duration)
        ease,
        opacity
        var(--svoi-intro-exit-duration)
        ease;

    opacity: 0;

    transform:
        translate3d(120%,-25%,0)
        rotate(7deg);
}


/* center goes into depth */

.svoi-intro.is-exiting
.svoi-intro__center {
    transition:
        opacity .30s ease,
        transform
        var(--svoi-intro-exit-duration)
        cubic-bezier(.35,.02,.18,1);

    opacity: 0;

    transform:
        translate(-50%,-50%)
        scale(.955)
        translateZ(-30px);
}


.svoi-intro.is-exiting
.svoi-intro__ribbon-reactor {
    transition:
        transform
        var(--svoi-intro-exit-duration)
        cubic-bezier(.35,.02,.18,1),
        opacity .30s ease;

    transform:
        translate3d(0,0,-150px)
        rotateX(5deg)
        rotateY(-4deg)
        scale(.87);

    opacity: 0;
}


.svoi-intro.is-exiting
.svoi-intro__rift,

.svoi-intro.is-exiting
.svoi-intro__signal,

.svoi-intro.is-exiting
.svoi-intro__grid,

.svoi-intro.is-exiting
.svoi-intro__aura {
    transition:
        opacity .30s ease;

    opacity: 0;
}


/* ============================================================
   SKIPPING STATE
   ============================================================ */

.svoi-intro.is-skipping
.svoi-intro__skip {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 0 30px rgba(33,126,255,.19);

    transform:
        translate3d(
            var(--svoi-intro-mx),
            var(--svoi-intro-my),
            0
        )
        scale(.985);
}


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

@media (max-width: 760px) {

    .svoi-intro__panel--top {
        left: -16%;
        top: -11%;

        width: 105%;
        height: 45%;

        clip-path:
            polygon(
                0 0,
                100% 0,
                92% 72%,
                64% 89%,
                22% 81%,
                0 95%
            );
    }


    .svoi-intro__panel--bottom {
        right: -18%;
        bottom: -12%;

        width: 110%;
        height: 49%;

        clip-path:
            polygon(
                18% 6%,
                57% 0,
                63% 15%,
                100% 6%,
                100% 100%,
                0 100%,
                5% 29%
            );
    }


    .svoi-intro__panel--left {
        width: 38%;
        height: 36%;

        top: 34%;
    }


    .svoi-intro__panel--right {
        width: 36%;
        height: 34%;
    }


    .svoi-intro__rift {
        left: auto;
        right: -25px;
        top: 18%;

        width: 53vw;

        transform:
            rotate(-15deg)
            skewX(-16deg);
    }


    .svoi-intro__ribbon-reactor {
        inset:
            -10% -70%;
    }


    .svoi-intro__ribbon-svg {
        transform:
            scale(1.58)
            translateX(5%)
            rotate(-3deg);
    }


    .svoi-intro__center {
        top: 48%;

        width:
            calc(100% - 26px);
    }


    .svoi-intro__brand {
        min-height: 78px;
    }


    .svoi-intro__brand-word {
        font-size:
            clamp(57px,20vw,78px);

        letter-spacing: -.065em;
    }


    .svoi-intro__logo {
        height:
            clamp(57px,17vw,76px);

        max-width: 77vw;
    }


    .svoi-intro__brand-line {
        width: 120px;

        margin-top: 20px;
    }


    .svoi-intro__descriptor {
        margin-top: 15px;

        font-size:
            clamp(14px,4.2vw,17px);
    }


    .svoi-intro__tagline {
        font-size:
            clamp(11px,3.4vw,13px);
    }


    .svoi-intro__skip-wrap {
        width: 100%;

        margin-top:
            clamp(30px,4vh,40px);
    }


    .svoi-intro__skip {
        width:
            min(calc(100vw - 54px), 315px);

        min-height: 52px;
    }


    .svoi-intro__gather {
        width: 250px;

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


    .svoi-intro__signal--one {
        left: 3%;
        top: 17%;

        width: 90px;
    }


    .svoi-intro__signal--two {
        right: 3%;
        bottom: 18%;

        width: 72px;
    }


    .svoi-intro__aura--blue {
        width: 100vw;
        height: 54vh;
    }


    .svoi-intro__aura--red {
        width: 90vw;
        height: 45vh;
    }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 360px) {

    .svoi-intro__brand-word {
        font-size: 56px;
    }


    .svoi-intro__skip {
        width:
            calc(100vw - 40px);

        font-size: 12px;
    }


    .svoi-intro__skip-caption {
        font-size: 9px;
    }

}


/* ============================================================
   SHORT / LANDSCAPE MOBILE
   ============================================================ */

@media (max-height: 560px) and (orientation: landscape) {

    .svoi-intro__center {
        top: 48%;
    }


    .svoi-intro__brand {
        min-height: 52px;
    }


    .svoi-intro__brand-word {
        font-size:
            clamp(48px,10vw,68px);
    }


    .svoi-intro__logo {
        height: 55px;
    }


    .svoi-intro__brand-line {
        width: 100px;

        margin-top: 13px;
    }


    .svoi-intro__descriptor {
        margin-top: 10px;

        font-size: 13px;
    }


    .svoi-intro__tagline {
        margin-top: 4px;

        font-size: 10.5px;
    }


    .svoi-intro__skip-wrap {
        margin-top: 18px;
    }


    .svoi-intro__skip {
        min-height: 46px;
    }


    .svoi-intro__skip-caption {
        display: none;
    }


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

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .svoi-intro *,
    .svoi-intro *::before,
    .svoi-intro *::after {
        animation-duration:
            .001ms !important;

        animation-delay:
            0ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }


    .svoi-intro__grid {
        opacity: .1 !important;
    }


    .svoi-intro__panel--top,
    .svoi-intro__panel--bottom {
        opacity: .9 !important;

        transform: none !important;
    }


    .svoi-intro__panel--left,
    .svoi-intro__panel--right {
        opacity: .4 !important;

        transform: none !important;
    }


    .svoi-intro__aura--blue {
        opacity: .32 !important;
    }


    .svoi-intro__aura--red {
        opacity: .13 !important;
    }


    .svoi-intro__rift {
        opacity: .45 !important;
    }


    .svoi-intro__ribbon-base {
        opacity: .08 !important;
    }


    .svoi-intro__ribbon-motion {
        opacity: .42 !important;

        stroke-dasharray:
            38 62 !important;

        stroke-dashoffset:
            10 !important;
    }


    .svoi-intro__ribbon-glow {
        opacity: .06 !important;

        stroke-dasharray:
            38 62 !important;

        stroke-dashoffset:
            10 !important;
    }


    .svoi-intro__ribbon-reactor {
        transform:
            none !important;
    }


    .svoi-intro__brand-word,
    .svoi-intro__logo,
    .svoi-intro__brand-line,
    .svoi-intro__descriptor,
    .svoi-intro__tagline,
    .svoi-intro__skip-wrap,
    .svoi-intro__context {
        opacity: 1 !important;

        transform:
            none !important;
    }


    .svoi-intro__skip {
        transform:
            none !important;
    }


    .svoi-intro__gather {
        display: none;
    }


    .svoi-intro__signal {
        opacity: .18 !important;
    }

}


/* 3.7.7 official image logo replaces the duplicate text logo. */
.svoi-intro__logo + .svoi-intro__brand-word{display:none}

/* ============================================================
   3.8.0 — approved Splash branding scale only.
   Existing timing, transitions, motion policy and lifecycle stay intact.
   ============================================================ */
.svoi-intro__brand{min-height:142px}
.svoi-intro__logo{height:clamp(92px,9.5vw,142px);max-width:min(76vw,600px)}
@media(max-width:560px){.svoi-intro__brand{min-height:96px}.svoi-intro__logo{height:clamp(70px,21vw,94px);max-width:88vw}}
@media(max-width:360px){.svoi-intro__logo{height:clamp(66px,20vw,84px);max-width:90vw}}
@media(max-height:560px) and (orientation:landscape){.svoi-intro__brand{min-height:64px}.svoi-intro__logo{height:64px;max-width:62vw}}