/* ==========================================================================
   MTA — MORPHE TRANSFORMATION ARCHITECT
   Homepage motion.
   © Haut Forvalting AS (Org.nr. 931 603 760) — Altibedrift.
   Konfidensiell arkitektur/arbeidsdokument. Uautorisert kopiering/distribusjon forbudt.
   SCOPE: body[data-ws-home-surface="1"]
   ========================================================================== */

body[data-ws-home-surface="1"] {
  --mta-ease: cubic-bezier(0.2, 0, 0, 1);
  --mta-trans-fast: 150ms var(--mta-ease);
}

/* 1. Taktile Interaksjonsflater (Knapper, lenkekort) */
body[data-ws-home-surface="1"] .button,
body[data-ws-home-surface="1"] .ws-home-check-v4__button,
body[data-ws-home-surface="1"] .home-v2-text-link,
body[data-ws-home-surface="1"] .home-v2-story,
body[data-ws-home-surface="1"] .traffic-editorial-index__grid a,
body[data-ws-home-surface="1"] .ws-mention-traffic a {
  transition: transform var(--mta-trans-fast), box-shadow var(--mta-trans-fast), filter var(--mta-trans-fast);
}

/* Pressed (touch + click) */
body[data-ws-home-surface="1"] .button:active,
body[data-ws-home-surface="1"] .ws-home-check-v4__button:active,
body[data-ws-home-surface="1"] .home-v2-story:active,
body[data-ws-home-surface="1"] .traffic-editorial-index__grid a:active,
body[data-ws-home-surface="1"] .ws-mention-traffic a:active {
  transform: scale(0.98);
}

/* 2. Feedback på native sjekkbokser (eier egen state) */
body[data-ws-home-surface="1"] input[type="checkbox"] {
  transition: transform var(--mta-trans-fast);
  cursor: pointer;
}
body[data-ws-home-surface="1"] input[type="checkbox"]:active {
  transform: scale(0.85);
}

/* 3. Løst: Fokus på mørk CTA (sikrer kontrast) */
body[data-ws-home-surface="1"] .ws-home-check-v4__panel .ws-home-check-v4__button:focus-visible,
body[data-ws-home-surface="1"] [data-ui-surface="dark"] .button:focus-visible {
  outline: 2px solid var(--hs-lime, #d2f34c);
  outline-offset: 4px;
}
body[data-ws-home-surface="1"] .home-v2-job-grid article:focus-within {
  outline: 2px solid var(--hs-forest, #102724);
  outline-offset: 4px;
}

/* 4. Desktop Hover-tilstander (Skjermes fra Touch) */
@media (hover: hover) and (pointer: fine) {
  body[data-ws-home-surface="1"] .home-v2-story:hover,
  body[data-ws-home-surface="1"] .traffic-editorial-index__grid a:hover,
  body[data-ws-home-surface="1"] .ws-mention-traffic a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(16, 39, 36, 0.08);
  }
  /* Løst: Article uten interaktiv rolle løftes ikke som knapp, kun faktisk lenke/pil får feedback */
  body[data-ws-home-surface="1"] .home-v2-job-grid article a:hover {
    transform: translateX(4px);
    transition: transform var(--mta-trans-fast);
  }
  body[data-ws-home-surface="1"] .button--primary:hover,
  body[data-ws-home-surface="1"] .ws-home-check-v4__button:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
  }
  body[data-ws-home-surface="1"] .ws-signal-map__node:hover,
  body[data-ws-home-surface="1"] .ws-signal-map__hub:hover {
    transform: translateY(-2px);
    transition: transform var(--mta-trans-fast);
  }
}

/* 5. Løst: SVG-baner har alltid en synlig baseline */
body[data-ws-home-surface="1"] .ws-signal-map__lines path {
  stroke-dasharray: 4 8;
  opacity: 0.5;
}

/* 6. Løst: Target-scopet Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  body[data-ws-home-surface="1"] .button,
  body[data-ws-home-surface="1"] .ws-home-check-v4__button,
  body[data-ws-home-surface="1"] .home-v2-text-link,
  body[data-ws-home-surface="1"] .home-v2-story,
  body[data-ws-home-surface="1"] .traffic-editorial-index__grid a,
  body[data-ws-home-surface="1"] .ws-mention-traffic a,
  body[data-ws-home-surface="1"] .ws-signal-map__node,
  body[data-ws-home-surface="1"] .ws-signal-map__hub,
  body[data-ws-home-surface="1"] .home-v2-job-grid article a,
  body[data-ws-home-surface="1"] input[type="checkbox"] {
    transition: none !important;
    transform: none !important;
  }
}