@import "tailwindcss";

/* Animation d'entrée de la bannière d'accueil : l'illustration glisse
   légèrement depuis la droite en grossissant jusqu'à sa taille finale, et
   les cartes de gains apparaissent juste après avec un léger décalage
   (delay défini au cas par cas via [animation-delay:...]). */
@keyframes banner-image-enter {
  0% { opacity: 0; transform: translateX(70px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes banner-badge-enter {
  0% { opacity: 0; transform: translateY(16px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Flottement continu des cartes de la bannière, une fois qu'elles sont
   apparues (deux variantes légèrement différentes pour éviter un
   mouvement trop synchronisé entre les deux cartes). Appliqué sur un
   conteneur séparé de celui qui gère l'inclinaison au survol (tilt), pour
   que les deux animations du `transform` ne se marchent pas dessus. */
@keyframes card-float-a {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1.5deg); }
}
@keyframes card-float-b {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-1.5deg); }
}

/* Dérive douce des particules de thé générées en JS (position, taille,
   durée et délai tirés au sort côté composant, amplitude reçue ici via la
   variable CSS --tea-drift posée en style inline par particule). */
@keyframes tea-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(calc(-1 * var(--tea-drift, 12px))) rotate(8deg); }
}

.animate-banner-image { animation: banner-image-enter 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-banner-badge { animation: banner-badge-enter 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-card-float-a { animation: card-float-a 4.5s ease-in-out infinite; }
.animate-card-float-b { animation: card-float-b 5.5s ease-in-out infinite; }
.animate-tea-drift { animation: tea-drift 6s ease-in-out infinite; }

/* Respecte les préférences d'accessibilité : pas d'animation pour les
   personnes qui ont désactivé les mouvements dans leur OS. */
@media (prefers-reduced-motion: reduce) {
  .animate-banner-image,
  .animate-banner-badge,
  .animate-card-float-a,
  .animate-card-float-b,
  .animate-tea-drift {
    animation: none;
  }
}