/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E351-cijferrol-kilometerteller/effect.css (04-10-2026), ongewijzigd. */
/* ==========================================================================
   E351 · Cijferrol als kilometerteller
   Elk cijfer is een rol van 0 tot 9 die naar de juiste stand draait, zoals de
   kilometerteller in een oud dashboard. De eenheden draaien het verst, dus het
   snelst. Alleen transform op de rollen; de vakjes en de glans staan stil.
   Instellen op .e351 met CSS-variabelen:
     --e351-vak       achtergrond van een cijfervakje (standaard #111)
     --e351-cijfer    kleur van de cijfers (standaard #f5f2ea)
     --e351-duur      hoe lang het draaien duurt (standaard 2200ms)
   ========================================================================== */

.e351-teller {
  display: inline-flex; align-items: center;
  font-size: clamp(34px, 5.2vw, 64px); line-height: 1; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.e351-rol { display: inline-flex; align-items: center; gap: .08em; }
.e351-kolom {
  position: relative; display: inline-block; width: .74em; height: 1.18em; overflow: hidden;
  border-radius: .12em; background: var(--e351-vak, #111); color: var(--e351-cijfer, #f5f2ea);
  text-align: center;
}
/* Stilstaande glans: maakt van het vakje een rolletje */
.e351-kolom::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(255,255,255,.06) 50%, rgba(0,0,0,0) 72%, rgba(0,0,0,.55) 100%);
}
.e351-strook { display: block; }
.e351-strook span { display: block; height: 1.18em; line-height: 1.18em; }
.e351-teken { display: inline-block; width: .32em; text-align: center; }
.e351-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e351-klaar .e351-strook {
    transition: transform var(--e351-duur, 2200ms) cubic-bezier(.25, .8, .25, 1);
    transition-delay: calc(var(--e351-i, 0) * 90ms);
  }
}