@import "tailwindcss";

:root {
  --primary-purple: #7c3aed;
  --accent-pink: #ec4899;
  --neon-cyan: #00d4ff;
  --neon-blue: #0066ff;
  --dark-bg: #0f0f23;
  --darker-bg: #080817;
  --card-bg: rgba(15, 15, 35, 0.8);
}

/* Font Classes */
.font-orbitron {
  font-family: var(--font-orbitron), 'Courier New', monospace;
}

/* Subtle Neon Effects - Bright but Not Overwhelming */
.neon-text {
  color: white;
  text-shadow: 
    0 0 10px var(--primary-purple);
  filter: drop-shadow(0 0 8px var(--primary-purple));
}

.neon-text-cyan {
  color: white;
  text-shadow: 
    0 0 10px var(--neon-cyan);
  filter: drop-shadow(0 0 8px var(--neon-cyan));
}

.neon-text-pink {
  color: white;
  text-shadow: 
    0 0 10px var(--accent-pink);
  filter: drop-shadow(0 0 8px var(--accent-pink));
}

.neon-text-blue {
  color: white;
  text-shadow: 
    0 0 10px var(--neon-blue);
  filter: drop-shadow(0 0 8px var(--neon-blue));
}

/* Subtle Neon Box/Container Effects */
.neon-box-cyan {
  box-shadow: 
    0 0 5px var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
}

.neon-box-pink {
  box-shadow: 
    0 0 5px var(--accent-pink);
  border: 1px solid var(--accent-pink);
}

.neon-box-purple {
  box-shadow: 
    0 0 5px var(--primary-purple);
  border: 1px solid var(--primary-purple);
}

.neon-box-blue {
  box-shadow: 
    0 0 5px var(--neon-blue);
  border: 1px solid var(--neon-blue);
}

@keyframes neon-flicker {
  0%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor,
      0 0 20px var(--neon-cyan),
      0 0 35px var(--neon-cyan),
      0 0 40px var(--neon-cyan);
  }
  50% {
    opacity: 0.8;
    text-shadow: 
      0 0 2px currentColor,
      0 0 5px currentColor,
      0 0 8px currentColor,
      0 0 12px var(--neon-cyan),
      0 0 18px var(--neon-cyan),
      0 0 25px var(--neon-cyan);
  }
}

/* Neon Card Effects */
.neon-card {
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.neon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 128, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.neon-card:hover::before {
  left: 100%;
}

.shadow-neon {
  box-shadow: 
    0 0 30px rgba(255, 0, 128, 0.5),
    0 0 60px rgba(0, 255, 255, 0.3),
    0 0 90px rgba(139, 92, 246, 0.2);
}

/* Retro Grid Animation */
@keyframes grid-move {
  0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

.retro-grid {
  animation: grid-move 2s linear infinite;
}

/* Synthwave Background */
.synthwave-bg {
  background: 
    linear-gradient(135deg, #667eea 0%, #764ba2 100%),
    linear-gradient(45deg, #f093fb 0%, #f5576c 100%),
    linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
  background-size: 400% 400%;
  animation: synthwave-gradient 15s ease infinite;
}

/* Synthwave Grid */
.synthwave-grid {
  background-image: 
    linear-gradient(rgba(0, 212, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.3) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: grid-move 20s linear infinite;
  opacity: 0.4;
}

.synthwave-grid-perspective {
  background: 
    linear-gradient(0deg, transparent 24%, rgba(0, 212, 255, 0.4) 25%, rgba(0, 212, 255, 0.4) 26%, transparent 27%, transparent 74%, rgba(0, 212, 255, 0.4) 75%, rgba(0, 212, 255, 0.4) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, rgba(124, 58, 237, 0.4) 25%, rgba(124, 58, 237, 0.4) 26%, transparent 27%, transparent 74%, rgba(124, 58, 237, 0.4) 75%, rgba(124, 58, 237, 0.4) 76%, transparent 77%, transparent);
  background-size: 60px 60px;
  animation: grid-move 15s linear infinite;
  opacity: 0.3;
}

@keyframes synthwave-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glitch Effect */
.glitch {
  animation: glitch-animation 2s infinite;
}

@keyframes glitch-animation {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Pulsing Dots */
@keyframes neon-pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.5; 
    transform: scale(1.2);
  }
}

.neon-pulse {
  animation: neon-pulse 2s infinite;
}

/* Filter Form Styling */
.filter-input {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: white;
  transition: all 0.3s ease;
}

.filter-input:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
  background: rgba(0, 0, 0, 0.8);
}

.filter-input option {
  background: rgba(15, 15, 35, 0.95);
  color: white;
}

/* Responsive Typography and Mobile Adjustments */
@media (max-width: 640px) {
  .neon-text {
    text-shadow: 
      0 0 3px currentColor,
      0 0 6px currentColor,
      0 0 9px currentColor,
      0 0 12px var(--neon-cyan),
      0 0 18px var(--neon-cyan),
      0 0 24px var(--neon-cyan);
  }
  
  /* Mobile-specific padding adjustments */
  .mobile-reduced-padding {
    padding: 1rem !important;
  }
  
  .mobile-reduced-spacing > * + * {
    margin-top: 2rem !important;
  }
  
  .mobile-reduced-main-padding {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .mobile-reduced-nav-padding {
    padding: 1rem !important;
  }
}

body {
  background: var(--darker-bg);
  color: #ededed;
  font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

/* Glassmorphism Effects */
.glass-card {
  background: rgba(15, 15, 35, 0.15);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.glass-panel {
  background: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.glass-overlay {
  background: rgba(15, 15, 35, 0.4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--dark-bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--neon-pink), var(--neon-cyan));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--neon-cyan), var(--neon-purple));
}