/* =========================================
   ✨ FORCEUR — Animations & Keyframes
   ========================================= */

/* === Pop In — Apparition de la carte === */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(30px);
    }

    60% {
        transform: scale(1.03) translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-pop {
    opacity: 0;
    animation: popIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* === Pulse — Pulsation du bouton target === */
@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(255, 77, 109, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 77, 109, 0.7), 0 0 60px rgba(255, 77, 109, 0.3);
        transform: scale(1.04);
    }
}

/* === Shake — Tremblement de la carte === */
@keyframes shakeCard {

    0%,
    100% {
        transform: translateX(0);
        opacity: 1;
    }

    10% {
        transform: translateX(-8px) rotate(-1deg);
        opacity: 1;
    }

    20% {
        transform: translateX(8px) rotate(1deg);
        opacity: 1;
    }

    30% {
        transform: translateX(-6px) rotate(-0.5deg);
        opacity: 1;
    }

    40% {
        transform: translateX(6px) rotate(0.5deg);
        opacity: 1;
    }

    50% {
        transform: translateX(-4px);
        opacity: 1;
    }

    60% {
        transform: translateX(4px);
        opacity: 1;
    }

    70% {
        transform: translateX(-2px);
        opacity: 1;
    }

    80% {
        transform: translateX(2px);
        opacity: 1;
    }

    90% {
        transform: translateX(-1px);
        opacity: 1;
    }
}

.shake {
    animation: shakeCard 0.6s ease-out forwards;
    opacity: 1 !important;
}

/* === Shake GIF === */
@keyframes shakeGif {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    40% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    80% {
        transform: rotate(5deg);
    }
}

/* === Float Up — Cœurs flottants === */
@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg) scale(0.5);
    }

    10% {
        opacity: 0.7;
        transform: translateY(-10vh) scale(1);
    }

    90% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: translateY(-110vh) translateX(var(--drift)) rotate(var(--rotation)) scale(0.3);
    }
}

/* === Text Fade — Transition de texte === */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* === Bounce In — Pour le message de succès === */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        transform: scale(1.08);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.bounce-in {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* === Grow Button — Grossissement progressif du target === */
@keyframes targetGrow {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.btn-grow {
    animation: targetGrow 0.4s ease;
}

/* === Shrink — Le bouton avoid rétrécit === */
@keyframes avoidShrink {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.85);
    }

    100% {
        transform: scale(0.9);
    }
}

/* === Rainbow glow — Succès === */
@keyframes rainbowGlow {
    0% {
        box-shadow: 0 0 20px rgba(255, 77, 109, 0.5);
    }

    25% {
        box-shadow: 0 0 30px rgba(255, 154, 158, 0.5);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 118, 136, 0.6);
    }

    75% {
        box-shadow: 0 0 30px rgba(201, 24, 74, 0.5);
    }

    100% {
        box-shadow: 0 0 20px rgba(255, 77, 109, 0.5);
    }
}

.rainbow-glow {
    animation: rainbowGlow 2s ease-in-out infinite;
}

/* === Sparkle Text — Titre de succès qui brille === */
@keyframes sparkle {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }
}

.sparkle-text {
    animation: sparkle 1.5s ease-in-out infinite;
}

/* === Heart Beat — Cœur qui bat === */
@keyframes heartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.15);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.1);
    }

    60% {
        transform: scale(1);
    }
}

.heart-beat {
    animation: heartBeat 1.2s ease-in-out infinite;
}