/* ==========================================================================
   NEON ARCHIVE — effects.css
   Ambient CRT/scanline overlay, neon flicker, glitch text, redacted spans.
   Kept in its own file so atmosphere can be dialed up/down independent
   of layout. Every animation respects prefers-reduced-motion.
   ========================================================================== */

/* Scanline + vignette overlay, sits above everything, ignores clicks */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      transparent 2px,
      transparent 3px
    );
  mix-blend-mode: overlay;
}
.crt-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 140px rgba(0,0,0,0.65);
}

/* Neon title flicker — the site's signature moment */
.neon-title {
  font-size: 2.4rem;
  letter-spacing: 0.12em;
  color: var(--neon-cyan);
  text-shadow:
    0 0 4px rgba(45,227,255,0.8),
    0 0 18px rgba(45,227,255,0.4),
    0 0 40px rgba(45,227,255,0.15);
  animation: neon-flicker 4.2s infinite;
}

.neon-title--magenta {
  color: var(--neon-magenta);
  text-shadow:
    0 0 4px rgba(255,46,110,0.8),
    0 0 18px rgba(255,46,110,0.4),
    0 0 40px rgba(255,46,110,0.15);
}

@keyframes neon-flicker {
  0%, 3%, 6%, 100% { opacity: 1; }
  1%   { opacity: 0.4; }
  4%   { opacity: 0.7; }
  4.5% { opacity: 1; }
  62%  { opacity: 1; }
  63%  { opacity: 0.3; }
  64%  { opacity: 1; }
}

/* Subtle glow used on panel borders / badges via box-shadow utility */
.glow-cyan    { box-shadow: 0 0 10px rgba(45,227,255,0.15); }
.glow-magenta { box-shadow: 0 0 10px rgba(255,46,110,0.15); }

/* Glitch text — for headers that should feel unstable/corrupted */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0.7;
}
.glitch::before {
  color: var(--neon-magenta);
  clip-path: inset(0 0 60% 0);
  animation: glitch-shift 3.6s infinite linear alternate-reverse;
}
.glitch::after {
  color: var(--neon-cyan);
  clip-path: inset(60% 0 0 0);
  animation: glitch-shift 2.9s infinite linear alternate-reverse;
}
@keyframes glitch-shift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(1px, -1px); }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0,0); }
}

/* Boot-sequence line reveal, applied by main.js on load */
.boot-line {
  opacity: 0;
  animation: boot-in 0.4s ease forwards;
}
@keyframes boot-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Redacted text — click to peek. Real content lives in data-text
   so it never renders until a person interacts with it. */
.redacted {
  background: #050505;
  color: #050505;
  border-radius: 2px;
  padding: 0 0.35em;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}
.redacted::selection { background: #050505; color: #050505; }
.redacted.is-peeking {
  background: transparent;
  color: var(--neon-amber);
  animation: redact-glitch 0.25s steps(2, end) 2;
  box-shadow: none;
}
@keyframes redact-glitch {
  0%   { transform: translate(0,0); opacity: 1; }
  50%  { transform: translate(1px,0); opacity: 0.8; }
  100% { transform: translate(0,0); opacity: 1; }
}

/* Access-granted / access-denied stamps */
.stamp {
  display: inline-block;
  border: 2px solid currentColor;
  padding: 0.25rem 0.75rem;
  transform: rotate(-3deg);
  letter-spacing: 0.15em;
  font-size: 13px;
  border-radius: 3px;
}
.stamp--granted { color: var(--neon-cyan); }
.stamp--denied  { color: var(--danger); }

/* Reduced motion: kill decorative animation, keep interaction feedback */
@media (prefers-reduced-motion: reduce) {
  .neon-title,
  .glitch::before,
  .glitch::after,
  .boot-line,
  .rec-dot,
  .redacted.is-peeking {
    animation: none !important;
  }
}