/* Presenter · webbsidan. Motorerna: scrolldrivna animationer driver --ps-p från 0 till 1.
   Allt annat räknas ur --ps-p med calc() och clamp(). Utan animation-timeline (klassen no-sda) sätter
   skriptet --ps-p själv, med samma intervall. Här finns också lägena utan skript och med reducerad rörelse. */

@keyframes ps-driv { from { --ps-p: 0; } to { --ps-p: 1; } }
@keyframes ps-mobil { from { --ps-m: 0; } to { --ps-m: 1; } }

/* Pinnade scener drivs av sektionens egen tidslinje. */
.pres-sida.sda .hjalte { view-timeline: --ps-hjalte block; }
.pres-sida.sda .hjalte-pin { animation: ps-driv linear both; animation-timeline: --ps-hjalte; animation-range: contain 0% contain 100%; }
.pres-sida.sda .princip { view-timeline: --ps-princip block; }
.pres-sida.sda .princip-pin { animation: ps-driv linear both; animation-timeline: --ps-princip; animation-range: contain 0% contain 100%; }
.pres-sida.sda .former { view-timeline: --ps-former block; }
.pres-sida.sda .former-pin { animation: ps-driv linear both; animation-timeline: --ps-former; animation-range: entry 45% contain 74%; }
.pres-sida.sda .rorelse { view-timeline: --ps-rorelse block; }
.pres-sida.sda .rorelse-pin { animation: ps-driv linear both; animation-timeline: --ps-rorelse; animation-range: contain 0% contain 100%; }
/* Rubriken sitter i den pinnade scenen och drivs därför av sektionens tidslinje, inte sin egen. */
.pres-sida.sda .rorelse-rubrik { animation: ps-driv linear both; animation-timeline: --ps-rorelse; animation-range: entry 0% entry 90%; }
.pres-sida.sda .fot { view-timeline: --ps-fot block; }
.pres-sida.sda .fot-ord { animation: ps-driv linear both; animation-timeline: --ps-fot; animation-range: entry 0% entry 100%; }

/* Fria element drivs av sin egen synlighet. */
.pres-sida.sda .tangenter-rubrik, .pres-sida.sda .jag-rubrik, .pres-sida.sda .efter-rubrik,
.pres-sida.sda .ladan-rubrik, .pres-sida.sda .fragor-rubrik, .pres-sida.sda .start-rubrik {
  animation: ps-driv linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;
}
.pres-sida.sda .steg { animation: ps-driv linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
.pres-sida.sda .teman-svep { animation: ps-driv linear both; animation-timeline: view(); animation-range: cover 25% cover 75%; }
.pres-sida.sda .granska { animation: ps-driv linear both; animation-timeline: view(); animation-range: cover 15% cover 85%; }
.pres-sida.sda .efter-del { animation: ps-driv linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
.pres-sida.sda .eftertext > div { animation: ps-driv linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
.pres-sida.sda .start-steg li { animation: ps-driv linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }

/* ---------- Mätning och väntan på typsnitten ---------- */
.pres-sida .matt { --ps-p: 1 !important; animation: none !important; }
.pres-sida .matt .l { animation: none !important; transition: none !important; --ps-in: 1 !important; --pk: 0 !important; --ps-wv: 0 !important; transform: none !important; opacity: 1 !important; }
.pres-sida .matt .w, .pres-sida .matt.ordfalt .w { --q: 1 !important; transform: none !important; }
.pres-sida.js:not(.typ-klar) .h1-stor .l,
.pres-sida.js:not(.typ-klar) .ordmarke .l,
.pres-sida.js:not(.typ-klar) .h1-ord-inner,
.pres-sida.js:not(.typ-klar) .hjalte-text,
.pres-sida.js:not(.typ-klar) .film-ram { animation-play-state: paused; }

/* Lenis, den mjuka rullningen (vendor/lenis). Klasserna sätts på html av Lenis själv. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Utan skript: allt står i sitt färdiga läge ---------- */
.pres-sida:not(.js) [data-sd]:not(.hjalte-pin), .pres-sida:not(.js) .eftertext > div, .pres-sida:not(.js) .fot-ord,
.pres-sida:not(.js) .steg, .pres-sida:not(.js) .efter-del,
.pres-sida:not(.js) .tangenter-rubrik, .pres-sida:not(.js) .jag-rubrik, .pres-sida:not(.js) .efter-rubrik,
.pres-sida:not(.js) .ladan-rubrik, .pres-sida:not(.js) .fragor-rubrik, .pres-sida:not(.js) .start-rubrik,
.pres-sida:not(.js) .rorelse-rubrik, .pres-sida:not(.js) .start-steg li { --ps-p: 1; }
.pres-sida:not(.js) .granska { --ps-p: 0; }
.pres-sida:not(.js) .klick-tankar li { opacity: 1; transform: none; }
.pres-sida:not(.js) .klick-tankar li .l { --ps-lw: var(--wd-max); --ps-lg: var(--wg-max); }
.pres-sida:not(.js) .klick-rubrik { display: none; }
.pres-sida:not(.js) .klick { height: auto; }
.pres-sida:not(.js) .klick-pin { position: relative; height: auto; }
.pres-sida:not(.js) .princip { height: auto; }
.pres-sida:not(.js) .princip-pin { position: relative; height: auto; min-height: 0; padding-bottom: 10vh; }
.pres-sida:not(.js) .duaidu { --ps-slut: 1; }
.pres-sida:not(.js) .led { --f: 1; }
.pres-sida:not(.js) .tangentvisning { gap: 48px; }
.pres-sida:not(.js) .tv { grid-area: auto; visibility: visible; }
.pres-sida:not(.js) .tv-bild { clip-path: none; }
.pres-sida:not(.js) .tv-teman img:first-child { clip-path: none; }
.pres-sida:not(.js) .tangenter-yta { position: relative; top: auto; }
.pres-sida:not(.js) .tangenter-spar { display: none; }
.pres-sida:not(.js) .tangenter-lead, .pres-sida:not(.js) .tangentbord, .pres-sida:not(.js) .tangentrad { display: none; }
.pres-sida:not(.js) .rorelse { height: auto; }
.pres-sida:not(.js) .rorelse-pin { position: relative; height: auto; }
.pres-sida:not(.js) .remsa { width: auto; transform: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 48px var(--gap); margin-top: 5vh; }
.pres-sida:not(.js) .klipp { width: auto; --c: 1; }

/* ---------- Stående format ---------- */
@media (max-width: 760px) {
  .pres-sida .klick { height: calc(100vh + 7 * 52vh); }
  .pres-sida .klick-tankar { font-size: clamp(28px, 8.4vw, 44px); gap: 0.18em; }
  .pres-sida .klick-rubrik { font-size: clamp(56px, 19vw, 110px); }
  .pres-sida .klick-streck i { width: 9px; }
  .pres-sida .klick-hoger { gap: 10px; }
  .pres-sida .former { height: 210vh; }
  .pres-sida .ordfalt { font-size: clamp(34px, 10.4vw, 60px); }
}

/* ---------- Öppningen på mobilen och i stående format ----------
   Datorns öppning är pinnad och tar över scenen; här står den inte kvar, men rörelsen finns i liten skala.
   --ps-m går från 0 till 1 medan öppningen lämnar bilden (rubriken) och medan filmen når mitten (filmen):
   en våg går genom bokstäverna i det stora ordet (de tunnas och lyfts en i taget), orden i ”som rör sig.”
   glider undan ett i taget, och filmen breddas ut till skärmens kanter. */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  /* Rubriken når sidhuvudet efter ett par hundra pixlar: vågen och orden hinner sin väg innan dess. */
  .pres-sida.sda .hjalte-h1 { animation: ps-mobil linear both; animation-timeline: --ps-hjalte; animation-range: exit 0% exit 22%; }
  .pres-sida.sda .film { animation: ps-mobil linear both; animation-timeline: view(); animation-range: cover 25% cover 55%; }
  .pres-sida .h1-stor .l {
    --pk: clamp(0, 1 - max(var(--ps-m) * 3.4 - var(--i) * 0.11 - 0.3, 0.3 - var(--ps-m) * 3.4 + var(--i) * 0.11) / 0.3, 1);
    transform: translateY(calc((1 - var(--ps-in)) * 0.32em - var(--pk) * 0.1em));
  }
  /* Första ordet går först och fortast, så att raden drar ut sig i stället för att orden krockar. */
  .pres-sida .h1-ord { translate: calc(var(--ps-m) * -24vw * (1 + var(--j, 0) * 0.6)) 0; opacity: calc(1 - var(--ps-m) * 1.3); }
  .pres-sida .h1-ord:nth-child(1) { --j: 2; }
  .pres-sida .h1-ord:nth-child(2) { --j: 1; }
  .pres-sida .film {
    margin-inline: calc(-1 * var(--gut));
    clip-path: inset(0 calc(var(--gut) * (1 - var(--ps-m))) 0 calc(var(--gut) * (1 - var(--ps-m))));
  }
  .pres-sida .film-text { padding-inline: var(--gut); }
}

/* ---------- Du, AI, du på mobilen och i stående format ----------
   Samma gräns som öppningen (sida.js: desktopHero). Avsnittet pinnas inte; i stället står rubriken kvar
   överst medan spalterna rullar förbi under den. Varje ord, pil och spalt får sin egen väg genom bilden
   (--ps-p, som sida.js sätter efter spaltens läge): ordet och spalten är i tur när spalten är mitt i
   läsytan, och pilen ritas fram till ordet när spalten kommer in. Sista ordet står kvar, och när sista
   spalten är läst kommer de andra tillbaka (--ps-slut). */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .pres-sida .princip { height: auto; }
  .pres-sida .princip-pin { position: relative; height: auto; min-height: 0; overflow: visible; padding-top: calc(var(--head) + 7vh); padding-bottom: 11vh; }
  .pres-sida.sda .princip-pin { animation: none; }
  .pres-sida .duaidu {
    position: sticky; top: var(--head); z-index: 2;
    margin: 1vh calc(-1 * var(--gut)) 0; padding: 16px var(--gut) 24px;
    /* Texten som rullar in under rubriken tonar bort i dess nederkant. */
    background: linear-gradient(var(--bg) calc(100% - 16px), transparent);
    font-size: clamp(56px, 17vw, 150px); --dad-min: 72; --smal: 0.5;
  }
  /* Tryck sätts i Unbounded, som saknar breddaxel och redan är brett: det fetaste ordet behöver mindre grad. */
  .pres-sida[data-theme="tryck"] .duaidu { font-size: clamp(48px, 14vw, 130px); }
  /* Läsytans mitt är 0,47 av spaltens väg (strax under bildens mitt, under den klistrade rubriken).
     Orden har en smal yta, så att ett ord i taget är i tur; spalterna dämpas mjukare och senare. */
  .pres-sida .dad, .pres-sida .led { --d: max(var(--ps-p) - 0.47, 0.47 - var(--ps-p)); }
  .pres-sida .dad { --f: max(clamp(0, 1 - max(var(--d) - 0.06, 0) / 0.06, 1), var(--ps-slut)); }
  .pres-sida .dad-3 { --d: max(0.47 - var(--ps-p), 0); }
  .pres-sida .led { --f: clamp(0, 1 - max(var(--d) - 0.12, 0) / 0.1, 1); opacity: calc(0.45 + 0.55 * var(--f)); }
  .pres-sida .dad { --slut: var(--ps-slut); }
  .pres-sida .dad-pil { --rit: clamp(0, (var(--ps-p) - 0.25) / 0.14, 1); }
  .pres-sida .princip-led { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 1vh; }
}

/* ---------- Reducerad rörelse: samma innehåll, färdiga lägen, ingen pinning ---------- */
.pres-sida.rm *, .pres-sida.rm *::before, .pres-sida.rm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.pres-sida.rm [data-sd], .pres-sida.rm .eftertext > div, .pres-sida.rm .fot-ord, .pres-sida.rm .steg, .pres-sida.rm .efter-del,
.pres-sida.rm .tangenter-rubrik, .pres-sida.rm .jag-rubrik, .pres-sida.rm .efter-rubrik, .pres-sida.rm .ladan-rubrik,
.pres-sida.rm .fragor-rubrik, .pres-sida.rm .start-rubrik, .pres-sida.rm .rorelse-rubrik, .pres-sida.rm .start-steg li { --ps-p: 1; }
.pres-sida.rm .granska { --ps-p: 0; }
.pres-sida.rm .eftertext > div { --ew: var(--wd-max); }
.pres-sida.rm .l { --ps-in: 1 !important; opacity: 1; transform: none; }
.pres-sida.rm .hjalte, .pres-sida.rm .klick, .pres-sida.rm .former, .pres-sida.rm .rorelse, .pres-sida.rm .princip { height: auto; }
.pres-sida.rm .hjalte-pin, .pres-sida.rm .klick-pin, .pres-sida.rm .former-pin, .pres-sida.rm .rorelse-pin,
.pres-sida.rm .princip-pin { position: relative; height: auto; min-height: 0; }
.pres-sida.rm .princip-pin { padding-bottom: 10vh; }
/* Tangenterna: ingen rullsträcka; alla fem visningarna står under varandra, och tangenterna hoppar dit. */
.pres-sida.rm .tangenter-yta { position: relative; top: auto; }
.pres-sida.rm .tangenter-vanster { align-self: start; }
.pres-sida.rm .tangenter-spar { display: none; }
.pres-sida.rm .tangentvisning { gap: 48px; }
.pres-sida.rm .tv { grid-area: auto; visibility: visible; }
.pres-sida.rm .tv-bild { clip-path: none; }
/* top: auto, annars flyttar den klistrade regelns top (sidhuvudets höjd) ned rubriken över ingressen. */
.pres-sida.rm .duaidu { --ps-slut: 1; position: relative; top: auto; }
.pres-sida.rm .led { --f: 1; }
.pres-sida.rm .hjalte-pin { padding-bottom: 8vh; --ps-p: 0 !important; }
.pres-sida.rm .h1-stor, .pres-sida.rm .h1-kursiv, .pres-sida.rm .hjalte-text, .pres-sida.rm .film,
.pres-sida.rm .film-text, .pres-sida.rm .hjalte-kicker { transform: none !important; opacity: 1 !important; }
.pres-sida.rm .h1-stor .l { --pk: 0; }
.pres-sida.rm .h1-ord-inner { transform: none; }
.pres-sida.rm .klick-pin { display: block; padding-bottom: 10vh; }
.pres-sida.rm .klick-rubrik { transform: none; opacity: 1; margin: 6vh 0 4vh; }
.pres-sida.rm .klick-tankar li { opacity: 1; transform: none; }
.pres-sida.rm .klick-tankar li .l { --ps-lw: var(--wd-max); --ps-lg: var(--wg-max); }
.pres-sida.rm .klick-fot { display: none; }
.pres-sida.rm .former-pin { padding-bottom: 12vh; }
.pres-sida.rm .former-lead { opacity: 1; transform: none; margin-top: 5vh; }
.pres-sida.rm .rorelse-pin { padding-bottom: 10vh; }
.pres-sida.rm .remsa { width: auto; transform: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 48px var(--gap); margin-top: 5vh; }
.pres-sida.rm .klipp { width: auto; --c: 1; }
.pres-sida.rm .rorelse-fot, .pres-sida.rm .rorelse-rakn { display: none; }