/* ==========================================================
   SCABNET LOGOUT
   EXACT LOGIN V5 EARTH
   ========================================================== */

#snLogoutLoginEarth {
    position: fixed !important;
    inset: 0 !important;

    z-index: 2147483646 !important;

    pointer-events: none !important;

    visibility: hidden;
    opacity: 0;

    perspective: 1600px;

    transition:
        opacity .22s ease;
}


#snLogoutLoginEarth.sn-le-active {
    visibility: visible;
    opacity: 1;
}


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

#snLogoutLoginEarth .sn-le-earth {
    position: absolute;

    left: 50%;
    top: 43%;

    width: min(720px, 72vw);
    height: min(720px, 72vw);

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

    transform-origin:
        center center;

    transform-style:
        preserve-3d;

    opacity: 0;

    filter:
        blur(5px)
        brightness(.8);

    will-change:
        transform,
        opacity,
        filter;
}


#snLogoutLoginEarth.sn-le-active
.sn-le-earth {
    animation:
        snLoginEarthEnter
        .65s
        cubic-bezier(.18,.82,.24,1)
        forwards;
}


@keyframes snLoginEarthEnter {

    0% {
        opacity: 0;

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

        filter:
            blur(7px)
            brightness(.7);
    }

    100% {
        opacity: 1;

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

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


#snLogoutLoginEarthCanvas {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}


/* ----------------------------------------------------------
   SUBTLE BACK GLOW
   ---------------------------------------------------------- */

#snLogoutLoginEarth .sn-le-glow {
    position: absolute;

    left: 50%;
    top: 43%;

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

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(50,190,220,.09) 0%,
            rgba(30,130,160,.045) 45%,
            transparent 72%
        );

    box-shadow:
        0 0 100px
        rgba(80,220,245,.08);

    opacity: 0;

    transition:
        opacity .5s ease;
}


#snLogoutLoginEarth.sn-le-active
.sn-le-glow {
    opacity: 1;
}


/* ----------------------------------------------------------
   DISCONNECT
   ---------------------------------------------------------- */

#snLogoutLoginEarth.sn-le-disconnecting
.sn-le-glow {
    opacity: .25;
}


/* ----------------------------------------------------------
   ACTUAL EARTH SHUTDOWN

   Wichtig:
   Der Canvas ist bis hier eine normale runde Orthographic-Erde.
   Erst JETZT wird das gesamte Earth-Objekt räumlich gekippt.
   ---------------------------------------------------------- */

#snLogoutLoginEarth.sn-le-shutdown
.sn-le-earth {
    animation:
        snLoginEarthShutdown
        1.45s
        cubic-bezier(.62,.02,.94,.45)
        forwards !important;
}


@keyframes snLoginEarthShutdown {

    0% {
        opacity: 1;

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

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

    20% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            rotateX(4deg)
            rotateY(-12deg)
            rotateZ(1deg)
            scale(.98);
    }

    48% {
        opacity: .95;

        transform:
            translate(-50%, -50%)
            rotateX(10deg)
            rotateY(-42deg)
            rotateZ(3deg)
            scale(.84);

        filter:
            brightness(1.08);
    }

    72% {
        opacity: .72;

        transform:
            translate(-50%, -50%)
            rotateX(20deg)
            rotateY(-82deg)
            rotateZ(7deg)
            scale(.58);

        filter:
            brightness(1.3)
            blur(.4px);
    }

    90% {
        opacity: .30;

        transform:
            translate(-50%, -50%)
            rotateX(32deg)
            rotateY(-124deg)
            rotateZ(12deg)
            scale(.24);

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

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            rotateX(46deg)
            rotateY(-158deg)
            rotateZ(16deg)
            scale(.025);

        filter:
            brightness(3)
            blur(6px);
    }
}


#snLogoutLoginEarth.sn-le-shutdown
.sn-le-glow {
    opacity: 0;

    transition:
        opacity .75s ease;
}


/* ----------------------------------------------------------
   FINAL CYAN POINT
   ---------------------------------------------------------- */

#snLogoutLoginEarth .sn-le-point {
    position: absolute;

    left: 50%;
    top: 43%;

    width: 5px;
    height: 5px;

    margin:
        -2.5px 0 0 -2.5px;

    border-radius: 50%;

    background:
        #e9fdff;

    opacity: 0;

    box-shadow:
        0 0 10px #67e8f9,
        0 0 28px rgba(103,232,249,.95),
        0 0 65px rgba(103,232,249,.65),
        0 0 130px rgba(103,232,249,.30);
}


#snLogoutLoginEarth.sn-le-collapse
.sn-le-point {
    animation:
        snLoginEarthPoint
        .62s
        ease-out
        forwards;
}


@keyframes snLoginEarthPoint {

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

    18% {
        opacity: 1;
        transform: scale(5);
    }

    48% {
        opacity: 1;
        transform: scale(1.25);
    }

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


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

@media (max-width: 700px) {

    #snLogoutLoginEarth .sn-le-earth {
        width: 96vw;
        height: 96vw;

        top: 39%;
    }

    #snLogoutLoginEarth .sn-le-glow,
    #snLogoutLoginEarth .sn-le-point {
        top: 39%;
    }

    #snLogoutLoginEarth .sn-le-glow {
        width: 72vw;
        height: 72vw;
    }
}


/* ==========================================================
   FINAL VISIBILITY FIX
   Earth MUST be above the old logout overlay
   ========================================================== */

#snLogoutLoginEarth {
    position: fixed !important;
    inset: 0 !important;

    display: block !important;

    z-index: 2147483647 !important;

    pointer-events: none !important;

    isolation: isolate !important;

    perspective: 1600px !important;
}


/* hidden until logout starts */
#snLogoutLoginEarth:not(.sn-le-active) {
    visibility: hidden !important;
    opacity: 0 !important;
}


/* visible during logout */
#snLogoutLoginEarth.sn-le-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* actual globe container */
#snLogoutLoginEarth .sn-le-earth {
    display: block !important;

    position: absolute !important;

    left: 50% !important;
    top: 42% !important;

    width: 720px !important;
    height: 720px !important;

    max-width: 72vw !important;
    max-height: 72vw !important;

    opacity: 1 !important;

    z-index: 2147483647 !important;

    overflow: visible !important;

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

    filter: none !important;
}


/* actual D3 canvas */
#snLogoutLoginEarthCanvas {
    display: block !important;

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 400px !important;
    min-height: 400px !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 2147483647 !important;

    transform: none !important;

    filter: none !important;
}


/*
 * During shutdown we deliberately allow the shutdown
 * animation to control the transform again.
 */
#snLogoutLoginEarth.sn-le-shutdown .sn-le-earth {
    animation:
        snLoginEarthShutdown
        1.45s
        cubic-bezier(.62,.02,.94,.45)
        forwards !important;
}


/* keep the final collapse point above everything */
#snLogoutLoginEarth .sn-le-point {
    z-index: 2147483647 !important;
}


@media (max-width: 800px) {

    #snLogoutLoginEarth .sn-le-earth {
        width: 92vw !important;
        height: 92vw !important;

        max-width: 92vw !important;
        max-height: 92vw !important;

        top: 39% !important;
    }
}