/*=========================================================
 ACMUN 2026
 ANIMATIONS.CSS
=========================================================*/

/* ==========================
   GENERAL TRANSITIONS
========================== */

*{
    transition:
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

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

@keyframes loaderFade{

    from{
        opacity:1;
        visibility:visible;
    }

    to{
        opacity:0;
        visibility:hidden;
    }

}

/* ==========================
   LOGO ROTATION
========================== */

@keyframes spinLogo{

    0%{
        transform:rotateY(0deg);
    }

    100%{
        transform:rotateY(360deg);
    }

}

/* ==========================
   WORLD FLOAT
========================== */

@keyframes floatWorld{

    0%{

        transform:
        translateY(0px)
        rotate(0deg);

    }

    50%{

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

    }

    100%{

        transform:
        translateY(0px)
        rotate(0deg);

    }

}

/* ==========================
   WORLD MAP
========================== */

@keyframes mapFloat{

    0%{

        transform:
        translateX(0);

    }

    50%{

        transform:
        translateX(-20px);

    }

    100%{

        transform:
        translateX(0);

    }

}

/* ==========================
   SCROLL INDICATOR
========================== */

@keyframes scrollWheel{

    0%{

        top:8px;

        opacity:1;

    }

    100%{

        top:26px;

        opacity:0;

    }

}

/* ==========================
   GOLD GLOW
========================== */

@keyframes goldGlow{

    0%{

        box-shadow:
        0 0 0 rgba(210,142,36,.25);

    }

    50%{

        box-shadow:
        0 0 45px rgba(210,142,36,.45);

    }

    100%{

        box-shadow:
        0 0 0 rgba(210,142,36,.25);

    }

}

/* ==========================
   FLOATING SHAPES
========================== */

@keyframes floatShape{

    0%{

        transform:
        translateY(0px);

    }

    50%{

        transform:
        translateY(-30px);

    }

    100%{

        transform:
        translateY(0px);

    }

}

.shape1{

    animation:
    floatShape 8s ease-in-out infinite;

}

.shape2{

    animation:
    floatShape 10s ease-in-out infinite;

}

.shape3{

    animation:
    floatShape 6s ease-in-out infinite;

}

/* ==========================
   HERO FADE
========================== */

@keyframes heroFade{

    from{

        opacity:0;

        transform:
        translateY(40px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.hero h1{

    animation:
    heroFade .8s ease forwards;

}

.hero p{

    animation:
    heroFade 1.2s ease forwards;

}

.hero-buttons{

    animation:
    heroFade 1.6s ease forwards;

}

/* ==========================
   BUTTON RIPPLE
========================== */

.btn-gold{

    position:relative;

    overflow:hidden;

}

.btn-gold::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

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

    border-radius:50%;

    top:50%;

    left:50%;

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

    transition:.5s;

}

.btn-gold:hover::after{

    width:420px;

    height:420px;

}

/* ==========================
   CARD LIFT
========================== */

.card-premium{

    transform:translateY(0);

}

.card-premium:hover{

    transform:
    translateY(-12px)
    scale(1.02);

}

/* ==========================
   IMAGE ZOOM
========================== */

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:1s;

}

.image-hover:hover img{

    transform:scale(1.08);

}

/* ==========================
   FADE UP
========================== */

.fade-up{

    opacity:0;

    transform:
    translateY(60px);

    transition:1s;

}

.fade-up.show{

    opacity:1;

    transform:
    translateY(0);

}

/* ==========================
   FADE LEFT
========================== */

.fade-left{

    opacity:0;

    transform:
    translateX(-60px);

    transition:1s;

}

.fade-left.show{

    opacity:1;

    transform:
    translateX(0);

}

/* ==========================
   FADE RIGHT
========================== */

.fade-right{

    opacity:0;

    transform:
    translateX(60px);

    transition:1s;

}

.fade-right.show{

    opacity:1;

    transform:
    translateX(0);

}

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

.scale-in{

    opacity:0;

    transform:scale(.8);

    transition:.8s;

}

.scale-in.show{

    opacity:1;

    transform:scale(1);

}

/* ==========================
   STAGGER
========================== */

.stagger{

    opacity:0;

    transform:
    translateY(40px);

}

.stagger.show{

    opacity:1;

    transform:
    translateY(0);

}

.stagger:nth-child(1){

    transition:.4s;

}

.stagger:nth-child(2){

    transition:.6s;

}

.stagger:nth-child(3){

    transition:.8s;

}

.stagger:nth-child(4){

    transition:1s;

}

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

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:50%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

}

.shimmer:hover::before{

    left:150%;

    transition:1.2s;

}

/* ==========================
   ROTATE ICON
========================== */

.rotate:hover{

    transform:rotate(8deg);

}

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

.pulse{

    animation:
    goldGlow 3s infinite;

}

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

.glow:hover{

    animation:
    goldGlow 2s infinite;

}

/* =====================================
   COUNTDOWN GOLD PULSE RING
===================================== */


@keyframes countdownPulse{


    0%{

        box-shadow:

        0 0 0 0 rgba(210,142,36,.45),

        0 20px 40px rgba(0,0,0,.08);

    }



    50%{

        box-shadow:

        0 0 0 15px rgba(210,142,36,0),

        0 25px 60px rgba(210,142,36,.35);

    }



    100%{

        box-shadow:

        0 0 0 0 rgba(210,142,36,0),

        0 20px 40px rgba(0,0,0,.08);

    }


}