/* =============================================================
   SM Verschijnen
   Koppen, tekst en knoppen komen rustig omhoog zodra hun sectie
   in beeld komt. Recept uit de pixfort-broncode: 0,4 seconde,
   1 rem omhoog, van 0,2 naar vol.

   Die 0,2 is het hele punt. Er verdwijnt nooit iets helemaal,
   dus een hapering kan nooit een leeg blok opleveren.

   Verschijnen hoort op TIJD, niet op scroll-afstand. Bij een
   vlotte veeg is een afstand-traject voorbij voordat je ogen
   scherpstellen, en dan lijkt er niets te gebeuren.

   De starthouding hangt aan html.sm-vs-aan, en die class zet het
   script pas nadat de kijker zonder fout is aangemaakt. Draait
   het script niet, dan staat alles er gewoon.

   Geen enkele shorthand voor transition: die zet de vertraging
   per element terug op nul, en dan komt alles tegelijk.
   ============================================================= */

.sm-vs-aan .sm-vs {
  opacity: .2;
  transform: translateY(1rem);
  transition-property: opacity, transform;
  transition-duration: .4s;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  transition-delay: var(--vs-d, 0ms);
  will-change: opacity, transform;
}

.sm-vs-aan .sm-vs.sm-vs-zicht {
  opacity: 1;
  transform: none;
}

/* zodra hij binnen is, alles opruimen: geen achterblijvende
   will-change op tientallen elementen */
.sm-vs-aan .sm-vs.sm-vs-klaar {
  will-change: auto;
  transition-property: none;
}

@media (prefers-reduced-motion: reduce) {
  .sm-vs-aan .sm-vs {
    opacity: 1;
    transform: none;
    transition-property: none;
    will-change: auto;
  }
}