/* Effektiv Media motionbibliotek v1 (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 (endast hover/fokus)
   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; }
}