/* ═══════════════════════════════════════════════
   SPOILME — animations.css
═══════════════════════════════════════════════ */

/* ── KEYFRAMES ──────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes heartBeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.3); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.3); }
  70%  { transform: scale(1); }
}

@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.5); }
}

/* ── CLASSES UTILITAIRES ────────────────────── */
.animate-fadeIn      { animation: fadeIn      var(--transition-base) ease both; }
.animate-fadeInUp    { animation: fadeInUp    var(--transition-slow) ease both; }
.animate-fadeInDown  { animation: fadeInDown  var(--transition-slow) ease both; }
.animate-slideLeft   { animation: slideInLeft var(--transition-slow) ease both; }
.animate-slideRight  { animation: slideInRight var(--transition-slow) ease both; }
.animate-scaleIn     { animation: scaleIn     var(--transition-spring) both; }
.animate-pulse       { animation: pulse 2s infinite; }
.animate-spin        { animation: spin 1s linear infinite; }
.animate-heartBeat   { animation: heartBeat 1.2s ease-in-out; }

/* ── DÉLAIS EN CASCADE ──────────────────────── */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }

/* ── SKELETON LOADER ────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-card) 25%,
    var(--bg-hover) 50%,
    var(--bg-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

.skeleton-text  { height: 14px; margin-bottom: var(--space-sm); }
.skeleton-title { height: 22px; width: 60%; margin-bottom: var(--space-md); }
.skeleton-img   { height: 200px; width: 100%; }

/* ── HOVER TRANSITIONS GLOBALES ─────────────── */
.hover-lift {
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
  transition: box-shadow var(--transition-base);
}

/* ── LIKE FLOAT EMOJI ───────────────────────── */
.like-float {
  position: absolute;
  pointer-events: none;
  animation: floatUp 0.8s ease forwards;
  font-size: 1.4rem;
  z-index: 999;
}

/* ── RÉDUCTION MOUVEMENTS (accessibilité) ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}