/* Pijar si kunang-kunang — karakter pendamping (dipakai di rak & halaman baca). */
.pijar { position: relative; pointer-events: none; }
.pijar-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pijar-badan { animation: melayang 3s ease-in-out infinite; }
@keyframes melayang { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.pj-sayap { transform-box: fill-box; }
.pj-sayap-kiri { transform-origin: 100% 60%; animation: kepak-kiri .32s ease-in-out infinite alternate; }
.pj-sayap-kanan { transform-origin: 0% 60%; animation: kepak-kanan .32s ease-in-out infinite alternate; }
@keyframes kepak-kiri { from { transform: rotate(-30deg); } to { transform: rotate(4deg); } }
@keyframes kepak-kanan { from { transform: rotate(30deg); } to { transform: rotate(-4deg); } }
.pj-halo { transform-box: fill-box; transform-origin: center; animation: nyala 2.4s ease-in-out infinite alternate; }
@keyframes nyala { from { opacity: .45; transform: scale(.85); } to { opacity: 1; transform: scale(1.12); } }
.pj-mata { transform-box: fill-box; transform-origin: center; animation: kedip 4.6s infinite; }
@keyframes kedip { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
.pj-mata-tutup, .pj-mulut, .pj-z { display: none; }
.pj-mulut { transform-box: fill-box; transform-origin: center; }

/* membacakan: mulut bergerak, ekor & sayap lebih semangat */
.pijar.baca .pj-senyum { display: none; }
.pijar.baca .pj-mulut { display: inline; animation: bicara .22s ease-in-out infinite alternate; }
@keyframes bicara { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.pijar.baca .pj-halo { animation-duration: .7s; }
.pijar.baca .pj-sayap-kiri, .pijar.baca .pj-sayap-kanan { animation-duration: .14s; }
/* tidur saat dijeda */
.pijar.tidur .pj-mata { display: none; }
.pijar.tidur .pj-mata-tutup { display: inline; }
.pijar.tidur .pj-sayap { animation-play-state: paused; }
.pijar.tidur .pj-halo { animation-duration: 4s; opacity: .4; }
.pijar.tidur .pijar-badan { animation-duration: 5s; }
.pijar.tidur .pj-z { display: inline; transform-box: fill-box; animation: zzz 2.2s ease-out infinite; }
@keyframes zzz { from { transform: translate(0, 6px); opacity: 0; } 30% { opacity: 1; } to { transform: translate(8px, -12px); opacity: 0; } }
/* lompat kecil saat halaman dibalik */
.pijar.loncat .pijar-badan { animation: loncat .7s var(--pop); }
@keyframes loncat { 0% { transform: translateY(0); } 35% { transform: translateY(-16px) rotate(-14deg); } 70% { transform: translateY(2px) rotate(6deg); } 100% { transform: translateY(0); } }
/* hore saat tamat */
.pijar.hore .pijar-badan { animation: hore 1s var(--pop) 3; }
@keyframes hore { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-18px) rotate(-180deg); } 70% { transform: translateY(-6px) rotate(-360deg); } }

.pijar-gelembung {
  position: absolute; left: 92%; top: 4px; width: max-content; max-width: min(210px, 52vw); line-height: 1.15;
  padding: 4px 12px; border-radius: 14px 14px 14px 4px; background: var(--krem); color: var(--tinta);
  font: 400 18px var(--font-tangan); box-shadow: var(--bayang-kecil); transform: rotate(-4deg);
}
.pijar-gelembung.baru { animation: tempel-gelembung .45s var(--pop); }
@keyframes tempel-gelembung { from { transform: rotate(-4deg) scale(.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pijar-badan, .pj-sayap, .pj-halo, .pj-mata, .pj-mulut { animation: none !important; }
}