@keyframes fadeInUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
@keyframes glow-border { 0%, 100% { box-shadow: 0 0 8px rgba(253,45,94,0.2); } 50% { box-shadow: 0 0 24px rgba(253,45,94,0.5); } }
@keyframes spin-wheel-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(var(--spin-deg, 1440deg)); } }
@keyframes win-pop { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

.trn-card { animation: fadeInUp 0.5s ease both; }
.trn-card:nth-child(1) { animation-delay: 0.05s; }
.trn-card:nth-child(2) { animation-delay: 0.12s; }
.trn-card:nth-child(3) { animation-delay: 0.19s; }
.trn-card:nth-child(4) { animation-delay: 0.26s; }
.trn-card:nth-child(5) { animation-delay: 0.33s; }

.hero-badge { animation: slideInLeft 0.6s ease both; animation-delay: 0.1s; }
.hero-h1 { animation: fadeInUp 0.7s ease both; animation-delay: 0.2s; }
.hero-sub { animation: fadeInUp 0.7s ease both; animation-delay: 0.3s; }
.hero-btns { animation: fadeInUp 0.7s ease both; animation-delay: 0.4s; }
.hero-stats { animation: fadeInUp 0.7s ease both; animation-delay: 0.5s; }

.wheel-result.visible { animation: win-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.btn--primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn--secondary:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }

.site-header { transition: box-shadow 0.3s ease; }
.site-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.5); }

.bonus-card { animation: scaleIn 0.5s ease both; }
.bonus-card:nth-child(1) { animation-delay: 0.05s; }
.bonus-card:nth-child(2) { animation-delay: 0.15s; }
.bonus-card:nth-child(3) { animation-delay: 0.25s; }

section, .section-wrap { scroll-margin-top: 80px; }

.adv-card:nth-child(1) .adv-icon { animation: float 4s ease-in-out infinite; animation-delay: 0s; }
.adv-card:nth-child(2) .adv-icon { animation: float 4s ease-in-out infinite; animation-delay: 0.4s; }
.adv-card:nth-child(3) .adv-icon { animation: float 4s ease-in-out infinite; animation-delay: 0.8s; }
.adv-card:nth-child(4) .adv-icon { animation: float 4s ease-in-out infinite; animation-delay: 1.2s; }
.adv-card:nth-child(5) .adv-icon { animation: float 4s ease-in-out infinite; animation-delay: 1.6s; }
.adv-card:nth-child(6) .adv-icon { animation: float 4s ease-in-out infinite; animation-delay: 2.0s; }
.adv-card:nth-child(7) .adv-icon { animation: float 4s ease-in-out infinite; animation-delay: 2.4s; }
.adv-card:nth-child(8) .adv-icon { animation: float 4s ease-in-out infinite; animation-delay: 2.8s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}