/* =========================================
   SALSA DATE
   animations.css
   Animaciones y efectos visuales
========================================= */


/* ---------- Entrada inicial ---------- */


.love-card {

    animation:

        cardAppear
        .8s
        cubic-bezier(.22,1,.36,1)
        both;

}



@keyframes cardAppear {

    from {

        opacity:0;

        transform:

            translateY(40px)
            scale(.96);

    }


    to {

        opacity:1;

        transform:

            translateY(0)
            scale(1);

    }

}



/* ---------- Imagen hero ---------- */


.hero-image img {

    animation:

        slowZoom
        12s
        ease-in-out
        infinite alternate;

}



@keyframes slowZoom {


    from {

        transform:scale(1);

    }


    to {

        transform:scale(1.08);

    }

}



/* ---------- Botón Sí ---------- */


.btn-yes {


    animation:

        heartbeat
        1.6s
        ease-in-out
        infinite;


}



@keyframes heartbeat {


    0% {

        transform:

            translate(-50%,-50%)
            scale(1);

    }


    15% {

        transform:

            translate(-50%,-50%)
            scale(1.08);

    }


    30% {

        transform:

            translate(-50%,-50%)
            scale(1);

    }


    45% {

        transform:

            translate(-50%,-50%)
            scale(1.08);

    }


    100% {

        transform:

            translate(-50%,-50%)
            scale(1);

    }

}



/* ---------- Botón presionado ---------- */


.btn:active {

    transform:

        scale(.94);

}



/* ---------- Notas flotantes ---------- */


.music-note {


    animation:

        floatingNotes
        12s
        linear
        infinite;


}



@keyframes floatingNotes {


    0% {


        transform:

            translateY(40px)
            rotate(0deg);


        opacity:.1;


    }


    50% {


        opacity:.35;


    }


    100% {


        transform:

            translateY(-120px)
            rotate(360deg);


        opacity:.05;


    }


}



/* Diferentes velocidades */


.music-note:nth-child(1){

    animation-duration:11s;

}


.music-note:nth-child(2){

    animation-duration:14s;

}


.music-note:nth-child(3){

    animation-duration:9s;

}


.music-note:nth-child(4){

    animation-duration:16s;

}


.music-note:nth-child(5){

    animation-duration:12s;

}



/* ---------- Mensaje cambio ---------- */


.message {

    animation:

        messagePulse
        2s
        ease-in-out
        infinite;

}



@keyframes messagePulse {


    0% {

        opacity:.7;

    }


    50% {

        opacity:1;

    }


    100% {

        opacity:.7;

    }

}



/* ---------- Pantalla éxito ---------- */


.success-screen.show {


    animation:

        successFade
        .6s
        ease
        forwards;


}



.success-content {


    animation:

        successPop
        .8s
        cubic-bezier(.22,1,.36,1)
        both;


}



@keyframes successFade {


    from {

        opacity:0;

    }


    to {

        opacity:1;

    }

}



@keyframes successPop {


    from {


        opacity:0;


        transform:


            scale(.7)
            translateY(30px);


    }


    to {


        opacity:1;


        transform:


            scale(1)
            translateY(0);


    }

}



/* ---------- Baile ---------- */


.dance-animation {


    animation:


        danceMove
        1.2s
        ease-in-out
        infinite;


}



@keyframes danceMove {


    0% {


        transform:

            rotate(-8deg);


    }


    50% {


        transform:

            rotate(8deg)
            translateY(-8px);


    }


    100% {


        transform:

            rotate(-8deg);


    }

}



/* ---------- Confeti ---------- */


.confetti-piece {


    position:absolute;


    width:10px;


    height:18px;


    top:-20px;


    animation:


        confettiFall
        4s
        linear
        forwards;


}



@keyframes confettiFall {


    from {


        transform:


            translateY(-20px)
            rotate(0deg);


        opacity:1;


    }



    to {


        transform:


            translateY(110vh)
            rotate(720deg);


        opacity:.8;


    }

}



/* ---------- Corazones ---------- */


.heart {


    position:absolute;


    animation:


        heartFloat
        3s
        ease-out
        forwards;


}



@keyframes heartFloat {


    0% {


        opacity:0;


        transform:


            translateY(0)
            scale(.5);


    }



    20% {


        opacity:1;


    }



    100% {


        opacity:0;


        transform:


            translateY(-200px)
            scale(1.5);


    }

}