/* ==========================================================
   SCABNET PREMIUM LOGOUT
   ========================================================== */

.sn-logout-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

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

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(8, 48, 61, .92) 0%,
            rgba(3, 18, 26, .97) 34%,
            rgba(1, 6, 10, .99) 68%,
            #010306 100%
        );

    backdrop-filter: blur(0px);

    transition:
        opacity .28s ease,
        visibility .28s ease,
        backdrop-filter .7s ease;
}

.sn-logout-overlay.sn-logout-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    backdrop-filter: blur(13px);
}


/* ----------------------------------------------------------
   BACKGROUND GRID
   ---------------------------------------------------------- */

.sn-logout-grid {
    position: absolute;
    inset: -30%;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(87, 210, 235, .07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(87, 210, 235, .07) 1px,
            transparent 1px
        );

    background-size: 62px 62px;

    transform:
        perspective(900px)
        rotateX(68deg)
        translateY(38%);

    transform-origin: center;

    animation:
        snLogoutGridDown
        1.5s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes snLogoutGridDown {
    to {
        opacity: 0;
        transform:
            perspective(900px)
            rotateX(68deg)
            translateY(52%)
            scale(.92);
    }
}


/* ----------------------------------------------------------
   HORIZONTAL SHUTDOWN LINE
   ---------------------------------------------------------- */

.sn-logout-horizon {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 0;
    height: 1px;

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103,232,249,.15),
            rgba(207,250,254,.95),
            rgba(103,232,249,.15),
            transparent
        );

    box-shadow:
        0 0 18px rgba(103,232,249,.65);

    opacity: 0;
}

.sn-logout-active .sn-logout-horizon {
    animation:
        snLogoutHorizon
        1.25s ease forwards;
}

@keyframes snLogoutHorizon {

    0% {
        width: 0;
        opacity: 0;
    }

    25% {
        width: min(900px, 76vw);
        opacity: .8;
    }

    75% {
        width: min(900px, 76vw);
        opacity: .35;
    }

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


/* ----------------------------------------------------------
   CENTRAL SYSTEM
   ---------------------------------------------------------- */

.sn-logout-system {
    position: relative;

    width: min(560px, 74vw);
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    transform: scale(.92);
    opacity: 0;
}

.sn-logout-active .sn-logout-system {
    animation:
        snLogoutSystemIn
        .35s ease forwards;
}

@keyframes snLogoutSystemIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ----------------------------------------------------------
   RINGS
   ---------------------------------------------------------- */

.sn-logout-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(103,232,249,.13);

    box-shadow:
        inset 0 0 24px
        rgba(103,232,249,.015);
}

.sn-logout-ring::before,
.sn-logout-ring::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #8beeff;

    box-shadow:
        0 0 12px
        rgba(103,232,249,.95);
}

.sn-logout-ring::before {
    left: 50%;
    top: -3px;
}

.sn-logout-ring::after {
    left: 50%;
    bottom: -3px;
}


.sn-logout-ring-a {
    inset: 0;

    border-top-color:
        rgba(103,232,249,.70);

    border-left-color:
        rgba(103,232,249,.25);

    animation:
        snLogoutSpinA
        1.15s linear forwards;
}

.sn-logout-ring-b {
    inset: 14%;

    border-right-color:
        rgba(103,232,249,.60);

    animation:
        snLogoutSpinB
        1.1s linear forwards;
}

.sn-logout-ring-c {
    inset: 29%;

    border-bottom-color:
        rgba(165,243,252,.65);

    animation:
        snLogoutSpinA
        .9s linear forwards;
}

@keyframes snLogoutSpinA {

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

    65% {
        transform: rotate(240deg);
        opacity: 1;
    }

    100% {
        transform:
            rotate(300deg)
            scale(.08);

        opacity: 0;
    }
}

@keyframes snLogoutSpinB {

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

    65% {
        transform: rotate(-200deg);
        opacity: 1;
    }

    100% {
        transform:
            rotate(-270deg)
            scale(.08);

        opacity: 0;
    }
}


/* ----------------------------------------------------------
   SCANNER ARCS
   ---------------------------------------------------------- */

.sn-logout-scan {
    position: absolute;

    inset: 8%;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 300deg,
            rgba(103,232,249,.025) 320deg,
            rgba(103,232,249,.22) 350deg,
            transparent 360deg
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 72%,
            #000 73% 76%,
            transparent 77%
        );

    animation:
        snLogoutScanner
        .85s linear forwards;
}

@keyframes snLogoutScanner {
    to {
        transform: rotate(310deg);
        opacity: 0;
    }
}


/* ----------------------------------------------------------
   CENTER CORE
   ---------------------------------------------------------- */

.sn-logout-core {
    position: relative;

    z-index: 5;

    width: 126px;
    height: 126px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(103,232,249,.22);

    background:
        radial-gradient(
            circle,
            rgba(103,232,249,.16),
            rgba(5,29,39,.88) 46%,
            rgba(2,10,15,.98) 72%
        );

    box-shadow:
        0 0 35px
        rgba(103,232,249,.11),
        inset 0 0 28px
        rgba(103,232,249,.08);

    animation:
        snLogoutCoreShutdown
        1.35s ease-in forwards;
}

.sn-logout-core-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #9cf3ff;

    box-shadow:
        0 0 8px #67e8f9,
        0 0 22px rgba(103,232,249,.95),
        0 0 42px rgba(103,232,249,.48);

    animation:
        snLogoutDot
        1.4s ease-in forwards;
}

@keyframes snLogoutCoreShutdown {

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

    60% {
        transform: scale(.95);
        opacity: 1;
    }

    82% {
        transform: scale(.24);
        opacity: .85;
    }

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

@keyframes snLogoutDot {

    0%,
    65% {
        transform: scale(1);
        opacity: 1;
    }

    80% {
        transform: scale(2.2);
        opacity: 1;
    }

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


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

.sn-logout-copy {
    position: absolute;

    left: 50%;
    top: calc(50% + 105px);

    z-index: 20;

    width: min(560px, 90vw);

    transform: translateX(-50%);

    text-align: center;
}

.sn-logout-status {
    display: block;

    min-height: 24px;

    color:
        rgba(225,250,255,.94);

    font-size:
        clamp(11px, 1vw, 14px);

    font-weight: 700;

    letter-spacing: .22em;

    text-transform: uppercase;

    transition:
        opacity .12s ease,
        transform .12s ease;
}

.sn-logout-status.sn-logout-changing {
    opacity: 0;
    transform: translateY(-5px);
}

.sn-logout-sub {
    display: block;

    margin-top: 9px;

    color:
        rgba(111,153,169,.55);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .20em;

    text-transform: uppercase;
}


/* ----------------------------------------------------------
   PROGRESS
   ---------------------------------------------------------- */

.sn-logout-progress {
    position: absolute;

    left: 50%;
    top: calc(50% + 170px);

    width: min(320px, 65vw);
    height: 1px;

    transform: translateX(-50%);

    overflow: hidden;

    background:
        rgba(103,232,249,.08);
}

.sn-logout-progress::after {
    content: "";

    position: absolute;

    inset: 0;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(103,232,249,.25),
            rgba(165,243,252,.95)
        );

    box-shadow:
        0 0 10px
        rgba(103,232,249,.55);

    animation:
        snLogoutProgress
        1.42s cubic-bezier(.3,.1,.2,1) forwards;
}

@keyframes snLogoutProgress {

    0% {
        transform: scaleX(0);
    }

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


/* ----------------------------------------------------------
   FINAL OFFLINE
   ---------------------------------------------------------- */

.sn-logout-final {
    position: absolute;

    inset: 0;

    z-index: 50;

    display: grid;
    place-items: center;

    opacity: 0;

    pointer-events: none;
}

.sn-logout-final-inner {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 11px;

    transform: scale(.96);
}

.sn-logout-final-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(103,232,249,.8);

    box-shadow:
        0 0 12px
        rgba(103,232,249,.7);
}

.sn-logout-final strong {
    color:
        rgba(221,248,253,.92);

    font-size:
        clamp(12px, 1.1vw, 16px);

    letter-spacing: .28em;
}

.sn-logout-final small {
    color:
        rgba(104,139,153,.52);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .22em;
}

.sn-logout-overlay.sn-logout-complete
.sn-logout-system,

.sn-logout-overlay.sn-logout-complete
.sn-logout-copy,

.sn-logout-overlay.sn-logout-complete
.sn-logout-progress {

    opacity: 0;

    transition: opacity .15s ease;
}

.sn-logout-overlay.sn-logout-complete
.sn-logout-final {

    animation:
        snLogoutFinal
        .25s ease forwards;
}

@keyframes snLogoutFinal {

    to {
        opacity: 1;
    }
}


/* ----------------------------------------------------------
   SCREEN COLLAPSE
   ---------------------------------------------------------- */

.sn-logout-overlay.sn-logout-exit::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 100;

    background: #010306;

    transform: scaleY(0);

    transform-origin: center;

    animation:
        snLogoutScreenClose
        .28s ease-in forwards;
}

@keyframes snLogoutScreenClose {

    0% {
        transform: scaleY(0);
    }

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


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .sn-logout-system {
        width: min(420px, 88vw);
    }

    .sn-logout-core {
        width: 100px;
        height: 100px;
    }

    .sn-logout-copy {
        top: calc(50% + 90px);
    }

    .sn-logout-progress {
        top: calc(50% + 150px);
    }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    .sn-logout-ring,
    .sn-logout-scan,
    .sn-logout-core,
    .sn-logout-core-dot,
    .sn-logout-grid,
    .sn-logout-horizon,
    .sn-logout-progress::after {

        animation-duration: .01ms !important;
    }
}



/* ==========================================================
   SCABNET LOGOUT V2
   5 SECOND EARTH SHUTDOWN
   ========================================================== */


/* Alten Ring-Core aus V1 ausblenden.
   Die neue Erde übernimmt das Zentrum. */

.sn-logout-system {
    width: min(720px, 82vw) !important;
}

.sn-logout-ring,
.sn-logout-scan,
.sn-logout-core {
    display: none !important;
}


/* ----------------------------------------------------------
   EARTH CONTAINER
   ---------------------------------------------------------- */

.sn-logout-earth-stage {
    position: absolute;

    left: 50%;
    top: 50%;

    width:
        min(
            650px,
            72vw,
            72vh
        );

    aspect-ratio: 1;

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

    transform-style: preserve-3d;
    perspective: 1200px;

    z-index: 12;

    pointer-events: none;

    opacity: 0;
}


/* Sobald Logout beginnt */

.sn-logout-active
.sn-logout-earth-stage {

    animation:
        snLogoutEarthAppear
        .65s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


@keyframes snLogoutEarthAppear {

    0% {
        opacity: 0;

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

        filter:
            blur(8px);
    }

    100% {
        opacity: 1;

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

        filter:
            blur(0);
    }
}


/* ----------------------------------------------------------
   CANVAS
   ---------------------------------------------------------- */

#snLogoutEarth {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    transform-style: preserve-3d;

    will-change:
        transform,
        opacity,
        filter;
}


/* ----------------------------------------------------------
   EARTH BACK GLOW
   ---------------------------------------------------------- */

.sn-logout-earth-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 67%;
    height: 67%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(103,232,249,.12) 0%,
            rgba(103,232,249,.055) 40%,
            rgba(103,232,249,.015) 61%,
            transparent 74%
        );

    box-shadow:
        0 0 70px
        rgba(103,232,249,.08);

    animation:
        snLogoutEarthGlowPulse
        1.3s ease-in-out infinite alternate;
}


@keyframes snLogoutEarthGlowPulse {

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

    to {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}


/* ----------------------------------------------------------
   OUTER HUD CIRCLES
   ---------------------------------------------------------- */

.sn-logout-earth-hud {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 77%;
    height: 77%;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(103,232,249,.075);

    opacity: .8;
}


.sn-logout-earth-hud::before,
.sn-logout-earth-hud::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(103,232,249,.05);
}


.sn-logout-earth-hud::before {
    inset: -8%;

    border-top-color:
        rgba(103,232,249,.22);

    animation:
        snLogoutHudRotate
        6s linear infinite;
}


.sn-logout-earth-hud::after {
    inset: 8%;

    border-right-color:
        rgba(103,232,249,.16);

    animation:
        snLogoutHudRotateReverse
        8s linear infinite;
}


@keyframes snLogoutHudRotate {

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


@keyframes snLogoutHudRotateReverse {

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


/* ----------------------------------------------------------
   SHUTDOWN
   JS setzt nach ca. 3 Sekunden sn-earth-shutdown
   ---------------------------------------------------------- */

.sn-logout-overlay.sn-earth-shutdown
.sn-logout-earth-stage {

    animation:
        snLogoutEarthShutdown
        1.55s
        cubic-bezier(.65,.02,.9,.55)
        forwards;
}


@keyframes snLogoutEarthShutdown {

    0% {
        opacity: 1;

        transform:
            translate(-50%, -54%)
            perspective(1200px)
            rotateX(0deg)
            rotateY(0deg)
            rotateZ(0deg)
            scale(1);

        filter:
            blur(0)
            brightness(1);
    }


    28% {
        opacity: 1;

        transform:
            translate(-50%, -54%)
            perspective(1200px)
            rotateX(9deg)
            rotateY(-18deg)
            rotateZ(2deg)
            scale(.94);

        filter:
            blur(0)
            brightness(1.08);
    }


    60% {
        opacity: .78;

        transform:
            translate(-50%, -54%)
            perspective(1200px)
            rotateX(28deg)
            rotateY(-64deg)
            rotateZ(8deg)
            scale(.67);

        filter:
            blur(1px)
            brightness(.82);
    }


    82% {
        opacity: .35;

        transform:
            translate(-50%, -54%)
            perspective(1200px)
            rotateX(46deg)
            rotateY(-115deg)
            rotateZ(14deg)
            scale(.27);

        filter:
            blur(2px)
            brightness(1.3);
    }


    100% {
        opacity: 0;

        transform:
            translate(-50%, -54%)
            perspective(1200px)
            rotateX(62deg)
            rotateY(-155deg)
            rotateZ(19deg)
            scale(.025);

        filter:
            blur(5px)
            brightness(2);
    }
}


/* HUD fährt etwas früher herunter */

.sn-logout-overlay.sn-earth-shutdown
.sn-logout-earth-hud {

    transition:
        opacity .75s ease,
        transform 1.1s ease;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.45)
        rotate(90deg);
}


.sn-logout-overlay.sn-earth-shutdown
.sn-logout-earth-glow {

    transition:
        opacity 1.25s ease,
        transform 1.25s ease,
        filter 1.25s ease;

    opacity: 0;

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

    filter:
        brightness(3);
}


/* ----------------------------------------------------------
   FINAL ENERGY DOT
   ---------------------------------------------------------- */

.sn-logout-earth-collapse-dot {

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 40;

    width: 7px;
    height: 7px;

    margin:
        -3.5px 0 0 -3.5px;

    border-radius: 50%;

    opacity: 0;

    background:
        rgba(220,252,255,1);

    box-shadow:
        0 0 8px rgba(103,232,249,1),
        0 0 25px rgba(103,232,249,.95),
        0 0 55px rgba(103,232,249,.6),
        0 0 100px rgba(103,232,249,.25);
}


.sn-logout-overlay.sn-earth-collapsed
.sn-logout-earth-collapse-dot {

    animation:
        snLogoutCollapseDot
        .65s ease-out forwards;
}


@keyframes snLogoutCollapseDot {

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

    25% {
        opacity: 1;
        transform: scale(3.2);
    }

    55% {
        opacity: 1;
        transform: scale(1);
    }

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


/* ----------------------------------------------------------
   SMALL PARTICLE FLASH
   ---------------------------------------------------------- */

.sn-logout-earth-flash {

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 35;

    width: 1px;
    height: 1px;

    border-radius: 50%;

    opacity: 0;

    box-shadow:
        0 -45px 0 rgba(103,232,249,.5),
        32px -32px 0 rgba(103,232,249,.4),
        45px 0 0 rgba(103,232,249,.5),
        32px 32px 0 rgba(103,232,249,.35),
        0 45px 0 rgba(103,232,249,.45),
        -32px 32px 0 rgba(103,232,249,.3),
        -45px 0 0 rgba(103,232,249,.45),
        -32px -32px 0 rgba(103,232,249,.35);
}


.sn-logout-overlay.sn-earth-collapsed
.sn-logout-earth-flash {

    animation:
        snLogoutEarthFlash
        .55s ease-out forwards;
}


@keyframes snLogoutEarthFlash {

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

    20% {
        opacity: 1;
    }

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


/* ----------------------------------------------------------
   COPY POSITION
   ---------------------------------------------------------- */

.sn-logout-copy {
    top:
        calc(50% + 235px) !important;
}


.sn-logout-progress {
    top:
        calc(50% + 292px) !important;
}


/* ----------------------------------------------------------
   FINAL OFFLINE
   ---------------------------------------------------------- */

.sn-logout-final {

    background:
        radial-gradient(
            circle at center,
            rgba(9,39,49,.10),
            transparent 35%
        );
}


.sn-logout-final strong {

    text-shadow:
        0 0 18px
        rgba(103,232,249,.18);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .sn-logout-earth-stage {

        width:
            min(
                500px,
                92vw
            );

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


    .sn-logout-copy {

        top:
            calc(50% + 175px) !important;
    }


    .sn-logout-progress {

        top:
            calc(50% + 225px) !important;
    }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    .sn-logout-earth-hud::before,
    .sn-logout-earth-hud::after,
    .sn-logout-earth-glow {

        animation: none !important;
    }
}


/* ==========================================================
   SCABNET LOGOUT EARTH - SAFE V3
   ========================================================== */

.sn-logout-earth-v3 {
    position: absolute;
    left: 50%;
    top: 47%;

    width: min(620px, 70vw);
    aspect-ratio: 1;

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

    opacity: 0;

    z-index: 10;

    pointer-events: none;

    perspective: 1200px;
    transform-style: preserve-3d;
}

.sn-logout-active .sn-logout-earth-v3 {
    animation:
        snEarthV3Enter
        .7s cubic-bezier(.2,.8,.2,1)
        forwards;
}

@keyframes snEarthV3Enter {
    from {
        opacity: 0;

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

        filter: blur(7px);
    }

    to {
        opacity: 1;

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

        filter: blur(0);
    }
}


.sn-logout-earth-v3-glow {
    position: absolute;

    inset: 16%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(103,232,249,.12),
            rgba(103,232,249,.035) 55%,
            transparent 73%
        );

    box-shadow:
        0 0 75px
        rgba(103,232,249,.10);

    animation:
        snEarthV3Glow
        1.5s ease-in-out infinite alternate;
}

@keyframes snEarthV3Glow {
    to {
        transform: scale(1.09);
        opacity: .65;
    }
}


.sn-logout-earth-v3-ring {
    position: absolute;

    inset: 10%;

    border-radius: 50%;

    border:
        1px solid
        rgba(103,232,249,.09);

    border-top-color:
        rgba(103,232,249,.38);

    animation:
        snEarthV3Ring
        7s linear infinite;
}

.sn-logout-earth-v3-ring::after {
    content: "";

    position: absolute;

    inset: 7%;

    border-radius: 50%;

    border:
        1px solid
        rgba(103,232,249,.055);

    border-right-color:
        rgba(103,232,249,.20);
}

@keyframes snEarthV3Ring {
    to {
        transform: rotate(360deg);
    }
}


#snLogoutEarthV3 {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    will-change:
        transform,
        opacity;
}


/* 2.3 Sekunden: Netzwerk fährt herunter */

.sn-logout-overlay.sn-earth-network-off
.sn-logout-earth-v3-ring {
    opacity: .15;

    transition:
        opacity 1s ease;
}


/* 3 Sekunden: komplette Erde wegdrehen */

.sn-logout-overlay.sn-earth-v3-shutdown
.sn-logout-earth-v3 {

    animation:
        snEarthV3Shutdown
        1.5s
        cubic-bezier(.55,.05,.9,.5)
        forwards;
}

@keyframes snEarthV3Shutdown {

    0% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            perspective(1200px)
            rotateX(0deg)
            rotateY(0deg)
            scale(1);
    }

    35% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            perspective(1200px)
            rotateX(12deg)
            rotateY(-25deg)
            scale(.92);
    }

    70% {
        opacity: .65;

        transform:
            translate(-50%, -50%)
            perspective(1200px)
            rotateX(32deg)
            rotateY(-85deg)
            rotateZ(8deg)
            scale(.52);

        filter:
            brightness(.85)
            blur(1px);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            perspective(1200px)
            rotateX(55deg)
            rotateY(-145deg)
            rotateZ(15deg)
            scale(.035);

        filter:
            brightness(2)
            blur(4px);
    }
}


/* Energiepunkt */

.sn-earth-v3-dot {
    position: absolute;

    left: 50%;
    top: 47%;

    z-index: 30;

    width: 7px;
    height: 7px;

    margin:
        -3px 0 0 -3px;

    border-radius: 50%;

    opacity: 0;

    background:
        #d9fbff;

    box-shadow:
        0 0 10px #67e8f9,
        0 0 30px rgba(103,232,249,.9),
        0 0 70px rgba(103,232,249,.45);
}

.sn-logout-overlay.sn-earth-v3-collapse
.sn-earth-v3-dot {

    animation:
        snEarthV3Dot
        .65s ease-out forwards;
}

@keyframes snEarthV3Dot {

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

    25% {
        opacity: 1;
        transform: scale(3.5);
    }

    65% {
        opacity: 1;
        transform: scale(1);
    }

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


/* Text unter die Erde */

.sn-logout-copy {
    top:
        calc(50% + 220px) !important;
}

.sn-logout-progress {
    top:
        calc(50% + 275px) !important;
}


@media (max-width: 700px) {

    .sn-logout-earth-v3 {
        width: 92vw;
        top: 43%;
    }

    .sn-earth-v3-dot {
        top: 43%;
    }

    .sn-logout-copy {
        top:
            calc(50% + 165px) !important;
    }

    .sn-logout-progress {
        top:
            calc(50% + 215px) !important;
    }
}