/* ==========================================================================
   Merke — rörelse

   Allt drivs av CSS-transitions som mk-motion.js triggar genom att lägga på
   .is-in via IntersectionObserver. Ingen GSAP, ingen ScrollTrigger, ingen
   smooth scroll.

   Varför CSS och inte ett tween-bibliotek: GSAP:s ticker bygger på
   requestAnimationFrame, som pausas när fliken inte renderar. En tween som
   hunnit halvvägs fryser då mitt i och innehållet blir stående halvtransparent.
   CSS-transitions följer väggklockan och är antingen klara eller körs klart.

   Utgångslägena är grindade på html.anim-ready. Klassen sätts av ett
   inline-script i <head> — aldrig vid prefers-reduced-motion eller Save-Data —
   och rivs av en 2 500 ms watchdog om motorn inte kommer upp.
   ========================================================================== */

html.anim-ready [data-reveal],
html.anim-ready [data-rise] {
  opacity: 0;
  will-change: opacity, transform;
  /* 900 ms kändes trögt vid snabb scroll — innehållet hann inte fram. */
  transition: opacity 620ms var(--mk-ease-quart), transform 620ms var(--mk-ease-quart);
}
/* Satt av mk-motion.js på allt som redan syns vid sidladdning: på plats
   direkt, ingen intoning av det man redan tittar på. */
html.anim-ready .mk-instant { transition: none !important; transition-delay: 0s !important; }
html.anim-ready [data-reveal="left"]   { transform: translate3d(-3rem, 0, 0); }
html.anim-ready [data-reveal="right"]  { transform: translate3d(3rem, 0, 0); }
html.anim-ready [data-reveal="bottom"],
html.anim-ready [data-reveal=""]       { transform: translate3d(0, 3rem, 0); }
html.anim-ready [data-reveal="top"]    { transform: translate3d(0, -3rem, 0); }
html.anim-ready [data-reveal="shrink"] { transform: scale(1.08); }
html.anim-ready [data-rise]            { transform: translate3d(0, 2rem, 0); }

html.anim-ready [data-reveal].is-in,
html.anim-ready [data-rise].is-in {
  opacity: 1;
  transform: none;
}
/* Släpp will-change när animationen är klar — annars ligger varje element
   kvar på ett eget compositor-lager resten av besöket. */
html.anim-ready [data-reveal].is-in,
html.anim-ready [data-rise].is-in { will-change: auto; }

/* ---- Ordvis text-reveal ------------------------------------------------
   mk-motion.js delar upp texten i .mk-word > .mk-word__i. Masken klipper,
   inner-spannet glider upp. Fördröjningen per ord sätts inline av JS.
   ---------------------------------------------------------------------- */
.mk-word { display: inline-block; overflow: clip; vertical-align: bottom; }
.mk-word__i { display: inline-block; }
html.anim-ready [data-split] .mk-word__i {
  transform: translateY(105%);
  opacity: 0;
  transition: transform 800ms var(--mk-ease-quart), opacity 600ms linear;
}
html.anim-ready [data-split].is-in .mk-word__i { transform: none; opacity: 1; }

/* ---- Hero-entré --------------------------------------------------------
   Körs på load, inte på scroll — heron är alltid i vy.
   ---------------------------------------------------------------------- */
html.anim-ready [data-load] {
  animation: mk-load 1s var(--mk-ease-quart) both;
}
html.anim-ready [data-load="media"] { animation: mk-load-media 1.8s var(--mk-ease-quart) both; }
html.anim-ready [data-load="text"]  { animation-delay: .15s; }
html.anim-ready [data-load="tag"]   { animation-delay: .35s; }
html.anim-ready [data-load="item"]  { animation-delay: .45s; }

@keyframes mk-load {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes mk-load-media {
  from { transform: scale(1.08); }
  to   { transform: none; }
}

/* ---- Vilolägen för hover (inte dolda lägen — kan aldrig ge FOUC) ------ */
.mk-case__veil { opacity: 0; }
.mk-case__meta { opacity: 0; transform: translate3d(0, .75rem, 0); }
.mk-case__pill { opacity: 0; transform: translate(-50%, -50%) scale(.6); }

/* Den andra textkopian i letter-rise klonas av mk-ui.js. */
.mk-link__wrap { position: relative; overflow: clip; display: inline-block; vertical-align: bottom; }
.mk-link__t, .mk-link__t--dup { display: inline-block; }
.mk-link__t--dup { position: absolute; left: 0; top: 100%; }

/* ---- Bosses view transitions ------------------------------------------
   animations.css slår på cross-document view transitions sajtbrett. Med
   IntersectionObserver-baserade reveals ger det en snapshot av den gamla
   sidan medan observern redan kört på den nya — innehåll hinner blinka.
   ---------------------------------------------------------------------- */
@view-transition { navigation: none; }

/* ---- Ingen rörelse ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mk-marquee__track { animation: none !important; }
  .mk-case__img { transition: none !important; }
}
html.mk-no-motion .mk-marquee__track { animation: none; }