/* Banner animasi kartu template (partials/template-banner + partials/banner/*).
   Diam secara bawaan; bergerak saat kartu disorot/difokus, atau saat terlihat di perangkat sentuh (kelas .hidup dari app.js).
   Banner .terus (formulir, halaman karya) bergerak hanya saat terlihat dan berhenti sendiri setelah ±12 detik (app.js).
   Pengguna "kurangi animasi" melihat bingkai awal yang diam. */
.tpl-fx { display: block; padding: 0; }
.tpl-fx svg { display: block; width: 100%; height: 100%; font-family: inherit; }
.tpl-fx * { transform-box: fill-box; }
.tpl-fx .gerak { transform-origin: center; animation-play-state: paused; }
.tpl-fx .k { fill: var(--b1); }
.tpl-fx .ks { stroke: var(--b1); }
.aktivitas-card:hover .tpl-fx .gerak, .aktivitas-card:focus-within .tpl-fx .gerak, .tpl-fx.hidup .gerak { animation-play-state: running; }
/* Banner di atas formulir template: berdiri sendiri (bukan di dalam kartu) dan bergerak terus. */
.tpl-fx.form-banner { margin: 4px 0 16px; height: 120px; max-width: 560px; border-radius: var(--radius, 16px); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .tpl-fx .gerak { animation-play-state: paused !important; } }

/* kuis-pilihan-ganda */
@keyframes pg-sorot { 0%,12% { transform: none; opacity: 0 } 16% { opacity: 1 } 30%,44% { transform: none; opacity: 1 } 52%,88% { transform: translateY(20px); opacity: 1 } 96%,100% { transform: translateY(20px); opacity: 0 } }
@keyframes pg-salah { 0%,30% { fill: #fff } 33%,46% { fill: #fde2e2 } 50%,100% { fill: #fff } }
@keyframes pg-goyang { 0%,32% { transform: none } 35% { transform: translateX(-4px) } 38% { transform: translateX(4px) } 41% { transform: translateX(-3px) } 44%,100% { transform: none } }
@keyframes pg-benar { 0%,55% { fill: #fff } 60%,90% { fill: #d6f5e3 } 96%,100% { fill: #fff } }
@keyframes pg-centang { 0%,58% { stroke-dashoffset: 24; opacity: 0 } 64%,90% { stroke-dashoffset: 0; opacity: 1 } 96%,100% { opacity: 0 } }
@keyframes pg-skor { 0%,60% { transform: scale(0); opacity: 0 } 66% { transform: scale(1.25); opacity: 1 } 72%,90% { transform: scale(1); opacity: 1 } 96%,100% { transform: scale(0); opacity: 0 } }
.pg-sorot { animation: pg-sorot 3.2s ease-in-out infinite; }
.pg-b { animation: pg-salah 3.2s linear infinite; } .pg-b-grup { animation: pg-goyang 3.2s linear infinite; }
.pg-c { animation: pg-benar 3.2s linear infinite; }
.pg-centang { stroke-dasharray: 24; stroke-dashoffset: 24; animation: pg-centang 3.2s ease-out infinite; }
.pg-skor { animation: pg-skor 3.2s ease-out infinite; }

/* benar-salah */
@keyframes bs-waktu { 0% { transform: scaleX(1) } 46%,90% { transform: scaleX(.38) } 100% { transform: scaleX(1) } }
@keyframes bs-tap { 0%,40% { opacity: 0; transform: scale(.4) } 45%,50% { opacity: 1; transform: scale(1) } 55%,100% { opacity: 0; transform: scale(.4) } }
@keyframes bs-ya { 0%,46% { fill: #fff } 50%,84% { fill: #bbf7d0 } 89%,100% { fill: #fff } }
@keyframes bs-skor { 0%,50% { opacity: 0; transform: scale(.4) } 55%,84% { opacity: 1; transform: none } 89%,100% { opacity: 0; transform: scale(.4) } }
@keyframes bs-kartu { 0%,86% { transform: none; opacity: 1 } 91% { transform: translateX(-30px); opacity: 0 } 92% { transform: translateX(30px); opacity: 0 } 100% { transform: none; opacity: 1 } }
.bs-waktu { transform-origin: left center; animation: bs-waktu 3.4s linear infinite; }
.bs-tap { animation: bs-tap 3.4s ease-in-out infinite; }
.bs-ya { animation: bs-ya 3.4s linear infinite; }
.bs-skor { animation: bs-skor 3.4s ease-in-out infinite; }
.bs-kartu { animation: bs-kartu 3.4s ease-in-out infinite; }

/* ketik-jawaban */
@keyframes kj-tutup { 0%,8% { transform: scaleX(1) } 56%,92% { transform: scaleX(0) } 100% { transform: scaleX(1) } }
@keyframes kj-kursor { 0%,8% { transform: none } 56%,92% { transform: translateX(76px) } 100% { transform: none } }
@keyframes kj-ok { 0%,60% { opacity: 0; transform: scale(.4) } 65%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.4) } }
@keyframes kj-enter { 0%,54% { opacity: 0; transform: none } 59%,70% { opacity: 1; transform: translateY(-2px) } 75%,100% { opacity: 0; transform: none } }
.kj-tutup { transform-origin: right center; animation: kj-tutup 3.6s steps(12, end) infinite; }
.kj-kursor { animation: kj-kursor 3.6s steps(12, end) infinite; }
.kj-ok { animation: kj-ok 3.6s ease-in-out infinite; }
.kj-enter { animation: kj-enter 3.6s ease-in-out infinite; }

/* kuis-gameshow */
@keyframes gs-waktu { 0% { stroke-dashoffset: 0 } 62%,92% { stroke-dashoffset: 60 } 100% { stroke-dashoffset: 0 } }
@keyframes gs-lampu { 0%,100% { transform: rotate(-8deg) } 50% { transform: rotate(8deg) } }
@keyframes gs-nyawa { 0%,28% { opacity: 1; transform: none } 38%,92% { opacity: 0; transform: translateY(10px) scale(.4) } 100% { opacity: 1; transform: none } }
@keyframes gs-sorot { 0%,8% { opacity: 0; transform: translate(-62px,-30px) } 14%,26% { opacity: 1; transform: translate(-62px,-30px) } 32%,40% { opacity: 1; transform: translate(-62px,0) } 48%,90% { opacity: 1; transform: none } 96%,100% { opacity: 0; transform: none } }
@keyframes gs-benar { 0%,50% { transform: none } 55% { transform: scale(1.1) } 60%,100% { transform: none } }
@keyframes gs-bonus { 0%,60% { opacity: 0; transform: scale(.2) rotate(-60deg) } 65%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.2) rotate(-60deg) } }
.gs-waktu { animation: gs-waktu 4s linear infinite; }
.gs-lampu, .gs-lampu2 { transform-origin: 50% 0; animation: gs-lampu 2.4s ease-in-out infinite; } .gs-lampu2 { animation-delay: -1.2s; }
.gs-nyawa { animation: gs-nyawa 4s ease-in-out infinite; }
.gs-sorot { animation: gs-sorot 4s ease-in-out infinite; }
.gs-benar { animation: gs-benar 4s ease-in-out infinite; }
.gs-bonus { animation: gs-bonus 4s ease-in-out infinite; }

/* kuis-pertaruhan-poin */
@keyframes tp-k1 { 0%,6% { transform: none } 20%,86% { transform: translate(91px,22px) } 94%,100% { transform: none } }
@keyframes tp-k2 { 0%,20% { transform: none } 34%,86% { transform: translate(91px,10px) } 94%,100% { transform: none } }
@keyframes tp-k3 { 0%,34% { transform: none } 48%,86% { transform: translate(91px,-2px) } 94%,100% { transform: none } }
@keyframes tp-lama { 0%,62% { opacity: 1 } 66%,92% { opacity: 0 } 96%,100% { opacity: 1 } }
@keyframes tp-baru { 0%,62% { opacity: 0; transform: translateY(6px) } 66%,92% { opacity: 1; transform: none } 96%,100% { opacity: 0 } }
@keyframes tp-plus { 0%,58% { opacity: 0; transform: scale(.4) } 63%,88% { opacity: 1; transform: none } 93%,100% { opacity: 0; transform: scale(.4) } }
.tp-k1 { animation: tp-k1 4s ease-in-out infinite; }
.tp-k2 { animation: tp-k2 4s ease-in-out infinite; }
.tp-k3 { animation: tp-k3 4s ease-in-out infinite; }
.tp-lama { animation: tp-lama 4s linear infinite; }
.tp-baru { animation: tp-baru 4s ease-in-out infinite; }
.tp-plus { animation: tp-plus 4s ease-in-out infinite; }

/* anagram */
@keyframes an-b { 0%,16% { transform: none } 28% { transform: translate(-28px,-18px) } 40%,86% { transform: translate(-56px,0) } 94%,100% { transform: none } }
@keyframes an-k { 0%,16% { transform: none } 28% { transform: translate(28px,16px) } 40%,86% { transform: translate(56px,0) } 94%,100% { transform: none } }
@keyframes an-ok { 0%,48% { opacity: 0; transform: scale(.4) } 53%,86% { opacity: 1; transform: none } 91%,100% { opacity: 0; transform: scale(.4) } }
@keyframes an-panah { 0%,8% { opacity: 0; transform: none } 13%,16% { opacity: 1; transform: none } 21%,100% { opacity: 0; transform: none } }
.an-b, .an-k { animation: an-b 3.6s ease-in-out infinite; } .an-k { animation-name: an-k; }
.an-ok { animation: an-ok 3.6s ease-in-out infinite; }
.an-panah { animation: an-panah 3.6s ease-in-out infinite; }
.an-u1, .an-u2 { animation: an-lompat 3.6s ease-in-out infinite; } .an-u2 { animation-delay: .1s; }
@keyframes an-lompat { 0%,46% { transform: none } 50% { transform: translateY(-5px) } 54%,100% { transform: none } }

/* mencari-kata */
@keyframes mk-s1 { 0%,8% { transform: scaleX(0) } 26%,90% { transform: scaleX(1) } 96%,100% { transform: scaleX(0) } }
@keyframes mk-s2 { 0%,38% { transform: scaleY(0) } 56%,90% { transform: scaleY(1) } 96%,100% { transform: scaleY(0) } }
@keyframes mk-c1 { 0%,26% { transform: scaleX(0) } 32%,90% { transform: scaleX(1) } 96%,100% { transform: scaleX(0) } }
@keyframes mk-c2 { 0%,56% { transform: scaleX(0) } 62%,90% { transform: scaleX(1) } 96%,100% { transform: scaleX(0) } }
.mk-s1, .mk-c1, .mk-c2 { transform-origin: left center; } .mk-s2 { transform-origin: center top; }
.mk-s1 { animation: mk-s1 3.8s ease-in-out infinite; }
.mk-s2 { animation: mk-s2 3.8s ease-in-out infinite; }
.mk-c1 { animation: mk-c1 3.8s ease-in-out infinite; }
.mk-c2 { animation: mk-c2 3.8s ease-in-out infinite; }

/* teka-teki-silang */
@keyframes tts-h0 { 0%,6% { opacity: 0; transform: scale(.3) } 11%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h0 { animation: tts-h0 4.2s ease-in-out infinite; }
@keyframes tts-h1 { 0%,13% { opacity: 0; transform: scale(.3) } 18%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h1 { animation: tts-h1 4.2s ease-in-out infinite; }
@keyframes tts-h2 { 0%,20% { opacity: 0; transform: scale(.3) } 25%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h2 { animation: tts-h2 4.2s ease-in-out infinite; }
@keyframes tts-h3 { 0%,27% { opacity: 0; transform: scale(.3) } 32%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h3 { animation: tts-h3 4.2s ease-in-out infinite; }
@keyframes tts-h4 { 0%,34% { opacity: 0; transform: scale(.3) } 39%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h4 { animation: tts-h4 4.2s ease-in-out infinite; }
@keyframes tts-h5 { 0%,41% { opacity: 0; transform: scale(.3) } 46%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h5 { animation: tts-h5 4.2s ease-in-out infinite; }
@keyframes tts-h6 { 0%,52% { opacity: 0; transform: scale(.3) } 57%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h6 { animation: tts-h6 4.2s ease-in-out infinite; }
@keyframes tts-h7 { 0%,59% { opacity: 0; transform: scale(.3) } 64%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h7 { animation: tts-h7 4.2s ease-in-out infinite; }
@keyframes tts-h8 { 0%,66% { opacity: 0; transform: scale(.3) } 71%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.3) } }
.tts-h8 { animation: tts-h8 4.2s ease-in-out infinite; }
@keyframes tts-sorot { 0%,44% { opacity: 1 } 48%,96% { opacity: 0 } 100% { opacity: 1 } }
.tts-sorot { animation: tts-sorot 4.2s linear infinite; }

/* tebak-kata */
@keyframes tk-hA { 0%,10% { opacity: 0; transform: translateY(-8px) } 15%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: translateY(-8px) } }
.tk-hA { animation: tk-hA 4.4s ease-in-out infinite; }
@keyframes tk-hI { 0%,44% { opacity: 0; transform: translateY(-8px) } 49%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: translateY(-8px) } }
.tk-hI { animation: tk-hI 4.4s ease-in-out infinite; }
@keyframes tk-hK { 0%,60% { opacity: 0; transform: translateY(-8px) } 65%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: translateY(-8px) } }
.tk-hK { animation: tk-hK 4.4s ease-in-out infinite; }
@keyframes tk-hN { 0%,74% { opacity: 0; transform: translateY(-8px) } 79%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: translateY(-8px) } }
.tk-hN { animation: tk-hN 4.4s ease-in-out infinite; }
@keyframes tk-tA { 0%,10% { opacity: 1; transform: none } 13% { opacity: 1; transform: translateY(2px) } 16%,92% { opacity: .3; transform: none } 97%,100% { opacity: 1; transform: none } }
.tk-tA { animation: tk-tA 4.4s linear infinite; }
@keyframes tk-tE { 0%,28% { opacity: 1; transform: none } 31% { opacity: 1; transform: translateX(-2px) } 34% { opacity: 1; transform: translateX(2px) } 37%,92% { opacity: .3; transform: none } 97%,100% { opacity: 1; transform: none } }
.tk-tE { animation: tk-tE 4.4s linear infinite; }
@keyframes tk-tI { 0%,44% { opacity: 1; transform: none } 47% { opacity: 1; transform: translateY(2px) } 50%,92% { opacity: .3; transform: none } 97%,100% { opacity: 1; transform: none } }
.tk-tI { animation: tk-tI 4.4s linear infinite; }
@keyframes tk-tK { 0%,60% { opacity: 1; transform: none } 63% { opacity: 1; transform: translateY(2px) } 66%,92% { opacity: .3; transform: none } 97%,100% { opacity: 1; transform: none } }
.tk-tK { animation: tk-tK 4.4s linear infinite; }
@keyframes tk-tN { 0%,74% { opacity: 1; transform: none } 77% { opacity: 1; transform: translateY(2px) } 80%,92% { opacity: .3; transform: none } 97%,100% { opacity: 1; transform: none } }
.tk-tN { animation: tk-tN 4.4s linear infinite; }
@keyframes tk-nyawa { 0%,30% { opacity: 1; transform: none } 38%,92% { opacity: 0; transform: translateY(10px) scale(.4) } 100% { opacity: 1; transform: none } }
.tk-nyawa { animation: tk-nyawa 4.4s ease-in-out infinite; }
@keyframes tk-ok { 0%,78% { opacity: 0; transform: scale(.4) } 83%,92% { opacity: 1; transform: none } 97%,100% { opacity: 0; transform: scale(.4) } }
.tk-ok { animation: tk-ok 4.4s ease-in-out infinite; }

/* susun-kalimat */
@keyframes sk-c0 { 0%,6% { transform: none } 12% { transform: translate(-28px,-31px) } 18%,88% { transform: translate(-56px,-46px) } 96%,100% { transform: none } }
.sk-c0 { animation: sk-c0 4.4s ease-in-out infinite; }
@keyframes sk-c1 { 0%,21% { transform: none } 27% { transform: translate(-53px,-31px) } 33%,88% { transform: translate(-106px,-46px) } 96%,100% { transform: none } }
.sk-c1 { animation: sk-c1 4.4s ease-in-out infinite; }
@keyframes sk-c2 { 0%,36% { transform: none } 42% { transform: translate(-3px,-31px) } 48%,88% { transform: translate(-6px,-46px) } 96%,100% { transform: none } }
.sk-c2 { animation: sk-c2 4.4s ease-in-out infinite; }
@keyframes sk-c3 { 0%,51% { transform: none } 57% { transform: translate(75px,-31px) } 63%,88% { transform: translate(150px,-46px) } 96%,100% { transform: none } }
.sk-c3 { animation: sk-c3 4.4s ease-in-out infinite; }
@keyframes sk-ok { 0%,66% { opacity: 0; transform: scale(.4) } 71%,88% { opacity: 1; transform: none } 93%,100% { opacity: 0; transform: scale(.4) } }
.sk-ok { animation: sk-ok 4.4s ease-in-out infinite; }

/* lengkapi-kalimat */
@keyframes lk-chip { 0%,14% { transform: none } 25% { transform: translate(5px,-30px) rotate(-6deg) } 36%,86% { transform: translate(10px,-44px) } 94%,100% { transform: none } }
@keyframes lk-rumpang { 0%,36% { fill: #f1f5f9 } 40%,86% { fill: #bbf7d0 } 91%,100% { fill: #f1f5f9 } }
@keyframes lk-ok { 0%,40% { opacity: 0; transform: scale(.4) } 45%,86% { opacity: 1; transform: none } 91%,100% { opacity: 0; transform: scale(.4) } }
.lk-chip { animation: lk-chip 3.6s ease-in-out infinite; }
.lk-rumpang { animation: lk-rumpang 3.6s linear infinite; }
.lk-ok { animation: lk-ok 3.6s ease-in-out infinite; }

/* mengeja-kata */
@keyframes me-h0 { 0%,8% { transform: none } 13.5% { transform: translate(-26px,-50px) } 19%,88% { transform: translate(-52px,-42px) } 96%,100% { transform: none } }
.me-h0 { animation: me-h0 4.2s ease-in-out infinite; }
@keyframes me-h1 { 0%,22% { transform: none } 27.5% { transform: translate(-40px,-50px) } 33%,88% { transform: translate(-80px,-42px) } 96%,100% { transform: none } }
.me-h1 { animation: me-h1 4.2s ease-in-out infinite; }
@keyframes me-h2 { 0%,36% { transform: none } 41.5% { transform: translate(16px,-50px) } 47%,88% { transform: translate(32px,-42px) } 96%,100% { transform: none } }
.me-h2 { animation: me-h2 4.2s ease-in-out infinite; }
@keyframes me-h3 { 0%,50% { transform: none } 55.5% { transform: translate(44px,-50px) } 61%,88% { transform: translate(88px,-42px) } 96%,100% { transform: none } }
.me-h3 { animation: me-h3 4.2s ease-in-out infinite; }
@keyframes me-ok { 0%,64% { opacity: 0; transform: scale(.4) } 69%,88% { opacity: 1; transform: none } 93%,100% { opacity: 0; transform: scale(.4) } }
.me-ok { animation: me-ok 4.2s ease-in-out infinite; }

/* magnet-kata */
@keyframes mg-0 { 0%,10% { transform: translate(-54px,26px) rotate(-14deg) } 20% { transform: translate(0,-3px) rotate(3deg) } 24%,86% { transform: none } 96%%,100%% { transform: translate(-54px,26px) rotate(-14deg) } }
.mg-0 { animation: mg-0 4.4s ease-in-out infinite; }
@keyframes mg-1 { 0%,19% { transform: translate(6px,-20px) rotate(10deg) } 29% { transform: translate(0,-3px) rotate(-2deg) } 33%,86% { transform: none } 96%%,100%% { transform: translate(6px,-20px) rotate(10deg) } }
.mg-1 { animation: mg-1 4.4s ease-in-out infinite; }
@keyframes mg-2 { 0%,28% { transform: translate(-30px,30px) rotate(8deg) } 38% { transform: translate(0,-3px) rotate(-2deg) } 42%,86% { transform: none } 96%%,100%% { transform: translate(-30px,30px) rotate(8deg) } }
.mg-2 { animation: mg-2 4.4s ease-in-out infinite; }
@keyframes mg-3 { 0%,37% { transform: translate(40px,14px) rotate(-10deg) } 47% { transform: translate(0,-3px) rotate(2deg) } 51%,86% { transform: none } 96%%,100%% { transform: translate(40px,14px) rotate(-10deg) } }
.mg-3 { animation: mg-3 4.4s ease-in-out infinite; }
@keyframes mg-4 { 0%,46% { transform: translate(30px,-24px) rotate(18deg) } 56% { transform: translate(0,-3px) rotate(-4deg) } 60%,86% { transform: none } 96%%,100%% { transform: translate(30px,-24px) rotate(18deg) } }
.mg-4 { animation: mg-4 4.4s ease-in-out infinite; }

/* pencocokan-istilah */
@keyframes pi-1 { 0%,8% { transform: none } 26%,86% { transform: translate(72px,25px) } 94%,100% { transform: none } }
@keyframes pi-2 { 0%,34% { transform: none } 43% { transform: translate(36px,8px) } 52%,86% { transform: translate(72px,25px) } 94%,100% { transform: none } }
@keyframes pi-3 { 0%,58% { transform: none } 66% { transform: translate(36px,-30px) } 74%,86% { transform: translate(72px,-50px) } 94%,100% { transform: none } }
.pi-1 { animation: pi-1 4.6s ease-in-out infinite; }
.pi-2 { animation: pi-2 4.6s ease-in-out infinite; }
.pi-3 { animation: pi-3 4.6s ease-in-out infinite; }

/* pasangan-memori */
@keyframes pm-3b { 0%,4% { transform: none } 9%,22% { transform: scaleX(0) } 27%,100% { transform: none } }
@keyframes pm-3d { 0%,9% { transform: scaleX(0) } 14%,17% { transform: none } 22%,100% { transform: scaleX(0) } }
.pm-3b { animation: pm-3b 5s linear infinite; }
.pm-3d { animation: pm-3d 5s linear infinite; }
@keyframes pm-1b { 0%,30% { transform: none } 35%,88% { transform: scaleX(0) } 93%,100% { transform: none } }
@keyframes pm-1d { 0%,35% { transform: scaleX(0) } 40%,83% { transform: none } 88%,100% { transform: scaleX(0) } }
.pm-1b { animation: pm-1b 5s linear infinite; }
.pm-1d { animation: pm-1d 5s linear infinite; }
@keyframes pm-2b { 0%,44% { transform: none } 49%,88% { transform: scaleX(0) } 93%,100% { transform: none } }
@keyframes pm-2d { 0%,49% { transform: scaleX(0) } 54%,83% { transform: none } 88%,100% { transform: scaleX(0) } }
.pm-2b { animation: pm-2b 5s linear infinite; }
.pm-2d { animation: pm-2d 5s linear infinite; }
@keyframes pm-cocok { 0%,56% { fill: #fef9c3 } 60%,84% { fill: #bbf7d0 } 89%,100% { fill: #fef9c3 } }
.pm-cocok { animation: pm-cocok 5s linear infinite; }

/* temukan-pasangan */
@keyframes tps-s1 { 0%,44% { opacity: 1 } 48%,96% { opacity: 0 } 100% { opacity: 1 } }
@keyframes tps-s2 { 0%,46% { opacity: 0 } 50%,94% { opacity: 1 } 98%,100% { opacity: 0 } }
@keyframes tps-r1 { 0%,22% { opacity: 0; transform: scale(.4) } 27%,30% { opacity: 1; transform: scale(1.2) } 35%,100% { opacity: 0; transform: scale(.4) } }
@keyframes tps-r2 { 0%,68% { opacity: 0; transform: scale(.4) } 73%,76% { opacity: 1; transform: scale(1.2) } 81%,100% { opacity: 0; transform: scale(.4) } }
@keyframes tps-a { 0%,30% { opacity: 1; transform: none } 34% { opacity: 1; transform: scale(1.3) } 38%,94% { opacity: 0; transform: scale(.2) } 100% { opacity: 1; transform: none } }
@keyframes tps-b { 0%,76% { opacity: 1; transform: none } 80% { opacity: 1; transform: scale(1.3) } 84%,94% { opacity: 0; transform: scale(.2) } 100% { opacity: 1; transform: none } }
.tps-s1 { animation: tps-s1 4.6s linear infinite; }
.tps-s2 { animation: tps-s2 4.6s linear infinite; }
.tps-r1 { animation: tps-r1 4.6s ease-out infinite; }
.tps-r2 { animation: tps-r2 4.6s ease-out infinite; }
.tps-a { animation: tps-a 4.6s ease-out infinite; }
.tps-b { animation: tps-b 4.6s ease-out infinite; }

/* pasangan-atau-bukan */
@keyframes pab-a { 0% { opacity: 0; transform: translateY(-12px) } 6%,40% { opacity: 1; transform: none } 46%,100% { opacity: 0; transform: translateY(12px) } }
@keyframes pab-b { 0%,48% { opacity: 0; transform: translateY(-12px) } 54%,88% { opacity: 1; transform: none } 94%,100% { opacity: 0; transform: translateY(12px) } }
@keyframes pab-ya { 0%,26% { fill: #fff } 30%,42% { fill: #bbf7d0 } 47%,100% { fill: #fff } }
@keyframes pab-tidak { 0%,74% { fill: #fff } 78%,90% { fill: #fecaca } 95%,100% { fill: #fff } }
@keyframes pab-waktu { 0% { transform: none } 26% { transform: scaleY(.45) } 27%,48% { transform: none } 74% { transform: scaleY(.5) } 75%,100% { transform: none } }
.pab-a1, .pab-a2 { animation: pab-a 4.4s ease-out infinite; } .pab-b1, .pab-b2 { animation: pab-b 4.4s ease-out infinite; } .pab-a2, .pab-b2 { animation-delay: .1s; }
.pab-ya { animation: pab-ya 4.4s linear infinite; }
.pab-tidak { animation: pab-tidak 4.4s linear infinite; }
.pab-waktu { transform-origin: center bottom; animation: pab-waktu 4.4s linear infinite; }

/* pengelompokan */
@keyframes pk-0 { 0%,6% { opacity: 1; transform: none } 15% { opacity: 1; transform: translate(5px,-4px) } 22% { opacity: 1; transform: translate(10px,34px) scale(.85) } 25%,94% { opacity: 0; transform: translate(10px,44px) scale(.5) } 100% { opacity: 1; transform: none } }
.pk-0 { animation: pk-0 5s ease-in-out infinite; }
@keyframes pk-1 { 0%,26% { opacity: 1; transform: none } 35% { opacity: 1; transform: translate(38px,-4px) } 42% { opacity: 1; transform: translate(76px,34px) scale(.85) } 45%,94% { opacity: 0; transform: translate(76px,44px) scale(.5) } 100% { opacity: 1; transform: none } }
.pk-1 { animation: pk-1 5s ease-in-out infinite; }
@keyframes pk-2 { 0%,46% { opacity: 1; transform: none } 55% { opacity: 1; transform: translate(-47px,-4px) } 62% { opacity: 1; transform: translate(-94px,34px) scale(.85) } 65%,94% { opacity: 0; transform: translate(-94px,44px) scale(.5) } 100% { opacity: 1; transform: none } }
.pk-2 { animation: pk-2 5s ease-in-out infinite; }
@keyframes pk-3 { 0%,66% { opacity: 1; transform: none } 75% { opacity: 1; transform: translate(-14px,-4px) } 82% { opacity: 1; transform: translate(-28px,34px) scale(.85) } 85%,94% { opacity: 0; transform: translate(-28px,44px) scale(.5) } 100% { opacity: 1; transform: none } }
.pk-3 { animation: pk-3 5s ease-in-out infinite; }
@keyframes pk-j1 { 0%,62% { opacity: 0; transform: scale(.4) } 67%,92% { opacity: 1; transform: none } 97%,100% { opacity: 0; transform: scale(.4) } }
@keyframes pk-j2 { 0%,82% { opacity: 0; transform: scale(.4) } 87%,92% { opacity: 1; transform: none } 97%,100% { opacity: 0; transform: scale(.4) } }
.pk-j1 { animation: pk-j1 5s ease-in-out infinite; }
.pk-j2 { animation: pk-j2 5s ease-in-out infinite; }

/* urutan-peringkat */
@keyframes up-0 { 0%,12% { transform: none } 26% { transform: translate(-10px,10px) } 40%,86% { transform: translateY(20px) } 94%,100% { transform: none } }
.up-0 { animation: up-0 4.6s ease-in-out infinite; }
@keyframes up-1 { 0%,16% { transform: none } 30% { transform: translate(-10px,20px) } 44%,86% { transform: translateY(40px) } 94%,100% { transform: none } }
.up-1 { animation: up-1 4.6s ease-in-out infinite; }
@keyframes up-2 { 0%,20% { transform: none } 34% { transform: translate(14px,-20px) } 48%,86% { transform: translateY(-40px) } 94%,100% { transform: none } }
.up-2 { animation: up-2 4.6s ease-in-out infinite; }
@keyframes up-3 { 0%,24% { transform: none } 38% { transform: translate(14px,-10px) } 52%,86% { transform: translateY(-20px) } 94%,100% { transform: none } }
.up-3 { animation: up-3 4.6s ease-in-out infinite; }
@keyframes up-ok { 0%,58% { opacity: 0; transform: scale(.4) } 63%,86% { opacity: 1; transform: none } 91%,100% { opacity: 0; transform: scale(.4) } }
.up-ok { animation: up-ok 4.6s ease-in-out infinite; }

/* sortir-cepat */
@keyframes sc-0 { 0%,2% { opacity: 0; transform: translateY(-10px) } 6% { opacity: 1; transform: none } 14% { opacity: 1; transform: none } 22% { opacity: 1; transform: translate(-70px,40px) scale(.8) } 25%,100% { opacity: 0; transform: translate(-70px,46px) scale(.5) } }
.sc-0 { animation: sc-0 4.4s ease-in infinite; }
@keyframes sc-1 { 0%,25% { opacity: 0; transform: translateY(-10px) } 29% { opacity: 1; transform: none } 37% { opacity: 1; transform: none } 45% { opacity: 1; transform: translate(70px,40px) scale(.8) } 48%,100% { opacity: 0; transform: translate(70px,46px) scale(.5) } }
.sc-1 { animation: sc-1 4.4s ease-in infinite; }
@keyframes sc-2 { 0%,48% { opacity: 0; transform: translateY(-10px) } 52% { opacity: 1; transform: none } 60% { opacity: 1; transform: none } 68% { opacity: 1; transform: translate(-70px,40px) scale(.8) } 71%,100% { opacity: 0; transform: translate(-70px,46px) scale(.5) } }
.sc-2 { animation: sc-2 4.4s ease-in infinite; }
@keyframes sc-3 { 0%,71% { opacity: 0; transform: translateY(-10px) } 75% { opacity: 1; transform: none } 83% { opacity: 1; transform: none } 91% { opacity: 1; transform: translate(70px,40px) scale(.8) } 94%,100% { opacity: 0; transform: translate(70px,46px) scale(.5) } }
.sc-3 { animation: sc-3 4.4s ease-in infinite; }
@keyframes sc-waktu { 0% { transform: none } 100% { transform: scaleX(0) } }
.sc-waktu { transform-origin: left center; animation: sc-waktu 4.4s linear infinite; }

/* kartu-kilat */
@keyframes kk-b { 0%,24% { transform: none } 29%,82% { transform: scaleX(0) } 87%,100% { transform: none } }
@keyframes kk-d { 0%,29% { transform: scaleX(0) } 34%,77% { transform: none } 82%,100% { transform: scaleX(0) } }
.kk-b { animation: kk-b 4s linear infinite; }
.kk-d { animation: kk-d 4s linear infinite; }
@keyframes kk-ikon { 0%,18% { transform: none } 30%,100% { transform: rotate(360deg) } }
.kk-ikon { animation: kk-ikon 4s ease-in-out infinite; }

/* balik-ubin */
@keyframes bu-zoom { 0%,10% { transform: none } 22%,82% { transform: translate(-19px,-20px) scale(1.7) } 94%,100% { transform: none } }
.bu-zoom { animation: bu-zoom 4.6s ease-in-out infinite; }
@keyframes bu-b { 0%,36% { transform: none } 41%,80% { transform: scaleX(0) } 85%,100% { transform: none } }
@keyframes bu-d { 0%,41% { transform: scaleX(0) } 46%,75% { transform: none } 80%,100% { transform: scaleX(0) } }
.bu-b { animation: bu-b 4.6s linear infinite; }
.bu-d { animation: bu-d 4.6s linear infinite; }
@keyframes bu-geser { 0%,26% { opacity: 0; transform: translateX(-6px) } 31%,40% { opacity: 1; transform: translateX(6px) } 45%,100% { opacity: 0; transform: translateX(-6px) } }
.bu-geser { animation: bu-geser 4.6s ease-in-out infinite; }

/* amati-dan-ingat */
@keyframes ai-lihat { 0%,36% { opacity: 1 } 42%,94% { opacity: 0 } 100% { opacity: 1 } }
@keyframes ai-tanya { 0%,38% { opacity: 0 } 44%,92% { opacity: 1 } 98%,100% { opacity: 0 } }
@keyframes ai-c1 { 0%,56% { opacity: 0; transform: scale(.4) } 61%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.4) } }
@keyframes ai-c2 { 0%,68% { opacity: 0; transform: scale(.4) } 73%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.4) } }
@keyframes ai-jarum { 0% { transform: none } 38%,100% { transform: rotate(360deg) } }
.ai-jarum { transform-origin: 50% 100%; animation: ai-jarum 4.8s linear infinite; }
.ai-lihat { animation: ai-lihat 4.8s ease-in-out infinite; }
.ai-tanya { animation: ai-tanya 4.8s ease-in-out infinite; }
.ai-c1 { animation: ai-c1 4.8s ease-in-out infinite; }
.ai-c2 { animation: ai-c2 4.8s ease-in-out infinite; }

/* roda-acak */
@keyframes roda-putar { 0% { transform: rotate(0) } 70% { transform: rotate(1020deg) } 100% { transform: rotate(1020deg) } }
@keyframes roda-tik { 0%,64% { transform: rotate(-12deg) } 3%,9%,15%,21%,27%,33%,39%,45%,51%,57% { transform: rotate(0) } 6%,12%,18%,24%,30%,36%,42%,48%,54%,60% { transform: rotate(-12deg) } 70%,100% { transform: rotate(0) } }
@keyframes roda-hasil { 0%,72% { opacity: 0; transform: translateY(6px) } 78%,94% { opacity: 1; transform: none } 100% { opacity: 0 } }
.roda { animation: roda-putar 3.6s cubic-bezier(.15,.65,.2,1) infinite; }
.roda-penunjuk { transform-origin: 50% 0; animation: roda-tik 3.6s linear infinite; }
.roda-hasil { animation: roda-hasil 3.6s ease-out infinite; }

/* kartu-acak */
@keyframes ka-0 { 0%,6% { transform: none } 13% { transform: translate(31px,-10px) rotate(-16deg) } 20%,88% { transform: translate(62px,4px) rotate(-8deg) } 96%,100% { transform: none } }
.ka-0 { animation: ka-0 4.6s ease-in-out infinite; }
@keyframes ka-1 { 0%,20% { transform: none } 27% { transform: translate(55px,-16px) rotate(0deg) } 34%,88% { transform: translate(110px,-2px) rotate(0deg) } 96%,100% { transform: none } }
.ka-1 { animation: ka-1 4.6s ease-in-out infinite; }
@keyframes ka-2 { 0%,34% { transform: none } 41% { transform: translate(79px,-10px) rotate(16deg) } 48%,88% { transform: translate(158px,4px) rotate(8deg) } 96%,100% { transform: none } }
.ka-2 { animation: ka-2 4.6s ease-in-out infinite; }
@keyframes ka-buka { 0%,50% { transform: scaleX(0) } 58%,86% { transform: none } 92%,100% { transform: scaleX(0) } }
.ka-buka { animation: ka-buka 4.6s linear infinite; }

/* buka-kotak */
@keyframes bk-tutup { 0%,14% { transform: none } 26%,84% { transform: translate(-6px,-10px) rotate(-38deg) } 94%,100% { transform: none } }
@keyframes bk-soal { 0%,20% { opacity: 0; transform: translateY(26px) scale(.4) } 32% { opacity: 1; transform: translateY(-3px) scale(1.05) } 38%,82% { opacity: 1; transform: none } 90%,100% { opacity: 0; transform: translateY(26px) scale(.4) } }
@keyframes bk-kilau { 0%,28% { opacity: 0; transform: scale(.6) } 33%,44% { opacity: 1; transform: scale(1.1) } 49%,100% { opacity: 0; transform: scale(.6) } }
.bk-tutup { transform-origin: 0 100%; animation: bk-tutup 4s ease-in-out infinite; }
.bk-soal { animation: bk-soal 4s ease-in-out infinite; }
.bk-kilau { animation: bk-kilau 4s ease-in-out infinite; }

/* diagram-berlabel */
@keyframes db-1 { 0%,6% { transform: none } 22%,88% { transform: translate(-74px,3px) } 96%,100% { transform: none } }
@keyframes db-2 { 0%,28% { transform: none } 44%,88% { transform: translate(-62px,2px) } 96%,100% { transform: none } }
@keyframes db-3 { 0%,50% { transform: none } 66%,88% { transform: translate(-80px,10px) } 96%,100% { transform: none } }
@keyframes db-p1 { 0%,22% { fill: #fff } 26%,88% { fill: #4ade80 } 93%,100% { fill: #fff } }
@keyframes db-p2 { 0%,44% { fill: #fff } 48%,88% { fill: #4ade80 } 93%,100% { fill: #fff } }
@keyframes db-p3 { 0%,66% { fill: #fff } 70%,88% { fill: #4ade80 } 93%,100% { fill: #fff } }
.db-1 { animation: db-1 4.8s ease-in-out infinite; }
.db-2 { animation: db-2 4.8s ease-in-out infinite; }
.db-3 { animation: db-3 4.8s ease-in-out infinite; }
.db-p1 circle { animation: db-p1 4.8s linear infinite; }
.db-p2 circle { animation: db-p2 4.8s linear infinite; }
.db-p3 circle { animation: db-p3 4.8s linear infinite; }

/* kuis-gambar */
@keyframes kg-t0 { 0%,9% { opacity: 1 } 13%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t0 { animation: kg-t0 5s linear infinite; }
@keyframes kg-t1 { 0%,34% { opacity: 1 } 38%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t1 { animation: kg-t1 5s linear infinite; }
@keyframes kg-t2 { 0%,49% { opacity: 1 } 53%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t2 { animation: kg-t2 5s linear infinite; }
@keyframes kg-t3 { 0%,19% { opacity: 1 } 23%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t3 { animation: kg-t3 5s linear infinite; }
@keyframes kg-t4 { 0%,59% { opacity: 1 } 63%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t4 { animation: kg-t4 5s linear infinite; }
@keyframes kg-t5 { 0%,4% { opacity: 1 } 8%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t5 { animation: kg-t5 5s linear infinite; }
@keyframes kg-t6 { 0%,39% { opacity: 1 } 43%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t6 { animation: kg-t6 5s linear infinite; }
@keyframes kg-t7 { 0%,24% { opacity: 1 } 28%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t7 { animation: kg-t7 5s linear infinite; }
@keyframes kg-t8 { 0%,54% { opacity: 1 } 58%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t8 { animation: kg-t8 5s linear infinite; }
@keyframes kg-t9 { 0%,14% { opacity: 1 } 18%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t9 { animation: kg-t9 5s linear infinite; }
@keyframes kg-t10 { 0%,44% { opacity: 1 } 48%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t10 { animation: kg-t10 5s linear infinite; }
@keyframes kg-t11 { 0%,29% { opacity: 1 } 33%,90% { opacity: 0 } 95%,100% { opacity: 1 } }
.kg-t11 { animation: kg-t11 5s linear infinite; }
@keyframes kg-jawab { 0%,34% { opacity: 0; transform: translateX(-8px) } 39%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: translateX(-8px) } }
.kg-jawab { animation: kg-jawab 5s ease-in-out infinite; }

/* kejar-labirin */
@keyframes kl-pemain { 0%,4% { opacity: 1; transform: none } 20% { opacity: 1; transform: translate(0,-28px) } 38% { opacity: 1; transform: translate(56px,-28px) } 52% { opacity: 1; transform: translate(56px,-52px) } 70%,90% { opacity: 1; transform: translate(148px,-52px) } 95% { opacity: 0; transform: translate(148px,-52px) } 96% { opacity: 0; transform: none } 100% { opacity: 1; transform: none } }
@keyframes kl-hantu { 0%,16% { opacity: 0; transform: none } 22% { opacity: 1; transform: none } 36% { opacity: 1; transform: translate(0,-28px) } 54% { opacity: 1; transform: translate(56px,-28px) } 68% { opacity: 1; transform: translate(56px,-52px) } 80%,90% { opacity: 1; transform: translate(96px,-52px) } 95%,100% { opacity: 0; transform: translate(96px,-52px) } }
@keyframes kl-goal { 0%,68% { fill: #fff } 72%,90% { fill: #bbf7d0 } 95%,100% { fill: #fff } }
.kl-pemain { animation: kl-pemain 5s linear infinite; }
.kl-hantu { animation: kl-hantu 5s linear infinite; }
.kl-goal { animation: kl-goal 5s linear infinite; }

/* pesawat-jawaban */
@keyframes pj-awan { 0% { transform: none } 62% { transform: translateX(-138px) } 100% { transform: translateX(-230px) } }
@keyframes pj-pesawat { 0%,8% { transform: translateY(-22px) } 30% { transform: translateY(-26px) } 42%,72% { transform: none } 92%,100% { transform: translateY(-22px) } }
@keyframes pj-a2 { 0%,58% { opacity: 1; transform: none } 62% { opacity: 1; transform: scale(1.25) } 66%,100% { opacity: 0; transform: scale(.3) } }
@keyframes pj-bintang { 0%,60% { opacity: 0; transform: translate(-60px,0) scale(.3) } 64%,80% { opacity: 1; transform: translate(-60px,-6px) } 86%,100% { opacity: 0; transform: translate(-60px,-14px) } }
.pj-awan { animation: pj-awan 4.4s linear infinite; }
.pj-pesawat { animation: pj-pesawat 4.4s ease-in-out infinite; }
.pj-a2 { animation: pj-a2 4.4s linear infinite; }
.pj-bintang { animation: pj-bintang 4.4s ease-out infinite; }

/* pukul-tikus-tanah */
@keyframes pt-naik { 0%,30% { transform: none } 40%,90% { transform: translateY(46px) } 100% { transform: none } }
@keyframes pt-2 { 0%,14% { transform: translateY(46px) } 24%,50% { transform: none } 53% { transform: scale(1.1,.8) } 60%,100% { transform: translateY(46px) } }
@keyframes pt-palu { 0%,40% { transform: rotate(22deg) } 48% { transform: rotate(-10deg) } 54% { transform: rotate(-6deg) } 66%,100% { transform: rotate(22deg) } }
@keyframes pt-bintang { 0%,46% { opacity: 0; transform: scale(.5) } 51%,58% { opacity: 1; transform: scale(1.1) } 63%,100% { opacity: 0; transform: scale(.5) } }
@keyframes pt-poin { 0%,50% { opacity: 0; transform: translateY(6px) } 55%,74% { opacity: 1; transform: none } 79%,100% { opacity: 0; transform: translateY(6px) } }
.pt-1, .pt-3 { animation: pt-naik 3.6s ease-out infinite; } .pt-3 { animation-delay: -1.8s; }
.pt-2 { animation: pt-2 3.6s ease-out infinite; }
.pt-palu { transform-origin: 100% 100%; animation: pt-palu 3.6s ease-in infinite; }
.pt-bintang { animation: pt-bintang 3.6s ease-in-out infinite; }
.pt-poin { animation: pt-poin 3.6s ease-in-out infinite; }

/* buah-terbang */
@keyframes bt-1 { 0% { transform: none } 50% { transform: translate(90px,-80px) } 100% { transform: translate(180px,0) } }
@keyframes bt-2 { 0% { opacity: 1; transform: none } 48% { opacity: 1; transform: translate(-100px,-76px) } 50%,96% { opacity: 0; transform: translate(-100px,-76px) } 100% { opacity: 0; transform: none } }
@keyframes bt-3 { 0%,30% { transform: none } 65% { transform: translate(60px,-62px) } 100% { transform: translate(120px,0) } }
@keyframes bt-pecah { 0%,47% { opacity: 0 } 50%,78% { opacity: 1 } 86%,100% { opacity: 0 } }
@keyframes bt-kiri { 0%,50% { transform: none } 86%,100% { transform: translate(-12px,26px) rotate(-30deg) } }
@keyframes bt-kanan { 0%,50% { transform: none } 86%,100% { transform: translate(12px,26px) rotate(30deg) } }
.bt-1 { animation: bt-1 4s linear infinite; }
.bt-2 { animation: bt-2 4s ease-out infinite; }
.bt-3 { animation: bt-3 4s linear infinite; }
.bt-pecah { animation: bt-pecah 4s linear infinite; }
.bt-kiri { animation: bt-kiri 4s ease-in infinite; }
.bt-kanan { animation: bt-kanan 4s ease-in infinite; }
.bt-1, .bt-2, .bt-3, .bt-pecah, .bt-kiri, .bt-kanan { animation-delay: -1.6s; }

/* pecah-balon */
@keyframes bal-naik { 0% { transform: translateY(10px) } 50% { transform: translateY(-4px) } 100% { transform: translateY(10px) } }
@keyframes bal-pecah { 0%,40% { transform: none; opacity: 1 } 46% { transform: scale(1.18); opacity: 1 } 50% { transform: scale(1.3); opacity: 0 } 88% { transform: scale(.4); opacity: 0 } 100% { transform: none; opacity: 1 } }
@keyframes bal-ledak { 0%,46% { transform: scale(.3); opacity: 0 } 50% { transform: none; opacity: 1 } 62%,100% { transform: scale(1.5); opacity: 0 } }
@keyframes bal-poin { 0%,48% { transform: translateY(6px); opacity: 0 } 54%,70% { transform: translateY(-4px); opacity: 1 } 80%,100% { transform: translateY(-12px); opacity: 0 } }
.bal-1 { animation: bal-naik 3s ease-in-out infinite; } .bal-2 { animation: bal-naik 3.4s ease-in-out -.8s infinite; } .bal-3 { animation: bal-naik 2.8s ease-in-out -1.6s infinite; }
.bal-target { animation: bal-pecah 3s ease-in infinite; }
.bal-ledak { animation: bal-ledak 3s ease-out infinite; }
.bal-poin { animation: bal-poin 3s ease-out infinite; }

/* duel-tim */
@keyframes dt-r0 { 0%,24% { opacity: 0; transform: scale(.4) } 29%,32% { opacity: 1; transform: scale(1.4) } 37%,100% { opacity: 0; transform: scale(.4) } }
@keyframes dt-b0 { 0%,28% { fill: #fff } 32%,86% { fill: #bbf7d0 } 91%,100% { fill: #fff } }
.dt-r0 { animation: dt-r0 4.6s ease-in-out infinite; }
.dt-b0 { animation: dt-b0 4.6s linear infinite; }
@keyframes dt-r1 { 0%,12% { opacity: 0; transform: scale(.4) } 17%,20% { opacity: 1; transform: scale(1.4) } 25%,100% { opacity: 0; transform: scale(.4) } }
@keyframes dt-b1 { 0%,16% { fill: #fff } 20%,86% { fill: #bbf7d0 } 91%,100% { fill: #fff } }
.dt-r1 { animation: dt-r1 4.6s ease-in-out infinite; }
.dt-b1 { animation: dt-b1 4.6s linear infinite; }
@keyframes dt-r2 { 0%,46% { opacity: 0; transform: scale(.4) } 51%,54% { opacity: 1; transform: scale(1.4) } 59%,100% { opacity: 0; transform: scale(.4) } }
@keyframes dt-b2 { 0%,50% { fill: #fff } 54%,86% { fill: #bbf7d0 } 91%,100% { fill: #fff } }
.dt-r2 { animation: dt-r2 4.6s ease-in-out infinite; }
.dt-b2 { animation: dt-b2 4.6s linear infinite; }
@keyframes dt-r3 { 0%,34% { opacity: 0; transform: scale(.4) } 39%,42% { opacity: 1; transform: scale(1.4) } 47%,100% { opacity: 0; transform: scale(.4) } }
@keyframes dt-b3 { 0%,38% { fill: #fff } 42%,86% { fill: #bbf7d0 } 91%,100% { fill: #fff } }
.dt-r3 { animation: dt-r3 4.6s ease-in-out infinite; }
.dt-b3 { animation: dt-b3 4.6s linear infinite; }
@keyframes dt-juara { 0%,22% { opacity: 0; transform: scale(.4) } 27%,86% { opacity: 1; transform: none } 91%,100% { opacity: 0; transform: scale(.4) } }
.dt-juara { animation: dt-juara 4.6s ease-in-out infinite; }

/* tarik-tambang */
@keyframes tt-tali { 0% { transform: none } 14% { transform: translateX(-5px) } 28% { transform: translateX(-3px) } 40% { transform: translateX(-8px) } 56% { transform: translateX(22px) } 62% { transform: translateX(19px) } 68%,86% { transform: translateX(22px) } 100% { transform: none } }
@keyframes tt-benar { 0%,42% { opacity: 0; transform: translateY(6px) } 47%,86% { opacity: 1; transform: none } 91%,100% { opacity: 0; transform: translateY(6px) } }
.tt-tali { animation: tt-tali 4.4s ease-in-out infinite; }
.tt-benar { animation: tt-benar 4.4s ease-in-out infinite; }

/* benar-salah-gerak */
@keyframes bsg-0 { 0%,26% { transform: none } 46%,84% { transform: translateX(-64px) } 92%,100% { transform: none } }
.bsg-0 { animation: bsg-0 4.6s ease-in-out infinite; }
@keyframes bsg-1 { 0%,30% { transform: none } 50%,84% { transform: translateX(-68px) } 92%,100% { transform: none } }
.bsg-1 { animation: bsg-1 4.6s ease-in-out infinite; }
@keyframes bsg-2 { 0%,34% { transform: none } 54%,84% { transform: translateX(-72px) } 92%,100% { transform: none } }
.bsg-2 { animation: bsg-2 4.6s ease-in-out infinite; }
@keyframes bsg-ok { 0%,56% { opacity: 0; transform: scale(.4) } 61%,84% { opacity: 1; transform: none } 89%,100% { opacity: 0; transform: scale(.4) } }
.bsg-ok { animation: bsg-ok 4.6s ease-in-out infinite; }

/* zona-jawaban */
@keyframes zj-tangan { 0% { transform: rotate(-14deg) } 8% { transform: rotate(14deg) } 16% { transform: rotate(-14deg) } 24% { transform: rotate(14deg) } 32% { transform: rotate(-14deg) } 40% { transform: rotate(14deg) } 48% { transform: rotate(-14deg) } 56% { transform: rotate(14deg) } 62%,100% { transform: none } }
@keyframes zj-isi { 0% { transform: scaleY(0) } 60%,90% { transform: none } 96%,100% { transform: scaleY(0) } }
@keyframes zj-garis { 0%,60% { opacity: .8 } 64%,96% { opacity: 0 } 100% { opacity: .8 } }
@keyframes zj-ok { 0%,62% { opacity: 0; transform: scale(.4) } 67%,90% { opacity: 1; transform: none } 95%,100% { opacity: 0; transform: scale(.4) } }
.zj-tangan { transform-origin: 50% 100%; animation: zj-tangan 4.4s ease-in-out infinite; }
.zj-isi { transform-origin: center bottom; animation: zj-isi 4.4s linear infinite; }
.zj-garis { animation: zj-garis 4.4s linear infinite; }
.zj-ok { animation: zj-ok 4.4s ease-in-out infinite; }

/* kartu-warna */
@keyframes kw-k0 { 0%,4% { transform: translateY(18px); opacity: 0 } 10%,88% { transform: none; opacity: 1 } 94%,100% { transform: translateY(18px); opacity: 0 } }
.kw-k0 { animation: kw-k0 5s ease-in-out infinite; }
@keyframes kw-k1 { 0%,9% { transform: translateY(18px); opacity: 0 } 15%,88% { transform: none; opacity: 1 } 94%,100% { transform: translateY(18px); opacity: 0 } }
.kw-k1 { animation: kw-k1 5s ease-in-out infinite; }
@keyframes kw-k2 { 0%,14% { transform: translateY(18px); opacity: 0 } 20%,88% { transform: none; opacity: 1 } 94%,100% { transform: translateY(18px); opacity: 0 } }
.kw-k2 { animation: kw-k2 5s ease-in-out infinite; }
@keyframes kw-k3 { 0%,19% { transform: translateY(18px); opacity: 0 } 25%,88% { transform: none; opacity: 1 } 94%,100% { transform: translateY(18px); opacity: 0 } }
.kw-k3 { animation: kw-k3 5s ease-in-out infinite; }
@keyframes kw-k4 { 0%,24% { transform: translateY(18px); opacity: 0 } 30%,88% { transform: none; opacity: 1 } 94%,100% { transform: translateY(18px); opacity: 0 } }
.kw-k4 { animation: kw-k4 5s ease-in-out infinite; }
@keyframes kw-b0 { 0%,44% { transform: scaleY(0) } 62%,90% { transform: none } 96%,100% { transform: scaleY(0) } }
.kw-b0 { transform-origin: center bottom; animation: kw-b0 5s ease-out infinite; }
@keyframes kw-b1 { 0%,44% { transform: scaleY(0) } 62%,90% { transform: none } 96%,100% { transform: scaleY(0) } }
.kw-b1 { transform-origin: center bottom; animation: kw-b1 5s ease-out infinite; }
@keyframes kw-b2 { 0%,44% { transform: scaleY(0) } 62%,90% { transform: none } 96%,100% { transform: scaleY(0) } }
.kw-b2 { transform-origin: center bottom; animation: kw-b2 5s ease-out infinite; }
@keyframes kw-pindai { 0%,30% { opacity: 0; transform: none } 32% { opacity: .85; transform: none } 54% { opacity: .85; transform: translateX(136px) } 56%,100% { opacity: 0; transform: translateX(136px) } }
.kw-pindai { animation: kw-pindai 5s linear infinite; }

/* pengukur-kebisingan */
@keyframes pkb-jarum { 0% { transform: rotate(-62deg) } 12% { transform: rotate(-48deg) } 24% { transform: rotate(-58deg) } 40% { transform: rotate(4deg) } 48% { transform: rotate(-6deg) } 60% { transform: rotate(56deg) } 66% { transform: rotate(46deg) } 74% { transform: rotate(60deg) } 86% { transform: rotate(-20deg) } 100% { transform: rotate(-62deg) } }
@keyframes pkb-g { 0%,100% { opacity: .2 } 50% { opacity: 1 } }
@keyframes pkb-tenang { 0%,52% { opacity: 1 } 56%,84% { opacity: 0 } 90%,100% { opacity: 1 } }
@keyframes pkb-ramai { 0%,54% { opacity: 0; transform: none } 58% { opacity: 1; transform: scale(1.12) } 62%,82% { opacity: 1; transform: none } 88%,100% { opacity: 0 } }
.pkb-jarum { transform-origin: 50% 100%; animation: pkb-jarum 4.8s ease-in-out infinite; }
.pkb-g1, .pkb-g2 { animation: pkb-g .8s ease-in-out infinite; } .pkb-g2 { animation-delay: .2s; }
.pkb-tenang { animation: pkb-tenang 4.8s linear infinite; }
.pkb-ramai { animation: pkb-ramai 4.8s ease-in-out infinite; }

/* generator-soal-matematika */
@keyframes gsm-putar { to { transform: rotate(360deg) } }
@keyframes gsm-balik { to { transform: rotate(-360deg) } }
.gsm-g1 { animation: gsm-putar 3s linear infinite; } .gsm-g2 { animation: gsm-balik 2s linear infinite; }
@keyframes gsm-1 { 0%,8% { opacity: 0; transform: translateX(-14px) } 13%,88% { opacity: 1; transform: none } 93%,100% { opacity: 0; transform: translateX(-14px) } }
@keyframes gsm-2 { 0%,28% { opacity: 0; transform: translateX(-14px) } 33%,88% { opacity: 1; transform: none } 93%,100% { opacity: 0; transform: translateX(-14px) } }
@keyframes gsm-3 { 0%,48% { opacity: 0; transform: translateX(-14px) } 53%,88% { opacity: 1; transform: none } 93%,100% { opacity: 0; transform: translateX(-14px) } }
.gsm-1 { animation: gsm-1 4.4s ease-in-out infinite; }
.gsm-2 { animation: gsm-2 4.4s ease-in-out infinite; }
.gsm-3 { animation: gsm-3 4.4s ease-in-out infinite; }