/* ============================================================
   hero.css
   Stiler KUN for bakgrunnslagene (.hero-bg og barna dens).
   Ingen selektorer her treffer eksisterende hero-innhold,
   typografi, knapper, navigasjon eller spacing.

   Lagrekkefølge (bakerst → fremst):
     1. __gradients   dynamiske CSS-gradienter
     2. __grid        animert grid
     3. __charts      canvas: linjegrafer + candlesticks
     4. __webgl       Three.js: partikler + AI-nettverk
     5. __particles   canvas: floating numbers + heat
     6. __noise       noise-tekstur (SVG feTurbulence)
     7. __vignette    mørk vignett + blur-soner for dybde
   ============================================================ */

/* ----- Container: absolutt-posisjonert bak hero-innholdet ----- */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;                 /* hero-innholdet ditt må ha z-index > 0 */
  pointer-events: none;       /* bakgrunnen stjeler aldri klikk */
  background: #1B1A16;        /* base bak alle lag */
}

.hero-bg > * {
  position: absolute;
  inset: 0;
}

/* ============================================================
   1) Dynamiske gradienter
   To store radiale felter i indigo/violet + ett cyan-felt.
   Animeres sakte i posisjon og styrke → "levende" himmel.
   ============================================================ */
.hero-bg__gradients {
  background:
    radial-gradient(55% 60% at 18% 18%, rgba(199, 162, 78, 0.18), transparent 70%),
    radial-gradient(50% 55% at 85% 30%, rgba(231, 201, 119, 0.12), transparent 70%),
    radial-gradient(45% 50% at 55% 92%, rgba(55, 210, 122, 0.06), transparent 70%),
    linear-gradient(180deg, #1B1A16 0%, #241E17 55%, #2B221C 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%;
  animation: heroBgGradientDrift 26s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes heroBgGradientDrift {
  0%   { background-position:  0% 0%,   100% 0%,  50% 100%, 0 0; }
  50%  { background-position: 30% 20%,   70% 40%,  35% 80%, 0 0; }
  100% { background-position: 10% 40%,   90% 10%,  65% 90%, 0 0; }
}

/* ============================================================
   2) Animert grid
   Tynt linjenett som driver diagonalt, med maske som toner
   det ut mot kantene — Bloomberg-terminal møter Vercel.
   ============================================================ */
.hero-bg__grid {
  background-image:
    linear-gradient(rgba(231, 201, 119, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 201, 119, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  animation: heroBgGridDrift 40s linear infinite;
  will-change: background-position;
}

@keyframes heroBgGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 112px, 56px 112px; }
}

/* ============================================================
   3–5) Canvas- og WebGL-lag
   Selve innholdet tegnes i JS; her ligger kun plassering.
   opacity settes til 0 og tones inn av GSAP i hero.js.
   ============================================================ */
.hero-bg__charts,
.hero-bg__webgl-mount,
.hero-bg__particles {
  opacity: 0;
}

.hero-bg__webgl-mount canvas.hero-bg__webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   6) Noise
   Subtil filmkorn-tekstur (inline SVG feTurbulence) som
   fjerner banding i gradientene og gir "materialfølelse".
   ============================================================ */
.hero-bg__noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

/* ============================================================
   7) Vignett + dybde-blur
   Mørkner kantene og legger et mykt blur-felt nederst så
   bakgrunnen "forsvinner" bak innholdet — gir lesbarhet
   til eksisterende tekst uten å endre den.
   ============================================================ */
.hero-bg__vignette {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(18, 14, 10, 0.75) 100%),
    linear-gradient(180deg, rgba(18, 14, 10, 0.45) 0%, transparent 18%, transparent 78%, rgba(18, 14, 10, 0.85) 100%);
}

.hero-bg__vignette::after {
  /* Myk uskarp sone bak midt-/tekstområdet for kontrast */
  content: '';
  position: absolute;
  inset: 20% 0 15% 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: radial-gradient(60% 60% at 35% 50%, #000 20%, transparent 80%);
          mask-image: radial-gradient(60% 60% at 35% 50%, #000 20%, transparent 80%);
}

/* ============================================================
   Reduced motion
   Alle animasjoner av — de statiske gradientene + grid +
   noise + vignett står igjen som et rolig, pent bakteppe.
   ============================================================ */
.hero-bg--static .hero-bg__gradients,
.hero-bg--static .hero-bg__grid {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg__gradients,
  .hero-bg__grid {
    animation: none;
  }
}

/* ============================================================
   Responsivt
   Mindre grid og lettere maske på små skjermer; JS reduserer
   selv partikkel-/nodetall via CONFIG.
   ============================================================ */
@media (max-width: 768px) {
  .hero-bg__grid {
    background-size: 40px 40px;
  }
  .hero-bg__vignette::after {
    inset: 10% 0 10% 0;
  }
}