/* ==========================================================================
   Thunder Stallion — Animations & Keyframes
   All motion lives here so timing/feel stays consistent across the product.
   ========================================================================== */

/* ---- Gradient drift (animated brand backgrounds) ------------------------ */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Glow pulse --------------------------------------------------------- */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* ---- Float -------------------------------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-22px) rotate(1.5deg); }
}

/* ---- Lightning flicker (SVG bolt) -------------------------------------- */
@keyframes bolt-flash {
  0%, 92%, 100% { opacity: 0; }
  93%           { opacity: 0.2; }
  94%           { opacity: 1; }
  95%           { opacity: 0.35; }
  96%           { opacity: 0.95; }
  98%           { opacity: 0.2; }
}
@keyframes bolt-draw {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}

/* ---- Shimmer (skeleton loaders) ---------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}

/* ---- Spin (loaders) ----------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Ticker scroll ------------------------------------------------------ */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Fade / rise (scroll reveal) --------------------------------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Sheen sweep (buttons / cards) ------------------------------------- */
@keyframes sheen {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  60%, 100% { transform: translateX(230%) skewX(-18deg); }
}

/* ---- Particle drift (CSS fallback dots) -------------------------------- */
@keyframes drift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-120px) translateX(20px); opacity: 0; }
}

/* ---- Scroll cue --------------------------------------------------------- */
@keyframes scroll-cue {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* ---- Reveal utility classes -------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}