/*====================================================
ANIMATIONS.CSS
SISWON INVITACIONES PREMIUM
====================================================*/


/*==============================
APARICIÓN GENERAL
==============================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


.fade-up{

    animation:fadeUp .9s ease forwards;

}



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

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



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

@keyframes zoom{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/*==============================
BIRRETE FLOTANTE
==============================*/

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}


.cap{

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

}



/*==============================
BRILLO BOTONES
==============================*/

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

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

        transparent

    );

    transform:skewX(-25deg);

}


.btn-primary:hover::before{

    animation:shine 1s;

}


@keyframes shine{

    to{

        left:160%;

    }

}



/*==============================
LATIDO SUAVE
==============================*/

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}


.countdown-grid div{

    animation:pulse 6s infinite;

}



/*==============================
TARJETAS
==============================*/

.cards article{

    animation:fade .8s ease;

}



/*==============================
GALERÍA
==============================*/

#galleryContainer img{

    transition:

        transform .4s,

        box-shadow .4s;

}

#galleryContainer img:hover{

    transform:scale(1.05);

    box-shadow:0 25px 60px rgba(0,0,0,.20);

}



/*==============================
BOTONES
==============================*/

.action{

    position:relative;

    overflow:hidden;

}

.action::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:20px;

    border:2px solid transparent;

    transition:.35s;

}


.action:hover::after{

    border-color:rgba(255,255,255,.4);

}



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

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}


.reveal.active{

    opacity:1;

    transform:none;

}



/*==============================
TÍTULOS
==============================*/

section h2{

    animation:zoom .9s;

}



/*==============================
PRELOADER
==============================*/

.loader i{

    animation:floating 2s infinite;

}



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

footer h3{

    animation:fade 2s;

}



/*==============================
ROTACIÓN SUAVE
==============================*/

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/*==============================
PARTÍCULAS
==============================*/

.particle{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:rgba(200,169,106,.25);

    animation:particleFloat linear infinite;

}


@keyframes particleFloat{

    from{

        transform:translateY(0);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    100%{

        transform:translateY(-120vh);

        opacity:0;

    }

}



/*==============================
HOVER HERO
==============================*/

.hero-content{

    transition:.45s;

}


.hero-content:hover{

    transform:translateY(-8px);

}



/*==============================
ICONOS
==============================*/

.cards i{

    transition:.35s;

}

.cards article:hover i{

    transform:scale(1.2);

}



/*==============================
DIVIDER
==============================*/

.divider{

    animation:fade 2s;

}



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

.countdown span{

    transition:.3s;

}

.countdown span:hover{

    color:#0F2235;

}



/*==============================
VIDEO
==============================*/

.video video{

    transition:.4s;

}

.video video:hover{

    transform:scale(1.01);

}



/*==============================
MAPA
==============================*/

.location a{

    animation:pulse 5s infinite;

}



/*==============================
FIN
==============================*/