/* =========================================
   VRChatCustom 2.0
   Animation System
========================================= */



/* ===============================
   FADE IN
========================================= */


.fade-in {


    animation:

    fadeIn .8s ease forwards;



}



@keyframes fadeIn {


    from {


        opacity:

        0;



    }


    to {


        opacity:

        1;



    }

}







/* ===============================
   SLIDE UP
========================================= */


.slide-up {


    animation:

    slideUp .8s ease forwards;



}



@keyframes slideUp {


    from {


        opacity:

        0;



        transform:

        translateY(40px);



    }



    to {


        opacity:

        1;



        transform:

        translateY(0);



    }

}







/* ===============================
   SLIDE LEFT
========================================= */


.slide-left {


    animation:

    slideLeft .8s ease forwards;



}



@keyframes slideLeft {


    from {


        opacity:

        0;



        transform:

        translateX(-40px);



    }



    to {


        opacity:

        1;



        transform:

        translateX(0);



    }

}








/* ===============================
   SLIDE RIGHT
========================================= */


.slide-right {


    animation:

    slideRight .8s ease forwards;



}



@keyframes slideRight {


    from {


        opacity:

        0;



        transform:

        translateX(40px);



    }



    to {


        opacity:

        1;



        transform:

        translateX(0);



    }

}








/* ===============================
   FLOAT EFFECT
========================================= */


.float {


    animation:

    floating 5s ease-in-out infinite;



}



@keyframes floating {


    0% {


        transform:

        translateY(0);



    }



    50% {


        transform:

        translateY(-20px);



    }



    100% {


        transform:

        translateY(0);



    }

}







/* ===============================
   GLOW PULSE
========================================= */


.glow-pulse {


    animation:

    glowPulse 2s infinite;



}




@keyframes glowPulse {


    0% {


        box-shadow:

        0 0 10px
        rgba(
        0,
        245,
        212,
        .2
        );



    }



    50% {


        box-shadow:

        0 0 35px
        rgba(
        0,
        245,
        212,
        .6
        );



    }



    100% {


        box-shadow:

        0 0 10px
        rgba(
        0,
        245,
        212,
        .2
        );



    }

}







/* ===============================
   TEXT GLOW
========================================= */


.text-glow {


    animation:

    textGlow 2s infinite alternate;



}



@keyframes textGlow {


    from {


        text-shadow:

        0 0 10px
        rgba(
        0,
        245,
        212,
        .4
        );



    }



    to {


        text-shadow:

        0 0 30px
        rgba(
        0,
        245,
        212,
        .9
        );



    }

}








/* ===============================
   SCALE HOVER
========================================= */


.scale-hover {


    transition:

    var(--transition-normal);



}



.scale-hover:hover {


    transform:

    scale(1.05);



}







/* ===============================
   CARD HOVER GLOW
========================================= */


.hover-glow {


    transition:

    var(--transition-normal);



}



.hover-glow:hover {


    box-shadow:

    0 0 35px
    rgba(
    0,
    245,
    212,
    .35
    );



}







/* ===============================
   ROTATE EFFECT
========================================= */


.rotate {


    animation:

    rotate 20s linear infinite;



}



@keyframes rotate {


    from {


        transform:

        rotate(0deg);



    }



    to {


        transform:

        rotate(360deg);



    }

}







/* ===============================
   SHIMMER EFFECT
========================================= */


.shimmer {


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );



    background-size:

    200% 100%;



    animation:

    shimmer 3s infinite;



}



@keyframes shimmer {


    from {


        background-position:

        -200% 0;



    }



    to {


        background-position:

        200% 0;



    }

}







/* ===============================
   DELAY HELPERS
========================================= */


.delay-1 {


    animation-delay:

    .2s;



}



.delay-2 {


    animation-delay:

    .4s;



}



.delay-3 {


    animation-delay:

    .6s;



}



.delay-4 {


    animation-delay:

    .8s;



}







/* ===============================
   PAGE LOAD
========================================= */


.page-load {


    animation:

    pageLoad .7s ease;



}



@keyframes pageLoad {


    from {


        opacity:

        0;



        filter:

        blur(10px);



    }



    to {


        opacity:

        1;



        filter:

        blur(0);



    }

}







/* ===============================
   SCROLL REVEAL SUPPORT
========================================= */


.reveal {


    opacity:

    0;



    transform:

    translateY(50px);



    transition:

    .8s ease;



}



.reveal.active {


    opacity:

    1;



    transform:

    translateY(0);



}

.cursor-glow {

    width:45px;
    height:45px;

    position:fixed;

    top:0;
    left:0;

    border-radius:50%;

    border:2px solid rgba(0,245,212,0.8);

    background:

    radial-gradient(
        circle,
        rgba(0,245,212,0.12),
        transparent 70%
    );


    pointer-events:none;

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

    z-index:99999;


    box-shadow:

    0 0 15px rgba(0,245,212,0.45);

}