/* =====================================================================
   Lutano — animations.css
   CSS-only keyframes + utility classes. Animate transform/opacity (GPU).
   All effects respect prefers-reduced-motion and settings.motion (data-motion
   on <html>). Without JS the site stays fully functional (see <noscript>
   fallback in header.php that forces reveal elements visible).
   ===================================================================== */

/* ---- Scroll reveal: hidden only when JS+motion are active ---- */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="auto"] .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--motion-base) var(--easing),
                transform var(--motion-base) var(--easing);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity;
  }
  html[data-motion="auto"] .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---- Gradient drift on the hero (slow, no flashing) ---- */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="auto"] .hero__bg {
    animation: gradient-shift 18s var(--easing) infinite alternate;
  }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---- CTA sheen drift ---- */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="auto"] .btn--cta {
    animation: cta-sheen 6s linear infinite alternate;
  }
}
@keyframes cta-sheen {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* ---- Number reveal (draw balls) ---- */
.draw-balls[data-number-reveal] .ball,
.instant-symbols[data-number-reveal] .symbol {
  animation: ball-pop var(--motion-base) var(--easing) backwards;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="auto"] .draw-balls[data-number-reveal] .ball:nth-child(1) { animation-delay: .05s; }
  html[data-motion="auto"] .draw-balls[data-number-reveal] .ball:nth-child(2) { animation-delay: .20s; }
  html[data-motion="auto"] .draw-balls[data-number-reveal] .ball:nth-child(3) { animation-delay: .35s; }
  html[data-motion="auto"] .draw-balls[data-number-reveal] .ball:nth-child(4) { animation-delay: .50s; }
  html[data-motion="auto"] .draw-balls[data-number-reveal] .ball:nth-child(5) { animation-delay: .65s; }
  html[data-motion="auto"] .draw-balls[data-number-reveal] .ball:nth-child(6) { animation-delay: .80s; }
  html[data-motion="auto"] .draw-balls[data-number-reveal] .ball:nth-child(7) { animation-delay: .95s; }
}
@keyframes ball-pop {
  0%   { opacity: 0; transform: scale(.4); }
  70%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Win pulse ---- */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="auto"] .result-panel--win .result-panel__msg--win {
    animation: win-pulse 1.6s var(--easing) 2;
  }
}
@keyframes win-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ---- Shimmer (skeleton) ---- */
.shimmer {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-2) 37%, var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- Confetti particle (added by motion.js) ---- */
.confetti-piece {
  position: fixed; top: -12px; width: 9px; height: 14px; z-index: 250;
  pointer-events: none; border-radius: 2px;
  animation: confetti-fall var(--fall, 2.4s) linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ---- Full reduced-motion / off kill switch ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after,
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important;
  transition-duration: .001ms !important;
}
html[data-motion="reduced"] .reveal, html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] { scroll-behavior: auto; }