/* =========================================================================
   lattice-bg.css — bewegende achtergrond (aurora + raster + beam + korrel)
   Hoort bij lattice-bg.js. Plaats de HTML uit de handleiding direct na <body>.

   Alle instelbare waarden staan hieronder in :root — pas ze daar aan, of
   overschrijf ze in je eigen stylesheet ná deze regel.
   ========================================================================= */
:root{
  --lat-bg:#000000;              /* paginakleur achter alles */

  --lat-rgb-beam:58,220,198;     /* beam + accent in de aurora */
  --lat-rgb-mesh:255,255,255;    /* rasterlijnen */
  --lat-rgb-aurora1:18,161,143;
  --lat-rgb-aurora2:20,110,150;

  --lat-aurora-alpha:.51;        /* sterkte kleurvlekken */
  --lat-aurora-blur:30px;

  --lat-mesh-alpha:.07;          /* raster */
  --lat-mesh-size:74px;
  --lat-mesh-speed:10s;

  --lat-beam-w:60%;              /* sweep beam */
  --lat-beam-angle:14deg;
  --lat-beam-blur:28px;
  --lat-beam-alpha:.1;
  --lat-beam-dur:9s;

  --lat-grain-alpha:.42;         /* filmkorrel */
}

/* De pagina zelf moet donker zijn, anders zie je de lagen niet.
   Haal deze regel weg als je body-achtergrond al elders staat. */
body{background:var(--lat-bg)}

/* ---------- Laag 1: aurora (bevat ook het canvas) ----------------------- */
.lat-field{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(circle at 50% 45%, rgba(var(--lat-rgb-aurora1),.06), transparent 52%);
}
.lat-field::before,.lat-field::after{content:""; position:absolute; inset:-25%; will-change:transform,opacity}
.lat-field::before{
  background:
    radial-gradient(34vw 34vw at 22% 18%, rgba(var(--lat-rgb-aurora1),var(--lat-aurora-alpha)), transparent 64%),
    radial-gradient(30vw 30vw at 78% 66%, rgba(var(--lat-rgb-aurora2),calc(var(--lat-aurora-alpha) * .88)), transparent 66%);
  filter:blur(var(--lat-aurora-blur));
  animation:latAuroraA 9s cubic-bezier(.42,0,.58,1) infinite alternate;
}
.lat-field::after{
  background:
    radial-gradient(40vw 40vw at 84% 12%, rgba(var(--lat-rgb-beam),calc(var(--lat-aurora-alpha) * .76)), transparent 62%),
    radial-gradient(46vw 46vw at 34% 92%, rgba(var(--lat-rgb-aurora1),calc(var(--lat-aurora-alpha) * .7)), transparent 64%);
  filter:blur(calc(var(--lat-aurora-blur) * 1.33));
  animation:latAuroraB 13s cubic-bezier(.42,0,.58,1) infinite alternate;
}
@keyframes latAuroraA{
  0%  {transform:translate3d(-6%,-3%,0) scale(1)    rotate(0deg); opacity:.75}
  50% {transform:translate3d(7%,5%,0)   scale(1.18) rotate(6deg); opacity:1}
  100%{transform:translate3d(-3%,8%,0)  scale(1.06) rotate(-4deg);opacity:.8}
}
@keyframes latAuroraB{
  0%  {transform:translate3d(5%,4%,0)   scale(1.08);              opacity:.7}
  50% {transform:translate3d(-8%,-5%,0) scale(1)    rotate(-7deg);opacity:1}
  100%{transform:translate3d(4%,-8%,0)  scale(1.16) rotate(5deg); opacity:.72}
}

/* ---------- Laag 2: het canvas met het netwerk -------------------------- */
#lat-canvas{position:absolute; inset:0; width:100%; height:100%; filter:saturate(1.15)}

/* ---------- Laag 3: driftend raster ------------------------------------- */
.lat-mesh{
  position:fixed; inset:-60px; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--lat-rgb-mesh),var(--lat-mesh-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--lat-rgb-mesh),var(--lat-mesh-alpha)) 1px, transparent 1px);
  background-size:var(--lat-mesh-size) var(--lat-mesh-size);
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 78%);
  animation:latMeshDrift var(--lat-mesh-speed) linear infinite;
}
@keyframes latMeshDrift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(calc(var(--lat-mesh-size) * -1), calc(var(--lat-mesh-size) * -1), 0)}
}

/* ---------- Laag 4: sweep beam ------------------------------------------ */
.lat-sweep{
  position:fixed; top:-40%; left:-30%; width:var(--lat-beam-w); height:180%;
  z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent,
    rgba(var(--lat-rgb-beam), calc(var(--lat-beam-alpha) * .57)) 42%,
    rgba(var(--lat-rgb-beam), var(--lat-beam-alpha)) 50%,
    rgba(var(--lat-rgb-beam), calc(var(--lat-beam-alpha) * .57)) 58%,
    transparent);
  filter:blur(var(--lat-beam-blur));
  transform:rotate(var(--lat-beam-angle));
  animation:latSweep var(--lat-beam-dur) cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes latSweep{
  0%  {transform:translate3d(-30%,0,0) rotate(var(--lat-beam-angle)); opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{transform:translate3d(210%,0,0) rotate(var(--lat-beam-angle)); opacity:0}
}

/* ---------- Laag 5: filmkorrel ------------------------------------------ */
.lat-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:var(--lat-grain-alpha); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- Jouw content moet hier bovenop -----------------------------
   Geef de wrapper om je eigen inhoud een z-index hoger dan 1.            */
.lat-content{position:relative; z-index:2}

/* ---------- Verminderde beweging: alles stil, maar wel zichtbaar -------- */
@media (prefers-reduced-motion: reduce){
  .lat-field::before,.lat-field::after,.lat-mesh,.lat-sweep{animation:none}
}