/*
==========================================================
    Handles:
    - Profile transitions
    - Theme atmospheres
    - Ambient effects
    - UI motion

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






/* ==========================================================
   PROFILE CHANGE ANIMATION
========================================================== */


.profile-change{

    animation:

        dossierReveal .45s ease;

}



@keyframes dossierReveal{


    from{

        opacity:0;

        transform:

            translateY(15px);

    }


    to{

        opacity:1;

        transform:

            translateY(0);

    }


}








/* ==========================================================
   PANEL LOAD
========================================================== */


.panel.loaded{

    animation:

        panelAppear .5s ease;

}



@keyframes panelAppear{


    from{

        opacity:0;

        transform:

            translateY(20px);

    }


    to{

        opacity:1;

        transform:

            translateY(0);

    }


}








/* ==========================================================
   STATUS PULSE
========================================================== */


@keyframes pulse{


    0%{

        opacity:.5;

    }


    50%{

        opacity:1;

    }


    100%{

        opacity:.5;

    }


}








/* ==========================================================
   SUNNY THEME

   Warm golden atmosphere
========================================================== */


.theme-warm::before{


    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 80% 20%,

            rgba(255,202,58,.12),

            transparent 40%

        );



    animation:

        warmPulse 8s infinite alternate;

}





@keyframes warmPulse{


    from{

        opacity:.5;

    }


    to{

        opacity:1;

    }


}








/* ==========================================================
   KOJAK THEME

   Void black with deep cyan eyes

   Minimal cyan.
   Almost entirely darkness.

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


.theme-void::before{


    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;


    background:

        radial-gradient(

            circle at 50% 30%,

            rgba(0,229,255,.05),

            transparent 35%

        );


    animation:

        voidBreath 6s infinite alternate;

}





.theme-void .profile-hero::after{


    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(0,229,255,.04),

            transparent

        );


    animation:

        scanLine 7s linear infinite;


}



@keyframes voidBreath{


    from{

        opacity:.3;

    }


    to{

        opacity:.8;

    }


}




@keyframes scanLine{


    from{

        transform:

            translateX(-100%);

    }


    to{

        transform:

            translateX(100%);

    }


}








/* ==========================================================
   NOX THEME

   Cold monochrome stealth
========================================================== */


.theme-stealth::before{


    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;


    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.03),

            transparent

        );


    animation:

        stealthFade 10s infinite alternate;


}



@keyframes stealthFade{


    from{

        opacity:.3;

    }


    to{

        opacity:.7;

    }


}








/* ==========================================================
   CHURRO THEME

   Clean icy atmosphere
========================================================== */


.theme-frost::before{


    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;


    background:

        radial-gradient(

            circle,

            rgba(142,216,248,.08),

            transparent 45%

        );


    animation:

        frostGlow 7s infinite alternate;


}



@keyframes frostGlow{


    from{

        opacity:.4;

    }


    to{

        opacity:.9;

    }


}








/* ==========================================================
   JAGER THEME

   Dark leather / tactical feel
========================================================== */


.theme-tactical::before{


    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;


    background:

        linear-gradient(

            135deg,

            rgba(169,113,66,.08),

            transparent

        );


    animation:

        tacticalFade 9s infinite alternate;


}



@keyframes tacticalFade{


    from{

        opacity:.4;

    }


    to{

        opacity:.8;

    }


}








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

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


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


    *{

        animation:none !important;

        transition:none !important;

    }


}

/*
==========================================================
    DATABASE BOOT ANIMATION
==========================================================
*/


#boot-screen{


    position:fixed;

    inset:0;

    z-index:99999;


    display:flex;

    justify-content:center;

    align-items:center;


    background:

        var(--bg);


    color:

        var(--text);


    animation:

        bootFade 1s ease forwards;


    animation-delay:

        2.5s;

}



.boot-box{


    text-align:center;


}



.boot-box i{


    font-size:4rem;

    color:

        var(--accent);


    animation:

        bootPulse 1s infinite;

}



.boot-box h2{


    margin-top:20px;

    letter-spacing:5px;


}



.boot-box p{


    color:

        var(--muted);


    margin-top:10px;


}




.boot-bar{


    width:250px;

    height:6px;

    margin:25px auto;


    background:

        rgba(255,255,255,.1);


    overflow:hidden;

    border-radius:20px;


}



.boot-bar span{


    display:block;


    width:0%;

    height:100%;


    background:

        var(--accent);


    animation:

        loadingBar 2.2s ease forwards;


}




@keyframes loadingBar{


    from{

        width:0%;

    }


    to{

        width:100%;

    }


}





@keyframes bootPulse{


    50%{

        opacity:.4;

    }


}





@keyframes bootFade{


    to{


        opacity:0;

        visibility:hidden;


    }


}
/* ==========================================================
   END OF ANIMATION SYSTEM

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