/* Gekopieerd uit NorthByte Lab, effect E426 (lab/effecten/E426-code-in-losse-vakjes, 04-10-2026). */
/* ==========================================================================
   E426 · Code in losse vakjes
   Een code van zes tekens in losse vakjes, zoals een ophaalcode of een code uit
   een sms. Elk teken springt in zijn vakje, plakken vult alles in één keer en
   een complete code golft even. Onder de motorkap één gewoon invoerveld, dus
   plakken, automatisch invullen uit een sms en schermlezers werken gewoon.
   Alleen transform en opacity bewegen.
   Instellen op .e426 met CSS-variabelen:
     --e426-accent   kleur van het actieve vakje (standaard #6d28d9)
     --e426-vak      grootte van een vakje        (standaard 52px)
   ========================================================================== */

.e426 { display: grid; gap: 10px; }
.e426 > label { font-weight: 600; }
.e426-veld { position: relative; width: max-content; max-width: 100%; }
.e426-invoer {
  display: block; width: 100%; min-width: 240px; min-height: 56px; padding: 10px 14px; margin: 0; border-radius: 12px;
  border: 1.5px solid var(--e426-lijn, rgba(30, 20, 50, .2)); background: #fff; color: inherit;
  font: 700 22px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .35em; text-transform: uppercase;
}
.e426-invoer:focus { outline: 2px solid var(--e426-accent, #6d28d9); outline-offset: 2px; }
/* Met JavaScript ligt het echte veld onzichtbaar over de vakjes */
.js .e426-invoer {
  position: absolute; inset: 0; z-index: 2; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent;
  color: transparent; caret-color: transparent; letter-spacing: 0; font-size: 16px; opacity: 0;
}
.e426-vakjes { display: none; gap: 8px; }
.js .e426-vakjes { display: flex; }
.e426-vakje {
  position: relative; display: grid; place-items: center; width: var(--e426-vak, 52px); height: calc(var(--e426-vak, 52px) * 1.18);
  border-radius: 12px; border: 1.5px solid var(--e426-lijn, rgba(30, 20, 50, .2)); background: #fff;
  font: 700 24px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.e426-vakje b { display: block; font-weight: 700; }
.e426-vakje.is-gevuld { border-color: var(--e426-gevuld, rgba(30, 20, 50, .45)); }
.e426.is-focus .e426-vakje.is-actief { border-color: var(--e426-accent, #6d28d9); outline: 3px solid var(--e426-ring, rgba(109, 40, 217, .18)); outline-offset: 0; }
.e426-vakje.is-actief::after {
  content: ""; position: absolute; left: 50%; top: 25%; bottom: 25%; width: 2px; margin-left: -1px; background: var(--e426-accent, #6d28d9); opacity: 0;
}
.e426.is-focus .e426-vakje.is-actief::after { opacity: 1; }
.e426-streep { width: 10px; height: 2px; align-self: center; background: currentColor; opacity: .35; }
.e426.is-fout .e426-vakje { border-color: var(--e426-fout, #b42318); }
.e426.is-goed .e426-vakje { border-color: var(--e426-goed, #15803d); background: var(--e426-goed-vlak, #effaf2); }
@media (max-width: 420px) { .e426 { --e426-vak: 44px; } .e426-vakjes { gap: 6px; } }

.e426-hint { margin: 0; font-size: 14px; opacity: .75; }
.e426-melding { margin: 0; font-size: 15px; line-height: 1.5; }
.e426-melding:empty { display: none; }
.e426.is-fout .e426-melding { color: var(--e426-fout, #b42318); }
.e426-kaart { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--e426-goed-vlak, #effaf2); }
.e426-kaart[hidden] { display: none; }
.e426-kaart b { font-size: 18px; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e426-vakje b.e426-plop { animation: e426-plop .26s cubic-bezier(.3, 1.6, .5, 1); }
  html:not([data-rm]) .e426.is-focus .e426-vakje.is-actief::after { animation: e426-knipper 1s steps(1) infinite; }
  html:not([data-rm]) .e426.e426-golf .e426-vakje { animation: e426-golf .5s cubic-bezier(.3, 1.4, .5, 1); animation-delay: calc(var(--i, 0) * 50ms); }
  html:not([data-rm]) .e426-kaart:not([hidden]) { animation: e426-in .4s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes e426-plop { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes e426-knipper { 50% { opacity: 0; } }
@keyframes e426-golf { 40% { transform: translate3d(0, -8px, 0); } 100% { transform: none; } }
@keyframes e426-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }