/* 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; }
.js-intrade [data-intrade] .in-rubrik[data-ord] > 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%); } }

@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; }
}