/* ==============================================
   WIZZ-ATTENTION
   ----------------------------------------------
   Mini-animation "Hey c'est moi !" déclenchée sur la cible
   d'une ancre quand l'utilisateur clique sur un CTA pointant
   vers un formulaire (callback, booking, etc.).

   Activée par le JS public/assets/js/wizz-attention.js
   qui ajoute la classe .wizz-attention sur l'élément cible
   après le scroll, puis la retire à la fin de l'animation.
   ============================================== */

@keyframes wizz-attention-shake {
    0%, 100% {
        transform: translateX(0) scale(1);
    }
    8% {
        transform: translateX(-9px) scale(1.01);
    }
    18% {
        transform: translateX(8px) scale(1.015);
    }
    28% {
        transform: translateX(-6px) scale(1.02);
    }
    38% {
        transform: translateX(5px) scale(1.025);
    }
    48% {
        transform: translateX(-4px) scale(1.025);
    }
    58% {
        transform: translateX(3px) scale(1.02);
    }
    70% {
        transform: translateX(-2px) scale(1.015);
    }
    82% {
        transform: translateX(1px) scale(1.01);
    }
}

@keyframes wizz-attention-glow {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(12, 113, 195, 0),
            0 4px 12px rgba(15, 23, 42, 0.06);
    }
    30% {
        box-shadow:
            0 0 0 6px rgba(12, 113, 195, 0.28),
            0 18px 38px rgba(12, 113, 195, 0.32);
    }
    60% {
        box-shadow:
            0 0 0 10px rgba(12, 113, 195, 0.14),
            0 22px 44px rgba(12, 113, 195, 0.28);
    }
}

@keyframes wizz-attention-glow-green {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(34, 197, 94, 0),
            0 4px 12px rgba(15, 23, 42, 0.06);
    }
    30% {
        box-shadow:
            0 0 0 6px rgba(34, 197, 94, 0.32),
            0 18px 38px rgba(22, 163, 74, 0.34);
    }
    60% {
        box-shadow:
            0 0 0 10px rgba(34, 197, 94, 0.16),
            0 22px 44px rgba(22, 163, 74, 0.30);
    }
}

.wizz-attention {
    animation:
        wizz-attention-shake 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
        wizz-attention-glow 1.1s ease-out both;
    transform-origin: center center;
    will-change: transform, box-shadow;
    border-radius: var(--radius-lg, 16px);
    position: relative;
    z-index: 5;
}

.wizz-attention.wizz-attention--green {
    animation:
        wizz-attention-shake 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
        wizz-attention-glow-green 1.1s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .wizz-attention {
        animation: wizz-attention-glow 0.6s ease-out both;
    }
    .wizz-attention.wizz-attention--green {
        animation: wizz-attention-glow-green 0.6s ease-out both;
    }
}