/* --- always-on ambience ------------------------------------------------ */

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
  mix-blend-mode: multiply;
}

.screen::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: var(--phosphor);
  opacity: 0;
  animation: flicker 7s steps(1) infinite;
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 0; }
  97%           { opacity: 0.020; }
  98%           { opacity: 0; }
  99%           { opacity: 0.014; }
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.15em;
  vertical-align: text-bottom;
  background: var(--phosphor);
  animation: blink 1.05s steps(1) infinite;
}

@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* --- punctuated effects ------------------------------------------------ */
/* These land at exactly five moments: mark landing, three hold beats, and
   the ending, which layers a tear and a sweep. Rarity is the point — see
   spec, "Glitch discipline". */

.fx-tear  { animation: tear 0.32s steps(2) 1; }
.fx-split { animation: split 0.32s ease-out 1; }
.fx-sweep { position: relative; }

@keyframes tear {
  0%   { transform: translate3d(0, 0, 0);      clip-path: none; }
  20%  { transform: translate3d(-9px, 2px, 0); clip-path: inset(18% 0 52% 0); }
  40%  { transform: translate3d(7px, -3px, 0); clip-path: inset(62% 0 14% 0); }
  60%  { transform: translate3d(-4px, 0, 0);   clip-path: inset(34% 0 40% 0); }
  80%  { transform: translate3d(3px, 1px, 0);  clip-path: none; }
  100% { transform: translate3d(0, 0, 0);      clip-path: none; }
}

@keyframes split {
  0%   { text-shadow: none; }
  25%  { text-shadow: -3px 0 var(--alert), 3px 0 rgba(90, 200, 255, 0.85); }
  55%  { text-shadow:  2px 0 var(--alert), -2px 0 rgba(90, 200, 255, 0.85); }
  100% { text-shadow: none; }
}

.fx-sweep::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 22vh;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(125, 216, 143, 0) 0%,
    rgba(125, 216, 143, 0.10) 45%,
    rgba(234, 255, 240, 0.16) 50%,
    rgba(125, 216, 143, 0.10) 55%,
    rgba(125, 216, 143, 0) 100%
  );
  animation: sweep 0.5s linear 1;
}

@keyframes sweep {
  from { top: -22vh; }
  to   { top: 100vh; }
}

/* --- reduced motion: everything above goes quiet ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .scanlines { display: none; }
  .screen::after { display: none; animation: none; }
  .cursor { animation: none; opacity: 1; }
  .fx-tear, .fx-split, .fx-sweep { animation: none; }
  .fx-sweep::before { display: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Scanlines at phone pixel densities read as moiré, not CRT. */
@media (max-width: 34rem) {
  .scanlines { display: none; }
}