/* Websjekk Visual Runtime v1
   Sequence 3 representation layer: motion, visual signals, microinteractions
   and progressive disclosure. No business truth or conversion semantics live here.
*/

:root {
  --ws-motion-fast: 160ms;
  --ws-motion-base: 280ms;
  --ws-motion-slow: 620ms;
  --ws-motion-ease: cubic-bezier(.2, .72, .22, 1);
  --ws-motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ws-visual-accent: var(--territory-accent, #315f52);
  --ws-visual-accent-rgb: var(--territory-accent-rgb, 49, 95, 82);
  --ws-visual-ink: #10251f;
  --ws-reading-progress: 0;
}

body[data-visibility-domain="nettsider"] {
  --ws-visual-accent: #315f52;
  --ws-visual-accent-rgb: 49, 95, 82;
}

body[data-visibility-domain="ai-automatisering"] {
  --ws-visual-accent: #3f6d86;
  --ws-visual-accent-rgb: 63, 109, 134;
}

body[data-visibility-domain="synlighet"] {
  --ws-visual-accent: #895c22;
  --ws-visual-accent-rgb: 137, 92, 34;
}

body[data-visibility-domain="norsk-tech"] {
  --ws-visual-accent: #3f775f;
  --ws-visual-accent-rgb: 63, 119, 95;
}

body[data-visibility-domain="data-infrastruktur"] {
  --ws-visual-accent: #3b707a;
  --ws-visual-accent-rgb: 59, 112, 122;
}

body[data-visibility-domain="verktoy-resurser"] {
  --ws-visual-accent: #3f6d86;
  --ws-visual-accent-rgb: 63, 109, 134;
}

/* Reading orientation ---------------------------------------------------- */
.ws-reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.ws-reading-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--ws-reading-progress));
  transform-origin: left center;
  background: var(--ws-visual-accent);
  box-shadow: 0 0 16px rgba(var(--ws-visual-accent-rgb), .18);
  will-change: transform;
}

/* Direct-answer signal --------------------------------------------------- */
body[data-ws-visual-runtime="1"] .visibility-answer-v1 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(var(--ws-visual-accent-rgb), .18);
}

body[data-ws-visual-runtime="1"] .visibility-answer-v1::before {
  content: "";
  position: absolute;
  inset: 18px auto 18px 0;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent, rgba(var(--ws-visual-accent-rgb), .75), transparent);
}

body[data-ws-visual-runtime="1"] .visibility-answer-v1::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  background: var(--ws-visual-accent);
  box-shadow: 0 0 0 7px rgba(var(--ws-visual-accent-rgb), .08);
  transform: translateY(-50%);
}

/* Traffic journey as a causal map --------------------------------------- */
body[data-ws-visual-runtime="1"] .traffic-journey[data-ws-visual-flow="1"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(var(--ws-visual-accent-rgb), .18);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--ws-visual-accent-rgb), .08), transparent 26rem),
    linear-gradient(135deg, rgba(245, 246, 241, .98), rgba(239, 244, 241, .96));
}

body[data-ws-visual-runtime="1"] .traffic-journey__intro,
body[data-ws-visual-runtime="1"] .traffic-journey__links,
body[data-ws-visual-runtime="1"] .traffic-journey__actions {
  position: relative;
  z-index: 1;
}

.traffic-journey__flow {
  position: absolute;
  z-index: 0;
  inset: 86px 18px auto;
  width: calc(100% - 36px);
  height: 220px;
  overflow: visible;
  pointer-events: none;
  color: var(--ws-visual-accent);
  opacity: .62;
}

.traffic-journey__flow--mobile {
  display: none;
}

.traffic-journey__flow-line,
.traffic-journey__flow-branch {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.traffic-journey__flow-line {
  opacity: .16;
}

.traffic-journey__flow-branch {
  opacity: .34;
  stroke-dasharray: 7 12;
  stroke-dashoffset: 38;
}

.traffic-journey__flow-node {
  vector-effect: non-scaling-stroke;
  fill: rgba(255, 255, 255, .96);
  stroke: currentColor;
  stroke-width: 1.5;
}

.traffic-journey__flow-node--origin {
  fill: currentColor;
  stroke: rgba(255, 255, 255, .95);
  stroke-width: 3;
}

.traffic-journey[data-ws-seen="true"] .traffic-journey__flow-branch {
  animation: ws-flow-trace 1100ms var(--ws-motion-ease-out) both;
}

.traffic-journey[data-ws-seen="true"] .traffic-journey__flow-node:not(.traffic-journey__flow-node--origin) {
  animation: ws-node-arrive 520ms var(--ws-motion-ease-out) both;
}

.traffic-journey[data-ws-seen="true"] .traffic-journey__flow-node:nth-of-type(2) { animation-delay: 180ms; }
.traffic-journey[data-ws-seen="true"] .traffic-journey__flow-node:nth-of-type(3) { animation-delay: 260ms; }
.traffic-journey[data-ws-seen="true"] .traffic-journey__flow-node:nth-of-type(4) { animation-delay: 340ms; }

@keyframes ws-flow-trace {
  from { stroke-dashoffset: 38; opacity: .08; }
  to { stroke-dashoffset: 0; opacity: .34; }
}

@keyframes ws-node-arrive {
  from { opacity: .1; transform: scale(.72); transform-origin: center; }
  to { opacity: 1; transform: scale(1); transform-origin: center; }
}

/* Reveal: progressive enhancement, never a visibility dependency -------- */
[data-ws-reveal][data-ws-seen="true"] {
  animation: ws-reveal-in var(--ws-motion-slow) var(--ws-motion-ease-out) both;
  animation-delay: var(--ws-reveal-delay, 0ms);
}

@keyframes ws-reveal-in {
  from {
    opacity: .78;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards and semantic next steps ----------------------------------------- */
body[data-ws-visual-runtime="1"] :is(
  .traffic-editorial-index__grid > a,
  .editorial-format-strip__item,
  .traffic-journey__link,
  .insight-object,
  .dr-card,
  .source-domain__routes a
) {
  transition:
    transform var(--ws-motion-base) var(--ws-motion-ease),
    border-color var(--ws-motion-base) var(--ws-motion-ease),
    box-shadow var(--ws-motion-base) var(--ws-motion-ease),
    background-color var(--ws-motion-base) var(--ws-motion-ease);
}

body[data-ws-visual-runtime="1"] :is(
  .traffic-editorial-index__grid > a,
  .traffic-journey__link,
  .insight-object,
  .dr-card,
  .source-domain__routes a
):is(:hover, :focus-visible) {
  transform: translateY(-3px);
}

body[data-ws-visual-runtime="1"] .traffic-journey__link {
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--ws-visual-accent-rgb), .14);
  box-shadow: 0 12px 36px rgba(17, 42, 34, .025);
}

body[data-ws-visual-runtime="1"] .traffic-journey__link::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgba(var(--ws-visual-accent-rgb), .11), transparent 58%);
  opacity: 0;
  transition: opacity var(--ws-motion-base) var(--ws-motion-ease);
}

body[data-ws-visual-runtime="1"] .traffic-journey__link:is(:hover, :focus-visible) {
  border-color: rgba(var(--ws-visual-accent-rgb), .34);
  box-shadow: 0 18px 48px rgba(var(--ws-visual-accent-rgb), .08);
}

body[data-ws-visual-runtime="1"] .traffic-journey__link:is(:hover, :focus-visible)::before {
  opacity: 1;
}

body[data-ws-visual-runtime="1"] .traffic-journey__link b {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  transition: transform var(--ws-motion-fast) var(--ws-motion-ease);
}

body[data-ws-visual-runtime="1"] .traffic-journey__link:is(:hover, :focus-visible) b {
  transform: translateX(4px);
}

/* Progressive disclosure: supporting card copy stays present in the DOM.
   Fine-pointer desktop gets a compact default; touch/mobile keeps it open. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  body[data-ws-visual-runtime="1"] .traffic-journey__link p {
    max-height: 3.2em;
    overflow: hidden;
    opacity: .72;
    transition:
      max-height var(--ws-motion-base) var(--ws-motion-ease),
      opacity var(--ws-motion-base) var(--ws-motion-ease);
  }

  body[data-ws-visual-runtime="1"] .traffic-journey__link:is(:hover, :focus-visible) p {
    max-height: 8em;
    opacity: 1;
  }
}

/* Existing native details get clearer state without replacing semantics. */
body[data-ws-visual-runtime="1"] details[data-ws-details="1"] > summary {
  cursor: pointer;
  transition:
    color var(--ws-motion-fast) var(--ws-motion-ease),
    background-color var(--ws-motion-fast) var(--ws-motion-ease);
}

body[data-ws-visual-runtime="1"] details[data-ws-details="1"][data-ws-details-state="open"] > summary {
  color: var(--ws-visual-accent);
}

body[data-ws-visual-runtime="1"] details[data-ws-details="1"][data-ws-details-state="open"] > :not(summary) {
  animation: ws-details-in var(--ws-motion-base) var(--ws-motion-ease-out) both;
}

@keyframes ws-details-in {
  from { opacity: .72; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Focus is a first-class visual state. ---------------------------------- */
body[data-ws-visual-runtime="1"] :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid rgba(var(--ws-visual-accent-rgb), .42);
  outline-offset: 3px;
}

/* Responsive SVG representation ---------------------------------------- */
@media (max-width: 900px) {
  .traffic-journey__flow--desktop {
    display: none;
  }

  .traffic-journey__flow--mobile {
    display: block;
    inset: 156px auto auto 4px;
    width: 58px;
    height: min(560px, calc(100% - 210px));
    opacity: .42;
  }

  body[data-ws-visual-runtime="1"] .traffic-journey__links {
    position: relative;
  }

  body[data-ws-visual-runtime="1"] .traffic-journey__link {
    margin-left: 18px;
  }
}

@media (max-width: 620px) {
  .ws-reading-progress {
    height: 2px;
  }

  body[data-ws-visual-runtime="1"] :is(
    .traffic-editorial-index__grid > a,
    .traffic-journey__link,
    .insight-object,
    .dr-card,
    .source-domain__routes a
  ):is(:hover, :focus-visible) {
    transform: none;
  }

  .traffic-journey__flow--mobile {
    left: -2px;
    width: 48px;
    opacity: .34;
  }
}

/* Motion safety ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ws-motion-fast: 0ms;
    --ws-motion-base: 0ms;
    --ws-motion-slow: 0ms;
  }

  .traffic-journey__flow-branch,
  .traffic-journey__flow-node,
  [data-ws-reveal][data-ws-seen="true"],
  body[data-ws-visual-runtime="1"] details[data-ws-details="1"] > :not(summary) {
    animation: none !important;
  }

  body[data-ws-visual-runtime="1"] :is(
    .traffic-editorial-index__grid > a,
    .editorial-format-strip__item,
    .traffic-journey__link,
    .insight-object,
    .dr-card,
    .source-domain__routes a,
    a,
    button,
    summary
  ) {
    scroll-behavior: auto !important;
    transition-duration: 0ms !important;
  }

  .ws-reading-progress__bar {
    box-shadow: none;
  }
}