/* ====================================================================
   CRS ROTARY KNOB v2.0 — PHYSICS-DRIVEN TACTILE CONTROLS
   
   THE 209th LAW: "A knob is not a button. It has weight, memory, 
                   and a relationship with the user's hand."
   
   Features:
   - Conic gradient for 3D depth
   - Dynamic glow tied to channel colors
   - Hover amplification
   - Smooth physics-driven animation via GSAP
   - Touch, mouse, keyboard, and wheel support
   
   Size: ~3KB (minified)
   ==================================================================== */

/* ==================== ROTARY KNOB CONTAINER ==================== */
.rotary-knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  min-width: 120px;
}

.knob-label {
  font-family: var(--font-tech), 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: 0.8;
  text-align: center;
}

/* ==================== ROTARY KNOB BODY ==================== */
.rotary-knob {
  position: relative;
  width: 64px;
  height: 64px;
  cursor: grab;
  outline: none;
  touch-action: none;
  user-select: none;
  transition: filter 0.2s ease;
}

.rotary-knob:active,
.rotary-knob.dragging {
  cursor: grabbing;
}

.rotary-knob:focus-visible {
  filter: brightness(1.2);
}

.rotary-knob:focus-visible .knob-body {
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.3),
    0 0 var(--glow-md, 12px) var(--glow-color, var(--neon-cyan));
}

/* Knob body with conic gradient for 3D effect */
.knob-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    #1a1a1a 0deg,
    #2d2d2d 90deg,
    #3a3a3a 180deg,
    #2d2d2d 270deg,
    #1a1a1a 360deg
  );
  border: 2px solid #333;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: 
    box-shadow 0.3s ease,
    transform 0.05s ease;
}

.rotary-knob:hover .knob-body {
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 0 var(--glow-md, 12px) var(--glow-color, var(--neon-cyan)),
    0 0 0 1px var(--glow-color, var(--neon-cyan));
  transform: scale(1.02);
}

/* Center cap for visual depth */
.knob-cap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4a4a4a, #1a1a1a);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
  z-index: 3;
}

/* Indicator mark pointing outward */
.knob-indicator {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 14px;
  background: linear-gradient(
    to bottom,
    var(--glow-color, var(--neon-cyan)),
    var(--glow-color, var(--neon-cyan)) 70%,
    transparent
  );
  border-radius: 2px;
  box-shadow: 
    0 0 6px var(--glow-color, var(--neon-cyan)),
    0 0 12px var(--glow-color, var(--neon-cyan));
  z-index: 2;
  filter: brightness(1.2);
}

/* Grip notches for tactile aesthetic */
.knob-notches {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.knob-notch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1px;
  transform-origin: center;
}

/* ==================== VALUE DISPLAY ==================== */
.knob-value {
  font-family: var(--font-tech), 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--glow-color, var(--neon-cyan));
  text-shadow: 
    0 0 6px var(--glow-color, var(--neon-cyan)),
    0 0 12px var(--glow-color, var(--neon-cyan));
  text-align: center;
  min-width: 60px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.rotary-knob:hover + .knob-value {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--glow-color, var(--neon-cyan));
}

/* ==================== DRAGGING STATE ==================== */
.rotary-knob.dragging .knob-body {
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 2px 4px rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 0 var(--glow-intense, 20px) var(--glow-color, var(--neon-cyan)),
    0 0 0 2px var(--glow-color, var(--neon-cyan));
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .rotary-knob {
    width: 56px;
    height: 56px;
  }
  
  .knob-indicator {
    height: 12px;
  }
  
  .knob-label {
    font-size: 10px;
  }
  
  .knob-value {
    font-size: 14px;
  }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  .rotary-knob,
  .knob-body,
  .knob-value {
    transition: none !important;
  }
  
  .knob-indicator {
    box-shadow: none !important;
  }
}

/* ==================== CHANNEL-SPECIFIC OVERRIDES ==================== */
/* Applied via inline styles --glow-color from component props */
.rotary-knob[data-channel="1"],
.rotary-knob[data-channel="2"] {
  /* Orange channels default via CSS variable */
}

.rotary-knob[data-channel="3"] {
  /* Magenta channel */
}

.rotary-knob[data-channel="4"] {
  /* Clay (Workshop Café) */
}

.rotary-knob[data-channel="5"] {
  /* Amber */
}

.rotary-knob[data-channel="6"] {
  /* White */
}

.rotary-knob[data-channel="7"] {
  /* Green (System Status) */
}