55 lines
2.3 KiB
CSS
55 lines
2.3 KiB
CSS
@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;
|
|
}
|
|
}
|