/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Landing hero: the live timing board "goes live" on page load.
   Rows cascade in, the status dot pulses, and the fastest-lap cell
   flashes gold once. All of it is gated behind prefers-reduced-motion
   so the resting state (no animation) is always fully visible. */

.rw-row {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .rw-live-dot {
    animation: rw-pulse 2s ease-in-out infinite;
  }

  .rw-row {
    animation: rw-row-in 0.5s ease-out both;
  }

  .rw-row:nth-child(1) { animation-delay: 0.15s; }
  .rw-row:nth-child(2) { animation-delay: 0.3s; }
  .rw-row:nth-child(3) { animation-delay: 0.45s; }
  .rw-row:nth-child(4) { animation-delay: 0.6s; }

  .rw-fastest {
    animation: rw-fastest-flash 1.2s ease-out 0.8s both;
  }

  .rw-tick {
    animation: rw-tick-flash 0.6s ease-out both;
  }

  .rw-overtake {
    animation: rw-overtake-flash 0.8s ease-out both;
  }
}

@keyframes rw-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}

@keyframes rw-row-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rw-fastest-flash {
  0%, 100% {
    text-shadow: 0 0 0 rgba(250, 204, 21, 0);
  }
  30% {
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.85);
  }
}

@keyframes rw-tick-flash {
  0%, 100% {
    text-shadow: 0 0 0 rgba(37, 99, 235, 0);
  }
  30% {
    text-shadow: 0 0 6px rgba(37, 99, 235, 0.75);
  }
}

@keyframes rw-overtake-flash {
  0% {
    background-color: rgba(37, 99, 235, 0.14);
  }
  100% {
    background-color: transparent;
  }
}