/* Enhanced Visual Styles */

/* Add background image to the entire application */
body {
    background-image: url('../assets/images/background.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Ensure the scene container appears correctly with the background */
#scene-container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Make splash screen, instructions screen and thank you screen work with background */
#splash-screen, #instructions-screen, #thank-you-screen {
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
    z-index: 10;
}

/* Make volume and filter labels more visible */
.effect-control label {
  color: #fff; /* Brighter color */
  font-size: 12px; /* Smaller font (reduced from 14px) */
  font-weight: 700; /* Bolder */
  letter-spacing: 1px; /* Reduced from 2px */
  text-shadow: 0 0 10px var(--neon-blue), 0 0 3px var(--neon-blue); /* Reduced glow */
  margin-bottom: 6px; /* Reduced spacing */
  text-transform: uppercase; /* Make text uppercase for better visibility */
  background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  padding: 3px 6px; /* Reduced padding */
  border-radius: 4px; /* Rounded corners */
  border: 1px solid var(--neon-blue); /* Add border */
  box-shadow: 0 0 5px rgba(0, 243, 255, 0.3); /* Reduced glow effect */
  display: inline-block; /* Make the background fit the content */
}

/* Add floating animation to labels */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0px); }
}

.effect-control label {
  animation: float 3s ease-in-out infinite;
}

/* Enhance sliders for better visibility but make them more compact */
.effect-control input[type="range"] {
  width: 90px; /* Narrower sliders (reduced from 100px) */
  height: 4px; /* Thinner sliders (reduced from 6px) */
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.3); /* Reduced glow */
}

.effect-control input[type="range"]::-webkit-slider-thumb {
  width: 18px; /* Smaller thumb (reduced from 22px) */
  height: 18px; /* Smaller thumb */
  box-shadow: 0 0 10px var(--neon-blue); /* Reduced glow */
}

.effect-control input[type="range"]::-moz-range-thumb {
  width: 18px; /* Smaller thumb */
  height: 18px; /* Smaller thumb */
  box-shadow: 0 0 10px var(--neon-blue); /* Reduced glow */
}

/* Enhance the control panel for better visibility but make it more compact */
.controls-container {
  background: rgba(0, 0, 0, 0.85); /* Slightly less dark background */
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.25), inset 0 0 10px rgba(0, 243, 255, 0.1); /* Reduced glow */
  border: 1px solid var(--neon-blue); /* Thinner border */
  padding: 10px; /* Add padding to make content more compact */
  max-width: 95%; /* Limit width */
  margin: 0 auto; /* Center horizontally */
  transform: scale(0.95); /* Make the entire control panel slightly smaller */
}

/* Make transport buttons more compact but still visible */
.transport-controls button {
  padding: 8px 16px; /* Smaller padding */
  font-size: 12px; /* Smaller font */
  border: 1px solid var(--neon-blue); /* Thinner border */
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.4); /* Reduced glow */
  margin: 0 5px; /* Add some spacing between buttons */
}

/* Enhance top bar - make it more subtle */
.top-bar {
  background: rgba(0, 0, 0, 0.85); /* Slightly less dark */
  border: 1px solid var(--neon-blue); /* Thinner border */
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.25); /* Reduced glow */
  padding: 6px 16px; /* Less padding */
}

/* Make BPM indicator more visible but less aggressive */
.bpm-indicator {
  font-size: 14px; /* Smaller font */
  font-weight: 600; /* Slightly less bold */
  text-shadow: 0 0 10px var(--neon-blue), 0 0 5px var(--neon-blue); /* Reduced glow */
}

/* Enhance microphone button - make it more compact */
.mic-btn {
  border: 1px solid var(--neon-blue); /* Thinner border */
  padding: 8px 14px; /* Smaller padding */
  font-size: 14px; /* Smaller font */
  font-weight: 600; /* Less bold */
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.4); /* Reduced glow */
}

/* Add subtle pulsing effect to inactive loops */
@keyframes subtle-pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* Add smooth transition effects */
.effect-control, button, .mic-btn {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smoother transitions */
}

/* Hover effects for controls - slightly reduced */
.effect-control:hover label {
  color: #ffffff;
  text-shadow: 0 0 12px var(--neon-blue), 0 0 6px var(--neon-blue); /* Reduced from 20px, 10px */
}

.effect-control:hover input[type="range"] {
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.5); /* Reduced from 30px, 0.7 */
}

/* Make effects panel more compact by improving layout */
.effects-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* Spacing between controls */
}

.main-controls {
  padding: 5px; /* Reduced padding */
}

/* Style for reverb control */
#reverb-amount {
  accent-color: #ff00ff; /* Purple color for reverb */
}

#reverb-amount::-webkit-slider-thumb {
  box-shadow: 0 0 10px #ff00ff;
}

#reverb-amount::-moz-range-thumb {
  box-shadow: 0 0 10px #ff00ff;
}

/* Style for stereo pan control */
#stereo-pan {
  accent-color: #00ffcc; /* Teal color for panning */
}

#stereo-pan::-webkit-slider-thumb {
  box-shadow: 0 0 10px #00ffcc;
}

#stereo-pan::-moz-range-thumb {
  box-shadow: 0 0 10px #00ffcc;
}

/* Add indicator for pan center position */
.effect-control:has(#stereo-pan) {
  position: relative;
}

.effect-control:has(#stereo-pan)::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* Style for beat repeat control */
#beat-repeat {
  accent-color: #ff9900; /* Orange color for beat repeat */
}

#beat-repeat::-webkit-slider-thumb {
  box-shadow: 0 0 10px #ff9900;
}

#beat-repeat::-moz-range-thumb {
  box-shadow: 0 0 10px #ff9900;
}

/* Beat divisions display */
.beat-divisions {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 8px;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.7);
}

.beat-divisions span {
  text-align: center;
  width: 20%;
  font-weight: bold;
}

/* Highlight active beat division */
.beat-division-active {
  color: #ff9900;
  text-shadow: 0 0 5px #ff9900;
}

/* Make the beat repeat control wider */
.effect-control:has(#beat-repeat) {
  width: 100%;
  max-width: 200px;
}