/**
 * Kids Digitaal - Animatielaag (kd-animaties.css)
 *
 * ALLEEN animaties en timing. Kleuren, maten, lay-out en lettergewichten
 * blijven exact zoals in leer-engine.css; dit bestand laadt erna en verrijkt
 * alleen de beweging. Gebaseerd op de goedgekeurde demo (animaties-demo.html):
 * langzamer en gefaseerd zodat elk feedbackmoment leesbaar is voor een kind.
 *
 * Admin-only via KD_ANIMATIES_LIVE in init.php; zonder dit bestand gedraagt
 * de engine zich exact zoals voorheen.
 */

/* ===== 1. Vraag-entree: titel en hint komen rustig binnen, antwoordkaarten
   worden een voor een 'uitgedeeld' met een licht kanteltje ===== */
.kd-question-text {
  animation: kdaTitleIn 0.6s var(--ease-out-back) backwards;
}
@keyframes kdaTitleIn {
  0%   { opacity: 0; transform: translateY(26px) scale(0.95); }
  60%  { transform: translateY(-5px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}

.kd-question-hint {
  animation: kdaHintIn 0.5s ease 0.35s backwards;
}
@keyframes kdaHintIn {
  from { opacity: 0; transform: translateY(8px); }
}

.kd-option-btn {
  animation: kdaOptIn 0.6s var(--spring) backwards;
}
.kd-option-btn:nth-child(1) { animation-delay: 0.15s; --kda-tilt: -2deg; }
.kd-option-btn:nth-child(2) { animation-delay: 0.28s; --kda-tilt: 2deg; }
.kd-option-btn:nth-child(3) { animation-delay: 0.41s; --kda-tilt: -2deg; }
.kd-option-btn:nth-child(4) { animation-delay: 0.54s; --kda-tilt: 2deg; }
.kd-option-btn:nth-child(n+5) { animation-delay: 0.65s; }
@keyframes kdaOptIn {
  0%   { opacity: 0; transform: translateY(42px) scale(0.86) rotate(var(--kda-tilt, 0deg)); }
  65%  { opacity: 1; transform: translateY(-7px) scale(1.03) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}

/* ===== 2. Goed antwoord: echte squash & stretch + ring-puls die naar
   buiten golft. Kleuren en glow blijven die van leer-engine.css ===== */
.kd-option-btn.correct {
  animation:
    kdaSquash 0.95s var(--ease-out-expo),
    kdaRing 0.9s var(--ease-out-expo);
}
@keyframes kdaSquash {
  0%   { transform: scale(1, 1); }
  22%  { transform: scale(1.16, 0.86); }
  45%  { transform: scale(0.93, 1.1); }
  65%  { transform: scale(1.07, 0.96); }
  82%  { transform: scale(0.99, 1.02); }
  100% { transform: scale(1, 1); }
}
@keyframes kdaRing {
  0%   { box-shadow: 0 10px 40px -10px var(--kd-success-glow), 0 0 0 0 var(--kd-success-glow); }
  100% { box-shadow: 0 10px 40px -10px var(--kd-success-glow), 0 0 0 22px rgba(0, 214, 143, 0); }
}

/* vinkje-pop een tikje rustiger zodat het leesbaar is */
.kd-option-btn.correct::after { animation-duration: 0.55s; }
.kd-option-btn.correct::before { animation-duration: 0.55s; }

/* ===== 3. Fout antwoord: langzamere, meelevende schud. Daarna zwaait het
   juiste antwoord een tel later naar je toe (alleen als er een fout
   gekozen is; bij direct goed gewoon de squash hierboven) ===== */
.kd-option-btn.incorrect {
  animation: kdaShake 0.75s var(--ease-out-expo);
}
@keyframes kdaShake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-16px) rotate(-2.5deg); }
  30% { transform: translateX(13px) rotate(2deg); }
  48% { transform: translateX(-9px) rotate(-1.5deg); }
  66% { transform: translateX(6px); }
  84% { transform: translateX(-3px); }
}

.kd-options-grid:has(.kd-option-btn.incorrect) .kd-option-btn.correct {
  animation:
    kdaReveal 1.05s var(--ease-out-back) 0.35s backwards,
    kdaRing 0.9s var(--ease-out-expo) 0.35s backwards;
}
@keyframes kdaReveal {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.1) rotate(-1.5deg); }
  50%  { transform: scale(0.97) rotate(1deg); }
  68%  { transform: scale(1.05); }
  85%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

/* ===== 4. Confetti-burst VANAF de knop (i.p.v. regen van boven):
   stukjes spatten omhoog uit het antwoord en dwarrelen neer ===== */
.kda-burst-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 240;
  overflow: hidden;
}
.kda-burst {
  position: absolute;
  border-radius: 2px;
  opacity: 0;
  animation: kdaBurstFly 1.3s var(--ease-out-expo) forwards;
}
.kda-burst.rond { border-radius: 50%; }
/* vuurwerk-pop: snel naar buiten spatten, rustig uitdoven ter plekke */
@keyframes kdaBurstFly {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.5); }
  18%  { opacity: 1; transform: translate(calc(var(--kda-tx) * 0.7), calc(var(--kda-ty) * 0.7)) rotate(calc(var(--kda-rot) * 0.6)) scale(1.1); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--kda-tx), var(--kda-ty)) rotate(var(--kda-rot)) scale(0.35); }
}

/* ===== 5. Voortgangsbalk: vult met een veertje, in het tempo van de
   duw-ster (de ster zelf wordt door leer-engine.js geplaatst) ===== */
.kd-progress-bar {
  transition: width 1.3s var(--ease-out-back);
}

.kd-anim-star {
  position: fixed;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  z-index: 160;
  pointer-events: none;
  transform: scale(0);
  transition: left 1.3s var(--ease-out-back);
}
.kd-anim-star svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.5));
}
.kd-anim-star.on {
  transform: scale(1);
  transition: left 1.3s var(--ease-out-back), transform 0.35s var(--ease-out-back);
}
.kd-anim-star.off {
  transform: scale(0);
  transition: transform 0.4s ease;
}
.kd-anim-star.pop svg { animation: kdaStarPulse 0.5s var(--ease-out-back); }
@keyframes kdaStarPulse {
  0%   { transform: scale(1) rotate(0); }
  50%  { transform: scale(1.5) rotate(14deg); }
  100% { transform: scale(1) rotate(0); }
}
.kd-anim-star::before,
.kd-anim-star::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--kd-warning);
  border-radius: 2px;
  opacity: 0;
  transform: rotate(45deg) scale(0);
}
.kd-anim-star.pop::before { left: -9px; top: -2px; animation: kdaSparkle 0.6s ease; }
.kd-anim-star.pop::after  { right: -9px; top: 14px; animation: kdaSparkle 0.6s ease 0.1s; }
@keyframes kdaSparkle {
  0%   { opacity: 0; transform: rotate(45deg) scale(0); }
  40%  { opacity: 1; transform: rotate(130deg) scale(1.25); }
  100% { opacity: 0; transform: rotate(210deg) scale(0.3); }
}

/* ===== 6. Streak: alleen de vaste oranje badge-pil van de engine zelf
   (.kd-streak-badge, onaangeroerd). De popup midden in beeld is bewust
   uitgeschakeld in leer-engine.js (2026-06-11). ===== */

/* ===== 7. Feest-achtergrond + homepage-vormpjes op de lespagina =====
   Zelfde sfeer als de homepage: zachte kleur in de vier hoeken, een fijn
   stipjes-raster, en losse vormpjes (ster, bolletjes, ring, driehoekje)
   langs de randen. Alles op een vaste laag ACHTER de content (z-index -1,
   pointer-events none): kaarten, tekst en knoppen blijven onaangeroerd wit
   en 100% leesbaar. Op een vaste laag i.p.v. background-attachment:fixed
   omdat iPads daar slecht mee omgaan. */
body.kd-leer-fullscreen { background: #FDFEFF; }
body.kd-leer-fullscreen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* zachte kleur in de vier hoeken (variant C feest); de losse vormpjes
       (.kda-deco) zijn de enige decoratie, geen stipjes-raster */
    radial-gradient(circle at 0% 0%, rgba(75, 173, 255, 0.14), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(0, 214, 143, 0.12), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.10), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(255, 190, 11, 0.12), transparent 45%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* De sticky header laat de sfeer doorschijnen (matglas): de achtergrond is
   zichtbaar, maar content die eronder doorscrollt vervaagt zodat de
   voortgangsbalk leesbaar blijft. */
body.kd-leer-fullscreen .kd-engine-header {
 
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Losse homepage-vormpjes (ster, bolletjes, ring, driehoekje) als eigen
   elementjes (geplaatst door leer-engine.js), zodat elk in zijn EIGEN tempo
   zacht kan verschijnen en verdwijnen. Bewust niet synchroon. */
.kda-deco {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.kda-deco span {
  position: absolute;
  display: block;
  animation: kdaTwinkle var(--kda-dur, 8s) ease-in-out var(--kda-del, 0s) infinite;
}
.kda-deco svg { display: block; width: 100%; height: 100%; }
.kda-deco .d-ster     { right: 6%; top: 17%; width: 26px; height: 26px; --kda-dur: 7s; }
.kda-deco .d-bol1     { left: 6%; top: 25%; width: 14px; height: 14px; border-radius: 50%; background: #2EC4B6; --kda-dur: 9s;  --kda-del: -3s; }
.kda-deco .d-ring     { left: 4%; top: 54%; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #FFA8B8; --kda-dur: 11s; --kda-del: -6s; }
.kda-deco .d-bol2     { right: 5%; top: 72%; width: 12px; height: 12px; border-radius: 50%; background: var(--kd-primary); --kda-dur: 8s; --kda-del: -1.5s; }
.kda-deco .d-driehoek { left: 12%; bottom: 17%; width: 18px; height: 18px; --kda-dur: 10s; --kda-del: -4.5s; }
@keyframes kdaTwinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.75); }
  50%      { opacity: 1;   transform: scale(1); }
}

@media (max-width: 600px) {
  .kda-deco .d-ster { width: 20px; height: 20px; }
  .kda-deco .d-bol1 { width: 11px; height: 11px; }
  .kda-deco .d-ring { width: 16px; height: 16px; border-width: 2.5px; }
  .kda-deco .d-bol2 { width: 9px; height: 9px; }
  .kda-deco .d-driehoek { width: 14px; height: 14px; }
}

/* ===== 8. Toegankelijkheid en kleine schermen ===== */
@media (max-width: 600px) {
  .kd-anim-star { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .kd-question-text,
  .kd-question-hint,
  .kd-option-btn,
  .kd-option-btn.correct,
  .kd-option-btn.incorrect,
  .kd-options-grid:has(.kd-option-btn.incorrect) .kd-option-btn.correct,
  .kd-anim-star,
  .kd-anim-star.pop svg,
  .kda-burst,
  .kda-deco span {
    animation: none !important;
  }
  .kd-progress-bar,
  .kd-anim-star { transition: none !important; }
}