/* ============================================================================
   calc-me — glow.css
   Glow classes (green/cyan/red/yellow/magenta/blue-btn/white), glow pulse
   animations, per-character glitch CSS, RGB split on button press, scanline
   roll on =, live preview flicker, phosphor warm-up, result glow, reduced-motion
   overrides.
   ========================================================================== */

/* ── Glow Classes ───────────────────────────────────────────────────────── */
/* Each class sets color + text-shadow using the neon palette. */

.glow-green {
  color: var(--neon-green);
  text-shadow: 0 0 4px var(--neon-green), 0 0 8px var(--neon-green), 0 0 16px rgba(0, 255, 0, 0.4);
}

.glow-cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 4px var(--neon-cyan), 0 0 8px var(--neon-cyan), 0 0 16px rgba(0, 255, 255, 0.4);
}

.glow-red {
  color: var(--neon-red);
  text-shadow: 0 0 4px var(--neon-red), 0 0 8px var(--neon-red), 0 0 16px rgba(255, 0, 0, 0.4);
}

.glow-yellow {
  color: var(--neon-yellow);
  text-shadow: 0 0 4px var(--neon-yellow), 0 0 8px var(--neon-yellow), 0 0 16px rgba(255, 255, 0, 0.4);
}

.glow-magenta {
  color: var(--neon-magenta);
  text-shadow: 0 0 4px var(--neon-magenta), 0 0 8px var(--neon-magenta), 0 0 16px rgba(255, 0, 255, 0.4);
}

.glow-white {
  color: var(--white);
  text-shadow: 0 0 6px var(--white), 0 0 12px var(--white), 0 0 24px rgba(255, 255, 255, 0.4), 0 0 48px rgba(255, 255, 255, 0.2);
}

/* Blue category button — white text with blue glow (contrast fix, FR-19b) */
.glow-blue-btn {
  color: var(--white) !important;
  text-shadow: 0 0 4px var(--neon-blue), 0 0 8px var(--neon-blue), 0 0 16px rgba(0, 0, 255, 0.4) !important;
  border-color: var(--border-blue-25);
}

/* ── Glow Shadow Utility Classes (for box-shadow glow) ─────────────────── */
.glow-box-green {
  box-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green), inset 0 0 8px var(--neon-green);
}

.glow-box-cyan {
  box-shadow: 0 0 6px var(--neon-cyan), 0 0 12px var(--neon-cyan), inset 0 0 8px var(--neon-cyan);
}

.glow-box-red {
  box-shadow: 0 0 6px var(--neon-red), 0 0 12px var(--neon-red), inset 0 0 8px var(--neon-red);
}

.glow-box-yellow {
  box-shadow: 0 0 6px var(--neon-yellow), 0 0 12px var(--neon-yellow), inset 0 0 8px var(--neon-yellow);
}

.glow-box-magenta {
  box-shadow: 0 0 6px var(--neon-magenta), 0 0 12px var(--neon-magenta), inset 0 0 8px var(--neon-magenta);
}

.glow-box-blue {
  box-shadow: 0 0 6px var(--neon-blue), 0 0 12px var(--neon-blue), inset 0 0 8px var(--neon-blue);
}

/* ── Drifting Glow Pulse Animations ────────────────────────────────────── */
/* In the mocks, these CSS animations simulate the drifting pulse.
   In the implementation, pulse.js recomputes each element's pulse frequency
   after each cycle via JS. These CSS classes serve as fallbacks and initial
   states. The JS system overrides these with inline styles for true drift. */

.pulse-a {
  animation: glow-pulse-a 4s ease-in-out infinite;
}

.pulse-b {
  animation: glow-pulse-b 6s ease-in-out infinite;
}

.pulse-c {
  animation: glow-pulse-c 3s ease-in-out infinite;
}

.pulse-d {
  animation: glow-pulse-d 7s ease-in-out infinite;
}

@keyframes glow-pulse-a {
  0%, 100% {
    text-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green);
  }
  50% {
    text-shadow: 0 0 3px var(--neon-green), 0 0 6px var(--neon-green);
  }
}

@keyframes glow-pulse-b {
  0%, 100% {
    text-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan);
  }
  50% {
    text-shadow: 0 0 4px var(--neon-cyan), 0 0 8px var(--neon-cyan);
  }
}

@keyframes glow-pulse-c {
  0%, 100% {
    text-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow);
  }
  50% {
    text-shadow: 0 0 2px var(--neon-yellow), 0 0 5px var(--neon-yellow);
  }
}

@keyframes glow-pulse-d {
  0%, 100% {
    text-shadow: 0 0 7px var(--neon-magenta), 0 0 14px var(--neon-magenta);
  }
  50% {
    text-shadow: 0 0 3px var(--neon-magenta), 0 0 7px var(--neon-magenta);
  }
}

/* Result glow — committed result has its own pulse, more intense */
.result-glow {
  animation: result-pulse 5s ease-in-out infinite;
}

@keyframes result-pulse {
  0%, 100% {
    text-shadow: 0 0 10px var(--white), 0 0 20px var(--white), 0 0 40px rgba(255, 255, 255, 0.4);
  }
  50% {
    text-shadow: 0 0 8px var(--white), 0 0 16px var(--white), 0 0 30px rgba(255, 255, 255, 0.3);
  }
}

/* ── Live Preview Flicker ──────────────────────────────────────────────── */
/* Indicates impermanence — the preview is not yet committed. */
.live-preview {
  animation: preview-flicker 2s infinite;
}

@keyframes preview-flicker {
  0%, 100% { opacity: 0.9; }
  33% { opacity: 0.7; }
  66% { opacity: 0.85; }
}

/* ── Per-Character Glitch CSS ─────────────────────────────────────────── */
/* In the mocks, CSS demonstrates the visual outcome.
   In the implementation, glitch.js wraps each character in a span and
   controls glitch timing via JS. These CSS classes define the visual
   states the JS applies. */

.glitch-char {
  display: inline-block;
  position: relative;
}

/* RGB split glitch state — applied by JS for 1-3 frames */
.glitch-char.glitch-rgb-split::before,
.glitch-char.glitch-rgb-split::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

.glitch-char.glitch-rgb-split::before {
  color: var(--neon-red);
  text-shadow: 0 0 4px var(--neon-red);
  transform: translate(-2px, 0);
  opacity: 0.8;
}

.glitch-char.glitch-rgb-split::after {
  color: var(--neon-cyan);
  text-shadow: 0 0 4px var(--neon-cyan);
  transform: translate(2px, 0);
  opacity: 0.8;
}

/* Wrong character flash — applied by JS for 1 frame */
.glitch-char.glitch-wrong-char {
  color: var(--neon-magenta) !important;
  text-shadow: 0 0 4px var(--neon-magenta) !important;
}

/* Position offset glitch — applied by JS for 1-2 frames */
.glitch-char.glitch-position {
  transform: translate(1px, -1px);
}

/* Color flicker glitch — applied by JS for 1 frame (JS sets inline color/text-shadow) */
.glitch-char.glitch-color-flicker {
  /* JS applies inline styles for this glitch type; class is a marker only */
}

/* Mock-only CSS animation for demo purposes (implementation uses JS) */
.glitch-char[data-glitch]::before,
.glitch-char[data-glitch]::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: glitch-fire 8s infinite;
}

.glitch-char[data-glitch]::before {
  color: var(--neon-red);
  animation-delay: 3s;
}

.glitch-char[data-glitch]::after {
  color: var(--neon-cyan);
  animation-delay: 3s;
}

@keyframes glitch-fire {
  0%, 95%, 100% { opacity: 0; transform: translate(0, 0); }
  96% { opacity: 1; transform: translate(-2px, 0); }
  97% { opacity: 1; transform: translate(2px, 0); }
  98% { opacity: 0; }
}

/* ── Boot Terminal Glitch Char ──────────────────────────────────────────── */
.glitch-char-boot {
  display: inline-block;
  animation: char-glitch 0.08s steps(2) infinite;
}

@keyframes char-glitch {
  0%, 90%, 100% {
    transform: translate(0);
    text-shadow: 0 0 6px currentColor;
  }
  92% {
    transform: translate(2px, -1px);
    text-shadow: -1px 0 var(--neon-red), 1px 0 var(--neon-cyan);
  }
  94% {
    transform: translate(-1px, 1px);
  }
  96% {
    transform: translate(1px, 0);
    text-shadow: 0 0 6px currentColor;
  }
}

/* ── Matrix Rain (boot sequence) ────────────────────────────────────────── */
.matrix-col {
  position: absolute;
  top: -100%;
  writing-mode: vertical-rl;
  font-size: 16px;
  line-height: 1;
  white-space: pre;
  animation: matrix-fall linear forwards;
}

@keyframes matrix-fall {
  from { top: -100%; }
  to { top: 100%; }
}

/* ── Scanline Roll on = (display area) ─────────────────────────────────── */
/* The .scan-bar element is in main.css; this is the glow effect for it. */
.scan-bar.scanning {
  animation: scan-roll 300ms linear forwards;
}

/* ── Phosphor Warm-up (boot → calculator transition) ───────────────────── */
.phosphor-warmup {
  animation: phosphor 2s ease-in forwards;
}

@keyframes phosphor {
  0% { opacity: 0; filter: brightness(0); }
  20% { opacity: 0.3; filter: brightness(0.2); }
  50% { opacity: 0.6; filter: brightness(0.5); }
  100% { opacity: 1; filter: brightness(1); }
}

/* ── Boot Skip Hint Pulse ───────────────────────────────────────────────── */
.skip-pulse {
  animation: skip-pulse 2s ease-in-out infinite;
}

@keyframes skip-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ── Boot Fade Animations ───────────────────────────────────────────────── */
.boot-fade-in {
  animation: boot-fade-in 0.5s forwards;
}

.boot-fade-out {
  animation: boot-fade-out 1.2s forwards;
}

@keyframes boot-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes boot-fade-out {
  from { opacity: 1; filter: brightness(1); }
  30% { filter: brightness(2); }
  100% { opacity: 0; filter: brightness(0.5) blur(4px); }
}

/* ── Terminal Line In ─────────────────────────────────────────────────── */
.terminal-line-in {
  animation: line-in 0.3s forwards;
}

@keyframes line-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── History Entry Fade Out (on delete) ─────────────────────────────────── */
.history-fade-out {
  animation: history-fade-out 0.3s ease forwards;
}

@keyframes history-fade-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}

/* ── Calculator UI Reveal (after boot) ──────────────────────────────────── */
.calc-ui-reveal {
  animation: calc-ui-reveal 0.8s ease-in forwards;
}

@keyframes calc-ui-reveal {
  from { opacity: 0; filter: brightness(0); }
  to { opacity: 1; filter: brightness(1); }
}

/* ── Scanline Screen Tear — dramatic CRT sync-loss ────────────────────── */
/* Multiple horizontal tear bars that randomly slice across the screen,
   displacing scanline rows horizontally with RGB chromatic aberration.
   Triggered periodically by crt.js via a single rAF loop. */

.screen-tear-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9996;
  opacity: 0;
  overflow: hidden;
}

.screen-tear-overlay.active {
  opacity: 1;
}

/* Each tear bar is a horizontal slice that shifts pixels sideways */
.tear-bar {
  position: absolute;
  left: -20px;
  right: -20px;
  pointer-events: none;
  /* Background is a snapshot-like gradient — we use semi-transparent
     strips that create the illusion of displaced scanlines */
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.15) 20%,
    rgba(0, 255, 0, 0.04) 50%,
    rgba(0, 0, 0, 0.15) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  mix-blend-mode: screen;
}

/* RGB ghost layers that accompany each tear bar */
.tear-bar::before,
.tear-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: inherit;
}

.tear-bar::before {
  background: linear-gradient(180deg,
    rgba(255, 0, 0, 0.06) 0%,
    rgba(255, 0, 0, 0.10) 50%,
    rgba(255, 0, 0, 0.06) 100%
  );
  transform: translateX(-3px);
  mix-blend-mode: screen;
}

.tear-bar::after {
  background: linear-gradient(180deg,
    rgba(0, 255, 255, 0.04) 0%,
    rgba(0, 255, 255, 0.08) 50%,
    rgba(0, 255, 255, 0.04) 100%
  );
  transform: translateX(3px);
  mix-blend-mode: screen;
}

.tear-bar.tear-flash {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
}

/* ── Signal Loss Burst — full-screen static noise flash ─────────────────── */
/* A canvas-based overlay that renders TV static for 2-4 frames.
   Created by crt.js, controlled via JS rAF. CSS just provides the container. */
.crt-signal-loss {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9994;
  opacity: 0;
  mix-blend-mode: screen;
  image-rendering: pixelated;
}

.crt-signal-loss.active {
  opacity: 0.6;
}

/* ── V-Roll — entire screen rolls vertically then snaps back ────────────── */
/* The whole app-content wrapper is translated down past the viewport
   then snapped back. Controlled by JS via a short rAF animation. */
.crt-vroll-active {
  animation: crt-vroll 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes crt-vroll {
  0%   { transform: translateY(0); }
  10%  { transform: translateY(8px); }
  20%  { transform: translateY(-6px); }
  35%  { transform: translateY(100vh); }
  40%  { transform: translateY(100vh); }
  45%  { transform: translateY(-12px); }
  60%  { transform: translateY(4px); }
  75%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* ── Chromatic Aberration Sweep — full viewport RGB channel split ──────── */
/* The entire screen gets red/cyan ghost offsets for 100-200ms.
   Applied to body via JS. */
.crt-chroma-aberration {
  animation: crt-chroma-sweep 200ms ease-out forwards;
}

@keyframes crt-chroma-sweep {
  0% {
    filter: none;
  }
  20% {
    filter:
      drop-shadow(2px 0 0 rgba(255, 0, 0, 0.5))
      drop-shadow(-2px 0 0 rgba(0, 255, 255, 0.5))
      brightness(1.1);
  }
  50% {
    filter:
      drop-shadow(4px 0 0 rgba(255, 0, 0, 0.4))
      drop-shadow(-4px 0 0 rgba(0, 255, 255, 0.4))
      brightness(1.15);
  }
  80% {
    filter:
      drop-shadow(1px 0 0 rgba(255, 0, 0, 0.3))
      drop-shadow(-1px 0 0 rgba(0, 255, 255, 0.3))
      brightness(1.05);
  }
  100% {
    filter: none;
  }
}

/* ── Brightness Surge — voltage spike, screen flashes bright ───────────── */
/* A full-screen white overlay that briefly flashes then fades.
   Applied to the flicker overlay element via JS class toggle. */
.crt-brightness-surge {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9993;
  opacity: 0;
  background: rgba(255, 255, 255, 0.15);
}

.crt-brightness-surge.active {
  animation: crt-surge 300ms ease-out forwards;
}

@keyframes crt-surge {
  0%   { opacity: 0; }
  5%   { opacity: 0.4; }
  15%  { opacity: 0.1; }
  30%  { opacity: 0.25; }
  50%  { opacity: 0.05; }
  100% { opacity: 0; }
}

/* ── Reduced Motion Overrides ───────────────────────────────────────────── */
/* When prefers-reduced-motion is active, all motion-based effects are disabled.
   Static glow remains at a comfortable fixed intensity. Colors are preserved. */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  .pulse-a,
  .pulse-b,
  .pulse-c,
  .pulse-d,
  .result-glow,
  .live-preview,
  .glitch-char[data-glitch]::before,
  .glitch-char[data-glitch]::after,
  .glitch-char-boot,
  .matrix-col,
  .phosphor-warmup,
  .skip-pulse,
  .boot-fade-in,
  .boot-fade-out,
  .terminal-line-in,
  .history-fade-out,
  .calc-ui-reveal,
  .scan-bar.scanning {
    animation: none !important;
  }

  /* Live preview: static, no flicker */
  .live-preview {
    opacity: 0.85;
  }

  /* Glitch chars: no glitch effects */
  .glitch-char[data-glitch]::before,
  .glitch-char[data-glitch]::after {
    display: none;
  }

  /* Result glow: fixed at comfortable intensity */
  .result-glow {
    text-shadow: 0 0 8px var(--white), 0 0 16px var(--white), 0 0 30px rgba(255, 255, 255, 0.3);
  }

  /* Pulse elements: fixed at comfortable intensity */
  .pulse-a {
    text-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
  }
  .pulse-b {
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
  }
  .pulse-c {
    text-shadow: 0 0 3px currentColor, 0 0 6px currentColor;
  }
  .pulse-d {
    text-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
  }

  /* Terminal lines: immediately visible */
  .terminal-line-in,
  .terminal-line {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Boot: instant display, no fade */
  .boot-fade-in {
    opacity: 1;
  }

  /* Phosphor warm-up: instant */
  .phosphor-warmup {
    opacity: 1;
    filter: none;
  }

  /* Calc UI reveal: instant */
  .calc-ui-reveal {
    opacity: 1;
    filter: none;
  }

  /* RGB split on press: disabled */
  .calc-btn.rgb-split-active::before,
  .calc-btn.rgb-split-active::after {
    display: none;
  }

  /* Scanline roll: disabled */
  .scan-bar {
    display: none;
  }

  /* Screen tear: disabled */
  .screen-tear-overlay {
    display: none !important;
  }

  /* Signal loss: disabled */
  .crt-signal-loss {
    display: none !important;
  }

  /* V-roll: disabled */
  .crt-vroll-active {
    animation: none !important;
  }

  /* Chromatic aberration: disabled */
  .crt-chroma-aberration {
    animation: none !important;
    filter: none !important;
  }

  /* Brightness surge: disabled */
  .crt-brightness-surge {
    display: none !important;
  }
}