/* =========================================
   LUMINA ACADEMY
   ANIMATIONS.CSS

   Premium UI Animations
========================================= */





/* ==========================
   GLOBAL REVEAL
========================== */


.reveal {

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .9s ease,

    transform .9s ease;

}



.reveal.show {

    opacity:1;

    transform:translateY(0);

}







/* ==========================
   HERO TEXT ANIMATION
========================== */


.hero-label {

    animation:

    fadeDown .8s ease forwards;

}



.hero-left h1 {

    animation:

    fadeUp 1s ease .2s forwards;


    opacity:0;

}



.hero-left p {

    animation:

    fadeUp 1s ease .4s forwards;


    opacity:0;

}



.hero-buttons {

    animation:

    fadeUp 1s ease .6s forwards;


    opacity:0;

}



.hero-stats {

    animation:

    fadeUp 1s ease .8s forwards;


    opacity:0;

}






@keyframes fadeUp {


    from {

        opacity:0;

        transform:translateY(40px);

    }



    to {

        opacity:1;

        transform:translateY(0);

    }


}






@keyframes fadeDown {


    from {

        opacity:0;

        transform:translateY(-25px);

    }



    to {

        opacity:1;

        transform:translateY(0);

    }


}








/* ==========================
   HERO VIDEO ENTRANCE
========================== */



.macbook {


    animation:

    laptopAppear 1.2s ease forwards,

    laptopFloat 6s ease-in-out infinite 1.2s;


    opacity:0;

}





@keyframes laptopAppear {


    from {


        opacity:0;


        transform:

        translateY(80px)

        scale(.85);


    }



    to {


        opacity:1;


        transform:

        translateY(0)

        scale(1);


    }


}








/* ==========================
   FLOATING CARDS ENTRANCE
========================== */


.floating {


    opacity:0;

    animation-fill-mode:forwards;

}



.floating-1 {


    animation:

    cardLeft 1s ease .8s forwards,

    floatingOne 5s ease-in-out 2s infinite;


}



.floating-2 {


    animation:

    cardLeft 1s ease 1s forwards,

    floatingTwo 6s ease-in-out 2s infinite;


}



.floating-3 {


    animation:

    cardRight 1s ease .9s forwards,

    floatingThree 5s ease-in-out 2s infinite;


}



.floating-4 {


    animation:

    cardRight 1s ease 1.2s forwards,

    floatingOne 7s ease-in-out 2s infinite;


}



.floating-5 {


    animation:

    cardBottom 1s ease 1.3s forwards,

    floatingTwo 6s ease-in-out 2s infinite;


}






@keyframes cardLeft {


    from {


        opacity:0;

        transform:

        translateX(-80px);


    }



    to {


        opacity:1;

        transform:

        translateX(0);


    }


}




@keyframes cardRight {


    from {


        opacity:0;

        transform:

        translateX(80px);


    }



    to {


        opacity:1;

        transform:

        translateX(0);


    }


}




@keyframes cardBottom {


    from {


        opacity:0;

        transform:

        translateY(80px);


    }



    to {


        opacity:1;

        transform:

        translateY(0);


    }


}








/* ==========================
   SLIDER TRANSITION
========================== */


.hero-left h1,
.hero-left p {


    transition:

    opacity .4s ease,

    transform .4s ease;


}








/* ==========================
   COURSE CARD EFFECT
========================== */



.course-card {


    animation:

    cardAppear .8s ease backwards;


}



.course-card:nth-child(1){

    animation-delay:.1s;

}


.course-card:nth-child(2){

    animation-delay:.2s;

}


.course-card:nth-child(3){

    animation-delay:.3s;

}


.course-card:nth-child(4){

    animation-delay:.4s;

}


.course-card:nth-child(5){

    animation-delay:.5s;

}


.course-card:nth-child(6){

    animation-delay:.6s;

}


.course-card:nth-child(7){

    animation-delay:.7s;

}






@keyframes cardAppear {


    from {

        opacity:0;

        transform:

        translateY(50px)

        scale(.95);

    }



    to {

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }


}








/* ==========================
   BUTTON EFFECT
========================== */



.primary-btn,
.secondary-btn,
.header-btn {


    position:relative;

    overflow:hidden;


}





.ripple {


    position:absolute;


    width:20px;


    height:20px;


    background:

    rgba(255,255,255,.5);


    border-radius:50%;


    transform:scale(0);


    animation:

    rippleEffect .6s linear;


}





@keyframes rippleEffect {


    to {


        transform:

        scale(15);


        opacity:0;


    }


}








/* ==========================
   GLOW EFFECTS
========================== */



.live-badge {


    animation:

    liveGlow 2s infinite;


}





@keyframes liveGlow {


    0% {


        box-shadow:

        0 0 0 rgba(24,201,100,0);


    }



    50% {


        box-shadow:

        0 0 25px rgba(24,201,100,.35);


    }



    100% {


        box-shadow:

        0 0 0 rgba(24,201,100,0);


    }


}








/* ==========================
   SCROLL DOWN
========================== */



.scroll-down {


    animation:

    scrollBounce 2s infinite;


}



@keyframes scrollBounce {


    0% {

        transform:

        translate(-50%,0);

    }



    50% {

        transform:

        translate(-50%,15px);

    }



    100% {

        transform:

        translate(-50%,0);

    }


}








/* ==========================
   PAGE LOADING
========================== */


body.loading {


    overflow:hidden;


}



.loader {


    position:fixed;


    inset:0;


    background:

    var(--cream);


    display:flex;


    align-items:center;


    justify-content:center;


    z-index:9999;


}



.loader span {


    width:60px;


    height:60px;


    border-radius:50%;


    border:

    5px solid rgba(200,155,60,.2);


    border-top-color:

    var(--gold);


    animation:

    rotateLoader 1s linear infinite;


}




@keyframes rotateLoader {


    to {


        transform:rotate(360deg);


    }


}