@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg-dark: #121214;
  --bg-surface: #232428;
  --brand-orange: #FF5A00;
  --accent-yellow: #FFD700;
  --accent-cyan: #00D2FF;
}

body { 
  font-family: 'Inter', sans-serif; 
  background-color: var(--bg-dark); 
  color: #E2E2E2;
  overflow-x: hidden;
}

.heading-font { 
  font-family: 'Barlow Condensed', sans-serif; 
  letter-spacing: 0.03em; 
}

/* Scroll Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-up.visible { 
  opacity: 1; 
  transform: translateY(0); 
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* Typographic Accents */
.text-gradient {
  background: linear-gradient(90deg, var(--brand-orange), var(--accent-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Custom Range Slider */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--brand-orange);
  cursor: pointer;
  margin-top: -10px;
  box-shadow: 0 0 15px rgba(255, 90, 0, 0.6);
  border: 2px solid #fff;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #3f3f46;
  border-radius: 2px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-orange);
}

/* UI Glitch/Pulse Effect for IDLE State */
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.status-idle-pulse {
  animation: pulse-red 2s infinite;
}