/* ==========================================================================
   animations.css — Animations globales et keyframes
   KekOnFait — Theme clair
   ========================================================================== */

/* --------------------------------------------------------------------------
   Transitions d'ecran (entree / sortie)
   -------------------------------------------------------------------------- */
.screen-enter {
  animation: screenFadeIn 300ms ease forwards;
}

.screen-exit {
  animation: screenFadeOut 200ms ease forwards;
}

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

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

/* --------------------------------------------------------------------------
   Fade in generique
   -------------------------------------------------------------------------- */
.fade-in {
  animation: fadeIn 300ms ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in-up {
  animation: fadeInUp 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* --------------------------------------------------------------------------
   Scale bounce (pour reveler un resultat)
   -------------------------------------------------------------------------- */
.scale-bounce {
  animation: scaleBounce 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleBounce {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Pulse (pour attirer l'attention)
   -------------------------------------------------------------------------- */
.pulse-primary {
  animation: pulsePrimary 2s ease-in-out infinite;
}

@keyframes pulsePrimary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.15);
  }
}

/* --------------------------------------------------------------------------
   Shimmer / loading (placeholder)
   -------------------------------------------------------------------------- */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

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

/* --------------------------------------------------------------------------
   Shake (erreur / input invalide)
   -------------------------------------------------------------------------- */
.shake {
  animation: shake 400ms ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   Spotlight (pour Qui Paye — reste dramatique, fond noir)
   -------------------------------------------------------------------------- */
.spotlight {
  animation: spotlightReveal 800ms ease forwards;
}

@keyframes spotlightReveal {
  from {
    background: radial-gradient(circle 0px at 50% 50%, transparent 0%, #0F172A 0%);
  }
  to {
    background: radial-gradient(circle 300px at 50% 50%, transparent 60%, #0F172A 100%);
  }
}

/* --------------------------------------------------------------------------
   Confettis (base CSS — le gros sera en Canvas JS)
   -------------------------------------------------------------------------- */
.confetti-piece {
  position: fixed;
  width: 8px;
  height: 8px;
  opacity: 0;
  animation: confettiFall 3s ease-in forwards;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(-100vh) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

/* --------------------------------------------------------------------------
   Rotation infinie (pour loaders, globe, etc.)
   -------------------------------------------------------------------------- */
.rotate-slow {
  animation: rotateSlow 8s linear infinite;
}

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

/* --------------------------------------------------------------------------
   Stagger — delais progressifs (classes utilitaires)
   -------------------------------------------------------------------------- */
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 200ms; }
.stagger-3 { animation-delay: 400ms; }
.stagger-4 { animation-delay: 600ms; }
.stagger-5 { animation-delay: 800ms; }
.stagger-6 { animation-delay: 1000ms; }

/* --------------------------------------------------------------------------
   Bouton de tirage — animation pulsation avant clic
   -------------------------------------------------------------------------- */
.draw-btn-pulse {
  animation: drawBtnPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes drawBtnPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(99, 102, 241, 0.4),
      0 0 0 0 rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(99, 102, 241, 0),
      0 0 0 16px rgba(99, 102, 241, 0);
  }
}

/* --------------------------------------------------------------------------
   Reduced Motion — desactive tout
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .screen-enter,
  .screen-exit,
  .fade-in,
  .fade-in-up,
  .scale-bounce,
  .pulse-primary,
  .shimmer,
  .shake,
  .spotlight,
  .confetti-piece,
  .rotate-slow,
  .draw-btn-pulse {
    animation: none;
    opacity: 1;
    transform: none;
  }
}