/* Effektiv Media motionbibliotek v4 (okt 2026)
   Används av Site Builder-byggen. Skriv inget eget reveal-system – använd data-motion.
   Dolt läge gäller bara när <html> har klassen motion-ready (sätts av inline-skriptet i <head>).
   Utan JS syns allt. prefers-reduced-motion stänger av all rörelse.

   Typer (data-motion="…", flera med mellanslag):
     fade-up · fade-in · slide-left · slide-right · scale-in · clip-reveal · mask-up · line-draw
     stagger (på behållare – barnen animeras i tur och ordning)
     counter (siffra räknas upp, bara riktiga siffror från kunddata)
     parallax-soft (bild/dekor rör sig lätt vid scroll)
     hover-lift · img-zoom · tilt · spotlight (endast hover/fokus, tilt/spotlight bara med mus)
     Ambient (loopar, döljer aldrig innehåll, pausas utanför skärmen):
       float (svävar lätt) · drift (mönsterbakgrund glider) · flow (streckad linje flödar – class="flow" på path)
       pulse (ring pulserar – kartnålar, statusprickar) · marquee (löpande band, barnen dupliceras av JS)
     karta (områdeskartan från omradeskarta.py – konturer ritas, orter och hemskylt kommer in)
     pin-steps (process: bildspalten står still och byter bild medan stegen scrollar – bara ≥ 1100 px, max en per sajt)
   Rubriker (v4): split-up (orden glider upp ur en mask, ett i taget) · text-scrub (orden fylls med färg medan man scrollar –
     stora påståenden, max en per sida). Aldrig på H1. Orden delas i spans av JS; texten är densamma för Google.
   Bildspel (v4): [data-slides] med [data-slide], [data-slides-prev]/[data-slides-next], [data-slides-num] ("01 / 03")
   Pekare (v4, bara mus, valt i designfasen): <html data-cursor="prick"> = följande prick som växer över länkar och visar
     data-cursor-label ("Visa") över bildkort · data-motion="magnetic" på CTA-knappar (dras lätt mot pekaren)
   Scroll och navigering (v3, egna attribut – inte data-motion):
     mjuk scroll för ankarlänkar + scroll-padding för headern (alltid, automatiskt)
     [data-header-hide] på <header>: göms vid scroll nedåt, visas vid scroll uppåt – BARA mobil (≤ 760 px)
     [data-totop] till toppen-knapp · [data-progress] lässtapel (guider) · nav[data-toc] markerar aktivt avsnitt
     [data-swipe] lista som swipas i sidled på mobil (scroll-snap)
   Justera per element: style="--m-delay:120ms; --m-dist:32px; --m-dur:700ms"
   ALDRIG på H1 eller hero-/LCP-bilden. */

:root {
  --m-dur: 700ms;
  --m-ease: cubic-bezier(.2, .7, .2, 1);
  --m-dist: 28px;
  --m-stagger: 80ms;
}

/* ---------- Grundläge (dolt) – bara med JS ---------- */
.motion-ready [data-motion~="fade-up"],
.motion-ready [data-motion~="fade-in"],
.motion-ready [data-motion~="slide-left"],
.motion-ready [data-motion~="slide-right"],
.motion-ready [data-motion~="scale-in"],
.motion-ready [data-motion~="mask-up"],
.motion-ready [data-motion~="stagger"] > * {
  opacity: 0;
  transition:
    opacity var(--m-dur) var(--m-ease),
    transform var(--m-dur) var(--m-ease),
    clip-path var(--m-dur) var(--m-ease);
  transition-delay: calc(var(--m-delay, 0ms) + var(--i, 0) * var(--m-stagger));
  will-change: opacity, transform;
}
.motion-ready [data-motion~="fade-up"],
.motion-ready [data-motion~="stagger"] > * { transform: translate3d(0, var(--m-dist), 0); }
.motion-ready [data-motion~="slide-left"]  { transform: translate3d(calc(var(--m-dist) * 1.6), 0, 0); }
.motion-ready [data-motion~="slide-right"] { transform: translate3d(calc(var(--m-dist) * -1.6), 0, 0); }
.motion-ready [data-motion~="scale-in"]    { transform: scale(.94); }
.motion-ready [data-motion~="mask-up"]     { transform: translate3d(0, .5em, 0); filter: blur(6px); transition-property: opacity, transform, filter; }

/* clip-reveal: klippet ligger på barnet – IntersectionObserver räknar inte element med clip-path som synliga. */
.motion-ready [data-motion~="clip-reveal"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path calc(var(--m-dur) * 1.4) var(--m-ease);
  transition-delay: var(--m-delay, 0ms);
}
.motion-ready [data-motion~="clip-reveal"] img {
  transform: scale(1.12);
  transition: clip-path calc(var(--m-dur) * 1.4) var(--m-ease), transform calc(var(--m-dur) * 2) var(--m-ease);
  transition-delay: var(--m-delay, 0ms);
}

/* line-draw: på <svg> – alla path/line/polyline i den ritas. Ge dem pathLength="1". */
.motion-ready [data-motion~="line-draw"] :is(path, line, polyline, circle, rect) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset calc(var(--m-dur) * 2.2) var(--m-ease);
  transition-delay: var(--m-delay, 0ms);
}

/* ---------- Synligt läge ---------- */
.motion-ready [data-motion].is-in,
.motion-ready [data-motion~="stagger"].is-in > * {
  opacity: 1;
  transform: none;
  filter: none;
}
.motion-ready [data-motion~="clip-reveal"].is-in > * { clip-path: inset(0 0 0 0); }
.motion-ready [data-motion~="clip-reveal"].is-in img { transform: none; }
.motion-ready [data-motion~="line-draw"].is-in :is(path, line, polyline, circle, rect) { stroke-dashoffset: 0; }

/* ---------- Parallax ---------- */
[data-motion~="parallax-soft"] { will-change: transform; }

/* ---------- Hover / fokus ---------- */
[data-motion~="hover-lift"] {
  transition: transform 260ms var(--m-ease), box-shadow 260ms var(--m-ease);
}
[data-motion~="hover-lift"]:is(:hover, :focus-within) {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .28);
}
[data-motion~="img-zoom"] { overflow: hidden; }
[data-motion~="img-zoom"] img { transition: transform 700ms var(--m-ease); }
[data-motion~="img-zoom"]:is(:hover, :focus-within) img { transform: scale(1.05); }

/* Hover-lift + reveal på samma element: reveal-transitionen får inte fördröja hover. */
.motion-ready [data-motion~="hover-lift"].is-in { transition-delay: 0ms; }

/* ---------- Puls för CTA (frivillig, använd max en gång per sida) ---------- */
[data-motion~="cta-pulse"]::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0;
  animation: em-cta-pulse 2.8s var(--m-ease) 1.2s infinite;
  pointer-events: none;
}
[data-motion~="cta-pulse"] { position: relative; }
@keyframes em-cta-pulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.12); }
  100% { opacity: 0;   transform: scale(1.12); }
}

/* ---------- Respektera reducerad rörelse ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-motion],
  .motion-ready [data-motion~="stagger"] > *,
  .motion-ready [data-motion~="clip-reveal"] > *,
  .motion-ready [data-motion~="clip-reveal"] img,
  .motion-ready [data-motion~="line-draw"] :is(path, line, polyline, circle, rect) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  [data-motion~="hover-lift"], [data-motion~="img-zoom"] img { transition: none !important; }
  [data-motion~="hover-lift"]:is(:hover, :focus-within),
  [data-motion~="img-zoom"]:is(:hover, :focus-within) img { transform: none; }
  [data-motion~="cta-pulse"]::after { animation: none; }
}

/* ---------- v2: ambient (pausas utanför skärmen via .is-live) ---------- */
[data-motion~="float"] { animation: em-float 6s ease-in-out infinite; animation-play-state: paused; }
[data-motion~="float"].is-live { animation-play-state: running; }
@keyframes em-float { 50% { transform: translate3d(0, -10px, 0); } }

[data-motion~="drift"] { animation: em-drift 90s linear infinite; animation-play-state: paused; }
[data-motion~="drift"].is-live { animation-play-state: running; }
@keyframes em-drift { to { background-position: 400px 260px; } }

[data-motion~="flow"] .flow { stroke-dasharray: 3 18; stroke-linecap: round; animation: em-flow 1.6s linear infinite; animation-play-state: paused; }
[data-motion~="flow"].is-live .flow { animation-play-state: running; }
@keyframes em-flow { to { stroke-dashoffset: -42; } }

[data-motion~="pulse"] { position: relative; }
[data-motion~="pulse"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor;
  animation: em-pulse 2.6s ease-out infinite; animation-play-state: paused; pointer-events: none; }
[data-motion~="pulse"].is-live::after { animation-play-state: running; }
@keyframes em-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

[data-motion~="marquee"] { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
[data-motion~="marquee"] > .marquee-track { display: flex; width: max-content; gap: var(--marquee-gap, 2.5rem);
  animation: em-marquee var(--marquee-dur, 40s) linear infinite; animation-play-state: paused; }
[data-motion~="marquee"].is-live > .marquee-track { animation-play-state: running; }
[data-motion~="marquee"]:is(:hover, :focus-within) > .marquee-track { animation-play-state: paused; }
@keyframes em-marquee { to { transform: translate3d(calc(-50% - var(--marquee-gap, 2.5rem) / 2), 0, 0); } }

/* ---------- v2: pekare ---------- */
[data-motion~="tilt"] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 300ms var(--m-ease); transform-style: preserve-3d; }
[data-motion~="spotlight"] { position: relative; isolation: isolate; }
[data-motion~="spotlight"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgb(255 255 255 / .14)), transparent 60%); transition: opacity 300ms; }
[data-motion~="spotlight"]:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-motion~="float"], [data-motion~="drift"], [data-motion~="flow"] .flow, [data-motion~="pulse"]::after,
  [data-motion~="marquee"] > .marquee-track { animation: none !important; }
  [data-motion~="tilt"] { transform: none !important; }
}

/* ---------- v3: scroll och navigering ---------- */
html { scroll-padding-top: calc(var(--header-h, 80px) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Header som göms vid scroll nedåt – bara mobil. Headern ska vara position: sticky/fixed med top: 0.
   Göms med top (inte transform – transform gör headern till containing block och förstör mobilmenyn). */
@media (max-width: 760px) {
  [data-header-hide] { transition: top 280ms var(--m-ease), box-shadow 280ms; }
  [data-header-hide].is-hidden { top: calc(-1 * var(--header-h, 80px) - 8px) !important; }
}

/* Till toppen */
[data-totop] {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--totop-bottom, 0px) + max(16px, env(safe-area-inset-bottom)));
  z-index: 60; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 250ms, transform 250ms var(--m-ease), visibility 0s 250ms;
}
[data-totop].is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 250ms, transform 250ms var(--m-ease), visibility 0s; }
[data-totop] svg { width: 20px; height: 20px; }
[data-totop] .totop-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
[data-totop] .totop-ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); opacity: .55; }

/* Lässtapel */
[data-progress] { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; pointer-events: none; }
[data-progress] > span { display: block; height: 100%; background: var(--progress, currentColor); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Innehållsförteckning: aktivt avsnitt (komponenten stylar [aria-current]) */
nav[data-toc] a { transition: color 200ms, border-color 200ms; }

/* Swipe på mobil */
@media (max-width: 760px) {
  [data-swipe] { display: flex !important; gap: var(--swipe-gap, 14px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; padding-inline: var(--gutter, 20px); margin-inline: calc(-1 * var(--gutter, 20px)); scroll-padding-inline: var(--gutter, 20px); }
  [data-swipe]::-webkit-scrollbar { display: none; }
  [data-swipe] > * { flex: 0 0 var(--swipe-w, 84%); scroll-snap-align: start; }
}
[data-swipe-dots] { display: none; justify-content: center; gap: 8px; margin-top: 14px; }
@media (max-width: 760px) { [data-swipe-dots] { display: flex; } }
[data-swipe-dots] button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: currentColor; opacity: .25; }
[data-swipe-dots] button[aria-current="true"] { opacity: .9; width: 22px; border-radius: 4px; }

/* Pin-steps (process) – bara desktop */
@media (min-width: 1100px) {
  [data-motion~="pin-steps"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
  [data-motion~="pin-steps"] [data-pin-visual] { position: sticky; top: calc(var(--header-h, 80px) + 32px); aspect-ratio: 4 / 3; }
  [data-motion~="pin-steps"] [data-pin-visual] > * { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--m-ease), transform 900ms var(--m-ease); transform: scale(1.04); }
  [data-motion~="pin-steps"] [data-pin-visual] > .is-active { opacity: 1; transform: none; }
  [data-motion~="pin-steps"] [data-pin-step] { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity 400ms; }
  [data-motion~="pin-steps"] [data-pin-step].is-active { opacity: 1; }
  [data-motion~="pin-steps"] [data-pin-mobile] { display: none; }
}
@media (max-width: 1099.98px) { [data-motion~="pin-steps"] [data-pin-visual] { display: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-header-hide] { transition: none !important; }
  [data-totop], [data-progress] > span, [data-motion~="pin-steps"] * { transition: none !important; }
}

/* ---------- v4: rubriker ---------- */
[data-motion~="split-up"] .w, [data-motion~="text-scrub"] .w { display: inline-block; }
[data-motion~="split-up"] .w { overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-motion~="split-up"] .w > span { display: inline-block; transition: transform 900ms var(--m-ease); transition-delay: calc(var(--m-delay, 0ms) + var(--wi, 0) * 55ms); }
.motion-ready [data-motion~="split-up"]:not(.is-in) .w > span { transform: translate3d(0, 105%, 0); }
.motion-ready [data-motion~="split-up"] { opacity: 1 !important; transform: none !important; }
[data-motion~="text-scrub"] .w > span { transition: color 250ms, opacity 250ms; }
.motion-ready [data-motion~="text-scrub"] .w:not(.is-lit) > span { opacity: var(--scrub-dim, .22); }

/* ---------- v4: bildspel ---------- */
.slides-js [data-slide] { display: none; }
.slides-js [data-slide].is-aktiv { display: block; animation: em-slide-in 600ms var(--m-ease); }
@keyframes em-slide-in { from { transform: translate3d(24px, 0, 0); } to { transform: none; } }

/* ---------- v4: pekare ---------- */
[data-motion~="magnetic"] { transform: translate3d(var(--mgx, 0px), var(--mgy, 0px), 0); transition: transform 300ms var(--m-ease); }
.em-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--cursor, currentColor); mix-blend-mode: var(--cursor-blend, normal); opacity: 0; display: grid; place-items: center;
  transition: width 250ms var(--m-ease), height 250ms var(--m-ease), margin 250ms var(--m-ease), opacity 200ms, background 250ms; }
.em-cursor.is-on { opacity: .9; }
.em-cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; opacity: .35; }
.em-cursor.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; opacity: 1; }
.em-cursor.is-text { width: 3px; height: 26px; margin: -13px 0 0 -1.5px; border-radius: 2px; }
.em-cursor span { font: 700 13px/1 var(--f-body, system-ui); color: var(--cursor-text, #fff); opacity: 0; transition: opacity 200ms; }
.em-cursor.is-label span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .em-cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-motion~="split-up"] .w > span { transform: none !important; transition: none !important; }
  .motion-ready [data-motion~="text-scrub"] .w > span { opacity: 1 !important; }
  .slides-js [data-slide].is-aktiv { animation: none; }
  [data-motion~="magnetic"] { transform: none !important; }
  .em-cursor { display: none; }
}