/* Start custom CSS *//* ===== 100%-meter =====
   De ring en het getal lopen van 0 naar 100% terwijl je naar de meter scrollt,
   en de ring kleurt mee van rood via oranje naar groen.
   Werkt zonder JavaScript (scroll-gestuurde CSS-animatie).
   Browsers die dit niet kennen, of bezoekers met 'minder beweging', zien direct een groene 100%. */
@property --jdj-score { syntax: '<integer>'; initial-value: 100; inherits: true; }

#score-meter .meter-voortgang { stroke-dasharray: 553; stroke-dashoffset: 0; color: #2BA84A; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #score-meter { view-timeline-name: --jdj-meter; animation: jdj-teller linear both; animation-timeline: --jdj-meter; animation-range: entry 15% cover 50%; }
    #score-meter .meter-voortgang { animation: jdj-ring linear both; animation-timeline: --jdj-meter; animation-range: entry 15% cover 50%; }
    #score-getal { font-size: 0 !important; }
    #score-getal::after { content: counter(jdj-score) "%"; counter-reset: jdj-score var(--jdj-score); font-size: 4rem; }
  }
}

/* Kleuren: rood (#EF4336) > oranje (#FAAB40) > groen (#2BA84A) */
@keyframes jdj-ring {
  0%   { stroke-dashoffset: 553; color: #EF4336; }
  50%  { color: #FAAB40; }
  100% { stroke-dashoffset: 0;   color: #2BA84A; }
}
@keyframes jdj-teller { from { --jdj-score: 0; } to { --jdj-score: 100; } }/* End custom CSS */