/* ==========================================================================
   Sinterklaas.nl — voorleesknop
   Hoort bij assets/js/voorlezen.js en tools/genereer-voorlees-audio.py.
   Apart bestand zodat de audio-stijlen los van site.css te onderhouden zijn.
   ========================================================================== */

.vo-knop{
  display:inline-flex;align-items:center;gap:9px;
  margin:14px 0 0;padding:9px 17px 9px 13px;
  border:2px solid var(--green);border-radius:99px;
  background:var(--paper-light);color:var(--green);
  font:800 15px/1 "Source Sans 3",system-ui,sans-serif;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease;
}
.vo-knop:hover{background:var(--green);color:var(--paper-light)}
.vo-knop:active{transform:translateY(1px)}
.vo-knop:focus-visible{outline:3px dashed var(--red);outline-offset:3px}

/* het ronde vlakje waarin het icoon, de laadnootjes of de balkjes staan */
.vo-vak{
  position:relative;flex:0 0 auto;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
}
.vo-vak svg{width:22px;height:22px;display:block}
.vo-knop:hover .vo-icoon{fill:var(--paper-light);stroke:var(--paper-light)}
.vo-icoon{fill:var(--green);stroke:var(--green);transition:fill .18s ease,stroke .18s ease}

/* ---- laden: drie pepernoten die stuiteren -------------------------------- */
.vo-noten{display:none;gap:4px}
.vo-noten i{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:vo-stuiter .72s ease-in-out infinite;
}
.vo-noten i:nth-child(2){animation-delay:.12s}
.vo-noten i:nth-child(3){animation-delay:.24s}
@keyframes vo-stuiter{
  0%,100%{transform:translateY(2px);opacity:.45}
  50%{transform:translateY(-4px);opacity:1}
}

/* ---- spelen: balkjes die meebewegen ------------------------------------- */
.vo-balken{display:none;align-items:flex-end;gap:3px;height:17px}
.vo-balken i{
  width:3.5px;border-radius:99px;background:currentColor;
  animation:vo-golf .9s ease-in-out infinite;
}
.vo-balken i:nth-child(1){height:7px;animation-delay:0s}
.vo-balken i:nth-child(2){height:15px;animation-delay:.16s}
.vo-balken i:nth-child(3){height:10px;animation-delay:.32s}
.vo-balken i:nth-child(4){height:13px;animation-delay:.48s}
@keyframes vo-golf{
  0%,100%{transform:scaleY(.4)}
  50%{transform:scaleY(1)}
}

/* ---- toestandswissels ---------------------------------------------------- */
.vo-knop[data-staat="laden"]{background:var(--green);color:var(--paper-light);border-color:var(--green)}
.vo-knop[data-staat="laden"] .vo-icoon{display:none}
.vo-knop[data-staat="laden"] .vo-noten{display:flex}

.vo-knop[data-staat="speelt"]{background:var(--red);color:var(--paper-light);border-color:var(--red-dark)}
.vo-knop[data-staat="speelt"] .vo-icoon{display:none}
.vo-knop[data-staat="speelt"] .vo-balken{display:flex}

.vo-knop[data-staat="fout"]{border-color:#b6764a;color:#8d5730;background:#fdf0df}
.vo-knop[data-staat="fout"]:hover{background:#fdf0df;color:#8d5730}

/* Het stuk tekst dat op dit moment wordt voorgelezen, zacht gemarkeerd.
   Geen gradient-onderstreping: die tekent één band onder het hele blok in plaats
   van onder elke regel. Een vlak met een box-shadow eromheen geeft de indruk van
   binnenruimte zonder dat de tekst verspringt zodra het afspelen begint. */
.vo-actief{
  background:rgba(212,164,76,.22);
  box-shadow:0 0 0 8px rgba(212,164,76,.22);
  border-radius:4px;
  transition:background .25s ease,box-shadow .25s ease;
}

@media (prefers-reduced-motion:reduce){
  .vo-noten i,.vo-balken i{animation:none}
  .vo-balken i{transform:none}
}

@media (max-width:640px){
  .vo-knop{font-size:14px;padding:8px 15px 8px 11px}
}