/* =====================================================================
   HAVNET — 3D og bevegelse (utseendet)

   Regelen for hele denne filen: effekten skal gjøre siden lettere å
   forstå, ikke vanskeligere. Teksten skal alltid være like lett å lese
   med effektene på som uten. Derfor ligger alt 3D bak innholdet, aldri
   oppå det, og alt kan slås av med knappen nede til venstre.

   Alt her er valgfritt pynt. Slår du av JavaScript, eller har du valgt
   «reduser bevegelse» i systemet ditt, ser siden helt normal ut.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Av-bryteren
   Når <html> har klassen .ro («ro» = rolig), skal ALT som beveger seg
   stå stille. Den ene linjen under slår av alle animasjoner på siden.
   --------------------------------------------------------------------- */
html.ro *,
html.ro *::before,
html.ro *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html.ro .hero-3d,
html.ro .dyp-lys,
html.ro .korn { display: none !important; }

/* ---------------------------------------------------------------------
   1. Framdriftsstreken øverst
   En tynn gullstrek som viser hvor langt ned på siden du har kommet.
   Små ting, men folk slutter å lure på om det er mer igjen.
   --------------------------------------------------------------------- */
.les-strek {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold), var(--gold-2));
  z-index: 300; pointer-events: none;
  will-change: transform;
}

/* ---------------------------------------------------------------------
   2. Ekte 3D i toppen (WebGL)
   Canvasen legger seg bak all tekst. Den er dempet med vilje — den skal
   kjennes som dybde i rommet, ikke som en skjermsparer.
   --------------------------------------------------------------------- */
.hero-3d {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero-3d.klar { opacity: 1; }
.hero.har-3d .hero-grid { opacity: .12; }
.hero .container { position: relative; z-index: 2; }

/* Et fint filmkorn over det hele. Skjuler at flatene i 3D-en er glatte,
   og gjør at det ser trykket ut i stedet for datagenerert. */
.korn {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   3. Kort som vipper mot musa
   Ikke en gimmick: det er slik du ser at noe er trykkbart før du
   trykker. Vinkelen er liten med vilje (maks 7 grader) — mer enn det
   og teksten på kortet blir skjev og vond å lese.
   --------------------------------------------------------------------- */
[data-kort3d] {
  transform-style: preserve-3d;
  transform: perspective(1000px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateZ(var(--tz, 0px));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              border-color .3s;
  will-change: transform;
  position: relative;
}
[data-kort3d].folger { transition: transform .08s linear, box-shadow .3s; }
[data-kort3d].folger {
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65),
              0 0 0 1px var(--gold-soft);
  border-color: var(--line-2);
}

/* Lysstripa som glir over kortet når musa er på det. Den følger
   pekeren, så det ser ut som kortet ligger under en lampe. */
[data-kort3d]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(224,190,99,.10), transparent 62%);
}
[data-kort3d].folger::after { opacity: 1; }

/* Innhold som skal løftes litt ut av kortet i 3D. */
[data-kort3d] [data-lag] { transform: translateZ(26px); }

/* ---------------------------------------------------------------------
   4. Gullys som følger musa i mørke seksjoner
   --------------------------------------------------------------------- */
.dyp-lys {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .6s;
  background: radial-gradient(600px circle at var(--lx, 50%) var(--ly, 50%),
              rgba(224,190,99,.055), transparent 70%);
}
.dyp-lys.paa { opacity: 1; }

/* ---------------------------------------------------------------------
   5. Magnetiske knapper
   Knappen trekker seg noen piksler mot pekeren når du nærmer deg. Du
   treffer den lettere, og det kjennes som den vil bli trykket på.
   --------------------------------------------------------------------- */
[data-magnet] {
  transform: translate(var(--mgx, 0px), var(--mgy, 0px));
  transition: transform .45s var(--ease);
  will-change: transform;
}
[data-magnet].nær { transition: transform .12s ease-out; }

/* ---------------------------------------------------------------------
   6. Kommer inn fra dybden når du blar
   Ting stiger ikke bare opp — de kommer mot deg. Samme idé som før,
   bare med litt rom rundt.
   --------------------------------------------------------------------- */
.dybde-inn {
  opacity: 0;
  transform: perspective(1200px) translateY(34px) translateZ(-70px) rotateX(6deg);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
.dybde-inn.inne {
  opacity: 1;
  transform: perspective(1200px) translateY(0) translateZ(0) rotateX(0);
}

/* ---------------------------------------------------------------------
   7. Av-knappen for bevegelse
   Den skal være lett å finne for den som blir svimmel av sånt, og lett
   å overse for alle andre. Derfor nede i hjørnet, liten, og med ren
   tekst i stedet for et ikon ingen forstår.
   --------------------------------------------------------------------- */
.ro-knapp {
  position: fixed; left: 14px; bottom: 14px; z-index: 260;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  background: rgba(27,26,30,.82); backdrop-filter: blur(10px);
  border: 1px solid var(--line); color: var(--text-3);
  font: 500 12px/1 var(--font); cursor: pointer;
  opacity: .5; transition: opacity .25s, color .25s, border-color .25s;
}
.ro-knapp:hover, .ro-knapp:focus-visible { opacity: 1; color: var(--text); border-color: var(--line-2); }
.ro-knapp i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex: none;
}
html.ro .ro-knapp i { background: var(--text-3); }

/* ---------------------------------------------------------------------
   8. Mobil og små skjermer
   3D koster batteri, og en telefon har ingen mus å vippe kortene mot.
   Vi skrur derfor ned alt sammen her, og lar heller siden være rask.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero-3d { opacity: 0 !important; display: none; }
  [data-kort3d] { transform: none !important; }
  .ro-knapp { left: 10px; bottom: 10px; height: 28px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-3d, .dyp-lys, .korn { display: none !important; }
  .dybde-inn { opacity: 1; transform: none; }
  [data-kort3d], [data-magnet] { transform: none !important; }
}