/* ==========================================================================
   Merke — grain

   Kaklad textur som förskjuts i diskreta steg. Valet motiverat:

   feTurbulence  rasteriserar om HELA viewporten varje frame (30–60 % CPU på
                 1440p) och dör dessutom i cms/auto-editable.php:s DOMDocument-
                 passage, som gemener camelCase-attribut: baseFrequency ->
                 basefrequency. Därav också att lagret ligger utanför <main>.
   canvas        65k putImageData-skrivningar per frame på main thread,
                 konkurrerar med GSAP:s ticker.
   translate3d   ren compositor. Ingen paint, ingen layout, ingen main thread.

   mix-blend-mode är medvetet bortvalt på det globala lagret: på ett
   fullskärms-fixed-element tvingar det hela sidan in i en blend-grupp och
   slår ut GPU-rasteriseringen. Ljusa korn på mörk botten vid opacity .055
   läser som filmkorn ändå. Den LOKALA varianten får använda blend, eftersom
   dess grupp begränsas till hero-sektionen.
   ========================================================================== */

.mk-grain {
  position: fixed;
  inset: -50%;                /* 200 % × 200 % → ±10 % förskjutning exponerar aldrig kant */
  width: 200%;
  height: 200%;
  z-index: var(--mk-z-grain); /* 990 — under cookie-consent (9999) och admin-bar (10000) */
  pointer-events: none;
  opacity: var(--mk-grain-opacity);
  background-image: image-set(
    url("/assets/img/mk-noise-128.webp") type("image/webp"),
    url("/assets/img/mk-noise-128.png")  type("image/png"));
  background-image: -webkit-image-set(
    url("/assets/img/mk-noise-128.webp") type("image/webp"),
    url("/assets/img/mk-noise-128.png")  type("image/png"));
  background-repeat: repeat;
  background-size: 128px 128px;
  will-change: transform;
  contain: strict;            /* isolera från sidans layout och paint */
  animation: mk-grain var(--mk-grain-speed) steps(1, end) infinite;
}

/* Ljust tema: samma textur inverterad → mörka korn på ljus botten. */
[data-theme="light"] .mk-grain { filter: invert(1); }

/* Retina: 128 texlar ska mappa 1:1 mot device-pixlar, annars blir kornet
   klumpigt och tappar filmkänslan. */
@media (min-resolution: 2dppx) { .mk-grain { background-size: 64px 64px; } }
@media (min-resolution: 3dppx) { .mk-grain { background-size: 42.667px 42.667px; } }

/* 8 diskreta "filmframes". steps(1, end) gör hoppen hårda — en mjuk
   interpolering skulle läsa som glidning, inte som korn. */
@keyframes mk-grain {
  0%    { transform: translate3d(0, 0, 0); }
  12.5% { transform: translate3d(-7%, -4%, 0); }
  25%   { transform: translate3d(4%, -9%, 0); }
  37.5% { transform: translate3d(-3%, 6%, 0); }
  50%   { transform: translate3d(9%, 3%, 0); }
  62.5% { transform: translate3d(-6%, 8%, 0); }
  75%   { transform: translate3d(2%, -6%, 0); }
  87.5% { transform: translate3d(-9%, -2%, 0); }
}

/* Reduced motion: texturen STANNAR, den försvinner inte.
   Rörelsen är dekoration — kornet är identitet. */
@media (prefers-reduced-motion: reduce) {
  .mk-grain { animation: none; }
}

/* Lokal variant: blend-gruppen begränsas till sin förälder, så vi kan
   använda overlay mot hero-videon utan att dra in hela sidan. */
/* Lagret ärver mk-grain-animationen (±9 % förskjutning, tio hopp i sekunden).
   Var det exakt hero-stort blottades en remsa längs kanterna utan korn i varje
   hopp, och den hoppade runt — det lästes som att videon flimrade i kanten.
   124 % med 12 % överhäng räcker: 9 % av 124 % = 11,2 % < 12 %. Heron har
   overflow: clip, så överhänget syns aldrig. */
.mk-grain--local {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  mix-blend-mode: overlay;
  opacity: .1;
  z-index: 2;
  contain: layout paint;
}