/**
 * Neon Theme Styles
 * High-voltage gas tube simulation
 */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');

.theme-neon {
  background-color: var(--neon-bg, #050505);
  /* Fallback to cursive/sans-serif if web font fails, but Comfortaa is ideal for tubes */
  font-family: 'Comfortaa', 'Varela Round', 'Comic Sans MS', cursive, sans-serif;
  overflow: hidden;
}

/* Base Neon Text Style */
.theme-neon .neon-sign-text,
.theme-neon .neon-flow-text {
  color: #fff; /* Core of the tube is always near white */
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
  line-height: 1.1;
  
  /* Complex shadow for glowing gas effect */
  text-shadow:
    0 0 2px #fff,
    0 0 5px var(--neon-color, #ff00ff),
    0 0 10px var(--neon-color, #ff00ff),
    0 0 20px var(--neon-color, #ff00ff),
    0 0 40px var(--neon-color, #ff00ff),
    0 0 80px var(--neon-color, #ff00ff),
    0 0 90px var(--neon-color, #ff00ff),
    0 0 100px var(--neon-color, #ff00ff);
    
  /* Combine animations */
  animation: 
    neon-flicker 3s infinite alternate,
    neon-buzz 0.1s infinite;
}

/* SIGN mode specific */
.theme-neon .neon-sign-text {
  /* No extra specific styles needed beyond base */
}

/* FLOW mode specific */
.theme-neon .neon-flow-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

.theme-neon .neon-flow-text {
  padding: 0 0.5em;
  flex-shrink: 0;
}

/* Animations */

/* Random flickering (bad starter/wiring) */
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 2px #fff,
      0 0 5px var(--neon-color, #ff00ff),
      0 0 10px var(--neon-color, #ff00ff),
      0 0 20px var(--neon-color, #ff00ff),
      0 0 40px var(--neon-color, #ff00ff),
      0 0 80px var(--neon-color, #ff00ff);
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.2; /* Dim, not completely off */
  }
}

/* Subtle physical vibration/hum of the transformer */
@keyframes neon-buzz {
  0% { transform: translate(0.5px, 0.5px); }
  25% { transform: translate(-0.5px, -0.5px); }
  50% { transform: translate(-0.5px, 0.5px); }
  75% { transform: translate(0.5px, -0.5px); }
  100% { transform: translate(0.5px, 0.5px); }
}