/* =========================================================================
   Aurora theme — animations.css
   CSS-cheap motion (aurora drift, shimmer) + the initial hidden state for
   JS reveals. ALL motion is disabled under prefers-reduced-motion and when
   settings.motion is "reduced"/"off" (html[data-motion]).
   No flashing > 3/s anywhere (WCAG 2.3.1).
   ========================================================================= */

/* --- aurora drift (decorative background gradient) --- */
@keyframes aurora-drift {
  0%   { transform: translate3d(-3%, 0, 0) scale(1.05); opacity: .14; }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.12); opacity: .20; }
  100% { transform: translate3d(-3%, 0, 0) scale(1.05); opacity: .14; }
}
[data-aurora] { animation: aurora-drift 18s ease-in-out infinite; will-change: transform, opacity; }

/* --- subtle CTA glow breathing (very slow, no flashing) --- */
@keyframes cta-breathe {
  0%, 100% { box-shadow: 0 8px 24px rgba(45,124,255,.40); }
  50%      { box-shadow: 0 10px 30px rgba(45,124,255,.55); }
}
.hero .btn--cta { animation: cta-breathe 6s ease-in-out infinite; }

/* --- shimmer skeleton (loading placeholders) --- */
@keyframes shimmer { 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.04) 63%);
  background-size: 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: 10px;
}

/* --- reveal initial state: hidden ONLY when Motion is active (class added by motion.js).
       Without JS / module, elements stay fully visible (progressive enhancement). --- */
.motion-ready [data-reveal] { opacity: 0; }
.motion-ready .case-card[data-reveal] { transform: translateY(16px); }

/* --- confetti particle (generated by motion.js, animated inline) --- */
.confetti-piece { position: fixed; top: -10px; width: 10px; height: 14px; border-radius: 2px; z-index: 170; pointer-events: none; }

/* =========================================================================
   Reduced motion — kill all decorative motion, show reveals immediately.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-aurora] { animation: none; }
  .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
}
html[data-motion="reduced"] [data-aurora],
html[data-motion="off"] [data-aurora] { animation: none; }
html[data-motion="reduced"] .hero .btn--cta,
html[data-motion="off"] .hero .btn--cta { animation: none; }
html[data-motion="reduced"] .motion-ready [data-reveal],
html[data-motion="off"] .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .skeleton { animation: none; }