/* ─────────────────────────────────────────
   VOCAB//CYBER theme.css
   Cyberpunk design system lifted from resume-site/app/globals.css
   (lines 61-297, near-verbatim) with the Tailwind v4 @theme / HeroUI
   token block (lines 15-56) rewritten as plain :root custom properties.
   ───────────────────────────────────────── */

html {
  font-size: 112.5%; /* 18px base — deliberately smaller than the source's 120% */
  scrollbar-gutter: stable;
}

:root {
  --neon-cyan: #00FFFF;
  --neon-magenta: #FF00FF;
  --neon-purple: #B026FF;
  --bg-deep: #05050a;
  --bg-panel: #0d0d1a;
  --panel-glass: rgba(13, 13, 26, 0.6);
  --text: #e0f7ff;
  --muted: #7a9ab5;
  --muted-dim: #5a7a95;
  --divider: rgba(0, 255, 255, 0.2);
  --danger: #ff2a6d;
}

:focus-visible {
  outline: 2px solid #00FFFF;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────
   Body background — deep space + grid + scanlines + vignette
   ───────────────────────────────────────── */
body {
  position: relative;
  min-height: 100vh;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255, 0, 255, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 255, 255, 0.10) 0%, transparent 50%),
    linear-gradient(rgba(0, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  background-attachment: fixed;
  animation: bg-drift 30s ease-in-out infinite alternate;
}

@keyframes bg-drift {
  0%   { background-position: 0% 0%, 0% 0%, 0 0, 0 0; }
  100% { background-position: 0% 0%, 0% 0%, 40px 40px, 40px 40px; }
}

/* Scanlines overlay — fixed full-screen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)     0px,
    rgba(0, 0, 0, 0)     2px,
    rgba(0, 0, 0, 0.18)  3px,
    rgba(0, 0, 0, 0.18)  4px
  );
  mix-blend-mode: multiply;
}

/* Vignette overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* ─────────────────────────────────────────
   Neon utility classes
   ───────────────────────────────────────── */
.neon-text-cyan {
  color: var(--neon-cyan);
  text-shadow:
    0 0 4px rgba(0, 255, 255, 0.8),
    0 0 10px rgba(0, 255, 255, 0.5),
    0 0 20px rgba(0, 255, 255, 0.3);
}

.neon-text-magenta {
  color: var(--neon-magenta);
  text-shadow:
    0 0 4px rgba(255, 0, 255, 0.8),
    0 0 10px rgba(255, 0, 255, 0.5),
    0 0 20px rgba(255, 0, 255, 0.3);
}

.neon-border-cyan {
  border-color: var(--neon-cyan);
  box-shadow:
    0 0 5px rgba(0, 255, 255, 0.6),
    0 0 15px rgba(0, 255, 255, 0.3),
    inset 0 0 8px rgba(0, 255, 255, 0.15);
}

.neon-border-magenta {
  border-color: var(--neon-magenta);
  box-shadow:
    0 0 5px rgba(255, 0, 255, 0.6),
    0 0 15px rgba(255, 0, 255, 0.3),
    inset 0 0 8px rgba(255, 0, 255, 0.15);
}

.neon-glow-pulse {
  animation: neon-pulse 2.5s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 5px rgba(0, 255, 255, 0.5),
      0 0 12px rgba(0, 255, 255, 0.25);
  }
  50% {
    box-shadow:
      0 0 8px rgba(0, 255, 255, 0.8),
      0 0 22px rgba(0, 255, 255, 0.45);
  }
}

/* Glitch hover effect — only on opt-in elements */
.glitch-hover {
  position: relative;
  transition: text-shadow 0.15s ease-out;
}
.glitch-hover:hover {
  text-shadow:
    2px 0 var(--neon-magenta),
    -2px 0 var(--neon-cyan),
    0 0 8px rgba(0, 255, 255, 0.6);
  animation: glitch-shake 0.3s steps(2, end);
}
@keyframes glitch-shake {
  0%, 100% { transform: translate(0); }
  20%      { transform: translate(-1px, 1px); }
  40%      { transform: translate(1px, -1px); }
  60%      { transform: translate(-1px, -1px); }
  80%      { transform: translate(1px, 1px); }
}

/* ─────────────────────────────────────────
   Cyberpunk reveal — one-shot glitch: RGB channel-split + neon flicker +
   scanline sweep, settling to clean, fully-legible text.
   ───────────────────────────────────────── */
.cyber-reveal {
  position: relative;
  animation: cyber-reveal-in 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: opacity, transform, filter;
}

/* Scanline sweep passes top→bottom once over the fresh element. */
.cyber-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 255, 255, 0.12) 45%,
    rgba(255, 0, 255, 0.18) 50%,
    rgba(0, 255, 255, 0.12) 55%,
    transparent 100%
  );
  background-size: 100% 45%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: cyber-reveal-scan 0.65s ease-out both;
}

@keyframes cyber-reveal-in {
  0% {
    opacity: 0;
    transform: translateX(-6px) skewX(6deg);
    filter: brightness(1.8);
    text-shadow: -3px 0 var(--neon-magenta), 3px 0 var(--neon-cyan);
    clip-path: inset(0 0 55% 0);
  }
  12% {
    opacity: 1;
    transform: translateX(6px) skewX(-4deg);
    clip-path: inset(45% 0 0 0);
  }
  24% {
    transform: translateX(-4px) skewX(2deg);
    text-shadow: 3px 0 var(--neon-cyan), -3px 0 var(--neon-magenta);
    clip-path: inset(0 0 20% 0);
  }
  40% {
    opacity: 0.6;
    transform: translateX(3px);
    filter: brightness(1.4);
    clip-path: inset(0 0 0 0);
  }
  55% {
    opacity: 1;
    transform: translateX(-2px);
    text-shadow: -2px 0 var(--neon-magenta), 2px 0 var(--neon-cyan);
  }
  72% {
    transform: translateX(1px);
    text-shadow: 1px 0 var(--neon-cyan), -1px 0 var(--neon-magenta);
  }
  88% {
    opacity: 0.9;
    filter: brightness(1.1);
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
    filter: brightness(1);
    text-shadow: none;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes cyber-reveal-scan {
  0%   { transform: translateY(-100%); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}

/* Respect reduced-motion: show the finished state with no glitch/sweep,
   and also disable the ambient background drift + correct/wrong flashes. */
@media (prefers-reduced-motion: reduce) {
  .cyber-reveal {
    animation: none;
  }
  .cyber-reveal::after {
    display: none;
  }
  body {
    animation: none;
  }
  .is-correct,
  .is-wrong,
  .is-near {
    animation: none !important;
  }
}

/* Terminal-style horizontal accent line */
.terminal-line::before {
  content: ">";
  color: var(--neon-cyan);
  margin-right: 0.5ch;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.8);
}

/* Selection highlight */
::selection {
  background: rgba(255, 0, 255, 0.35);
  color: var(--neon-cyan);
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.7);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00FFFF 0%, #FF00FF 100%);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}