/* /earc/css/cyberpunk.css
   K501-GW-ALPHA-1 · Cyberpunk Enhanced Visual Layer
   Optional overlay — non-breaking extension */

/* ============================================
   GLOBAL ENHANCEMENTS
   ============================================ */

body.cyberpunk-mode {
  background:
    radial-gradient(circle at 20% 30%, rgba(0,255,65,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,200,255,0.05), transparent 40%),
    linear-gradient(135deg, #050812 0%, #0f1535 100%);
}

/* Subtle animated grid overlay */
body.cyberpunk-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,65,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

body.cyberpunk-mode header,
body.cyberpunk-mode main,
body.cyberpunk-mode footer {
  position: relative;
  z-index: 1;
}

/* ============================================
   HEADER ENHANCEMENT
   ============================================ */

body.cyberpunk-mode .header {
  border-bottom: 2px solid #00ff41;
  box-shadow:
    0 0 30px rgba(0,255,65,0.2),
    inset 0 1px 0 rgba(0,255,65,0.2);
}

body.cyberpunk-mode .logo {
  text-shadow:
    0 0 10px #00ff41,
    0 0 20px #00ff41,
    0 0 40px rgba(0,255,65,0.3);
}

/* ============================================
   PANEL ENHANCEMENT
   ============================================ */

body.cyberpunk-mode .panel {
  backdrop-filter: blur(6px);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(0,255,65,0.15);
  transition: all 0.3s ease;
}

body.cyberpunk-mode .panel:hover {
  border-color: #00d9ff;
  box-shadow:
    0 0 25px rgba(0,217,255,0.25),
    0 8px 40px rgba(0,0,0,0.5);
}

/* ============================================
   COUNTERS & FRAMES GLOW
   ============================================ */

body.cyberpunk-mode .counter {
  box-shadow:
    inset 0 0 12px rgba(0,255,65,0.2);
}

body.cyberpunk-mode .frame {
  box-shadow:
    inset 0 0 10px rgba(0,200,255,0.15);
}

/* ============================================
   LINK GLOW
   ============================================ */

body.cyberpunk-mode .link:hover {
  text-shadow:
    0 0 10px #00ff41,
    0 0 20px rgba(0,255,65,0.5);
}

/* ============================================
   BADGE ENHANCEMENT
   ============================================ */

body.cyberpunk-mode .badge.ok {
  box-shadow:
    0 0 20px rgba(0,255,65,0.4);
}

body.cyberpunk-mode .badge.err {
  box-shadow:
    0 0 20px rgba(255,0,110,0.4);
}

body.cyberpunk-mode .badge.busy {
  box-shadow:
    0 0 20px rgba(0,217,255,0.4);
}

/* ============================================
   OPTIONAL ANIMATED PULSE
   ============================================ */

@keyframes cyberPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0,255,65,0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(0,255,65,0.4);
  }
}

body.cyberpunk-mode .panel h2 {
  animation: cyberPulse 3s infinite ease-in-out;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  body.cyberpunk-mode .panel h2 {
    animation: none;
  }
}