/* Custom styles for Minimoog synthesizer */

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #92400e 0%, #451a03 100%);
}

/* Slider styling */
.slider {
  appearance: none;
  background: linear-gradient(to right, #374151 0%, #6b7280 50%, #374151 100%);
  outline: none;
  border-radius: 10px;
  height: 6px;
  width: 80px;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 2px solid #fff;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 2px solid #fff;
}

.vertical-slider {
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* WebKit */
  width: 6px;
  height: 80px;
  outline: none;
}

/* Knob animations */
.knob-container {
  transition: transform 0.1s ease;
}

.knob-container:hover {
  transform: scale(1.05);
}

/* Wood grain texture overlay */
.wood-grain::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(90deg, transparent 50%, rgba(139, 69, 19, 0.1) 50%),
    linear-gradient(45deg, transparent 49%, rgba(160, 82, 45, 0.1) 49%, rgba(160, 82, 45, 0.1) 51%, transparent 51%);
  background-size: 4px 4px, 8px 8px;
  border-radius: inherit;
  pointer-events: none;
}

/* LED glow effects */
.led-glow {
  box-shadow: 0 0 10px currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Keyboard styling */
.piano-key {
  transition: all 0.1s ease;
  user-select: none;
}

.piano-key:active {
  transform: translateY(2px);
}

.piano-key.black {
  background: linear-gradient(to bottom, #2d3748 0%, #1a202c 100%);
}

.piano-key.white {
  background: linear-gradient(to bottom, #ffffff 0%, #f7fafc 100%);
}

/* Panel sections */
.synth-section {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border: 1px solid #374151;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.1);
}

/* Control labels */
.control-label {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vertical-slider {
    width: 80px;
    height: 6px;
    writing-mode: initial;
    -webkit-appearance: initial;
  }
  
  .knob-container {
    transform: scale(0.9);
  }
}

/* Chrome and shadow effects for knobs */
.knob {
  background: 
    radial-gradient(circle at 30% 30%, #e5e7eb 0%, #9ca3af  40%, #6b7280 100%);
  box-shadow: 
    inset 0 1px 3px rgba(255,255,255,0.3),
    inset 0 -1px 3px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.2);
}

.knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  pointer-events: none;
}

/* Switch styling */
.moog-switch {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  border: 1px solid #4b5563;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.moog-switch.active {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

/* Authentic Moog styling touches */
.moog-panel {
  background: 
    linear-gradient(135deg, #8b4513 0%, #654321 20%, #1a1a1a 20%, #2d2d2d 80%, #654321 80%, #8b4513 100%);
}

.moog-logo {
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  letter-spacing: 2px;
}