/* ==========================================================================
   ACCESSIBLE MOTION GRAPHICS VISUALIZERS (UI-SKILLS STANDARD)
   Meets WCAG 2.3.3 & C39. Respects prefers-reduced-motion with 3 tiers.
   ========================================================================== */

.motion-card-stage {
  position: relative;
  width: 100%;
  height: 190px;
  background: radial-gradient(circle at 50% 50%, #07352B 0%, #041B16 65%, #020F0C 100%);
  border-bottom: 1px solid rgba(19, 201, 135, 0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. Bowling Styles & Swing Motion Graphic */
.bowling-motion-canvas {
  width: 100%;
  height: 100%;
  position: relative;
}

.swing-trajectory-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.swing-ball-tracer {
  offset-path: path("M 30,120 Q 140,40 220,100 T 320,60");
  animation: travelSwing 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes travelSwing {
  0% { offset-distance: 0%; opacity: 0; transform: scale(0.6); }
  15% { opacity: 1; transform: scale(1); }
  85% { opacity: 1; transform: scale(1.1); }
  100% { offset-distance: 100%; opacity: 0; transform: scale(0.7); }
}

/* 2. Batting Powerplay Wagon Wheel Motion Graphic */
.wagon-wheel-svg {
  width: 100%;
  height: 100%;
}

.shot-laser-1 {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: strokeLaser 2.4s ease-in-out infinite;
}

.shot-laser-2 {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: strokeLaser 2.4s ease-in-out infinite 0.6s;
}

.shot-laser-3 {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: strokeLaser 2.4s ease-in-out infinite 1.2s;
}

@keyframes strokeLaser {
  0% { stroke-dashoffset: 160; opacity: 0; }
  25% { opacity: 1; }
  75% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* 3. Tactical Fielding Radar Motion Graphic */
.radar-sweep-beam {
  transform-origin: 150px 95px;
  animation: sonarSweep 4s linear infinite;
}

@keyframes sonarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fielder-blip {
  animation: blipPulse 1.8s ease-in-out infinite;
}

@keyframes blipPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 6px #48F0A6); }
}

/* 4. DRS & Wicket Ball Tracking Motion Graphic */
.hawk-eye-beam {
  animation: hawkEyeScan 2.5s ease-in-out infinite alternate;
}

@keyframes hawkEyeScan {
  0% { stroke-opacity: 0.3; }
  100% { stroke-opacity: 1; filter: drop-shadow(0 0 8px #FFC84A); }
}

/* 5. Tournament Championship Trophy Motion Graphic */
.trophy-glow-halo {
  animation: haloPulse 3s ease-in-out infinite alternate;
}

@keyframes haloPulse {
  0% { transform: scale(0.95); opacity: 0.5; }
  100% { transform: scale(1.08); opacity: 0.9; }
}

.trophy-spark {
  animation: sparkTwinkle 2s ease-in-out infinite;
}

@keyframes sparkTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Pause class toggled via accessible button */
body.animations-paused * {
  animation-play-state: paused !important;
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION (TIERED ACCESSIBLE ANIMATION SPECIFICATION)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Tier 1: Neutralize runaway motion, infinite spins, and large area translates */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* Tier 2: Replace continuous motion with gentle static 150ms cross-fades */
  .swing-ball-tracer,
  .shot-laser-1, .shot-laser-2, .shot-laser-3,
  .radar-sweep-beam,
  .hawk-eye-beam,
  .trophy-glow-halo,
  .trophy-spark {
    animation: none !important;
    opacity: 0.9 !important;
    transform: none !important;
  }

  /* Tier 3: Retain opacity and color transitions */
  .panel-card, .guide-card, .forum-tab-btn, .ref-docked-cta-btn {
    transition: opacity 150ms ease, background-color 150ms ease !important;
  }
}