/* =====================================================
   NEON.CSS — Glow effects and neon visual language
   ===================================================== */

/* ── SVG component stroke/fill classes ───────────── */
.neon-cyan   { stroke: #00f0ff; fill: #041820; }
.neon-purple { stroke: #7b2fff; fill: #100820; }
.neon-pink   { stroke: #ff3de8; fill: #180610; }
.neon-amber  { stroke: #ffcc00; fill: #1a1200; }
.neon-green  { stroke: #00ff88; fill: #001810; }

.face-top   { fill-opacity: 0.85; }
.face-right { fill-opacity: 0.6;  }
.face-front { fill-opacity: 0.5;  }

/* Cyan component fills per face */
.cyan-top   { fill: #05282e; stroke: #00f0ff; stroke-width: 1.2; }
.cyan-right { fill: #031820; stroke: #00a8b5; stroke-width: 0.8; }
.cyan-front { fill: #021018; stroke: #008090; stroke-width: 0.8; }
.cyan-inner { fill: #041520; stroke: #004050; stroke-width: 0.6; }

/* Purple component fills per face */
.purp-top   { fill: #1a0840; stroke: #7b2fff; stroke-width: 1.2; }
.purp-right { fill: #100530; stroke: #5520bb; stroke-width: 0.8; }
.purp-front { fill: #0c0425; stroke: #3d1890; stroke-width: 0.8; }

/* Pink component fills per face */
.pink-top   { fill: #300a28; stroke: #ff3de8; stroke-width: 1.2; }
.pink-right { fill: #200618; stroke: #b52ba5; stroke-width: 0.8; }
.pink-front { fill: #180412; stroke: #881f7a; stroke-width: 0.8; }

/* Amber component fills per face */
.amb-top    { fill: #2a2000; stroke: #ffcc00; stroke-width: 1.2; }
.amb-right  { fill: #1a1400; stroke: #b89000; stroke-width: 0.8; }
.amb-front  { fill: #121000; stroke: #806400; stroke-width: 0.8; }

/* Red component fills per face (CDP theme) */
.red-top   { fill: #280a0e; stroke: #ff2244; stroke-width: 1.2; }
.red-right { fill: #180608; stroke: #cc1830; stroke-width: 0.8; }
.red-front { fill: #100406; stroke: #881020; stroke-width: 0.8; }

/* ── Platter-specific ────────────────────────────── */
.platter-ring    { fill: #0a1a20; stroke: #00d4e8; stroke-width: 1.0; }
.platter-edge    { fill: #062030; stroke: #00a0b8; stroke-width: 0.8; }
.platter-hub     { fill: #1a0a0a; stroke: #cc4400; stroke-width: 0.8; }
.spindle-body    { fill: #0f0808; stroke: #885522; stroke-width: 0.8; }

/* ── PCB specific ────────────────────────────────── */
.pcb-board       { fill: #030b08; stroke: #1a4030; stroke-width: 0.8; }
.pcb-board-edge  { fill: #020805; stroke: #102818; stroke-width: 0.6; }
.pcb-trace       { stroke: #003322; stroke-width: 0.5; fill: none; }
.pcb-trace-hot   { stroke: #00ff88; stroke-width: 0.8; }
.pcb-pad         { fill: #c8a820; stroke: none; }
.pcb-silk        { fill: none; stroke: #204030; stroke-width: 0.3; }

/* IC chips in PCB view */
.ic-chip         { fill: #0c0c0c; stroke: #333; stroke-width: 1; rx: 2; }
.ic-chip:hover   { stroke: #7b2fff; cursor: pointer; }
.ic-chip.hovered { stroke: #7b2fff; fill: #110820; }
.ic-chip.selected { stroke: #7b2fff; fill: #180a30; }
.ic-label        { fill: #406050; font-size: 5px; font-family: 'Courier New', monospace; text-anchor: middle; dominant-baseline: middle; }
.ic-label.hovered { fill: #c0f0d0; }

/* ── HSA sub-view ────────────────────────────────── */
.hsa-body        { fill: #0a1520; stroke: #00a0b8; stroke-width: 1; }
.hsa-arm         { fill: #081020; stroke: #0080a0; stroke-width: 0.8; }
.hsa-suspension  { fill: none; stroke: #00c8d0; stroke-width: 0.5; }
.hsa-coil        { fill: #1a0a00; stroke: #cc6600; stroke-width: 0.8; }
.hsa-magnet      { fill: #200028; stroke: #9933ff; stroke-width: 0.8; }
.hsa-bearing     { fill: #0c0c10; stroke: #448888; stroke-width: 0.8; }
.hsa-slider      { fill: #151520; stroke: #00f0ff; stroke-width: 1.2; }
.hsa-head-read   { fill: #001a30; stroke: #00aaff; stroke-width: 0.8; }
.hsa-head-write  { fill: #300010; stroke: #ff3399; stroke-width: 0.8; }
.hsa-heater      { fill: #201000; stroke: #ff8800; stroke-width: 0.8; }
.hsa-preamp      { fill: #0a0820; stroke: #7755ff; stroke-width: 0.8; }
.hsa-gimbal      { fill: none; stroke: #00d0d0; stroke-width: 0.5; stroke-dasharray: 3 1; }
.hsa-zoom-box    { fill: none; stroke: #00f0ff; stroke-width: 0.8; stroke-dasharray: 4 2; }

/* ── Platter cross-section ───────────────────────── */
.layer-lubricant  { fill: #ffe080; fill-opacity: 0.8; stroke: #ffcc00; stroke-width: 0.5; }
.layer-dlc        { fill: #404040; fill-opacity: 0.9; stroke: #888; stroke-width: 0.5; }
.layer-recording  { fill: #4a0030; fill-opacity: 0.9; stroke: #ff3de8; stroke-width: 0.8; }
.layer-underlayer { fill: #0a1a10; fill-opacity: 0.9; stroke: #00a050; stroke-width: 0.6; }
.layer-sul        { fill: #040a20; fill-opacity: 0.9; stroke: #0060ff; stroke-width: 0.8; }
.layer-adhesion   { fill: #1a0a00; fill-opacity: 0.9; stroke: #804000; stroke-width: 0.5; }
.layer-substrate  { fill: #0c0c14; fill-opacity: 0.9; stroke: #2a2a40; stroke-width: 1; }

/* ── Glow animation classes ──────────────────────── */
@keyframes pulse-cyan {
  0%, 100% { filter: drop-shadow(0 0 4px #00f0ff) drop-shadow(0 0 10px rgba(0,240,255,0.4)); }
  50%       { filter: drop-shadow(0 0 8px #00f0ff) drop-shadow(0 0 20px rgba(0,240,255,0.7)); }
}

@keyframes pulse-purple {
  0%, 100% { filter: drop-shadow(0 0 4px #7b2fff) drop-shadow(0 0 10px rgba(123,47,255,0.4)); }
  50%       { filter: drop-shadow(0 0 8px #7b2fff) drop-shadow(0 0 20px rgba(123,47,255,0.7)); }
}

@keyframes pulse-amber {
  0%, 100% { filter: drop-shadow(0 0 4px #ffcc00) drop-shadow(0 0 10px rgba(255,204,0,0.4)); }
  50%       { filter: drop-shadow(0 0 8px #ffcc00) drop-shadow(0 0 20px rgba(255,204,0,0.7)); }
}

@keyframes pulse-red {
  0%, 100% { filter: drop-shadow(0 0 4px #ff2244) drop-shadow(0 0 10px rgba(255,34,68,0.4)); }
  50%       { filter: drop-shadow(0 0 8px #ff2244) drop-shadow(0 0 20px rgba(255,34,68,0.7)); }
}

@keyframes flow-dash {
  to { stroke-dashoffset: 0; }
}

.glow-cyan   { filter: drop-shadow(0 0 3px #00f0ff) drop-shadow(0 0 8px rgba(0,240,255,0.35)); }
.glow-purple { filter: drop-shadow(0 0 3px #7b2fff) drop-shadow(0 0 8px rgba(123,47,255,0.35)); }
.glow-pink   { filter: drop-shadow(0 0 3px #ff3de8) drop-shadow(0 0 8px rgba(255,61,232,0.35)); }
.glow-amber  { filter: drop-shadow(0 0 3px #ffcc00) drop-shadow(0 0 8px rgba(255,204,0,0.35)); }

.pulse-cyan   { animation: pulse-cyan 2.5s ease-in-out infinite; }
.pulse-purple { animation: pulse-purple 2.5s ease-in-out infinite; }
.pulse-amber  { animation: pulse-amber 2.5s ease-in-out infinite; }

.hdd-component.selected { animation: pulse-cyan 2s ease-in-out infinite; }
.hdd-component.selected.neon-purple { animation: pulse-purple 2s ease-in-out infinite; }
.hdd-component.selected.neon-pink   { animation: pulse-cyan 2s ease-in-out infinite; }
[data-device="cdp"] .hdd-component.selected { animation: pulse-red 2s ease-in-out infinite; }

/* ── Power rail trace paths ──────────────────────── */
.rail-trace {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.3s;
}

.rail-trace.visible {
  opacity: 1;
}

.rail-trace[data-rail="12v"] {
  stroke: #ffcc00;
  filter: drop-shadow(0 0 2px #ffcc00);
}

.rail-trace[data-rail="5v"] {
  stroke: #00f0ff;
  filter: drop-shadow(0 0 2px #00f0ff);
}

.rail-trace[data-rail="3v3"] {
  stroke: #ff3de8;
  filter: drop-shadow(0 0 2px #ff3de8);
}

.rail-trace.flowing {
  stroke-dasharray: 8 4;
  animation: flow-dash 1.5s linear infinite;
}

/* Consumer IC highlight when powered */
@keyframes ic-power-flash {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

.ic-chip.powered {
  animation: ic-power-flash 0.4s ease-in-out 3;
}