/* ========================================
   VOLTUX — STERKTEMETER VOOR EEN WACHTWOORD
   ========================================
   Vier balkjes die meelopen met het aantal gehaalde eisen (2026-11-09, keuze gebruiker —
   naar AIMRAN Library). Gevuld door voltuxWwTeken() in /shared/voltux-wachtwoord.js, dat
   data-niveau="0".."4" op de houder zet.

   🔑 Er staat GEEN woord bij ("zwak", "goed"). De vier eisen eronder zeggen al in zijn
   eigen taal wát er nog mist, en dat is preciezer dan één bijvoeglijk naamwoord. Het
   scheelt ook vijf nieuwe sleutels in vijf talen die niets toevoegen.
   ⚠️ Daarom is de meter aria-hidden: wie hem niet ziet, mist niets — de eisenlijst is de
   tekstversie. Ga hier dus nooit kleur gebruiken als énige drager van informatie.

   Richting: de balkjes vullen van begin naar eind, dus transform-origin logisch
   (inline-start). In het Arabische portaal lopen ze daardoor vanzelf van rechts naar links.
   ======================================== */

.vx-ww-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
    margin-top: var(--space-2);
    --vx-ww-kleur: var(--dark-300);
}

.vx-ww-meter > i {
    position: relative;
    overflow: hidden;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--dark-200);
}

.vx-ww-meter > i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--vx-ww-kleur);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}
[dir="rtl"] .vx-ww-meter > i::after { transform-origin: right; }

.vx-ww-meter[data-niveau="1"] { --vx-ww-kleur: var(--danger-500); }
.vx-ww-meter[data-niveau="2"] { --vx-ww-kleur: var(--warning-solid-500); }
.vx-ww-meter[data-niveau="3"] { --vx-ww-kleur: var(--green-400); }
.vx-ww-meter[data-niveau="4"] { --vx-ww-kleur: var(--green-500); }

.vx-ww-meter[data-niveau="1"] > i:nth-child(-n + 1)::after,
.vx-ww-meter[data-niveau="2"] > i:nth-child(-n + 2)::after,
.vx-ww-meter[data-niveau="3"] > i:nth-child(-n + 3)::after,
.vx-ww-meter[data-niveau="4"] > i::after {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .vx-ww-meter > i::after { transition-duration: 0.01ms; }
}