/*
 * Shared effect layer for the ZaidanLab theme (imported by /theme.css, so every page and app gets it).
 * Colours/sizes come from the --t-* tokens in theme.css. Keep this file free of component selectors:
 * it holds fonts, keyframes and page-level CRT effects that every stylesheet can reuse.
 *
 * Reusable keyframes:
 *   crt-flicker   page-level phosphor flicker          crt-sweep   bright scan band moving down an element
 *   crt-pop       brightness spike when something "powers on"      crt-boot    page turn-on
 *   crt-glitch    RGB-split text jitter (use on headings)          stripes     70s four-band stripe (see --t-stripes)
 */
@font-face{font-family:"Righteous";font-style:normal;font-weight:400;font-display:swap;src:url("/vendor/fonts/righteous.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/vendor/fonts/spacemono-400.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/vendor/fonts/spacemono-700.woff2") format("woff2")}

:root{
  color-scheme:dark;
  /* 70s four-band racing stripe, reused by header, footer and section dividers */
  --t-stripes:linear-gradient(180deg,hsl(var(--t-warn)) 0 25%,hsl(var(--t-primary)) 25% 50%,hsl(var(--t-accent)) 50% 75%,hsl(var(--t-info)) 75% 100%);
}

::selection{background:hsl(var(--t-accent));color:hsl(var(--t-ink))}

/* CRT screen: scanlines + RGB phosphor mask + curved-glass vignette, over the whole page */
body::after{
  content:"";position:fixed;inset:0;z-index:250;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,hsl(var(--t-shade) / .30) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,hsl(var(--t-primary) / .035) 0 1px,hsl(var(--t-info) / .035) 1px 2px,hsl(var(--t-accent) / .035) 2px 3px),
    radial-gradient(ellipse at center,transparent 52%,hsl(var(--t-shade) / .62) 100%);
  mix-blend-mode:multiply;
  animation:crt-flicker 7s infinite;
}

@keyframes crt-flicker{0%,100%{opacity:1}46%{opacity:.97}48%{opacity:.88}50%{opacity:.98}93%{opacity:.95}95%{opacity:1}}
@keyframes crt-sweep{from{background-position:0 0,0 -100%}to{background-position:0 0,0 300%}}
@keyframes crt-pop{0%{filter:brightness(1.9) contrast(1.4) saturate(1.4)}100%{filter:none}}
@keyframes crt-boot{0%{opacity:0;transform:scale(1,.02);filter:brightness(4)}45%{opacity:1;transform:scale(1,1.03);filter:brightness(1.8)}100%{opacity:1;transform:none;filter:none}}
@keyframes crt-glitch{
  0%,92%,100%{transform:none}
  93%{transform:translate(-3px,1px);text-shadow:4px 0 hsl(var(--t-accent)),-4px 0 hsl(var(--t-info))}
  94%{transform:translate(4px,-1px) skewX(-6deg);text-shadow:-5px 0 hsl(var(--t-accent)),5px 0 hsl(var(--t-info))}
  96%{transform:translate(-2px,0);text-shadow:3px 0 hsl(var(--t-warn)),-3px 0 hsl(var(--t-info))}
  98%{transform:none}
}

@media (max-width:700px){body::after{opacity:.65;animation:none}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}