/* ====== Whisper Layer (full-page, pointer-safe) ====== */
.whispers {
  position: fixed;
  inset: 0;
  pointer-events: none;      /* never block clicks/keys */
  z-index: 1200;             /* above CRT, below TX modals */
}

/* A single whisper line (no drift) */
.whisper {
  position: absolute;         /* ← keep absolute */
  /* REMOVE any 'top:' or 'left:' here */
  white-space: nowrap;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: clamp(12px, 1.9vw, 18px);
  letter-spacing: 0.04em;
  color: rgba(180, 230, 255, 0.9);
  opacity: 0;
  text-shadow:
    0 0 1px rgba(180,230,255,.6),
    1px 0 0 rgba(255,0,90,.35),
   -1px 0 0 rgba(0,180,255,.35);
  filter: saturate(1.05) contrast(1.05);
  transform: translateZ(0);            /* keep your flicker/jitter transforms */
  will-change: opacity, text-shadow;

  animation-name: whisper-fade, whisper-flicker, whisper-glitch;
  animation-duration: var(--dur, 6s), 1.8s, 240ms;
  animation-timing-function: ease-in-out, steps(2, end), steps(2, end);
  animation-iteration-count: 1, infinite, infinite;
  animation-fill-mode: forwards, none, none;
}

/* subtle scanline mask over the text body for CRT feel */
.whisper::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.08) 0 1px,
    rgba(0,0,0,0) 2px 3px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Fade timeline (no movement) */
@keyframes whisper-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Micro-flicker + chromatic twitch */
@keyframes whisper-flicker {
  0%   { text-shadow:
           0 0 1px rgba(180,230,255,.6),
           1px 0 0 rgba(255,0,90,.35),
          -1px 0 0 rgba(0,180,255,.35); }
  50%  { text-shadow:
           0 0 2px rgba(180,230,255,.9),
           2px 0 0 rgba(255,0,90,.45),
          -2px 0 0 rgba(0,180,255,.45); }
  100% { text-shadow:
           0 0 1px rgba(180,230,255,.6),
           1px 0 0 rgba(255,0,90,.35),
          -1px 0 0 rgba(0,180,255,.35); }
}

/* (Optional) tiny burst pulse mid-life: toggle via .burst in JS if you want */
.whisper.burst {
  animation-name: whisper-fade, whisper-flicker, whisper-burst;
  animation-duration: var(--dur, 6s), 1.8s, 240ms;
  animation-timing-function: ease-in-out, steps(2, end), steps(3, end);
  animation-iteration-count: 1, infinite, 1;
  animation-fill-mode: forwards, none, none;
  animation-delay: 0s, 0s, 40%;
}
@keyframes whisper-burst {
  0%   { transform: translateZ(0) skewX(0deg); }
  33%  { transform: translateZ(0) skewX(1deg); }
  66%  { transform: translateZ(0) skewX(-1deg); }
  100% { transform: translateZ(0) skewX(0deg); }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .whisper {
    animation-name: whisper-fade; /* no flicker */
    animation-duration: var(--dur, 6s);
  }
}

@keyframes whisper-glitch {
  0%   { transform: translateZ(0) }
  49%  { transform: translateX(1px) skewX(0.4deg) }
  50%  { transform: translateX(-1px) skewX(-0.4deg) }
  99%  { transform: translateZ(0) }
  100% { transform: translateZ(0) }
}