@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --bg-main: #0a0b10;
  --bg-card: rgba(16, 20, 31, 0.75);
  --border-card: rgba(255, 255, 255, 0.08);
  --neon-cyan: #00f2fe;
  --neon-blue: #4facfe;
  --accent-amber: #f59e0b;
  --accent-red: #ff3366;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg-main);
  color: #f1f5f9;
  overflow-x: hidden;
  selection-background-color: var(--neon-cyan);
  selection-color: #000;
}

.font-display {
  font-family: 'Space Grotesk', sans-serif;
}

/* Glassmorphism */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-card);
}

.glass-panel-hover {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-hover:hover {
  border-color: rgba(0, 242, 254, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(0, 242, 254, 0.12);
}

.glass-nav {
  background: rgba(10, 11, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Ambient glow background effects */
.glow-sphere-cyan {
  position: absolute;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.glow-sphere-red {
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 51, 102, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Carbon fiber subtle pattern */
.bg-carbon {
  background-color: #0b0d13;
  background-image: 
    linear-gradient(45deg, #11141d 25%, transparent 25%), 
    linear-gradient(-45deg, #11141d 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #11141d 75%), 
    linear-gradient(-45deg, transparent 75%, #11141d 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* Custom Gradients */
.text-gradient-cyan {
  background: linear-gradient(135deg, #ffffff 20%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-cyber-primary {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  color: #050b14;
  font-weight: 700;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-cyber-primary:hover {
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.6);
  transform: scale(1.02);
}

.btn-cyber-outline {
  border: 1px solid rgba(0, 242, 254, 0.5);
  color: #00f2fe;
  transition: all 0.3s ease;
}

.btn-cyber-outline:hover {
  background: rgba(0, 242, 254, 0.1);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}

/* Engine Start pulsing button */
.pulse-glow {
  animation: pulseNeon 2s infinite;
}

@keyframes pulseNeon {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(255, 51, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 51, 102, 0);
  }
}

.pulse-glow-running {
  animation: pulseRunning 1s infinite alternate;
}

@keyframes pulseRunning {
  0% {
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.8), inset 0 0 10px rgba(0, 242, 254, 0.5);
  }
  100% {
    box-shadow: 0 0 35px rgba(0, 242, 254, 1), inset 0 0 20px rgba(0, 242, 254, 0.8);
  }
}

/* 360 Studio stage platform */
.studio-podium {
  position: relative;
  border-radius: 24px;
  background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.6) 0%, rgba(10, 11, 16, 0.95) 75%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.studio-grid-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background-size: 30px 30px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  transform: perspective(300px) rotateX(60deg);
  transform-origin: bottom center;
  pointer-events: none;
}

/* Custom Range Input */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #1e293b;
  border-radius: 9999px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00f2fe;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.8);
  transition: transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

/* Toast animations */
@keyframes slideDown {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.animate-toast {
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #0a0b10;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00f2fe;
}