/* NORDIX — Hintergrund
   Portierung des 21st.dev-Snippets „noise effect": dunkler Grund, radialer
   Lichtkegel und ein Filmkorn darüber. Farbe auf das Markenorange gesetzt.

   Abweichung von der Vorlage — bewusst:
   Dort wird 30-mal je Sekunde ein 1024x1024-Rauschbild neu berechnet, also
   rund 120 MB Pixeldaten pro Sekunde, dauerhaft. Hier werden vier Kacheln
   einmalig gerendert und danach per CSS durchgetaktet. Gleiches Bild,
   nach dem Laden praktisch ohne Rechenlast.

   Alle Werte hängen an Variablen, damit die Tweaks-Bar daran drehen kann. */

:root{
  /* --orange-rgb ist am 17.08.2026 nach tokens.css gewandert, direkt unter
     --orange. Es war die letzte Stelle, an der die Markenfarbe ein zweites
     Mal ausgeschrieben stand. */
  --glow-r:680px;   /* Radius des Lichtkegels */
  --glow-y:62vh;    /* Höhe. In der Vorlage sitzt er bei 200px ganz oben — hier
                       läge er hinter dem Video-Band und wäre unsichtbar.
                       Auf Höhe der Headline entfaltet er seine Wirkung. */
  --glow-a:.22;     /* Deckkraft — höher wirkt schnell aufdringlich */
  --grain-speed:.34s;
}

.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)}

.bgfx .glow{position:absolute;inset:0;
  background:radial-gradient(circle var(--glow-r) at 50% var(--glow-y),
    rgba(var(--orange-rgb),var(--glow-a)),transparent 70%)}

.bgfx .grain{position:absolute;inset:0}
.bgfx .grain span{position:absolute;inset:0;opacity:0;
  background-repeat:repeat;image-rendering:pixelated;
  animation:grainflash var(--grain-speed) steps(1,end) infinite}
.bgfx .grain span:nth-child(1){animation-delay:0s}
.bgfx .grain span:nth-child(2){animation-delay:calc(var(--grain-speed) * .25)}
.bgfx .grain span:nth-child(3){animation-delay:calc(var(--grain-speed) * .5)}
.bgfx .grain span:nth-child(4){animation-delay:calc(var(--grain-speed) * .75)}

@keyframes grainflash{0%{opacity:1}25%{opacity:0}100%{opacity:0}}

/* Das Fadenkreuz-Raster liegt über dem Lichtkegel und wird dort etwas zurückgenommen,
   sonst frisst es die weiche Kante auf. */
.reticle{opacity:.26}

@media(prefers-reduced-motion:reduce){
  .bgfx .grain span{animation:none}
  .bgfx .grain span:nth-child(1){opacity:1}
}