/* ───────── Karakter: ekspresi, pose, gerakan ─────────
   Dikendalikan lewat atribut di <svg class="char">:
   data-e = netral | bahagia | sedih | marah | kaget
   data-pose = bawah | tunjuk | garuk
   data-bicara = 0 | 1                                                     */

.char { display: block; width: 100%; height: auto; overflow: visible; }
.char .ex, .char .fx { display: none; }
.char[data-e="netral"]  .e-netral,
.char[data-e="bahagia"] .e-bahagia, .char[data-e="bahagia"] .fx-bahagia,
.char[data-e="sedih"]   .e-sedih,   .char[data-e="sedih"]   .fx-sedih,
.char[data-e="marah"]   .e-marah,   .char[data-e="marah"]   .fx-marah,
.char[data-e="kaget"]   .e-kaget,   .char[data-e="kaget"]   .fx-kaget,
.char[data-e="cemberut"] .e-cemberut,
.char[data-e="jutek"]   .e-jutek,
.char[data-e="sebel"]   .e-sebel,   .char[data-e="sebel"]   .fx-sebel,
.char[data-e="gugup"]   .e-gugup,   .char[data-e="gugup"]   .fx-gugup { display: inline; }

/* ── pose lengan ── */
.char [class$="-atas"], .char [class$="-bawah"] { transition: transform .5s cubic-bezier(.3, 1.35, .5, 1); }
.char .jari-tunjuk { display: none; }
.char[data-pose="tunjuk"] .ln-kanan .jari-tunjuk { display: inline; }

.cewek[data-pose="tunjuk"] .ln-kanan-atas  { transform: rotate(-24deg); }
.cewek[data-pose="tunjuk"] .ln-kanan-bawah { transform: rotate(116deg); }
.cowok[data-pose="garuk"]  .ln-kanan-atas  { transform: rotate(-120deg); }
.cowok[data-pose="garuk"]  .ln-kanan-bawah { transform: rotate(-96deg); }
/* gerakan saat menunjuk / menggaruk */
.cewek[data-pose="tunjuk"] .ln-kanan-bawah { animation: cw-tunjuk .9s ease-in-out infinite alternate; }
.cowok[data-pose="garuk"]  .ln-kanan-bawah { animation: cw-garuk .5s ease-in-out infinite alternate; }
@keyframes cw-tunjuk { from { transform: rotate(112deg); } to { transform: rotate(124deg); } }
@keyframes cw-garuk  { from { transform: rotate(-90deg); } to { transform: rotate(-104deg); } }

/* pose melipat tangan (Dinda makin sensi) */
.cewek[data-pose="silang"] .ln-kiri-atas   { transform: rotate(-40deg); }
.cewek[data-pose="silang"] .ln-kiri-bawah  { transform: rotate(-58deg); }
.cewek[data-pose="silang"] .ln-kanan-atas  { transform: rotate(40deg); }
.cewek[data-pose="silang"] .ln-kanan-bawah { transform: rotate(58deg); }

/* ── SENSIAN: makin sering salah, makin ketus ── */
.char[data-e="cemberut"] .kepala { animation: cemberut 3.4s ease-in-out infinite; }
@keyframes cemberut { 0%, 100% { transform: rotate(3deg) translateX(3px); } 50% { transform: rotate(4.5deg) translateX(4px); } }
.char[data-e="cemberut"] .tubuh { animation: napas 2.8s ease-in-out infinite; }
.char[data-e="jutek"] .kepala { animation: jutek 2.6s ease-in-out infinite; }
@keyframes jutek { 0%, 100% { transform: rotate(6deg) translate(5px, -2px); } 40% { transform: rotate(7.5deg) translate(7px, -3px); } 70% { transform: rotate(5deg) translate(4px, -1px); } }
.char[data-e="jutek"] .tubuh { transform-origin: 150px 420px; animation: napas 2.4s ease-in-out infinite; }
.char[data-e="sebel"] .kepala { animation: sebel .5s ease-in-out infinite alternate; }
@keyframes sebel { from { transform: rotate(-2.5deg) translateY(3px); } to { transform: rotate(3deg) translateY(2px); } }
.char[data-e="sebel"] .tubuh { animation: sebel-tubuh .9s ease-in-out infinite; }
@keyframes sebel-tubuh { 0%, 100% { transform: translate(0, 0) scale(1.01); } 25% { transform: translate(-1.5px, 0) scale(1.02); } 75% { transform: translate(1.5px, 0) scale(1.02); } }
.char[data-e="gugup"] .tubuh { animation: gugup .5s ease-in-out infinite alternate; }
@keyframes gugup { from { transform: translateX(-1.4px); } to { transform: translateX(1.4px); } }
.char[data-e="gugup"] .kepala { animation: kepala-idle 2.2s ease-in-out infinite; }
.keringat.k2 { animation-delay: -.6s; }
/* tingkat amarah: makin sering gagal, makin meledak */
.char[data-e="marah"][data-int="2"] .tubuh { animation-duration: .12s; }
.char[data-e="marah"][data-int="3"] .tubuh { animation-duration: .09s; }
.char[data-e="marah"][data-int="3"] .urat { animation-duration: .25s; }

/* ── gerak dasar: bernapas, kepala, kedip, kuncir ── */
.char .tubuh { transform-origin: 150px 420px; animation: napas 3.6s ease-in-out infinite; }
@keyframes napas { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.006, 1.012); } }

.char .kepala { animation: kepala-idle 5.2s ease-in-out infinite; }
@keyframes kepala-idle { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg) translateY(-1px); } }

.char .mata-kedip { transform-box: fill-box; transform-origin: 50% 55%; animation: kedip 4.6s infinite; }
.cowok .mata-kedip { animation-duration: 5.4s; animation-delay: -1.7s; }
@keyframes kedip { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }

.cewek .kuncir { animation: kuncir 3.1s ease-in-out infinite alternate; }
@keyframes kuncir { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }

/* ── bicara ── */
.char .mulut-buka { display: none; }
.char[data-bicara="1"] .e-netral .mulut-tutup { display: none; }
.char[data-bicara="1"] .e-netral .mulut-buka { display: inline; transform-box: fill-box; transform-origin: 50% 40%; animation: ngomong .26s steps(2, end) infinite alternate; }
@keyframes ngomong { from { transform: scaleY(.25); } to { transform: scale(1.15, 1.05); } }
.char[data-bicara="1"] .kepala { animation: kepala-bicara .5s ease-in-out infinite alternate; }
@keyframes kepala-bicara { from { transform: rotate(-1.6deg) translateY(0); } to { transform: rotate(1.6deg) translateY(-2px); } }

/* ── BAHAGIA: loncat kecil, kepala miring, hati & kilau melayang ── */
.char[data-e="bahagia"] .tubuh { animation: loncat .72s cubic-bezier(.3, 0, .4, 1) infinite; }
@keyframes loncat { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(2px) scale(1.02, .975); } 50% { transform: translateY(-17px) scale(.99, 1.02); } 88% { transform: translateY(1px) scale(1.01, .99); } }
.char[data-e="bahagia"] .kepala { animation: miring .72s ease-in-out infinite alternate; }
@keyframes miring { from { transform: rotate(-4.5deg); } to { transform: rotate(4.5deg); } }
.char[data-e="bahagia"] .ln-kiri-atas  { animation: ayun-kiri .72s ease-in-out infinite alternate; }
.char[data-e="bahagia"]:not([data-pose="tunjuk"]):not([data-pose="garuk"]) .ln-kanan-atas { animation: ayun-kanan .72s ease-in-out infinite alternate; }
@keyframes ayun-kiri  { from { transform: rotate(6deg); } to { transform: rotate(-8deg); } }
@keyframes ayun-kanan { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
.hati { transform-box: fill-box; transform-origin: 50% 50%; animation: melayang 2.2s ease-in infinite; }
.hati.h2 { animation-delay: -1.1s; }
@keyframes melayang { 0% { transform: translateY(14px) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-44px) scale(1.15); opacity: 0; } }
.kilau { transform-box: fill-box; transform-origin: 50% 50%; animation: kilau 1.2s ease-in-out infinite; }
.kilau.k2 { animation-delay: -.6s; }
@keyframes kilau { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

/* ── SEDIH: lesu, kepala menunduk, air mata jatuh, awan mendung ── */
.char[data-e="sedih"] .tubuh { animation: lesu 3.8s ease-in-out infinite; }
@keyframes lesu { 0%, 100% { transform: translateY(5px) scale(1, .975); } 50% { transform: translateY(8px) scale(1, .965); } }
.char[data-e="sedih"] .kepala { animation: tunduk 3.2s ease-in-out infinite; }
@keyframes tunduk { 0%, 100% { transform: rotate(-3.5deg) translateY(7px); } 50% { transform: rotate(-1.5deg) translateY(10px); } }
.char[data-e="sedih"] .ln-kiri-atas  { transform: rotate(4deg); }
.char[data-e="sedih"]:not([data-pose="tunjuk"]):not([data-pose="garuk"]) .ln-kanan-atas { transform: rotate(-4deg); }
.char[data-e="sedih"] .kuncir { animation-duration: 6s; }
.tetes { transform-box: fill-box; transform-origin: 50% 0; animation: jatuh 1.5s ease-in infinite; }
.tetes.t2 { animation-delay: -.75s; }
@keyframes jatuh { 0% { transform: translateY(-6px) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(54px) scale(1, 1.2); opacity: 0; } }
.garis-murung { animation: murung 2.4s ease-in-out infinite alternate; }
@keyframes murung { from { opacity: .35; } to { opacity: .95; } }
.char .bibir-gemetar { transform-box: fill-box; transform-origin: 50% 50%; animation: gemetar-bibir .35s linear infinite alternate; }
@keyframes gemetar-bibir { from { transform: translateY(0) scaleX(1); } to { transform: translateY(1.2px) scaleX(.94); } }

/* ── MARAH: gemetar, condong ke depan, urat berdenyut, uap mengepul ── */
.char[data-e="marah"] .tubuh { animation: marah-tubuh .16s linear infinite; }
@keyframes marah-tubuh { 0% { transform: translate(-2px, 0) scale(1.035); } 25% { transform: translate(2px, -1px) scale(1.035); } 50% { transform: translate(-1px, 1px) scale(1.04); } 75% { transform: translate(2px, 0) scale(1.035); } 100% { transform: translate(-2px, 0) scale(1.035); } }
.char[data-e="marah"] .kepala { animation: marah-kepala .3s ease-in-out infinite alternate; }
@keyframes marah-kepala { from { transform: rotate(-3deg) translateY(4px); } to { transform: rotate(3deg) translateY(4px); } }
.char[data-e="marah"] .ln-kiri-atas  { transform: rotate(10deg); }
.char[data-e="marah"]:not([data-pose="tunjuk"]):not([data-pose="garuk"]) .ln-kanan-atas { transform: rotate(-10deg); }
.char[data-e="marah"] .kuncir { animation-duration: .5s; }
.urat { transform-box: fill-box; transform-origin: 50% 50%; animation: denyut .45s ease-in-out infinite alternate; }
@keyframes denyut { from { transform: scale(.75); } to { transform: scale(1.2); } }
.uap { transform-box: fill-box; transform-origin: 50% 100%; animation: uap 1s ease-out infinite; }
.uap.u2 { animation-delay: -.33s; }
.uap.u3 { animation-delay: -.66s; }
@keyframes uap { 0% { transform: translateY(10px) scaleY(.5); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateY(-26px) scaleY(1.2); opacity: 0; } }

/* ── KAGET: tersentak sekali, keringat menetes ── */
.char[data-e="kaget"] .tubuh { animation: tersentak .4s cubic-bezier(.2, 1.6, .4, 1) 1, napas 3.6s ease-in-out .4s infinite; }
@keyframes tersentak { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-12px) scale(1.07, 1.09); } 100% { transform: translateY(0) scale(1); } }
.char[data-e="kaget"] .kepala { animation: mundur .4s ease-out 1 forwards; }
@keyframes mundur { 0% { transform: rotate(0); } 40% { transform: rotate(-6deg) translateY(-4px); } 100% { transform: rotate(-2deg); } }
.keringat { transform-box: fill-box; transform-origin: 50% 0; animation: keringat 1.2s ease-in infinite; }
@keyframes keringat { 0% { transform: translateY(0) scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(22px) scale(1); opacity: 0; } }
.seru { transform-box: fill-box; transform-origin: 50% 100%; animation: seru .35s ease-in-out infinite alternate; }
@keyframes seru { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.15); } }

/* ── latar bergerak kecil ── */
.bt { animation: kerlip 3s ease-in-out infinite; }
@keyframes kerlip { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.gr { animation: hujan .9s linear infinite; }
@keyframes hujan { from { transform: translate(0, -20px); } to { transform: translate(-30px, 330px); } }
.hati-chat { transform-box: fill-box; transform-origin: 50% 60%; animation: debar 1.4s ease-in-out infinite; }
@keyframes debar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .char *, .char, .bt, .gr, .hati-chat { animation: none !important; transition: none !important; }
}