/* ===== Sticky Scroller (Vi tilbyr) — struktur ===== */
/* Versjonshistorikk:
   2026-06-29 19:42 CEST — Fjernet dynamisk HTML-tag (<>) i module.html som forårsaket
                            "An error occurred updating a module" i Design Manager-editoren.
   2026-06-29 19:52 CEST — Lagt til icon_set="fontawesome-6.4.2" i {% icon %}-taggen i module.html.
                            Uten denne falt taggen tilbake til det utdaterte settet fontawesome-5.0.10,
                            som mangler ikoner som "robot" og "magnifying-glass" — dette var den faktiske
                            årsaken til feilmeldingen (bekreftet via konsoll-loggen: "Can't find icon
                            'robot' in set 'fontawesome-5.0.10'").
   2026-06-29 19:57 CEST — Lagt til: tilfeldig start-posisjon for brikkene ved hvert sidelast
                            (scatter.randomize), kollisjonsunngåelse så brikkene ikke overlapper
                            like mye, og avstandsfelt for CTA-knappen (cta.spacing, min 25px).
   2026-06-29 20:48 CEST — Fikset "Eksploder & land": brikkene var forskjøvet i tid (staggered
                            per indeks) slik at de virket å starte fra ulike steder. Nå bruker
                            alle brikkene samme scroll-fremdrift, så de spruter samtidig fra
                            samme punkt i midten.
*/

.dft-scroller { position: relative; width: 100%; }
.dft-scroller__track { position: relative; width: 100%; }
.dft-scroller__stage {
  position: -webkit-sticky; position: sticky;
  top: 0; height: 100vh; height: 100svh;
  overflow: hidden; display: flex;
}

.dft-scroller__bg, .dft-scroller__overlay { position: absolute; inset: 0; z-index: 0; }
.dft-scroller__overlay { z-index: 1; pointer-events: none; }
.dft-scroller__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.dft-scroller__inner {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}

.dft-scroller__heading { margin: 0; line-height: 1.0; }

.dft-scroller__list { list-style: none; margin: 0; padding: 0; }

/* The chip itself (used in BOTH modes) */
.dft-scroller__item-inner {
  display: inline-flex; align-items: center; gap: .55em;
  text-decoration: none; color: inherit;
  border: var(--chip-bw, 2px) solid var(--chip-bc, #10211e);
  border-radius: var(--chip-radius, 14px);
  background: var(--chip-fill, transparent);
  box-shadow: var(--chip-shadow, none);
  padding: var(--chip-pad, 16px) calc(var(--chip-pad, 16px) * 1.5);
  transition: transform .25s ease, filter .25s ease;
}
a.dft-scroller__item-inner:hover { filter: brightness(1.06); transform: translateY(-2px); }

.dft-scroller__icon { display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; font-size: .85em; flex: 0 0 auto; }
.dft-scroller__icon svg { width: 100%; height: 100%; display: block; }
.dft-scroller__label { display: inline-block; line-height: 1.1; }

.dft-scroller.is-js .dft-scroller__item { opacity: 0; }
.dft-scroller.is-js .dft-scroller__cta-wrap { opacity: 0; }

/* ===== CTA ===== */
.dft-scroller__cta-wrap { position: absolute; bottom: var(--cta-gap, 25px); z-index: 4; display: flex; }
.dft-scroller__cta-wrap[data-pos="right"]  { right: var(--cta-gap, 25px); justify-content: flex-end; }
.dft-scroller__cta-wrap[data-pos="left"]   { left: var(--cta-gap, 25px);  justify-content: flex-start; }
.dft-scroller__cta-wrap[data-pos="center"] { left: 50%; transform: translateX(-50%); }
.dft-scroller__cta { display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.4em; border-radius: 999px; font-weight: 600; font-size: 1rem;
  line-height: 1; text-decoration: none; transition: transform .25s ease, filter .25s ease; }
.dft-scroller__cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.dft-scroller__cta svg { transition: transform .25s ease; }
.dft-scroller__cta:hover svg { transform: translateX(4px); }

/* ===== Mode: STABLET LISTE ===== */
.dft-scroller[data-mode="list"] .dft-scroller__list {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: .5em;
}
.dft-scroller[data-mode="list"] .dft-scroller__item { will-change: transform, opacity; transform-style: preserve-3d; }
.dft-scroller[data-mode="list"] .dft-scroller__heading { flex: 0 0 auto; }
.dft-scroller[data-mode="list"][data-anim="starwars"] .dft-scroller__inner,
.dft-scroller[data-mode="list"][data-anim="flip"] .dft-scroller__inner { perspective: 1200px; perspective-origin: 50% 42%; }
.dft-scroller[data-mode="list"][data-anim="flip"] .dft-scroller__item { transform-origin: top center; }
.dft-scroller[data-mode="list"][data-anim="starwars"] .dft-scroller__list { align-items: center; text-align: center; transform: rotateX(18deg); transform-style: preserve-3d; }

/* ===== Modes: SCATTER-FAMILIEN (alt unntatt list) ===== */
.dft-scroller:not([data-mode="list"]) .dft-scroller__inner { justify-content: center; align-items: center; }
.dft-scroller:not([data-mode="list"]) .dft-scroller__heading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; max-width: 100%; text-align: center; z-index: 2; pointer-events: none;
}
.dft-scroller:not([data-mode="list"]) .dft-scroller__list { position: absolute; inset: 0; z-index: 3; }
/* Items become absolute only when JS controls them (graceful no-JS = column) */
.dft-scroller:not([data-mode="list"]).is-js .dft-scroller__item {
  position: absolute; left: 50%; top: 50%; will-change: transform, opacity;
}
.dft-scroller:not([data-mode="list"]) .dft-scroller__item-inner { white-space: nowrap; max-width: 86vw; }

/* Tittel-maske: brikkene blir vinduer som viser tittelen invertert bak seg */
.dft-scroller[data-mode="mask"] .dft-scroller__item-inner {
  background: transparent;
  -webkit-backdrop-filter: invert(1) hue-rotate(180deg);
  backdrop-filter: invert(1) hue-rotate(180deg);
}
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  .dft-scroller[data-mode="mask"] .dft-scroller__item-inner { background: var(--chip-fill, rgba(0,0,0,.85)); }
}

/* ===== Responsive ===== */
@media (max-width: 680px) {
  .dft-scroller__cta-wrap { position: relative; bottom: auto; right: auto; left: auto;
    transform: none; justify-content: center; margin-top: 1.5em; }
  .dft-scroller:not([data-mode="list"]) .dft-scroller__item-inner { white-space: normal; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .dft-scroller.is-js .dft-scroller__cta-wrap { opacity: 1 !important; transform: none !important; }
  .dft-scroller[data-mode="list"].is-js .dft-scroller__item { opacity: 1 !important; transform: none !important; }
  .dft-scroller[data-mode="list"] .dft-scroller__track { height: auto !important; }
  .dft-scroller[data-mode="list"] .dft-scroller__stage { position: relative; height: auto; min-height: 0; padding-block: 4vh; }
}