/* Gekopieerd uit NorthByte Lab, effect E259 (lab/effecten/E259-glans-over-knop, 04-10-2026). */
/* ==========================================================================
   E259 · Glans die over een knop glijdt
   Een schuine lichtstreep glijdt over de knop, als licht over goud of glas.
   Speelt bij hover en focus, één keer als de knop in beeld komt, bij een tik,
   en desgewenst rustig om de paar seconden (data-e259-herhaal). Alleen
   transform beweegt; de streep is een vast verloop.
   Instellen op .e259 met CSS-variabelen:
     --e259-glans   kleur van de streep (standaard rgba(255,255,255,.55))
     --e259-breedte breedte van de streep als deel van de knop (standaard .45)
     --e259-duur    duur van één veeg   (standaard 900ms)
   ========================================================================== */

.e259 { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.e259::after {
  content: ""; position: absolute; z-index: 1; top: -10%; bottom: -10%; left: 0;
  width: calc(var(--e259-breedte, .45) * 100%); pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, var(--e259-glans, rgba(255, 255, 255, .55)) 50%, transparent 100%);
  transform: translate3d(-130%, 0, 0) skewX(-18deg);
  opacity: 0;
}
.e259 > * { position: relative; z-index: 2; }
.e259:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    html:not([data-rm]) .e259:hover::after { animation: e259-veeg var(--e259-duur, 900ms) cubic-bezier(.4, 0, .2, 1) 1; }
  }
  html:not([data-rm]) .e259:focus-visible::after,
  html:not([data-rm]) .e259.e259-speel::after { animation: e259-veeg var(--e259-duur, 900ms) cubic-bezier(.4, 0, .2, 1) 1; }
}
@keyframes e259-veeg {
  0% { transform: translate3d(-130%, 0, 0) skewX(-18deg); opacity: 1; }
  100% { transform: translate3d(calc(100% / var(--e259-breedte, .45) + 40%), 0, 0) skewX(-18deg); opacity: 1; }
}