/* ==========================================================================
   animations.css — Keyframes + scroll-reveal utilities
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ringspin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Scroll reveal — elements start hidden, .is-visible added by IntersectionObserver */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease);
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

/* Reduced motion: reveal instantly, kill continuous animation */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .float-card, .marquee__track, .avatar-ring, .avatar-ring__inner { animation: none !important; }
  .success-check circle, .success-check path { animation: none !important; stroke-dashoffset: 0 !important; }
}