/* ══════════════════════════════════════════════
   ENCART ANIMATIONS - Online Santé
   15 animations eye-catching pour les encarts
   ══════════════════════════════════════════════ */

/* ── 1. PULSE — Pulsation douce ── */
.anim-pulse {
    animation: encPulse 2.5s ease-in-out infinite;
}
@keyframes encPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
    50% { box-shadow: 0 0 25px 8px rgba(255,255,255,0.15), inset 0 0 20px rgba(255,255,255,0.05); }
}

/* ── 2. GLOW — Halo lumineux ── */
.anim-glow {
    animation: encGlow 3s ease-in-out infinite;
}
@keyframes encGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(255,255,255,0.1); filter: brightness(1); }
    50% { box-shadow: 0 0 40px 10px rgba(255,255,255,0.2), 0 0 80px 20px rgba(255,255,255,0.08); filter: brightness(1.12); }
}

/* ── 3. SHAKE — Secousse d'attention ── */
.anim-shake {
    animation: encShake 5s ease-in-out infinite;
}
@keyframes encShake {
    0%, 20%, 100% { transform: translateX(0); }
    2% { transform: translateX(-6px) rotate(-0.5deg); }
    4% { transform: translateX(5px) rotate(0.5deg); }
    6% { transform: translateX(-4px) rotate(-0.3deg); }
    8% { transform: translateX(3px) rotate(0.3deg); }
    10% { transform: translateX(-1px); }
    12% { transform: translateX(0); }
}

/* ── 4. BOUNCE — Rebond d'entrée ── */
.anim-bounce {
    animation: encBounce 4s ease-in-out infinite;
}
@keyframes encBounce {
    0%, 15%, 100% { transform: translateY(0); }
    3% { transform: translateY(-10px); }
    6% { transform: translateY(0); }
    9% { transform: translateY(-5px); }
    12% { transform: translateY(0); }
}

/* ── 5. BREATHE — Respiration ── */
.anim-breathe {
    animation: encBreathe 4s ease-in-out infinite;
}
@keyframes encBreathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.008); opacity: 0.95; }
}

/* ── 6. FLASH — Clignotement ── */
.anim-flash {
    animation: encFlash 3s ease-in-out infinite;
}
@keyframes encFlash {
    0%, 100% { opacity: 1; }
    25% { opacity: 1; }
    30% { opacity: 0.5; }
    35% { opacity: 1; }
    40% { opacity: 0.5; }
    45% { opacity: 1; }
}

/* ── 7. NEON — Effet néon ── */
.anim-neon {
    animation: encNeon 2s ease-in-out infinite;
    position: relative;
}
.anim-neon::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: inherit;
    border-radius: inherit;
    filter: blur(12px);
    opacity: 0;
    z-index: -1;
    animation: encNeonGhost 2s ease-in-out infinite;
}
@keyframes encNeon {
    0%, 100% { box-shadow: 0 0 5px rgba(255,255,255,0.2), inset 0 0 5px rgba(255,255,255,0.05); }
    50% { box-shadow: 0 0 20px rgba(255,255,255,0.4), 0 0 40px rgba(255,255,255,0.1), inset 0 0 15px rgba(255,255,255,0.1); }
}
@keyframes encNeonGhost {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.6; }
}

/* ── 8. SPOTLIGHT — Lumière balayante ── */
.anim-spotlight {
    position: relative;
    overflow: hidden;
}
.anim-spotlight::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: skewX(-20deg);
    animation: encSpotlight 4s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}
@keyframes encSpotlight {
    0% { left: -60%; }
    50% { left: 120%; }
    100% { left: 120%; }
}

/* ── 9. SLIDE LEFT — Glissement gauche ── */
.anim-slide-left {
    animation: encSlideL 6s ease-in-out infinite;
}
@keyframes encSlideL {
    0%, 20%, 100% { transform: translateX(0); }
    5% { transform: translateX(-8px); }
    10% { transform: translateX(0); }
}

/* ── 10. SLIDE RIGHT — Glissement droit ── */
.anim-slide-right {
    animation: encSlideR 6s ease-in-out infinite;
}
@keyframes encSlideR {
    0%, 20%, 100% { transform: translateX(0); }
    5% { transform: translateX(8px); }
    10% { transform: translateX(0); }
}

/* ── 11. WAVE — Vague ondulante ── */
.anim-wave {
    position: relative;
    overflow: hidden;
}
.anim-wave::before {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 120%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 45%;
    animation: encWave 6s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}
@keyframes encWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

/* ── 12. HEARTBEAT — Battement de cœur ── */
.anim-heartbeat {
    animation: encHeartbeat 2s ease-in-out infinite;
}
@keyframes encHeartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.015); }
    28% { transform: scale(1); }
    42% { transform: scale(1.01); }
    56% { transform: scale(1); }
}

/* ── 13. RAINBOW — Bordure arc-en-ciel ── */
.anim-rainbow {
    position: relative;
    z-index: 0;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.anim-rainbow::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #ff0000, #ff7700, #ffff00, #00ff00, #0099ff, #6633ff, #ff0000);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: encRainbow 4s linear infinite;
    pointer-events: none;
}
.anim-rainbow > * { position: relative; z-index: 1; }
@keyframes encRainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* S'assurer que SEULES les classes anim-* ajoutent des pseudo-éléments */
.info-bug:not([class*="anim-"])::before,
.info-bug:not([class*="anim-"])::after { animation: none !important; }

/* ── 14. URGENT — Clignotement rouge urgent ── */
.anim-urgent {
    animation: encUrgent 2s ease-in-out infinite;
}
@keyframes encUrgent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
    25% { box-shadow: 0 0 0 4px rgba(220,38,38,0.5); }
    50% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
    75% { box-shadow: 0 0 0 4px rgba(220,38,38,0.3); }
}

/* ── 15. ELECTRIC — Bordure électrique ── */
.anim-electric {
    position: relative;
    overflow: hidden;
}
.anim-electric::before,
.anim-electric::after {
    content: '';
    position: absolute;
    z-index: 3;
    pointer-events: none;
}
.anim-electric::before {
    top: 0; left: -100%;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: encElecH 3s linear infinite;
}
.anim-electric::after {
    bottom: 0; right: -100%;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: encElecH 3s linear infinite 1.5s;
}
@keyframes encElecH {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ── 16. BORDURE — Trait lumineux tournant autour du texte ── */
.anim-bordure { overflow: visible !important; }
.anim-bordure .bug-info-content { position: relative; }
.anim-bordure .bug-info-content::before,
.anim-bordure .bug-info-content::after {
    content: '';
    position: absolute;
    top: -5%; bottom: -5%; left: -5%; right: -5%;
    z-index: 0;
    box-shadow: inset 0 0 0 2px var(--bord-color, rgba(255, 255, 255, 0.8));
    animation: encBordure 8s linear infinite;
    pointer-events: none;
}
.anim-bordure .bug-info-content::before {
    animation-delay: -4s;
}
/* Aperçu admin + cards */
.anim-bordure.mp-in,
.anim-bordure.card-preview,
.anim-bordure.anim-demo { position: relative; overflow: visible !important; }
.anim-bordure.mp-in::before,
.anim-bordure.mp-in::after,
.anim-bordure.card-preview::before,
.anim-bordure.card-preview::after,
.anim-bordure.anim-demo::before,
.anim-bordure.anim-demo::after {
    content: '';
    position: absolute;
    top: -5%; bottom: -5%; left: -5%; right: -5%;
    z-index: 0;
    box-shadow: inset 0 0 0 2px var(--bord-color, rgba(255, 255, 255, 0.8));
    animation: encBordure 8s linear infinite;
    pointer-events: none;
}
.anim-bordure.mp-in::before,
.anim-bordure.card-preview::before,
.anim-bordure.anim-demo::before {
    animation-delay: -4s;
}
@keyframes encBordure {
    0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px); }
    25% { clip-path: polygon(0 0, 2px 0, 2px 100%, 0 100%); }
    50% { clip-path: polygon(0 calc(100% - 2px), 100% calc(100% - 2px), 100% 100%, 0 100%); }
    75% { clip-path: polygon(calc(100% - 2px) 0, 100% 0, 100% 100%, calc(100% - 2px) 100%); }
}

/* ── PREFERENCE: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    [class*="anim-"] { animation: none !important; }
    [class*="anim-"]::before,
    [class*="anim-"]::after { animation: none !important; }
}