/* Otto TikTok-style dances. Moods d1..d6 (set by js/otto_dance.js). Every move is on a 0.8s beat (two beats = 1.6s loop). */
.otto[data-mood^=d]:not([data-mood=dance]) .bob{animation:none}
.otto[data-mood^=d]:not([data-mood=dance]) .arm{transition:none}
.otto[data-mood^=d]:not([data-mood=dance]) .all{transform-origin:110px 250px}
.otto[data-mood^=d]:not([data-mood=dance]) .m-smile{display:none}
.otto[data-mood^=d]:not([data-mood=dance]) .m-open{display:block}
.otto[data-mood^=d]:not([data-mood=dance]) .fx-star{display:block}
.otto[data-mood^=d]:not([data-mood=dance]) .s{animation:otTw .8s infinite;transform-origin:center;transform-box:fill-box}
.otto[data-mood^=d]:not([data-mood=dance]) .tail{animation:dTail .4s ease-in-out infinite alternate}
.otto[data-mood^=d]:not([data-mood=dance]) .ft{transition:none}
@keyframes dTail{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

/* d1 · Raise the roof: both arms pump overhead, knees bounce */
.otto[data-mood=d1] .all{animation:d1a .4s ease-in-out infinite alternate}
.otto[data-mood=d1] .armL{animation:d1l .4s ease-in-out infinite alternate}
.otto[data-mood=d1] .armR{animation:d1r .4s ease-in-out infinite alternate}
.otto[data-mood=d1] .head{animation:d1h .8s ease-in-out infinite;transform-origin:110px 150px}
@keyframes d1a{from{transform:translateY(0) scale(1.03,.95)}to{transform:translateY(-10px) scale(.98,1.03)}}
@keyframes d1l{from{transform:rotate(128deg)}to{transform:rotate(172deg)}}
@keyframes d1r{from{transform:rotate(-172deg)}to{transform:rotate(-128deg)}}
@keyframes d1h{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* d2 · Floss: arms swing across the body one way while the hips go the other */
.otto[data-mood=d2] .all{animation:d2a .4s ease-in-out infinite alternate}
.otto[data-mood=d2] .armL{animation:d2l .4s ease-in-out infinite alternate}
.otto[data-mood=d2] .armR{animation:d2r .4s ease-in-out infinite alternate}
.otto[data-mood=d2] .head{animation:d2h .4s ease-in-out infinite alternate;transform-origin:110px 150px}
@keyframes d2a{from{transform:translateX(-16px) rotate(-5deg)}to{transform:translateX(16px) rotate(5deg)}}
@keyframes d2l{from{transform:rotate(-70deg)}to{transform:rotate(80deg)}}
@keyframes d2r{from{transform:rotate(-80deg)}to{transform:rotate(70deg)}}
@keyframes d2h{from{transform:translateX(8px)}to{transform:translateX(-8px)}}

/* d3 · Dab (and swap sides): head into the elbow, other arm points away */
.otto[data-mood=d3] .all{animation:d3a 1.6s ease-in-out infinite}
.otto[data-mood=d3] .armL{animation:d3l 1.6s ease-in-out infinite}
.otto[data-mood=d3] .armR{animation:d3r 1.6s ease-in-out infinite}
.otto[data-mood=d3] .head{animation:d3h 1.6s ease-in-out infinite;transform-origin:110px 150px}
@keyframes d3a{0%,10%,100%{transform:translateY(0)}20%,45%{transform:translateY(4px) rotate(-3deg)}55%,60%{transform:translateY(0)}70%,95%{transform:translateY(4px) rotate(3deg)}}
@keyframes d3l{0%,10%,100%{transform:rotate(6deg)}20%,45%{transform:rotate(-62deg)}55%,60%{transform:rotate(6deg)}70%,95%{transform:rotate(150deg)}}
@keyframes d3r{0%,10%,100%{transform:rotate(-6deg)}20%,45%{transform:rotate(-150deg)}55%,60%{transform:rotate(-6deg)}70%,95%{transform:rotate(62deg)}}
@keyframes d3h{0%,10%,100%{transform:rotate(0)}20%,45%{transform:rotate(20deg) translateY(8px)}55%,60%{transform:rotate(0)}70%,95%{transform:rotate(-20deg) translateY(8px)}}

/* d4 · Hip pop / whip: big sway, one hand up, one down, head bobbing */
.otto[data-mood=d4] .all{animation:d4a .8s ease-in-out infinite}
.otto[data-mood=d4] .armL{animation:d4l .8s ease-in-out infinite}
.otto[data-mood=d4] .armR{animation:d4r .8s ease-in-out infinite}
.otto[data-mood=d4] .head{animation:d4h .4s ease-in-out infinite alternate;transform-origin:110px 150px}
@keyframes d4a{0%,100%{transform:translateX(-14px) rotate(-8deg)}50%{transform:translateX(14px) rotate(8deg)}}
@keyframes d4l{0%,100%{transform:rotate(150deg)}50%{transform:rotate(20deg)}}
@keyframes d4r{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-150deg)}}
@keyframes d4h{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(8deg) translateY(5px)}}

/* d5 · Twist & hop: hops and twists side to side, always facing the front (no spin, so he never goes flat), arms out */
.otto[data-mood=d5] .all{animation:d5a 1.6s ease-in-out infinite}
.otto[data-mood=d5] .armL{transform:rotate(95deg);animation:d5l .4s ease-in-out infinite alternate}
.otto[data-mood=d5] .armR{transform:rotate(-95deg);animation:d5r .4s ease-in-out infinite alternate}
.otto[data-mood=d5] .head{animation:d1h .8s ease-in-out infinite;transform-origin:110px 150px}
@keyframes d5a{0%,100%{transform:translateY(0) rotate(0) scale(1.03,.96)}12%{transform:translateY(-20px) rotate(-9deg) scale(.98,1.03)}25%{transform:translateY(-24px) rotate(-11deg) scale(.98,1.03)}38%{transform:translateY(-18px) rotate(-5deg)}50%{transform:translateY(0) rotate(0) scale(1.03,.96)}62%{transform:translateY(-20px) rotate(9deg) scale(.98,1.03)}75%{transform:translateY(-24px) rotate(11deg) scale(.98,1.03)}88%{transform:translateY(-18px) rotate(5deg)}}
@keyframes d5l{from{transform:rotate(80deg)}to{transform:rotate(112deg)}}
@keyframes d5r{from{transform:rotate(-112deg)}to{transform:rotate(-80deg)}}

/* d6 · Arm roll / renegade: arms alternate sharp hits, shoulders and head snap to the beat */
.otto[data-mood=d6] .all{animation:d6a .4s steps(2,jump-none) infinite alternate}
.otto[data-mood=d6] .armL{animation:d6l .8s steps(4,jump-none) infinite}
.otto[data-mood=d6] .armR{animation:d6r .8s steps(4,jump-none) infinite}
.otto[data-mood=d6] .head{animation:d6h .8s steps(4,jump-none) infinite;transform-origin:110px 150px}
@keyframes d6a{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes d6l{0%{transform:rotate(140deg)}25%{transform:rotate(60deg)}50%{transform:rotate(-30deg)}75%{transform:rotate(60deg)}100%{transform:rotate(140deg)}}
@keyframes d6r{0%{transform:rotate(-30deg)}25%{transform:rotate(-60deg)}50%{transform:rotate(-140deg)}75%{transform:rotate(-60deg)}100%{transform:rotate(-30deg)}}
@keyframes d6h{0%{transform:rotate(-10deg)}25%{transform:rotate(0)}50%{transform:rotate(10deg)}75%{transform:rotate(0)}100%{transform:rotate(-10deg)}}

/* floor glow while dancing */
.otto.dancing::after{content:"";position:absolute;left:8%;right:8%;bottom:-2%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,61,.55),transparent);animation:dGlow .8s ease-in-out infinite alternate;pointer-events:none}
@keyframes dGlow{from{opacity:.35;transform:scaleX(.8)}to{opacity:.9;transform:scaleX(1.1)}}
.otto.dancing{cursor:pointer}

/* ── Idle gestures (login screen and anywhere Otto waits). All face the front. Moods: hop sway look clap stretch ── */
.otto[data-mood=hop] .all,.otto[data-mood=sway] .all,.otto[data-mood=clap] .all,.otto[data-mood=stretch] .all{transform-origin:110px 250px}
.otto[data-mood=hop] .bob,.otto[data-mood=clap] .bob,.otto[data-mood=stretch] .bob{animation:none}
.otto[data-mood=hop] .m-smile,.otto[data-mood=clap] .m-smile,.otto[data-mood=stretch] .m-smile{display:none}
.otto[data-mood=hop] .m-open,.otto[data-mood=clap] .m-open,.otto[data-mood=stretch] .m-open{display:block}
/* hop: two quick hops, arms lift on take-off */
.otto[data-mood=hop] .all{animation:otHop 1.1s cubic-bezier(.3,0,.4,1) infinite}
.otto[data-mood=hop] .armL{animation:otHopL 1.1s ease-in-out infinite}
.otto[data-mood=hop] .armR{animation:otHopR 1.1s ease-in-out infinite}
@keyframes otHop{0%,100%{transform:translateY(0) scale(1.04,.95)}22%{transform:translateY(-30px) scale(.97,1.04)}44%,56%{transform:translateY(0) scale(1.04,.95)}72%{transform:translateY(-20px) scale(.98,1.03)}}
@keyframes otHopL{0%,100%{transform:rotate(8deg)}22%{transform:rotate(70deg)}50%{transform:rotate(8deg)}72%{transform:rotate(50deg)}}
@keyframes otHopR{0%,100%{transform:rotate(-8deg)}22%{transform:rotate(-70deg)}50%{transform:rotate(-8deg)}72%{transform:rotate(-50deg)}}
/* sway: slow side-to-side groove, arms swing, tail wags */
.otto[data-mood=sway] .all{animation:otSway 2s ease-in-out infinite}
.otto[data-mood=sway] .armL{animation:otSwL 2s ease-in-out infinite}
.otto[data-mood=sway] .armR{animation:otSwR 2s ease-in-out infinite}
.otto[data-mood=sway] .head{animation:otSwH 2s ease-in-out infinite;transform-origin:110px 150px}
.otto[data-mood=sway] .tail{animation:dTail .5s ease-in-out infinite alternate}
@keyframes otSway{0%,100%{transform:translateX(-9px) rotate(-4deg)}50%{transform:translateX(9px) rotate(4deg)}}
@keyframes otSwL{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(34deg)}}
@keyframes otSwR{0%,100%{transform:rotate(-34deg)}50%{transform:rotate(14deg)}}
@keyframes otSwH{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
/* look: eyes dart left and right, head follows a little */
.otto[data-mood=look] .eyes{animation:otLook 2.6s ease-in-out infinite}
.otto[data-mood=look] .head{animation:otLookH 2.6s ease-in-out infinite;transform-origin:110px 150px}
.otto[data-mood=look] .brow{transform:translateY(-3px)}
@keyframes otLook{0%,12%{transform:translateX(0)}22%,42%{transform:translateX(-7px)}52%,60%{transform:translateX(0)}70%,90%{transform:translateX(7px)}100%{transform:translateX(0)}}
@keyframes otLookH{0%,12%{transform:rotate(0)}22%,42%{transform:rotate(-7deg)}52%,60%{transform:rotate(0)}70%,90%{transform:rotate(7deg)}100%{transform:rotate(0)}}
/* clap: paws meet in front of the belly, small bounce on every clap */
.otto[data-mood=clap] .all{animation:otClapB .5s ease-in-out infinite alternate}
.otto[data-mood=clap] .armL{animation:otClapL .25s ease-in-out infinite alternate}
.otto[data-mood=clap] .armR{animation:otClapR .25s ease-in-out infinite alternate}
@keyframes otClapB{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes otClapL{from{transform:rotate(-16deg)}to{transform:rotate(-50deg)}}
@keyframes otClapR{from{transform:rotate(16deg)}to{transform:rotate(50deg)}}
/* stretch: both arms rise up and back, body grows tall, then relaxes */
.otto[data-mood=stretch] .all{animation:otStr 2.4s ease-in-out infinite}
.otto[data-mood=stretch] .armL{animation:otStrL 2.4s ease-in-out infinite}
.otto[data-mood=stretch] .armR{animation:otStrR 2.4s ease-in-out infinite}
.otto[data-mood=stretch] .head{animation:otStrH 2.4s ease-in-out infinite;transform-origin:110px 150px}
@keyframes otStr{0%,100%{transform:scale(1.02,.98)}45%,65%{transform:scale(.97,1.05)}}
@keyframes otStrL{0%,100%{transform:rotate(6deg)}45%,65%{transform:rotate(172deg)}}
@keyframes otStrR{0%,100%{transform:rotate(-6deg)}45%,65%{transform:rotate(-172deg)}}
@keyframes otStrH{0%,100%{transform:rotate(0)}45%,65%{transform:rotate(-5deg) translateY(-3px)}}