/*==================================================
                ANIMACIONES
==================================================*/


/*==============================
        HERO AL CARGAR
==============================*/

.hero-card{

    animation:heroFade 1.8s ease forwards;

}


@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.logo{

    animation:logoFade 2.4s ease;

}


@keyframes logoFade{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/*==============================
        NOMBRE INVITADO
==============================*/

#guest-name{

    animation:guestFade 2.2s ease;

}


@keyframes guestFade{

    from{

        opacity:0;

        letter-spacing:20px;

    }

    to{

        opacity:1;

        letter-spacing:normal;

    }

}



/*==============================
        BOTÓN DESCUBRIR
==============================*/

.scroll-down{

    animation:appear 2.5s ease;

}


.scroll-down span{

    animation:bounce 2.2s infinite;

}


@keyframes bounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}



/*==============================
        APARICIÓN SECCIONES
==============================*/

.hidden{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}


.show{

    opacity:1;

    transform:translateY(0);

}



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

.time-box,

.hero-card,

.gift-number{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}


.time-box:hover,

.gift-number:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-medium);

}



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

.btn{

    position:relative;

    overflow:hidden;

}


.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:80%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

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

        transparent

    );

    transition:.8s;

}


.btn:hover::before{

    left:150%;

}



/*==============================
        LOGO PEQUEÑO
==============================*/

.section-logo{

    transition:transform .4s ease;

}


.section-logo:hover{

    transform:rotate(-4deg) scale(1.05);

}



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

.footer-logo{

    animation:footerFade 3s ease;

}


@keyframes footerFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==============================
        APPEAR
==============================*/

@keyframes appear{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*==============================
    RESPETA ACCESSIBILITY
==============================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

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

/*==================================================
        CONTADOR
==================================================*/

.counter-change{

    transform:translateY(-8px);

    opacity:.35;

    transition:

        transform .15s ease,

        opacity .15s ease;

}



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

.reveal{

    will-change:transform,opacity;

}