/* ============================================================
   BEAR BERSIH — Bear rig moves
   Parts (see js/bear-rig.js): .rig__all > .rig__legL / .rig__legR /
   .rig__torso > (.rig__armL, .rig__head, .rig__armR > .rig__mist)
   A move = keyframes per part, selected by [data-act="<move>"] on
   the host element. Units are source-image pixels (1024 box).
   ============================================================ */

.rig{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.rig g,.rig ellipse{transform-box:view-box}

/* pivots */
.rig__all  {transform-origin:500px 850px}
.rig__torso{transform-origin:500px 760px}
.rig__head {transform-origin:500px 420px}
.rig__armL {transform-origin:345px 428px}
.rig__armR {transform-origin:660px 455px}
.rig__legL {transform-origin:410px 728px}
.rig__legR {transform-origin:590px 728px}
.rig__shadow{transform-origin:500px 846px}

/* blink: eyelids (fur + closed-eye curve) cover the eyes */
.rig__lids{opacity:0}
.is-blink .rig__lids{opacity:1}

/* debug outlines (add class "rig-debug" to the host) */
.rig__debug{display:none}
.rig-debug .rig__debug{display:inline}

/* spray mist — only visible during "spray" */
.rig__mist circle{transform-box:fill-box;transform-origin:center;opacity:0}

/* every move loops; ease-in-out unless noted */
.rig *{animation-timing-function:ease-in-out;animation-iteration-count:infinite}

/* animations run as soon as the rig mounts (page is always is-live) */

/* ---------------------------------------------------------------
   The puppet is cut into parts, so moving a part against the body
   opens a seam (gap/ghost). To stay seam-free & never "double",
   the hero bear moves as ONE whole piece (breathe) and only the
   spray mist puffs. No part ever slides relative to another.
   --------------------------------------------------------------- */
[data-act="idle"] .rig__all,
[data-act="spray"] .rig__all,
[data-act="wave"]  .rig__all{animation:rBreathe 6s}
/* smooth floating sway: gentle bob + soft side-to-side tilt + tiny breath-scale,
   all on the WHOLE body (pivot at the feet) so nothing distorts */
@keyframes rBreathe{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  25%{transform:translateY(-8px) rotate(-1.1deg) scale(1.006)}
  50%{transform:translateY(-14px) rotate(0deg) scale(1.012)}
  75%{transform:translateY(-8px) rotate(1.1deg) scale(1.006)}
}

/* cloth arm always sways a little (the belly patch hides its joint, so moving it is safe) */
[data-act="idle"] .rig__armL,
[data-act="spray"] .rig__armL{animation:rArmLsway 5s}
@keyframes rArmLsway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(4deg)}}

/* WAVE — full-body hello: bottle arm waves, head tilts, cloth arm swings, feet bob in place.
   Amplitudes kept moderate so each part stays inside its mask overlap (no seam). */
[data-act="wave"] .rig__armR{animation:rWaveArm 1s}
[data-act="wave"] .rig__head{animation:rWaveHead 2s}
[data-act="wave"] .rig__armL{animation:rWaveArmL 1s}
[data-act="wave"] .rig__legL{animation:rWaveLegs 1s}
[data-act="wave"] .rig__legR{animation:rWaveLegs 1s;animation-delay:-.5s}
@keyframes rWaveArm {0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes rWaveHead{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(1.5deg) translateY(-2px)}}
@keyframes rWaveArmL{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
@keyframes rWaveLegs{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-6px)}}

/* BYE ("dadah") — played while the guest scrolls down: the bottle arm waves goodbye
   in quick swings, the head tilts along, the cloth arm swings, and the feet step
   from one to the other. Amplitudes stay inside each part's mask overlap (no seam). */
[data-act="bye"] .rig__all  {animation:rByeBody .9s}
[data-act="bye"] .rig__armR {animation:rByeArm .6s}
[data-act="bye"] .rig__head {animation:rByeHead .9s}
[data-act="bye"] .rig__armL {animation:rWaveArmL .9s}
[data-act="bye"] .rig__legL {animation:rByeStep .9s}
[data-act="bye"] .rig__legR {animation:rByeStep .9s;animation-delay:-.45s}
[data-act="bye"] .rig__shadow{animation:rByeShadow .45s}
@keyframes rByeArm  {0%,100%{transform:rotate(-9deg)}50%{transform:rotate(10deg)}}
@keyframes rByeHead {0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(2.5deg) translateY(-3px)}}
@keyframes rByeBody {0%,50%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-1deg)}75%{transform:translateY(-10px) rotate(1deg)}}
@keyframes rByeStep {0%,50%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-20px) rotate(-4deg)}}
@keyframes rByeShadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.8}}

/* SPRAY — the bottle puffs mist; the bear itself just keeps breathing */
[data-act="spray"] .rig__mist circle{animation:rMist 1.8s ease-out infinite;animation-delay:calc(var(--i) * .08s)}
@keyframes rMist{
  0%,14%{transform:translate(0,0) scale(.3);opacity:0}
  22%{opacity:.95}
  70%{transform:translate(calc(70px + var(--i) * 9px),calc(-30px - var(--i) * 6px)) scale(2.6);opacity:0}
  100%{opacity:0}
}

/* ---------------- WIPE — polishing circles with the cloth ---------------- */
[data-act="wipe"] .rig__armL {animation:rWipeArm 1.4s linear}
[data-act="wipe"] .rig__torso{animation:rWipeTorso 1.4s}
[data-act="wipe"] .rig__head {animation:rWipeHead 2.8s}
@keyframes rWipeArm{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-14px,-12px) rotate(6deg)}
  50%{transform:translate(0,-22px) rotate(10deg)}
  75%{transform:translate(12px,-10px) rotate(4deg)}
}
@keyframes rWipeTorso{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg) translateY(-3px)}}
@keyframes rWipeHead {0%,100%{transform:rotate(6deg)}50%{transform:rotate(3deg)}}

/* ---------------- WALK — alternating steps in place ---------------- */
[data-act="walk"] .rig__legL {animation:rStep 1s}
[data-act="walk"] .rig__legR {animation:rStep 1s;animation-delay:-.5s}
[data-act="walk"] .rig__torso{animation:rWalkTorso .5s}
[data-act="walk"] .rig__head {animation:rWalkHead 1s}
[data-act="walk"] .rig__armL {animation:rSwing 1s}
[data-act="walk"] .rig__armR {animation:rSwing 1s;animation-delay:-.5s}
@keyframes rStep{0%,50%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-26px) rotate(-5deg)}}
@keyframes rWalkTorso{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rWalkHead {0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes rSwing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* ---------------- HOP — happy jump with squash & stretch ---------------- */
[data-act="hop"] .rig__all   {animation:rHop 1.1s}
[data-act="hop"] .rig__shadow{animation:rHopShadow 1.1s}
[data-act="hop"] .rig__armL  {animation:rHopArmL 1.1s}
[data-act="hop"] .rig__armR  {animation:rHopArmR 1.1s}
[data-act="hop"] .rig__legL,
[data-act="hop"] .rig__legR  {animation:rHopLegs 1.1s}
@keyframes rHop{
  0%,100%{transform:translateY(0) scale(1,1)}
  12%{transform:translateY(0) scale(1.06,.92)}
  40%{transform:translateY(-110px) scale(.96,1.05)}
  68%{transform:translateY(0) scale(1.05,.94)}
  80%{transform:translateY(0) scale(1,1)}
}
@keyframes rHopShadow{0%,12%,68%,100%{transform:scale(1);opacity:1}40%{transform:scale(.6);opacity:.45}}
@keyframes rHopArmL{0%,12%,80%,100%{transform:rotate(0)}40%{transform:rotate(10deg) translateY(-8px)}}
@keyframes rHopArmR{0%,12%,80%,100%{transform:rotate(0)}40%{transform:rotate(-14deg)}}
@keyframes rHopLegs{0%,12%,80%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}

/* ---------------- NOD — "iya" ---------------- */
[data-act="nod"] .rig__head{animation:rNod .8s}
@keyframes rNod{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(12px) scale(1.01,.96)}}

/* ---------------- SHAKE — "tidak" (head shake) ---------------- */
[data-act="shake"] .rig__head{animation:rShake .7s}
@keyframes rShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg) translateX(-3px)}75%{transform:rotate(5deg) translateX(3px)}}

/* ---------------- DANCE — sway, bob, arms alternate ---------------- */
[data-act="dance"] .rig__torso{animation:rDanceTorso 1s}
[data-act="dance"] .rig__head {animation:rDanceHead 1s}
[data-act="dance"] .rig__armL {animation:rDanceArmL 1s}
[data-act="dance"] .rig__armR {animation:rDanceArmR 1s}
[data-act="dance"] .rig__legL {animation:rStep 1s}
[data-act="dance"] .rig__legR {animation:rStep 1s;animation-delay:-.5s}
@keyframes rDanceTorso{0%,100%{transform:rotate(-3deg) translateY(0)}25%,75%{transform:translateY(-10px)}50%{transform:rotate(3deg) translateY(0)}}
@keyframes rDanceHead {0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
@keyframes rDanceArmL {0%,100%{transform:rotate(0)}50%{transform:rotate(10deg) translateY(-10px)}}
@keyframes rDanceArmR {0%,100%{transform:rotate(-16deg)}50%{transform:rotate(4deg)}}

/* ---------------- CHEER — both arms up, "yeay bersih!" ---------------- */
[data-act="cheer"] .rig__armL {animation:rCheerArmL 1.2s}
[data-act="cheer"] .rig__armR {animation:rCheerArmR 1.2s}
[data-act="cheer"] .rig__torso{animation:rCheerTorso .6s}
[data-act="cheer"] .rig__head {animation:rCheerHead 1.2s}
@keyframes rCheerArmL {0%,100%{transform:rotate(8deg) translateY(-12px)}50%{transform:rotate(13deg) translateY(-22px)}}
@keyframes rCheerArmR {0%,100%{transform:rotate(-16deg)}50%{transform:rotate(-24deg)}}
@keyframes rCheerTorso{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px) scale(1.01,.99)}}
@keyframes rCheerHead {0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-4px)}}

/* ---------------- PEEK — leans in curiously ---------------- */
[data-act="peek"] .rig__torso{animation:rPeekTorso 2.6s}
[data-act="peek"] .rig__head {animation:rPeekHead 2.6s}
@keyframes rPeekTorso{0%,100%{transform:rotate(0)}35%,65%{transform:rotate(4deg)}}
@keyframes rPeekHead {0%,100%{transform:rotate(0)}35%,65%{transform:rotate(9deg) translateX(10px)}}

@media (prefers-reduced-motion: reduce){
  .rig *{animation:none!important}
}