/* ==========================================================
   RUSSOS AMS X1
   ANIMATION.CSS
   SYSTEM BOOT / POWER STATES
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --boot-speed:2.8s;

    --led-speed:.45s;

    --ambient-speed:1s;

    --cyan:#00F2FE;

}


/* ==========================================================
   DEFAULT / POWER OFF
   ALLES AUS
========================================================== */

.terminal-display-core{

    opacity:0;

    transform:scale(.995);

    transition:

        opacity .6s ease,

        transform .6s ease;

}


/* Display bleibt komplett aus */

.display-module{

    --display-power:0;

}


/* ==========================================================
   POWER BUTTON
   KEIN DAUERBLINKEN
========================================================== */

.power-btn{

    animation:none;

}


/* ==========================================================
   POWER OFF
========================================================== */

.power-btn:not(.is-on){

    animation:none;

}


/* ==========================================================
   POWER ON
   NUR DAS POWER-SYMBOL / DER POWERKNOPF IST AKTIV
========================================================== */

.power-btn.is-on{

    animation:none;

}


/* ==========================================================
   BOOT STATE
========================================================== */

.terminal-boot .terminal-display-core{

    opacity:1;

    transform:scale(1);

    animation:

        bootFlicker var(--boot-speed) ease forwards;

}


/* ==========================================================
   READY STATE
========================================================== */

.terminal-ready .terminal-display-core{

    opacity:1;

    transform:scale(1);

    animation:none;

}


/* ==========================================================
   DISPLAY BOOT FLICKER
========================================================== */

@keyframes bootFlicker{

    0%{

        opacity:0;

    }

    7%{

        opacity:.08;

    }

    12%{

        opacity:0;

    }

    20%{

        opacity:.18;

    }

    28%{

        opacity:.05;

    }

    38%{

        opacity:.35;

    }

    48%{

        opacity:.12;

    }

    62%{

        opacity:.55;

    }

    78%{

        opacity:.82;

    }

    100%{

        opacity:1;

    }

}


/* ==========================================================
   STATUS LEDS
   STANDARDMÄSSIG KOMPLETT AUS
========================================================== */

.led{

    opacity:0;

    animation:none;

    transition:

        opacity .35s ease,

        filter .35s ease;

}


/* ==========================================================
   BOOT — POWER LED
========================================================== */

.terminal-boot .led-power{

    animation:

        ledPowerStart .55s ease forwards;

}


/* ==========================================================
   BOOT — SYSTEM LED
========================================================== */

.terminal-boot .led-system{

    animation:

        ledSystemStart .55s ease .55s forwards;

}


/* ==========================================================
   BOOT — NETWORK LED
========================================================== */

.terminal-boot .led-network{

    animation:

        ledNetworkStart .55s ease 1.05s forwards;

}


/* ==========================================================
   BOOT — STORAGE LED
========================================================== */

.terminal-boot .led-storage{

    animation:

        ledStorageStart .55s ease 1.55s forwards;

}


/* ==========================================================
   POWER LED START
========================================================== */

@keyframes ledPowerStart{

    0%{

        opacity:0;

        filter:
            brightness(.2)
            drop-shadow(0 0 0 transparent);

    }

    100%{

        opacity:1;

        filter:
            brightness(1)
            drop-shadow(
                0 0 5px
                rgba(0,242,254,.45)
            );

    }

}


/* ==========================================================
   SYSTEM LED START
========================================================== */

@keyframes ledSystemStart{

    0%{

        opacity:0;

        filter:brightness(.2);

    }

    100%{

        opacity:1;

        filter:brightness(1);

    }

}


/* ==========================================================
   NETWORK LED START
========================================================== */

@keyframes ledNetworkStart{

    0%{

        opacity:0;

        filter:brightness(.2);

    }

    100%{

        opacity:1;

        filter:brightness(1);

    }

}


/* ==========================================================
   STORAGE LED START
========================================================== */

@keyframes ledStorageStart{

    0%{

        opacity:0;

        filter:brightness(.2);

    }

    100%{

        opacity:1;

        filter:brightness(1);

    }

}


/* ==========================================================
   READY — STATUS LEDS
   KEIN BLINKEN
========================================================== */

.terminal-ready .led{

    opacity:1;

    animation:none;

}


/* ==========================================================
   AMBIENT LIGHT
   STANDARDMÄSSIG AUS
========================================================== */

.ambient-strip{

    opacity:0;

    height:0;

    animation:none;

    transition:

        opacity var(--ambient-speed) ease,

        height var(--ambient-speed) ease;

}


/* ==========================================================
   BOOT — AMBIENT BLEIBT ZUNÄCHST AUS
========================================================== */

.terminal-boot .ambient-strip{

    opacity:0;

    height:0;

}


/* ==========================================================
   BOOT — AMBIENT STARTET KURZ VOR ENDE
========================================================== */

.terminal-boot.ambient-start .ambient-strip{

    animation:

        ambientBoot var(--ambient-speed) ease forwards;

}


/* ==========================================================
   AMBIENT BOOT
========================================================== */

@keyframes ambientBoot{

    0%{

        opacity:0;

        height:0;

    }

    100%{

        opacity:1;

        height:220px;

    }

}


/* ==========================================================
   READY — AMBIENT VOLLSTÄNDIG AKTIV
========================================================== */

.terminal-ready .ambient-strip{

    opacity:1;

    height:220px;

    animation:none;

}


/* ==========================================================
   GLASS REFLECTION
   NUR BEI AKTIVEM SYSTEM
========================================================== */

.display-reflection{

    opacity:0;

    animation:none;

}


/* ==========================================================
   BOOT — GLASREFLEXION
========================================================== */

.terminal-boot .display-reflection{

    opacity:1;

    animation:

        glassMove 12s linear 1 forwards;

}


/* ==========================================================
   READY — GLASREFLEXION
========================================================== */

.terminal-ready .display-reflection{

    opacity:1;

    animation:none;

}


/* ==========================================================
   GLASS MOVEMENT
========================================================== */

@keyframes glassMove{

    0%{

        transform:

            rotate(28deg)
            translateX(-120px);

    }

    100%{

        transform:

            rotate(28deg)
            translateX(80px);

    }

}


/* ==========================================================
   CAMERA LED
   IM AUS-ZUSTAND KOMPLETT AUS
========================================================== */

.camera-led{

    opacity:0;

    animation:none;

}


/* ==========================================================
   CAMERA LED — BOOT
========================================================== */

.terminal-boot .camera-led{

    opacity:1;

    animation:

        cameraBoot .8s ease 2s forwards;

}


/* ==========================================================
   CAMERA LED — READY
========================================================== */

.terminal-ready .camera-led{

    opacity:1;

    animation:none;

}


/* ==========================================================
   CAMERA START
========================================================== */

@keyframes cameraBoot{

    0%{

        opacity:0;

    }

    100%{

        opacity:1;

    }

}


/* ==========================================================
   BRAND LOGO
   AUS = KEIN GLOW
========================================================== */

.top-brand-plate h1{

    animation:none;

}


/* ==========================================================
   BRAND LOGO — READY
========================================================== */

.terminal-ready .top-brand-plate h1{

    animation:

        logoReady 3s ease forwards;

}


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

@keyframes logoReady{

    0%{

        text-shadow:
            0 0 3px
            rgba(0,242,254,.10);

    }

    100%{

        text-shadow:
            0 0 8px
            rgba(0,242,254,.28);

    }

}


/* ==========================================================
   HARDWARE START
   KEINE DAUERANIMATION
========================================================== */

.hardware-wrapper{

    animation:none;

}


/* ==========================================================
   OPTIONAL INITIAL TERMINAL APPEARANCE
========================================================== */

.hardware-wrapper{

    opacity:1;

    transform:none;

}


/* ==========================================================
   POWER PRESS
========================================================== */

.power-btn:active{

    transition:

        transform .08s ease,

        box-shadow .08s ease;

}


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

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

    .terminal-display-core{

        transition:none;

    }

    .terminal-boot .terminal-display-core{

        animation:none;

        opacity:1;

        transform:none;

    }

    .terminal-boot .led,
    .terminal-ready .led,
    .ambient-strip,
    .display-reflection,
    .camera-led,
    .top-brand-plate h1{

        animation:none;

        transition:none;

    }

}