/* ===================================================================
   MICRO-INTERACTIONS & ANIMATIONS D'ENTRÉE
   Chaque animation a une justification UX : révéler la hiérarchie,
   confirmer une action, guider l'attention. Rien de gratuit.
   =================================================================== */

@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes count-pulse { 0% { opacity: 0.4; } 100% { opacity: 1; } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

.anim-fade-up { animation: fade-up var(--dur-slow) var(--ease-standard) both; }
.anim-fade-in { animation: fade-in var(--dur-base) var(--ease-standard) both; }
.anim-scale-in { animation: scale-in var(--dur-base) var(--ease-standard) both; }

/* Apparition progressive des listes/cartes (stagger) */
.stagger > * { animation: fade-up var(--dur-slow) var(--ease-standard) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; }
.stagger > *:nth-child(n+7) { animation-delay: 240ms; }

.hover-lift { transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

/* Compteur animé (piloté par JS components/counter.js) */
.counter { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
    .anim-fade-up, .anim-fade-in, .anim-scale-in { animation: none !important; opacity: 1 !important; transform: none !important; }
}