/* © Haut Forvalting AS (Org.nr. 931 603 760) — Altibedrift.
   Konfidensiell arkitektur/arbeidsdokument. Uautorisert kopiering/distribusjon forbudt. */
/* ==========================================================================
   MTA — MORPHE TRANSFORMATION ARCHITECT
   TARGET: WEBSJEKK-PAGE-SURFACE-008 (/innsikt/research/)
   SCOPE: html body[data-ws-experience="2"][data-ws-research-surface="1"] main,
          body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog
   FILE: research-motion-haut-v1.css
   PURPOSE: Additive Microinteractions, Controlled Ambient Motion & Reduced Motion
   ========================================================================== */

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

/* 1. VISIBLE TWO-TONE FOCUS RING (Accessibility & Contrast) */
html body[data-ws-experience="2"][data-ws-research-surface="1"] main :is(a, button, summary, label, input):focus-visible,
body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog :is(a, button, summary, label, input):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 CONTROLS FEEDBACK (150-180ms, finite only) */
html body[data-ws-experience="2"][data-ws-research-surface="1"] main a,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main button,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main summary,
body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog a,
body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog button,
body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog 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-research-surface="1"] main a:active,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main button:active,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main summary:active,
body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog a:active,
body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog button:active,
body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog summary:active {
  transform: scale(0.98);
}

/* 3. HOVER RESTRICTIONS (Only fine pointer devices, no article hover lift) */
@media (hover: hover) and (pointer: fine) {
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main a:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main button:hover,
  body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog a:hover,
  body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog button:hover {
    filter: brightness(1.05);
  }

  html body[data-ws-experience="2"][data-ws-research-surface="1"] main summary:hover,
  body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog summary:hover {
    opacity: 0.8;
  }

  /* Subtly lift explicitly interactive actions and navigation objects ONLY */
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .button--primary:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .rv2-button:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .rv2-rd-exit__action:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .source-route__actions a:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .traffic-journey__actions a:hover,
  html body[data-ws-experience="2"][data-ws-research-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 (Finite 180ms)
   Uses translate only. Excludes 'forwards' and 'opacity: 0' to protect native [hidden] mechanics. */
@keyframes mta-research-details-reveal {
  0% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

html body[data-ws-experience="2"][data-ws-research-surface="1"] main details[open] summary ~ *,
body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog details[open] summary ~ * {
  animation: mta-research-details-reveal 180ms var(--mta-ease);
}

/* 5. CONTROLLED AMBIENT MOTION (Dynamic resource management via data-ws-brand-running)
   Pauses existing legacy animations by default to save resources when hidden/out-of-view. */
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-rd-visual *,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-rd-visual *::before,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-rd-visual *::after,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-method-process *,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-method-process *::before,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-method-process *::after {
  animation-play-state: paused !important;
}

html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-rd-visual[data-ws-brand-running="true"] *,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-rd-visual[data-ws-brand-running="true"] *::before,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-rd-visual[data-ws-brand-running="true"] *::after,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-method-process[data-ws-brand-running="true"] *,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-method-process[data-ws-brand-running="true"] *::before,
html body[data-ws-experience="2"][data-ws-research-surface="1"] main .research-method-process[data-ws-brand-running="true"] *::after {
  animation-play-state: running !important;
}

/* 6. REDUCED MOTION (Absolute override)
   Preserves position, dimensions and static structural geometry without executing transformations. */
@media (prefers-reduced-motion: reduce) {
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main *,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main *::before,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main *::after,
  body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog *,
  body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog *::before,
  body[data-ws-experience="2"][data-ws-research-surface="1"] .research-tldr-dialog *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* Failsafe reset for dynamic lifts on interactive elements */
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .button--primary:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .rv2-button:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .rv2-rd-exit__action:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .source-route__actions a:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .traffic-journey__actions a:hover,
  html body[data-ws-experience="2"][data-ws-research-surface="1"] main .traffic-journey__link:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}