/* © Haut Forvalting AS (Org.nr. 931 603 760) — Altibedrift.
   Konfidensiell arkitektur/arbeidsdokument. Uautorisert kopiering/distribusjon forbudt. */
/* ==========================================================================
   MTA — MORPHE TRANSFORMATION ARCHITECT
   TARGET: WEBSJEKK-PAGE-SURFACE-006 (/innsikt/ - Magasin Hub)
   SCOPE: html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main
   FILE: magasin-motion-haut-v1.css
   PURPOSE: Additive Microinteractions & System Stability (DTD)
   ========================================================================== */

html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main {
  --mta-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mta-trans: 150ms var(--mta-ease);
}

/* 1. KONTRASTSIKRET FOCUS STATE (3px skoggrønn med hvit kontrastkant for universell utforming) */
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main :is(a, button, summary):focus-visible {
  outline: 3px solid #397651 !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 2px #ffffff !important;
  border-radius: 2px;
  transition: outline-color var(--mta-trans), box-shadow var(--mta-trans) !important;
}

/* 2. BASE INTERAKSJONSTIMING & PRESSED-FEEDBACK (Kun 150ms på interaktive elementer) */
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main a,
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main button,
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main summary {
  transition: transform var(--mta-trans), box-shadow var(--mta-trans), filter var(--mta-trans), opacity var(--mta-trans);
}

html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main a:active,
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main button:active,
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main summary:active {
  transform: scale(0.98);
}

/* 3. HOVER STATES (Isolert fra touch: skjermer flater mot fastlåst mobil-hover) */
@media (hover: hover) and (pointer: fine) {
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main a:hover,
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main button:hover {
    filter: brightness(1.05);
  }

  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main summary:hover {
    opacity: 0.8;
  }

  /* Subtil mikroløfting kun på dedikerte CTAer og trafikk-lenker, IKKE passiv nyhetskort-kropp */
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .insight-editorial-exit__primary:hover,
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .insight-editorial-exit__secondary:hover,
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .traffic-journey__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 39, 36, 0.08);
  }
}

/* 4. NATIVE DETAILS REVEAL (180ms finitt translate)
   Bruker ikke "forwards" eller opacity/height for å bevare native tilstand og unngå at innholdet fryses. */
@keyframes mta-magasin-details-translate {
  0% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main details[open] summary ~ * {
  animation: mta-magasin-details-translate 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 5. NØYTRALISERING AV INFINITE LOOPS (.ws-exit-brand)
   Stanser halo/orbit og pulse-animasjoner uten å fjerne posisjonerende transforms eller geometri. */
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand,
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand * {
  animation: none !important;
}

/* 6. REDUCED MOTION (Trygg avbruddslogikk)
   Bruker 0.01ms for å beholde SVG- og layoutgeometri trygt, uten å utføre "transform: none" over alt. */
@media (prefers-reduced-motion: reduce) {
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main *,
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main *::before,
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main *::after {
    animation: none !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* Fjerner spesifikk interaksjons-løfting for redusert bevegelse */
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .insight-editorial-exit__primary:hover,
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .insight-editorial-exit__secondary:hover,
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .traffic-journey__link:hover {
    transform: none !important;
  }
}

/* Owner revision: living brand with viewport, visibility and user pause control. */
@media (prefers-reduced-motion: no-preference) {
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand__orbit--outer { animation: ws-exit-orbit 22s linear infinite !important; }
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand__orbit--middle { animation: ws-exit-orbit-reverse 16s linear infinite !important; }
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand__orbit--inner { animation: ws-exit-orbit 29s linear infinite !important; }
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand__pulse { animation: ws-exit-pulse 4.8s ease-out infinite !important; }
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand__core { animation: ws-exit-breathe 5.6s ease-in-out infinite !important; }
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand * { animation-play-state: paused !important; }
  html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-exit-brand[data-ws-brand-running="true"] * { animation-play-state: running !important; }
}
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-brand-motion-control {
  position: absolute; right: 24px; bottom: 12px; z-index: 5;
  background: #143a30 !important; color: #fff !important; border: 1px solid #92b3a8;
  border-radius: 24px; min-height: 44px; padding: 8px 16px; font: inherit; font-size: .85rem; cursor: pointer;
}
html body[data-ws-experience="2"][data-ws-magasin-surface="1"] main .ws-brand-motion-control[hidden] { display: none !important; }