/* © Haut Forvalting AS (Org.nr. 931 603 760) — Altibedrift.
   Konfidensiell arkitektur/arbeidsdokument. Uautorisert kopiering/distribusjon forbudt. */
/* ==========================================================================
   MTA — MORPHE TRANSFORMATION ARCHITECT
   TARGET: WEBSJEKK-PAGE-SURFACE-007 (/kunnskap/)
   SCOPE: html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main
   FILE: knowledge-motion-haut-v1.css
   PURPOSE: Finite State Transitions, Controls Feedback & Accessibility
   ========================================================================== */

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

/* 1. VISIBLE TWO-TONE FOCUS RING (Accessibility) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main :is(a, button, 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) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main a,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main button,
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main label {
  transition: transform var(--mta-trans), box-shadow var(--mta-trans), background-color var(--mta-trans), border-color var(--mta-trans), filter var(--mta-trans);
}

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

/* ARROWS TRANSLATE ON FOCUS (Keyboard accessibility) */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main a:focus-visible span[aria-hidden="true"],
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main button:focus-visible span[aria-hidden="true"] {
  transform: translateX(2px);
  transition: transform var(--mta-trans);
}

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

  /* Subtle lift on explicitly interactive objects */
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-action:hover,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card:hover,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card:hover,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__link:hover,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index-links button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 39, 36, 0.08);
  }

  /* ARROWS TRANSLATE ON HOVER */
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main a:hover span[aria-hidden="true"],
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main button:hover span[aria-hidden="true"] {
    transform: translateX(2px);
    transition: transform var(--mta-trans);
  }
}

/* 4. FINITE CARD APPEAR TRANSFORM (Hooked dynamically to JS removing [hidden]) */
@keyframes mta-card-appear {
  0% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

/* Evaluates cleanly when custom JS filters toggle the `hidden` attribute.
   Uses NO forwards or opacity manipulation, ensuring content is visually robust and never gets locked invisible. */
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card:not([hidden]),
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card:not([hidden]) {
  animation: mta-card-appear 180ms var(--mta-ease);
}

/* 5. REDUCED MOTION (Absolute override) */
@media (prefers-reduced-motion: reduce) {
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main *,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main *::before,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* Failsafe reset for dynamic lifts */
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-action:hover,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card:hover,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-now-card:hover,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .traffic-journey__link:hover,
  html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-index-links button:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card:focus-visible .kh-card__action span { transform:translateX(2px); transition:transform 160ms; }
@media(hover:hover) and (pointer:fine) {
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main .kh-card:hover .kh-card__action span { transform:translateX(2px); transition:transform 160ms; }
}
@media(prefers-reduced-motion:reduce) {
html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main a:focus-visible span, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main button:focus-visible span, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main a:hover span, html body[data-ws-experience="2"][data-ws-knowledge-surface="1"] main button:hover span { transform:none !important; }
}