/* =====================================================
   CYBERPUNK COMMAND CENTER
   ANIMATIONS
===================================================== */


/* ==========================
   HOLOGRAM ANIMATIONS
========================== */


@keyframes pulseRing{

    0%{

        transform:scale(.8);

        opacity:.2;

    }


    50%{

        transform:scale(1);

        opacity:.8;

    }


    100%{

        transform:scale(.8);

        opacity:.2;

    }

}



@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}



/* ==========================
   GLITCH EFFECT
========================== */


.glitch{

    position:relative;

    color:white;

}



.glitch::before,
.glitch::after{

    content:attr(data-text);

    position:absolute;

    left:0;

    top:0;

    width:100%;

    overflow:hidden;

}



.glitch::before{

    color:var(--cyan);

    z-index:-1;

    animation:

    glitchOne 3s infinite linear alternate-reverse;

}



.glitch::after{

    color:var(--pink);

    z-index:-2;

    animation:

    glitchTwo 2.5s infinite linear alternate-reverse;

}



@keyframes glitchOne{


    0%{

        clip-path:inset(0 0 90% 0);

        transform:translate(-3px);

    }


    20%{

        clip-path:inset(30% 0 40% 0);

        transform:translate(3px);

    }


    40%{

        clip-path:inset(70% 0 10% 0);

        transform:translate(-2px);

    }


    60%{

        clip-path:inset(10% 0 70% 0);

        transform:translate(2px);

    }


    100%{

        clip-path:inset(0);

        transform:none;

    }

}



@keyframes glitchTwo{


    0%{

        clip-path:inset(80% 0 0 0);

        transform:translate(3px);

    }


    50%{

        clip-path:inset(20% 0 50% 0);

        transform:translate(-3px);

    }


    100%{

        clip-path:inset(0);

        transform:none;

    }

}



/* ==========================
   FLOATING EFFECT
========================== */


.float{

    animation:

    floating 5s ease-in-out infinite;

}



@keyframes floating{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


    100%{

        transform:translateY(0);

    }

}



/* ==========================
   NEON PULSE
========================== */


.neon-pulse{

    animation:

    neonPulse 2s infinite;

}



@keyframes neonPulse{


    0%{

        box-shadow:

        0 0 5px var(--cyan);

    }


    50%{

        box-shadow:

        0 0 25px var(--cyan),

        0 0 60px rgba(0,247,255,.5);

    }


    100%{

        box-shadow:

        0 0 5px var(--cyan);

    }

}



/* ==========================
   TERMINAL CURSOR
========================== */


@keyframes blink{


    0%,
    50%{

        opacity:1;

    }


    51%,
    100%{

        opacity:0;

    }

}



/* ==========================
   STATUS LIGHT
========================== */


.status-online{

    animation:

    statusPulse 1.5s infinite;

}



@keyframes statusPulse{


    0%{

        opacity:.4;

        transform:scale(.9);

    }


    50%{

        opacity:1;

        transform:scale(1.1);

    }


    100%{

        opacity:.4;

        transform:scale(.9);

    }

}



/* ==========================
   SCANNER SWEEP
========================== */


.scanner{

    position:relative;

    overflow:hidden;

}



.scanner::after{

    content:"";

    position:absolute;

    top:-100%;

    left:0;

    width:100%;

    height:50%;


    background:

    linear-gradient(

        transparent,

        rgba(0,247,255,.25),

        transparent

    );


    animation:

    scanMove 4s infinite;

}



@keyframes scanMove{


    0%{

        top:-100%;

    }


    100%{

        top:200%;

    }

}



/* ==========================
   REVEAL ANIMATION
========================== */

/* =====================================================
   SCROLL REVEAL ENGINE
===================================================== */

/*
    Hidden State

    Every reveal element starts slightly
    lower and transparent.
*/

.reveal{

    opacity:0;

    transform:

        translateY(40px)

        scale(.98);

    transition:

        opacity .9s ease,

        transform .9s ease;

}



/*
    Active State

    Activated by Scroll Engine.
*/

.reveal.active{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

}


@keyframes revealUp{


    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



/* ==========================
   DELAYS
========================== */


.delay-1{

    animation-delay:.2s;

}


.delay-2{

    animation-delay:.4s;

}


.delay-3{

    animation-delay:.6s;

}


.delay-4{

    animation-delay:.8s;

}



/* ==========================
   DIGITAL FLICKER
========================== */


.flicker{

    animation:

    flicker 5s infinite;

}



@keyframes flicker{


    0%,
    19%,
    21%,
    100%{

        opacity:1;

    }


    20%{

        opacity:.2;

    }


    22%{

        opacity:.8;

    }

}


/* =====================================================
   HUD SCANNER ANIMATION
===================================================== */

@keyframes hudScan{

    from{

        left:-120%;

    }

    to{

        left:160%;

    }

}

/* =====================================================

    TERMINAL

====================================================== */

@keyframes terminalFade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes terminalCursor{

    0%,50%{

        opacity:1;

    }

    51%,100%{

        opacity:0;

    }

}

/* =====================================================
   SYSTEM PULSE
===================================================== */

.progress{

    overflow:hidden;

}

.fill{

    transition:width .8s ease;

    position:relative;

}

/*
    Energy Sweep
*/

.fill::after{

    content:"";

    position:absolute;

    right:-30px;

    top:0;

    width:30px;

    height:100%;

    background:

        rgba(255,255,255,.35);

    filter:blur(5px);

    animation:

        pulseSweep 2.5s linear infinite;

}

@keyframes pulseSweep{

    from{

        transform:translateX(-150px);

    }

    to{

        transform:translateX(150px);

    }

}