/* Glassmorphism & Premium UI Elements */
.glass-card {
  background: rgba(10, 15, 31, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
}

/* Status Dot Pulse Effect */
.status-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 12px #22c55e;
  animation: pulse-dot 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px #22c55e; }
  50% { opacity: 0.4; transform: scale(0.85); box-shadow: 0 0 4px #22c55e; }
}

/* Floating Animation */
.floating {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* Background Effects - Cinematic Football Theme */
.field-lines {
  position: absolute;
  inset: -50%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: center top;
  transform: perspective(1000px) rotateX(70deg) translateY(-100px);
  transform-origin: center top;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
}

.light-beams {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 180deg at 50% -10%, transparent 35%, rgba(59, 130, 246, 0.08) 50%, transparent 65%);
  animation: swing 20s ease-in-out infinite alternate;
  transform-origin: top center;
  mix-blend-mode: screen;
}

@keyframes swing {
  0% { transform: rotate(-20deg); }
  100% { transform: rotate(20deg); }
}

/* Framer Motion Style Reveal Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Delays for sequence */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }

/* Responsive Adjustments */
@media (max-width: 640px) {
  .field-lines { 
    transform: perspective(600px) rotateX(65deg) scale(1.5) translateY(-50px); 
  }
}

/* Particle styling */
.particle {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}