/* =========================================
   AKI FEST ANIMATIONS
   Clean Image-Based Effects
========================================= */



/* =========================
   LOADER
========================= */


.loader img {

    animation:
    loaderFloat
    2s
    ease-in-out
    infinite;

}



@keyframes loaderFloat {


    0%,
    100% {

        transform:
        translateY(0);

    }


    50% {

        transform:
        translateY(-25px);

    }

}



.loader.hide {

    animation:
    loaderFade
    1s
    forwards;

}



@keyframes loaderFade {


    to {

        opacity:0;

        visibility:hidden;

    }

}









/* =========================
   HERO CHARACTERS
========================= */


.hero-mascot {

    animation:
    mascotFloat
    4s
    ease-in-out
    infinite;

}



@keyframes mascotFloat {


    0%,
    100% {

        transform:
        translateY(0);

    }


    50% {

        transform:
        translateY(-25px);

    }

}






.hero-bunny {


    animation:
    bunnyMove
    3s
    ease-in-out
    infinite;


}




@keyframes bunnyMove {


    50% {

        transform:
        translateY(-20px)
        rotate(8deg);

    }


}






.hero-cat {


    animation:
    catMove
    4s
    ease-in-out
    infinite;


}




@keyframes catMove {


    50% {

        transform:
        translateY(-15px)
        rotate(-8deg);

    }


}









/* =========================
   DECORATIONS
========================= */


.festival-decoration img {


    animation:

    decorationFloat

    8s

    ease-in-out

    infinite;


}




@keyframes decorationFloat {


    50% {


        transform:

        translateY(-25px);


    }


}









/* =========================
   HERO TITLE
========================= */


.hero h1 {


    animation:

    titleAppear

    1s

    ease;


}



@keyframes titleAppear {


    from {


        opacity:0;


        transform:

        translateY(40px)
        scale(.85);


    }



    to {


        opacity:1;


        transform:

        translateY(0)
        scale(1);


    }


}









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


.main-button,
.secondary-button {


    transition:.3s;


}





.main-button:hover,
.secondary-button:hover {


    transform:

    translateY(-5px)
    scale(1.05);


}









/* =========================
   COUNTDOWN
========================= */


.countdown div {


    animation:

    countdownFloat

    3s

    ease-in-out

    infinite;


}





.countdown div:nth-child(2){

animation-delay:.2s;

}



.countdown div:nth-child(3){

animation-delay:.4s;

}



.countdown div:nth-child(4){

animation-delay:.6s;

}






@keyframes countdownFloat {


    50% {


        transform:

        translateY(-12px);


    }


}





.number-change {


    animation:

    numberChange

    .4s

    ease;


}





@keyframes numberChange {


    50% {


        transform:

        scale(1.25);


    }


}









/* =========================
   CARD REVEAL
========================= */


.card,
.schedule-card,
.ticket-card,
.faq-card,
.gallery img {


    opacity:0;


    transform:

    translateY(40px);


    transition:

    .8s ease;


}




.visible {


    opacity:1;


    transform:

    translateY(0);


}









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


.card:hover,
.ticket-card:hover {


    transform:

    translateY(-10px);


}





.feature-icon,
.ticket-icon {


    transition:.3s;


}





.card:hover .feature-icon,
.ticket-card:hover .ticket-icon {


    transform:

    scale(1.15)
    rotate(8deg);


}









/* =========================
   PREMIUM / VIP EFFECTS
========================= */


.ticket-card.premium {


    animation:

    premiumGlow

    3s

    infinite;


}





@keyframes premiumGlow {


    50% {


        box-shadow:

        0 20px 50px

        rgba(255,179,208,.45);


    }


}






.ticket-card.vip {


    animation:

    vipGlow

    3s

    infinite;


}





@keyframes vipGlow {


    50% {


        box-shadow:

        0 25px 60px

        rgba(255,140,183,.55);


    }


}









/* =========================
   GALLERY
========================= */


.gallery img {


    transition:.4s;


}





.gallery img:hover {


    transform:

    scale(1.08);


}









/* =========================
   PARTICLES
========================= */


.particle-container {


    position:fixed;


    inset:0;


    overflow:hidden;


    pointer-events:none;


    z-index:2;


}





.particle {


    position:absolute;


    top:-100px;


    user-select:none;


    animation:

    particleFall

    linear

    forwards;


}






@keyframes particleFall {


    0% {


        transform:

        translateY(-100px)
        translateX(0)
        rotate(0);


        opacity:0;


    }



    20% {


        opacity:1;


    }




    100% {


        transform:

        translateY(110vh)
        translateX(-80px)
        rotate(360deg);


        opacity:0;


    }


}









/* =========================
   MOUSE SPARKLES
========================= */


.mouse-sparkle {


    position:absolute;


    pointer-events:none;


    animation:

    sparkleDisappear

    .7s

    forwards;


}





@keyframes sparkleDisappear {


    from {


        opacity:1;


        transform:

        scale(1);


    }



    to {


        opacity:0;


        transform:

        scale(0)
        rotate(180deg);


    }


}









/* =========================
   FOOTER MASCOT
========================= */


.footer-mascot {


    animation:

    footerFloat

    4s

    ease-in-out

    infinite;


}





@keyframes footerFloat {


    50% {


        transform:

        translateY(-20px);


    }


}









/* =========================
   PERFORMANCE
========================= */


@media(max-width:850px){



.mouse-sparkle {


    display:none;


}




.particle {


    animation-duration:

    14s;


}



}