/*
 * metronic-confirm-link — animations de confirmation inline.
 *
 * 3 phases visuelles :
 *   --armed     : shake + fond primaire + pulse glow continu
 *   --fadeout/fadein : cross-fade doux vers l'état initial
 *   (état normal : aucune classe, styles par défaut)
 */

/* ═══════════════════════════════════
   Phase 1 : ARMED — shake initial + pulse continu
   ═══════════════════════════════════ */

.metronic-confirm-link--armed.menu-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
    border-radius: 0.475rem;
    animation:
        metronic-confirm-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97),
        metronic-confirm-pulse 1.4s ease-in-out 0.45s infinite;
}

.metronic-confirm-link--armed.menu-link .menu-icon,
.metronic-confirm-link--armed.menu-link span {
    color: #fff !important;
}

/* Shake horizontal — attire l'œil sans être agressif */
@keyframes metronic-confirm-shake {
    0%, 100% { transform: translateX(0); }
    12%      { transform: translateX(-5px); }
    28%      { transform: translateX(5px); }
    44%      { transform: translateX(-4px); }
    60%      { transform: translateX(3px); }
    76%      { transform: translateX(-2px); }
    90%      { transform: translateX(1px); }
}

/* Glow pulsant — signale visuellement "j'attends ton action" */
@keyframes metronic-confirm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.45); }
    50%      { box-shadow: 0 0 0 7px rgba(var(--bs-primary-rgb), 0); }
}

/* ═══════════════════════════════════
   Phase 1 bis : ARMED — boutons (.btn)
   ═══════════════════════════════════ */

.metronic-confirm-link--armed.btn {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
    animation:
        metronic-confirm-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97),
        metronic-confirm-pulse 1.4s ease-in-out 0.45s infinite;
}

.metronic-confirm-link--armed.btn span,
.metronic-confirm-link--armed.btn i {
    color: #fff !important;
}

/* ═══════════════════════════════════
   Phase 2 : DISARMING — cross-fade doux
   Fade-out (texte armé) → swap invisible → fade-in (texte original)
   ═══════════════════════════════════ */

.metronic-confirm-link--fadeout {
    animation: metronic-confirm-fadeout 0.2s ease forwards;
}

.metronic-confirm-link--fadein {
    animation: metronic-confirm-fadein 0.2s ease forwards;
}

@keyframes metronic-confirm-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes metronic-confirm-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ═══════════════════════════════════
   Accessibilité
   ═══════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .metronic-confirm-link--armed.menu-link,
    .metronic-confirm-link--armed.btn {
        animation: none;
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.4);
    }

    .metronic-confirm-link--fadeout,
    .metronic-confirm-link--fadein {
        animation: none;
    }
}