/*
 * Slide-up per linje (v1.1 – bevarer formatering)
 * Legg klassen "slide-up-lines" på tekstblokken i blokkredigereren
 * (Avansert → Ekstra CSS-klasse(r)).
 *
 * Denne filen styrer KUN animasjonen. Fontstørrelse, line-height,
 * farger osv. styres som vanlig av temaet/WordPress.
 */

/* Skjul teksten til JavaScript har delt den opp,
   så uanimert tekst ikke blinker frem først */
.slide-up-lines {
  visibility: hidden;
}

.slide-up-lines.is-split {
  visibility: visible;
}

/* Maske rundt hvert ord. Alle ord på samme linje får samme
   forsinkelse, så visuelt glir hele linjen opp fra sin egen bunn –
   men formatering (lenker, fet, kursiv) bevares fordi vi aldri
   bygger om avsnittets struktur. */
.slide-up-lines .w-mask {
  display: inline-block;
  overflow: hidden;
  /* overflow: hidden flytter baseline til bunnkanten på
     inline-block; vertical-align: bottom hindrer at ordene
     hopper ut av stilling i forhold til hverandre */
  vertical-align: bottom;
}

/* Selve ordet som glir opp inne i masken */
.slide-up-lines .w-inner {
  display: inline-block;
  transform: translateY(110%);
}

.slide-up-lines.is-visible .w-inner {
  animation: pk-line-slide-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Forsinkelsen per linje settes av JavaScript via --line-delay */
  animation-delay: var(--line-delay, 0.3s);
}

@keyframes pk-line-slide-up {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* Respekter brukere som har slått av animasjoner i operativsystemet */
@media (prefers-reduced-motion: reduce) {
  .slide-up-lines {
    visibility: visible;
  }
  .slide-up-lines .w-inner {
    transform: none;
    animation: none !important;
  }
}