/* Ailex — juice-kern (22-10-2026, klus "Ailex G1 juice-kern", Gustavo). Het uiterlijk bij juice.js: A1-A18 uit Diego's plan, de
   spanningsboog en de beloningsladder uit Camila's advies. Alleen transform/opacity (en de losse eigenschappen scale/translate) bewegen.
   Tijden: tik 80-120 ms, kaartjes 300-450 ms, feestjes <= 1,2 s (trede 3 <= 2,5 s) en altijd weg te tikken.
   Curves: veer var(--gk-veer), binnenkomen cubic-bezier(.05,.7,.1,1), weggaan cubic-bezier(.3,0,.8,.15).
   Rustig (.ju-rustig op <html>, prefers-reduced-motion): niets beweegt, kleur en tekst blijven. Laadt na gamekaart.css. */
:root { --ju-in: cubic-bezier(.05, .7, .1, 1); --ju-uit: cubic-bezier(.3, 0, .8, .15); }

/* ---------- A1 kaart uitdelen vanuit het denk-kaartje (vervangt het sprongetje gk-pop; de glans van .gk-nieuw blijft) ---------- */
.vb.gk-nieuw.ju-deel, .vb.ju-deel { animation: ju-deel 420ms var(--gk-veer) var(--ju-wacht, 0ms) both; }
@keyframes ju-deel {
  0% { opacity: 0; transform: translateY(var(--ju-dy, 40px)) rotate(var(--ju-rot, 3deg)) scale(.6); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ---------- A2 omdraaien: het antwoord komt als de voorkant van het denk-kaartje ---------- */
.msg .body.ju-draai { transform-origin: 30% 50%; backface-visibility: hidden; animation: ju-draai 450ms var(--ju-in) var(--ju-wacht, 0ms) both; }
@keyframes ju-draai { 0% { transform: perspective(900px) rotateY(-90deg); opacity: .3; } 45% { opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ---------- spanningsboog, stap 1 aankondigen: het denk-kaartje is de achterkant van een spelkaart, met één gloed vooraf ---------- */
.sg-bezig { position: relative; background-image: radial-gradient(rgba(91, 108, 255, .10) 1.5px, transparent 1.6px); background-size: 14px 14px; }
.sg-bezig.ju-aankondig::before { content: ""; position: absolute; inset: -4px; border-radius: 32px; pointer-events: none;
  box-shadow: 0 0 0 3px #FFC83D, 0 0 18px 4px rgba(255, 200, 61, .55); opacity: 0; animation: ju-gloed 600ms ease-out var(--ju-wacht, 0ms) both; }
@keyframes ju-gloed { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
/* A15 werkbank: het gereedschap (loep, laptop, hamer) rolt het venster in als het echte werk wisselt */
.sg-bezig.ju-wissel [data-ding-laag], .sg-bezig.ju-wissel .sg-bezig-t > b { animation: ju-rolin 300ms var(--gk-veer) var(--ju-wacht, 0ms) both; }
@keyframes ju-rolin { 0% { transform: translateY(-36px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- A4 rollende cijfers (slotrol per cijfer, 50 ms na elkaar) ---------- */
.ju-rol { font-variant-numeric: tabular-nums; }
.ju-rol .ju-lees { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ju-cijfer { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: -.12em; }
.ju-strook { display: block; transform: translateY(var(--ju-naar)); animation: ju-rol 400ms var(--gk-veer) var(--ju-wacht, 0ms) both; }
@keyframes ju-rol { 0% { transform: translateY(var(--ju-van)); } 100% { transform: translateY(var(--ju-naar)); } }
.ju-teken { display: inline-block; }

/* ---------- A5 drie rollen (dagkaart): stoppen na 500/650/800 ms, 6 px doorschieten en terug in 120 ms ---------- */
.ju-rollen { display: flex; gap: 6px; }
.ju-rolvak { flex: 1 1 0; height: 2.2em; overflow: hidden; border-radius: 12px; background: rgba(38, 42, 77, .08); }
.ju-rolband { display: block; transform: translateY(calc(var(--ju-n) * -2.2em)); animation: ju-rolstop var(--ju-stop) var(--ju-in) both; }
.ju-rolding { display: flex; height: 2.2em; align-items: center; justify-content: center; font-weight: 800; }
@keyframes ju-rolstop { 0% { transform: translateY(0); } 85% { transform: translateY(calc(var(--ju-n) * -2.2em - 6px)); } 100% { transform: translateY(calc(var(--ju-n) * -2.2em)); } }
.ju-rollen-af .ju-rolband { animation: none; }

/* ---------- A6 beloningskist + A3 glimkaart (trede 3) ---------- */
.m3g-feest.ju-feest { pointer-events: none; grid-template-areas: "s"; background: rgba(20, 16, 60, .35); }
.ju-feest > * { grid-area: s; }
.ju-feest.weg { animation: ju-weg 260ms var(--ju-uit) both; }
@keyframes ju-weg { to { opacity: 0; } }
.ju-stralen { width: 140vmax; height: 140vmax; pointer-events: none; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 0, .22) 0 10deg, transparent 10deg 30deg);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 75%);
  animation: ju-stralen-in 400ms ease-out 700ms both, ju-draaien 8s linear 700ms infinite; }
@keyframes ju-stralen-in { to { opacity: 1; } }
@keyframes ju-draaien { to { rotate: 360deg; } }
.ju-kist { position: relative; width: 112px; height: 92px; transform-origin: 50% 100%; animation: ju-kist 900ms var(--gk-veer) both, ju-kist-weg 200ms var(--ju-uit) 900ms forwards; }
.ju-kist-bak { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; border-radius: 10px 10px 16px 16px; background: #FFC83D; border: 4px solid #C48700;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .55), 0 6px 0 #8A5E00; }
.ju-kist-bak::after { content: ""; position: absolute; left: 50%; top: 10px; width: 18px; height: 22px; margin-left: -9px; border-radius: 5px; background: #262A4D; }
.ju-kist-deksel { position: absolute; left: -4px; right: -4px; top: 6px; height: 34px; border-radius: 22px 22px 6px 6px; background: var(--ju-kist, #FFD200);
  border: 4px solid #262A4D; transform-origin: 8% 100%; animation: ju-deksel 260ms var(--gk-veer) 640ms both; }
.ju-flits { position: absolute; left: 50%; top: 40%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 30%, rgba(255, 230, 120, .8) 45%, transparent 70%); opacity: 0; animation: ju-flits 400ms ease-out 700ms both; }
@keyframes ju-kist { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-8deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-8deg); }
  60% { transform: rotate(8deg) scale(1.05); } 80% { transform: scale(1.15); } }
@keyframes ju-kist-weg { to { transform: translateY(40px) scale(.7); opacity: 0; } }
@keyframes ju-deksel { 0% { transform: none; } 100% { transform: rotate(-38deg) translateY(-14px); } }
@keyframes ju-flits { 0% { opacity: 0; transform: scale(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(2); } }
.ju-waaier { position: relative; width: 1px; height: 1px; pointer-events: none; }
.ju-waaier i { position: absolute; left: -26px; top: -40px; width: 52px; height: 72px; border-radius: 10px; background: #fff; border: 3px solid var(--ju-kist, #FFD200);
  box-shadow: 0 4px 0 #262A4D; opacity: 0; animation: ju-waaier 420ms var(--gk-veer) both; }
.ju-waaier i:nth-child(1) { --ju-r: 0deg; --ju-x: 0px; animation-delay: 800ms; }
.ju-waaier i:nth-child(2) { --ju-r: -12deg; --ju-x: -70px; animation-delay: 860ms; }
.ju-waaier i:nth-child(3) { --ju-r: 12deg; --ju-x: 70px; animation-delay: 920ms; }
@keyframes ju-waaier { 0% { opacity: 0; transform: translateY(30px) scale(.4); } 60% { opacity: 1; } 100% { opacity: .0; transform: translate(var(--ju-x), -150px) rotate(var(--ju-r)) scale(1); } }
.ju-feest .m3g-feest-kaart { position: relative; overflow: hidden; animation: ju-kaart 420ms var(--gk-veer) 900ms both; }
@keyframes ju-kaart { 0% { opacity: 0; transform: scale(.5) rotate(-4deg); } 100% { opacity: 1; transform: none; } }
/* A3 glim: regenboogstreep die met de kanteling meeschuift (--ju-mx/--ju-my uit MarthaMotion.setTilt), plus één veeg bij het verschijnen */
.ju-glim::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 120, 200, .55) 40%, rgba(120, 220, 255, .55) 50%, rgba(255, 240, 120, .55) 60%, transparent 75%),
    radial-gradient(circle at var(--ju-mx, 50%) var(--ju-my, 50%), rgba(255, 255, 255, .7), transparent 45%);
  background-size: 250% 250%, 100% 100%; background-position: var(--ju-mx, 50%) var(--ju-my, 50%), 0 0; }
.ju-glim::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 66%); transform: translateX(-120%); animation: gk-glans 600ms ease-out 1150ms both; }
.ju-feest .m3g-feest-kaart b[data-ju-lv] { display: inline-block; }

/* ---------- trede 1: squash bij afvinken (A7), 8 sterretjes; A16 de boodschappentegel draait om naar "in je mandje" ---------- */
.ju-plof { animation: ju-plof 260ms var(--gk-veer) both; }
@keyframes ju-plof { 0% { transform: scale(1, 1); } 35% { transform: scale(1.15, .88); } 70% { transform: scale(.95, 1.05); } 100% { transform: scale(1); } }
.ak-tegel.af.ju-plof { animation: ju-om 300ms var(--ju-in) both; }
@keyframes ju-om { 0% { transform: perspective(600px) rotateY(-90deg) scale(1.1, .9); } 60% { transform: perspective(600px) rotateY(0) scale(.95, 1.05); } 100% { transform: none; } }
.gk-sprank::after { box-shadow: 0 -22px 0 #FFC83D, 16px -16px 0 currentColor, 22px 0 0 #FF6B8A, 16px 16px 0 #FFC83D, 0 22px 0 currentColor,
  -16px 16px 0 #FF6B8A, -22px 0 0 #FFC83D, -16px -16px 0 currentColor; }

/* ---------- trede 2: stempel "Klaar!" ---------- */
.ju-stempel { position: absolute; right: 10px; top: 8px; z-index: 4; pointer-events: none; padding: 4px 12px; border: 3px solid #1E8A45; border-radius: 10px;
  color: #1E8A45; background: rgba(255, 255, 255, .9); font-style: normal; font-weight: 800; font-size: 18px; letter-spacing: .02em;
  transform: rotate(-8deg); animation: ju-stempel 300ms var(--gk-veer) 100ms both; }
@keyframes ju-stempel { 0% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }

/* ---------- A11 wisselen tussen werelden ---------- */
#sheetBody.ju-wereld-in { animation: ju-wereld 350ms var(--ju-in) var(--ju-wacht, 0ms) both; }
@keyframes ju-wereld { 0% { opacity: 0; transform: translateX(40px) rotate(3deg); } 100% { opacity: 1; transform: none; } }

/* ---------- A13 knoppen deuken in (losse eigenschap scale, botst niet met bestaande transforms) ---------- */
.vb-knop, .ak-tegel, .pl-tegel, .pl-k, .sg-keuze button, #btnMic, #composeSend, .nb button, .ailex-stop { transition: scale 260ms var(--gk-veer); }
.vb-knop:active, .ak-tegel:active, .pl-tegel:active, .pl-k:active, .sg-keuze button:active, #btnMic:active, #composeSend:active, .nb button:active, .ailex-stop:active {
  scale: .94; transition: scale 80ms ease-out; }

/* ---------- A9 Moppie leeft mee: hupje op de stem, oren spitsen bij luisteren, lampje flikkert bij denken ---------- */
.m3g-pip .m3g-pip-lijf { translate: 0 calc(var(--ju-golf, 0) * -3px); transition: translate 80ms linear; }
html[data-ailex-stand="luistert"] .m3g-pip { rotate: -4deg; translate: 0 -2px; transition: rotate 200ms var(--gk-veer), translate 200ms var(--gk-veer); }
html[data-ailex-stand="denkt"] .m3g-pip [data-ding-laag="lampje"] { animation: ju-flikker 1.2s ease-in-out infinite; }
@keyframes ju-flikker { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- A10 luistergolf rond Praten: volgt het stemvolume; in de stiltetijd loopt de ring leeg ---------- */
#btnMic { position: relative; }
.ju-luisterring { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; border: 3px solid #4453E0;
  transform: scale(calc(1 + var(--ju-vol, 0) * .4)); transition: transform 100ms linear, opacity 150ms; }
#btnMic.ju-hoort .ju-luisterring { opacity: .8; }
#btnMic.ju-stilte .ju-luisterring { border-color: transparent; opacity: .9; transform: none;
  background: conic-gradient(#4453E0 calc(var(--ju-over, 0) * 360deg), transparent 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
html[data-ailex-stand="luistert"] #btnMic.ju-hoort { animation: none; }   /* de vaste puls van stem.js wijkt voor de echte golf */

/* ---------- A14 karaoke: de zin die klinkt krijgt een gele markeerstreep die meegroeit met de audio ---------- */
.ju-zin { position: relative; isolation: isolate; }
.ju-zin.nu { font-weight: 700; }
.ju-zin.nu::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: .42em; z-index: -1; border-radius: 4px; background: #FFE27A;
  transform-origin: 0 50%; animation: ju-markeer var(--ju-duur, 1500ms) linear both; }
@keyframes ju-markeer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- A12 schud, A18 confetti-doek ---------- */
.ju-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9860; pointer-events: none; }

/* ---------- rustig: niets beweegt, kleur en tekst blijven staan (WCAG 2.3.3) ---------- */
.ju-rustig .ju-deel, .ju-rustig .ju-draai, .ju-rustig .ju-aankondig::before, .ju-rustig .ju-wissel [data-ding-laag], .ju-rustig .ju-wissel .sg-bezig-t > b,
.ju-rustig .ju-strook, .ju-rustig .ju-rolband, .ju-rustig .ju-feest *, .ju-rustig .ju-feest, .ju-rustig .ju-plof, .ju-rustig .ju-stempel,
.ju-rustig #sheetBody.ju-wereld-in, .ju-rustig .ju-zin.nu::after, .ju-rustig .m3g-pip [data-ding-laag], .ju-rustig .ju-glim::after { animation: none !important; }
.ju-rustig .ju-stralen, .ju-rustig .ju-kist, .ju-rustig .ju-waaier, .ju-rustig .ju-glim::before, .ju-rustig .ju-confetti, .ju-rustig .ju-luisterring { display: none !important; }
.ju-rustig .m3g-pip, .ju-rustig .m3g-pip .m3g-pip-lijf { translate: none !important; rotate: none !important; }
.ju-rustig .ju-zin.nu::after { transform: none; }
.ju-rustig *:active { scale: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ju-deel, .ju-draai, .ju-aankondig::before, .ju-wissel [data-ding-laag], .ju-strook, .ju-rolband, .ju-feest, .ju-feest *, .ju-plof, .ju-stempel,
  #sheetBody.ju-wereld-in, .ju-zin.nu::after { animation: none !important; }
  .ju-stralen, .ju-kist, .ju-waaier, .ju-glim::before, .ju-confetti { display: none !important; }
}