/* ====================================================================
   CRS WAVEFORM SIGNAL FEED v1.0 — THE 208th LAW IN ACTION
   
   THE 208th LAW: "A knob tells you what you are doing; a waveform 
                   tells you what is happening. If the signal doesn't 
                   move, the machine is off. Give the user a pulse, 
                   and they will stay to watch the heart beat."
   
   PURPOSE: Visual signal presence for audio rack modules
            Lightweight SVG-based oscilloscope/spectrum analyzer
            <1KB per waveform | Zero load penalty | GPU-accelerated
   
   PERFORMANCE TARGET: 60fps smooth animation
   ==================================================================== */

/* ====================================================================
   WAVEFORM CONTAINER
   ==================================================================== */

.waveform-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2; /* Between asset base (1) and glass overlay (3) */
  pointer-events: none;
  opacity: 0.8;
  mix-blend-mode: screen;
  transition: opacity var(--glow-transition);
}

/* Amplify on hover for interactivity */
.rack-module:hover .waveform-svg {
  opacity: 1;
}

/* ====================================================================
   WAVEFORM PATH ANIMATIONS
   ==================================================================== */

/* Oscilloscope: Continuous trace animation */
.waveform-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 
    trace-signal 4s linear infinite,
    signal-flicker 0.1s infinite,
    signal-pulse 2s ease-in-out infinite;
  transform-origin: center;
  will-change: stroke-dashoffset, opacity, transform;
}

/* Trace animation - simulates electron beam drawing the waveform */
@keyframes trace-signal {
  0% { 
    stroke-dashoffset: 400; 
  }
  100% { 
    stroke-dashoffset: 0; 
  }
}

/* Subtle flicker for phosphor screen realism */
@keyframes signal-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

/* Breathing pulse for "living" signal */
@keyframes signal-pulse {
  0%, 100% { 
    transform: scaleY(1); 
    filter: brightness(1);
  }
  50% { 
    transform: scaleY(1.05); 
    filter: brightness(1.1);
  }
}

/* ====================================================================
   STYLE VARIANTS
   ==================================================================== */

/* Spectrum Analyzer: Vertical bars */
.waveform-spectrum {
  animation: 
    spectrum-bounce 0.5s ease-in-out infinite,
    signal-flicker 0.15s infinite;
}

@keyframes spectrum-bounce {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.9); }
}

/* Pulse: Heartbeat style */
.waveform-pulse {
  animation: 
    heartbeat 1.2s ease-in-out infinite,
    signal-flicker 0.08s infinite;
}

@keyframes heartbeat {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1;
  }
  10% { 
    transform: scale(1.15); 
    opacity: 1;
  }
  20% { 
    transform: scale(1); 
    opacity: 0.95;
  }
  30% { 
    transform: scale(1.1); 
    opacity: 1;
  }
  40%, 50% { 
    transform: scale(1); 
    opacity: 0.9;
  }
}

/* ====================================================================
   SCAN LINE EFFECT (CRT Monitor Simulation)
   ==================================================================== */

.waveform-scanline {
  animation: scanline-sweep 3s linear infinite;
  opacity: 0.4;
}

@keyframes scanline-sweep {
  0% { 
    transform: translateX(0); 
    opacity: 0.3;
  }
  50% { 
    opacity: 0.6;
  }
  100% { 
    transform: translateX(200px); 
    opacity: 0.3;
  }
}

/* ====================================================================
   CHANNEL-SPECIFIC VARIANTS
   ==================================================================== */

/* Rehearsal Channels (1-2): Energetic pulse */
[data-channel="1"] .waveform-path,
[data-channel="2"] .waveform-path {
  animation-duration: 3.5s, 0.1s, 1.8s;
  stroke-width: 2.5px;
}

/* Control Room (3): Technical precision */
[data-channel="3"] .waveform-path {
  animation-duration: 5s, 0.08s, 2.5s;
  stroke-width: 2px;
  opacity: 0.95;
}

/* Workshop Café (4): Warm, organic pulse */
[data-channel="4"] .waveform-path {
  animation-duration: 6s, 0.15s, 3s;
  stroke-width: 3px;
  opacity: 0.7;
  filter: blur(0.5px); /* Softer, warmer aesthetic */
}

/* AV Services (5): Sharp, professional */
[data-channel="5"] .waveform-path {
  animation-duration: 4s, 0.05s, 2s;
  stroke-width: 2px;
}

/* Contact (6): Steady, reliable */
[data-channel="6"] .waveform-path {
  animation-duration: 5s, 0.12s, 2.2s;
  stroke-width: 2.5px;
}

/* System Status (7): Active monitoring */
[data-channel="7"] .waveform-path {
  animation-duration: 3s, 0.06s, 1.5s;
  stroke-width: 2px;
  opacity: 1;
}

/* ====================================================================
   INTERACTIVE STATES
   ==================================================================== */

/* Boost signal on hover */
.rack-module:hover .waveform-path {
  stroke-width: 3px;
  filter: brightness(1.2) drop-shadow(0 0 4px currentColor);
}

/* Dim when module is inactive (future state) */
.rack-module.offline .waveform-path {
  animation-play-state: paused;
  opacity: 0.2;
  filter: grayscale(1);
}

/* ====================================================================
   PERFORMANCE OPTIMIZATIONS
   ==================================================================== */

/* GPU acceleration for smooth 60fps */
.waveform-svg,
.waveform-path,
.waveform-scanline {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .waveform-path,
  .waveform-scanline {
    animation: none;
  }
  
  .waveform-path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
}

/* ====================================================================
   RESPONSIVE ADJUSTMENTS
   ==================================================================== */

@media (max-width: 768px) {
  .waveform-svg {
    opacity: 0.6; /* Reduce intensity on mobile */
  }
  
  .waveform-path {
    stroke-width: 2px; /* Thinner lines for mobile performance */
  }
  
  /* Simplify animations for mobile performance */
  .waveform-scanline {
    display: none;
  }
}

/* ====================================================================
   KNOB INTEGRATION (Phase 3D - Interactive Waveform)
   ==================================================================== */

/* JS-driven amplitude control via data attributes */
.waveform-svg[data-amplitude="high"] .waveform-path {
  transform: scaleY(1.3);
}

.waveform-svg[data-amplitude="medium"] .waveform-path {
  transform: scaleY(1.0);
}

.waveform-svg[data-amplitude="low"] .waveform-path {
  transform: scaleY(0.7);
  opacity: 0.5;
}

/* Frequency modulation via data attributes */
.waveform-svg[data-frequency="fast"] .waveform-path {
  animation-duration: 2s, 0.1s, 1s;
}

.waveform-svg[data-frequency="slow"] .waveform-path {
  animation-duration: 8s, 0.1s, 4s;
}

/* ====================================================================
   INTEGRATION WITH MACHINED WINDOW GLASS
   ==================================================================== */

/* Stack order within rack-window-container:
   1. rack-asset-base (z-index: 1) - Static image
   2. waveform-svg (z-index: 2) - Live signal ← YOU ARE HERE
   3. rack-glass-overlay (z-index: 3) - Protective pane
   4. rack-signal-pulse (z-index: 4) - Neon border glow
*/

.rack-window-container .waveform-svg {
  /* Positioned between asset and glass for "behind the screen" effect */
  z-index: 2;
}

/* ====================================================================
   PERFORMANCE NOTES:
   - SVG path animation: GPU-accelerated via transform
   - File size: <1KB per waveform component
   - Frame rate: 60fps on modern devices
   - Zero impact on LCP (renders after critical paint)
   - Deferred load via lazy component mounting
   ==================================================================== */