/* intrade.css — inträden när sektioner scrollas in. Kräver tokens.css och intrade.js.

   Byggt ur testuppgift 3 i animation-skillen (2026-10-09). Samis smak:
   - mask, svep eller glid hellre än ren opacity-fade ("tråk fadea standard", 2026-04-28)
   - ingen blur ("gillar inte att det är blur i animationerna", 2026-04-29)
   - aldrig en tom sektion: inträdet startar innan sektionen syns (2026-08-17)
   - bara innehållet rör sig; sektionens bakgrund står still (annars "som ett block som kommer in", 2026-07-20)
   - inte samma inträde överallt ("varje animation precis samma", 2026-10-02): tre varianter

   Markup: data-intrade på sektionen ("upp" är standard, "svep", "ned"), rubriken i en
   mask, och .in på det som ska komma in efter rubriken, i tur och ordning:
   <section data-intrade="svep">
     <h2 class="in-rubrik"><span>Rubrik</span></h2>
     <p class="in">Stycke</p> <p class="in">Stycke</p>
   </section>
   Rubriken ord för ord: data-ord på .in-rubrik. Varje ord får en egen mask och stiger 70 ms
   efter det förra [OMÄTT]. Intrade.ord(rubrik, text) byter texten och låter orden stiga igen,
   t.ex. när en flik byts (2026-10-14, Företagsdata: "bling" på hero).
   Utan JS, eller med prefers-reduced-motion, syns allt direkt. Tider: 0,9 s och 90 ms
   mellan raderna är testbyggets val [OMÄTT].
   Läs in intrade.js i <head> UTAN defer: annars hinner innehållet synas och sedan döljas. */

/* Masken: luft upptill så att å, ä och ö inte klipps (Stabilera-lärdomen). */
.in-rubrik { display: block; overflow: hidden; padding: .14em 0 .12em; margin-top: -.14em; }
.in-rubrik > span { display: block; }

.js-intrade [data-intrade] .in-rubrik > span,
.js-intrade [data-intrade] .in { transition: transform .9s var(--kurva-expo), clip-path .9s var(--kurva-expo); }
.js-intrade [data-intrade] .in { transition-delay: calc(var(--i, 1) * 90ms); }

/* upp (standard): rubriken stiger ur masken, raderna avtäcks uppifrån och glider upp */
.js-intrade [data-intrade]:not(.syns) .in-rubrik > span { transform: translateY(105%); }
.js-intrade [data-intrade]:not(.syns) .in { clip-path: inset(0 0 100% 0); transform: translateY(28px); }
/* svep: från vänster */
.js-intrade [data-intrade="svep"]:not(.syns) .in-rubrik > span { transform: translateX(-14%); clip-path: inset(0 100% 0 0); }
.js-intrade [data-intrade="svep"]:not(.syns) .in { clip-path: inset(0 100% 0 0); transform: translateX(-28px); }
/* ned: avtäcks uppifrån och ned */
.js-intrade [data-intrade="ned"]:not(.syns) .in-rubrik > span { clip-path: inset(0 0 100% 0); transform: translateY(-30%); }

/* ord: varje ord stiger ur sin egen mask, ett i taget. Animation, inte transition, så att nya ord
   (Intrade.ord) stiger av sig själva när sektionen redan syns. */
.in-ord { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .12em; margin: -.14em 0 -.12em; }
.in-ord > span { display: inline-block; }
/* Innan orden är delade står rubriken nere i sin mask (olsson-framat.se 2026-10-14: den syntes hel, försvann och steg
   sedan, eftersom delningen väntar på DOMContentLoaded). Delad: spanen står still och orden bär rörelsen. */
.js-intrade [data-intrade] .in-rubrik[data-ord]:not([data-ord="delad"]) > span { transform: translateY(105%); transition: none; }
.js-intrade [data-intrade] .in-rubrik[data-ord="delad"] > span { transform: none; clip-path: none; transition: none; }
.js-intrade [data-intrade]:not(.syns) .in-ord > span { transform: translateY(105%); }
.js-intrade [data-intrade].syns .in-ord > span { animation: in-ord .9s var(--kurva-expo) backwards; animation-delay: calc(var(--j, 0) * 70ms); }
@keyframes in-ord { from { transform: translateY(105%); } }

/* streck: ett ord vars understrykning dras från vänster när ORDET syns (intrade.js lägger .syns på ordet; olsson-framat.se:s
   markerade ord, OFWEB-P2-02, 2026-10-14). Ordet behåller sin egen text-decoration (rak eller vågig, tjocklek,
   avstånd): en kopia med genomskinlig text bär strecket och avtäcks, så strecket hamnar exakt där det låg.
   Markup: <span class="in-streck" data-text="design">design</span>, med understrykningen satt i sajtens CSS och
   dess färg i --streck-farg. --s är ordningen när flera streck finns i samma sektion, --streck-start när det
   första börjar (standard .45s efter att sektionen syns). Kopian syns inte för
   skärmläsare (content … / ""). Utan JS eller med minska rörelse står ordets egen understrykning kvar. */
.in-streck { position: relative; }
.js-intrade .in-streck { text-decoration-color: transparent; }
.js-intrade .in-streck::after {
  content: attr(data-text); content: attr(data-text) / "";
  position: absolute; left: 0; top: 0; white-space: nowrap; color: transparent; pointer-events: none;
  text-decoration-line: underline; text-decoration-style: inherit; text-decoration-thickness: inherit;
  text-underline-offset: inherit; text-decoration-color: var(--streck-farg, currentColor);
  clip-path: inset(-.5em 100% -.5em 0);
  transition: clip-path .9s var(--kurva-expo);
  transition-delay: calc(var(--streck-start, .45s) + var(--s, 0) * 280ms);
}
.js-intrade .in-streck.syns::after { clip-path: inset(-.5em 0 -.5em 0); }

@media (prefers-reduced-motion: reduce) {
  .js-intrade [data-intrade] .in-ord > span { animation: none; transform: none !important; }
  .js-intrade [data-intrade] .in-rubrik > span, .js-intrade [data-intrade] .in { transition: none; transform: none !important; clip-path: none !important; }
}