/* ==========================================================
   VITIS LUMEN
   animations.css
========================================================== */

/* ------------------------------
   Keyframes
--------------------------------*/

@keyframes fadeUp {
    from{
        opacity:0;
        transform:translateY(60px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft {
    from{
        opacity:0;
        transform:translateX(-60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRight {
    from{
        opacity:0;
        transform:translateX(60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn {
    from{
        opacity:0;
        transform:scale(.85);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes float {
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }
}

@keyframes glow {

    0%{
        box-shadow:0 0 0 rgba(182,141,64,0);
    }

    50%{
        box-shadow:0 0 30px rgba(182,141,64,.45);
    }

    100%{
        box-shadow:0 0 0 rgba(182,141,64,0);
    }

}

@keyframes heroZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.06);
    }

}

@keyframes shimmer{

    0%{
        background-position:-300px;
    }

    100%{
        background-position:300px;
    }

}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes rotateLight{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* ------------------------------
   Hero
--------------------------------*/

.hero-content{

    animation:fadeUp 1.2s ease forwards;

}

.hero h1{

    animation:zoomIn 1.3s ease;

}

.hero h2{

    animation:fadeUp 1.8s ease;

}

.subtitle{

    animation:fadeUp 2s ease;

}

.separator{

    animation:fadeUp 1.5s ease;

}

/* ------------------------------
   Contador
--------------------------------*/

#countdown div{

    animation:float 5s ease-in-out infinite;

}

#countdown span{

    animation:pulse 2s infinite;

}

/* ------------------------------
   Botones
--------------------------------*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    transition:.7s;

}

.btn:hover::before{

    left:140%;

}

.gold{

    animation:glow 4s infinite;

}

/* ------------------------------
   Tarjetas
--------------------------------*/

.info-card{

    opacity:0;

    transform:translateY(60px);

    transition:
    opacity .9s ease,
    transform .9s ease,
    box-shadow .4s ease,
    scale .4s ease;

}

.info-card.visible{

    opacity:1;

    transform:translateY(0);

}

.info-card:hover{

    scale:1.02;

}

.info-card:hover h3{

    color:var(--gold);

}

/* ------------------------------
   Reveal general
--------------------------------*/

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:
    opacity 1s ease,
    transform 1s ease;

}

.reveal.visible{

    opacity:1;

    transform:none;

}

/* ------------------------------
   Galería
--------------------------------*/

.gallery-grid img{

    opacity:0;

    transform:scale(.9);

    transition:
    transform .6s ease,
    opacity .8s ease,
    filter .4s ease;

}

.gallery.visible img{

    opacity:1;

    transform:scale(1);

}

.gallery-grid img:hover{

    filter:brightness(1.08);

}

/* ------------------------------
   Mapa
--------------------------------*/

.location iframe{

    opacity:0;

    transform:translateY(50px);

    transition:
    opacity 1s ease,
    transform 1s ease;

}

.location.visible iframe{

    opacity:1;

    transform:none;

}

/* ------------------------------
   Footer
--------------------------------*/

footer{

    animation:fadeUp 1.2s ease;

}

/* ------------------------------
   Columnas decorativas
--------------------------------*/

.column{

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

}

/* ------------------------------
   Overlay Hero
--------------------------------*/

.overlay::after{

    content:"";

    position:absolute;

    inset:-30%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.05),
    transparent 60%);

    animation:rotateLight 90s linear infinite;

    pointer-events:none;

}

/* ------------------------------
   Aparición escalonada
--------------------------------*/

.cards .info-card:nth-child(1){

    transition-delay:.15s;

}

.cards .info-card:nth-child(2){

    transition-delay:.35s;

}

.cards .info-card:nth-child(3){

    transition-delay:.55s;

}

.cards .info-card:nth-child(4){

    transition-delay:.75s;

}

/* ------------------------------
   Respeto a usuarios que prefieren
   reducir animaciones
--------------------------------*/

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}