/* Textura de TV antiga no site inteiro (sem a faixa rolando) */
html::before,html::after,body::before{content:"";position:fixed;inset:0;pointer-events:none}
/* scanlines + grade RGB */
html::before{z-index:9998;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(255,0,60,.035) 0 1px,rgba(0,255,90,.03) 1px 2px,rgba(40,120,255,.035) 2px 3px)}
/* vinheta de tela curva */
html::after{z-index:9999;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 88%,rgba(0,0,0,.7) 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
/* chuvisco */
body::before{inset:-50%;z-index:9998;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:siteNoise .22s steps(4) infinite}
@keyframes siteNoise{0%{transform:translate(0,0)}25%{transform:translate(-7%,4%)}50%{transform:translate(5%,-6%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(6%,5%)}}
/* enquanto o loader está na tela, ele já tem a própria textura */
html:has(#boot:not(.off))::before,html:has(#boot:not(.off))::after,html:has(#boot:not(.off)) body::before{opacity:0}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}
@media print{html::before,html::after,body::before{display:none}}