/* =====================================================================
   Nordbygg — basisstiler og selvhostet-lignende font (uten Google Fonts)
   Tailwind håndterer det meste; her ligger font-face, scroll-oppsett
   og små detaljer som ikke passer i utility-klasser.
   ===================================================================== */

/* Moderne sans-serif (Inter) hentet fra åpen CDN — ikke Google Fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/files/inter-latin-variable-wghtOnly-normal.woff2') format('woff2');
}

/* Redaksjonell/arkitektonisk display-font for overskrifter */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/fraunces@5.0.20/files/fraunces-latin-wght-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Lenis håndterer scroll; sørg for at native smooth ikke krasjer */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Navigasjon: gjennomsiktig som standard, bakgrunn ved scroll */
[data-nav] {
  background-color: transparent;
  backdrop-filter: none;
}

[data-nav].nav-scrolled {
  background-color: rgba(246, 244, 239, 0.85);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid #e4e0d7;
}

/* Hamburger → kryss */
[data-menu-toggle].is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
[data-menu-toggle].is-open span:nth-child(2) {
  opacity: 0;
}
[data-menu-toggle].is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Skjul innhold litt før animasjon der JS er aktiv, unngå flimmer */
img {
  max-width: 100%;
  height: auto;
}

.logo-mark {
  flex: none;
  opacity: 0.9;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

a:hover .logo-mark {
  opacity: 1;
  transform: translateY(-1px);
}

/* Produktvisualisering i hero */
.gspot-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(47, 66, 55, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 66, 55, 0.07) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 14%,
    black 86%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 14%,
    black 86%,
    transparent
  );
}

.gspot-stage {
  background: transparent;
}

.gspot-orbit {
  width: 68%;
  aspect-ratio: 1;
  left: 16%;
  top: 50%;
  border: 1px solid rgba(47, 66, 55, 0.16);
  border-radius: 50%;
  transform: translateY(-50%);
}

.gspot-shadow {
  z-index: 5;
  width: 66%;
  height: 13%;
  left: 18%;
  bottom: 18%;
  border-radius: 50%;
  background: rgba(27, 28, 26, 0.28);
  filter: blur(20px);
  transform: perspective(360px) rotateX(64deg);
}

.gspot-image {
  padding: 8% 4% 5%;
  filter: drop-shadow(0 24px 22px rgba(27, 28, 26, 0.18));
  transform: translateY(-1%);
}

/* Horisontal prosesslinje, etter oppsettet i referanseprosjektet */
.process-line {
  position: absolute;
  top: 11px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: #e4e0d7;
}

/* Fokusmarkering for tilgjengelighet */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2f4237;
  outline-offset: 2px;
}

/* Respekter brukerens ønske om redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}