@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #121212;
  --foreground: #ffffff;
}

body {
  color: var(--foreground);
  background: var(--background);
  margin: 0;
  padding: 0;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 127, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 127, 0, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,0.8) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,0.8) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

/* Glow animations */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.5);
  }
}

@keyframes text-pulse-glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 127, 0, 0.6), 
                 0 0 20px rgba(255, 127, 0, 0.4),
                 0 0 30px rgba(255, 127, 0, 0.2);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 127, 0, 1), 
                 0 0 30px rgba(255, 127, 0, 0.8),
                 0 0 40px rgba(255, 127, 0, 0.6),
                 0 0 50px rgba(255, 127, 0, 0.4);
  }
}

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

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

/* Smooth transitions */
* {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
/* Mobile Live Timing Styles */
.mobile-timing-container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 16px;
  overflow-x: hidden;
}

/* Marquee Animations */
@keyframes marquee-rtl {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-ltr {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

.rider-card-marquee-rtl {
  animation: marquee-rtl 8s linear infinite;
  will-change: transform;
  display: flex;
  width: max-content;
}

.rider-card-marquee-ltr {
  animation: marquee-ltr 8s linear infinite;
  will-change: transform;
  display: flex;
  width: max-content;
}

/* Optional: Pause animation on hover for better UX */
.rider-card-marquee-rtl:hover,
.rider-card-marquee-ltr:hover {
  animation-play-state: paused;
}

/* Rider Card Glow Effect */
@keyframes rider-card-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 127, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 127, 0, 0.6), 0 0 30px rgba(255, 127, 0, 0.4);
  }
}

.rider-card-glow {
  animation: rider-card-glow 2s ease-in-out infinite;
}