:root[data-motion="on"][data-theme="green"] body::before,
:root[data-motion="on"][data-theme="amber"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    color-mix(in srgb, var(--fg) 4%, transparent) 2px 3px
  );
  mix-blend-mode: overlay;
}

:root[data-motion="on"][data-theme="green"] body::after,
:root[data-motion="on"][data-theme="amber"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  background: radial-gradient(ellipse at center, transparent 50%, color-mix(in srgb, #000 70%, transparent) 100%);
}

:root[data-theme="paper"] body::before,
:root[data-theme="paper"] body::after { content: none; }

.banner { transition: filter 200ms ease; }
.banner:hover { filter: url(#crt-distort); }
@media (prefers-reduced-motion: reduce) { .banner:hover { filter: none; } }

:root[data-powermode="on"] body::before { animation: scanline-wobble 1.2s ease-in-out infinite; background-size: 100% 200%; }
:root[data-powermode="on"] .banner       { filter: url(#crt-distort) drop-shadow(0 0 8px var(--accent)); }
:root[data-powermode="on"] body           { animation: chroma-bend 4s ease-in-out infinite; }

@keyframes scanline-wobble { 50% { transform: translateY(2px) scaleY(1.02); } }
@keyframes chroma-bend     { 50% { filter: hue-rotate(10deg) saturate(1.2); } }

@media (prefers-reduced-motion: reduce) {
  :root[data-powermode="on"] body::before,
  :root[data-powermode="on"] body { animation: none; }
}

:root[data-belltime="on"] body { filter: grayscale(0.85) sepia(0.2); transition: filter 600ms; }

:root[data-graveyard="on"] body { filter: brightness(0.7) contrast(1.1); }
:root[data-graveyard="on"] body::after { background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%); }
:root[data-aprilfool="on"] #boot { animation: modem-load 4s steps(20) forwards; }
@keyframes modem-load { 0% { filter: blur(8px); } 100% { filter: blur(0); } }
