/* Keyframes + entrance animations + skeleton shimmer. */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(231,189,90,0.4); } 50% { box-shadow: 0 0 0 10px rgba(231,189,90,0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes countUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.2,0.8,0.3,1) forwards; }
.reveal-1 { animation-delay: 0.05s; } .reveal-2 { animation-delay: 0.12s; }
.reveal-3 { animation-delay: 0.19s; } .reveal-4 { animation-delay: 0.26s; }
.reveal-5 { animation-delay: 0.33s; } .reveal-6 { animation-delay: 0.40s; }

.float { animation: float 5s ease-in-out infinite; }
.glow-pulse { animation: pulseGlow 2.5s ease-in-out infinite; }

/* Skeletons */
.skeleton-line, .skeleton-card { position: relative; overflow: hidden; }
.skeleton-line {
  height: 14px; border-radius: 8px; margin: 8px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%);
  background-size: 800px 100%; animation: shimmer 1.4s infinite linear;
}
.skeleton-line.short { width: 45%; }
.skeleton-block { padding: 4px 0; }
.skeleton-card { min-height: 110px; }
.value-anim { animation: countUp 0.5s ease forwards; }

/* Number odometer feel */
.stat-card .st-value, .hero-balance { transition: color 0.3s; }

/* Hover lift utility */
.lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow); }