/* =========================================================
   EFFECTS — animations, cursor, CRT, scanlines, matrix
   ========================================================= */

/* ── Cursor ───────────────────────────────────────────── */
#cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  background: var(--cursor-color);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: cursor-blink 1s step-end infinite;
}

#cursor.typing {
  animation: none;
  opacity: 1;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* ── Output line appear ───────────────────────────────── */
.t-line {
  animation: line-appear 0.08s ease-out both;
}

@keyframes line-appear {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* ── Neon glow ────────────────────────────────────────── */
.neon {
  text-shadow: var(--neon-glow);
}

.neon-title {
  text-shadow: var(--neon-glow), 0 0 30px currentColor;
}

/* ── Ambient blob drift ───────────────────────────────── */
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(25px, -18px) scale(1.06); }
  66%       { transform: translate(-12px, 12px) scale(0.94); }
}

/* ── Scanlines ────────────────────────────────────────── */
body[data-scanlines="on"] #terminal-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.15) 1px,
    rgba(0, 0, 0, 0.15) 2px
  );
  pointer-events: none;
  z-index: 20;
  border-radius: inherit;
}

/* ── CRT flicker ──────────────────────────────────────── */
body[data-crt="on"] #terminal-window {
  animation: crt-flicker 0.13s infinite;
}

@keyframes crt-flicker {
  0%   { opacity: 0.97; }
  5%   { opacity: 0.94; }
  10%  { opacity: 0.91; }
  20%  { opacity: 0.98; }
  50%  { opacity: 0.96; }
  80%  { opacity: 0.93; }
  100% { opacity: 0.95; }
}

/* ── Chromatic aberration ─────────────────────────────── */
#terminal-window {
  filter:
    drop-shadow(0.4px 0 0 rgba(255, 0, 0, 0.06))
    drop-shadow(-0.4px 0 0 rgba(0, 80, 255, 0.06));
}

body[data-crt="on"] #terminal-window {
  filter:
    drop-shadow(1px 0 0 rgba(255, 0, 0, 0.10))
    drop-shadow(-1px 0 0 rgba(0, 80, 255, 0.10));
}

/* ── Matrix canvas ────────────────────────────────────── */
#matrix-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

body[data-matrix="on"] #matrix-canvas {
  opacity: 0.18;
}

/* ── Effect toggle button active state ───────────────── */
.ctrl-btn.active {
  color: var(--accent-green);
  border-color: var(--accent-green);
}

/* ── Mobile history nav buttons ─────────────────────── */
#mobile-history {
  display: none;
}

@media (pointer: coarse) {
  #mobile-history {
    display: flex;
    gap: 4px;
    padding: 6px 16px;
    background: var(--bg-titlebar);
    border-top: 1px solid var(--border);
  }

  #mobile-history button {
    flex: 1;
    padding: 6px;
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    color: var(--fg-dim);
    font-family: inherit;
    font-size: 0.75rem;
    border-radius: 3px;
    cursor: pointer;
  }

  #mobile-history button:active {
    background: var(--bg-surface);
    color: var(--fg-base);
  }
}

/* ── Reduced motion: disable animations ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #matrix-canvas {
    display: none;
  }
}