/* ==========================================================================
   Monster Airmars G10 — Animations & Keyframes
   GPU-accelerated | Reduced-motion safe
   ========================================================================== */

/* ── Marquee (infinite scroll) ── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 20s linear infinite;
}

/* ── Glow Pulse (CTA) ── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 75, 31, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(255, 75, 31, 0.6); }
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ── Fade In (scroll reveal) ── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Staggered children ── */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 300ms; }

.reveal-stagger.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Slide Up ── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  animation: slide-up 0.8s ease forwards;
}

/* ── Scale In ── */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-scale-in {
  animation: scale-in 0.8s ease forwards;
}

/* ── RGB Border Glow (LED section) ── */
@keyframes rgb-border {
  0%   { border-color: #FF0000; }
  16%  { border-color: #FF8800; }
  33%  { border-color: #FFFF00; }
  50%  { border-color: #00FF00; }
  66%  { border-color: #0088FF; }
  83%  { border-color: #8800FF; }
  100% { border-color: #FF0000; }
}

.animate-rgb-border {
  animation: rgb-border 4s linear infinite;
}

/* ── Visualizer Bars ── */
@keyframes bar-bounce {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

.visualizer-bar {
  transform-origin: bottom;
  animation: bar-bounce 0.8s ease-in-out infinite;
}

.visualizer-bar:nth-child(1)  { animation-delay: 0.0s; }
.visualizer-bar:nth-child(2)  { animation-delay: 0.1s; }
.visualizer-bar:nth-child(3)  { animation-delay: 0.2s; }
.visualizer-bar:nth-child(4)  { animation-delay: 0.3s; }
.visualizer-bar:nth-child(5)  { animation-delay: 0.15s; }
.visualizer-bar:nth-child(6)  { animation-delay: 0.25s; }
.visualizer-bar:nth-child(7)  { animation-delay: 0.35s; }
.visualizer-bar:nth-child(8)  { animation-delay: 0.05s; }
.visualizer-bar:nth-child(9)  { animation-delay: 0.2s; }
.visualizer-bar:nth-child(10) { animation-delay: 0.1s; }

/* ── Countdown Tick ── */
@keyframes tick {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.animate-tick {
  animation: tick 0.3s ease;
}

/* ── Float (subtle hover) ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* ── CTA Subtle Shake ── */
@keyframes cta-shake {
  0%, 90%, 100% { transform: scale(1); }
  92%, 96%      { transform: scale(1.05) rotate(-2deg); }
  94%, 98%      { transform: scale(1.05) rotate(2deg); }
}

.animate-cta-shake {
  animation: cta-shake 5s ease-in-out infinite;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }

  .animate-marquee {
    animation: none;
  }
}