/* 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 · Spin move: hops and turns (squashes sideways through the turn), 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}
@keyframes d5a{0%{transform:translateY(0) scaleX(1)}12%{transform:translateY(-22px) scaleX(.55)}25%{transform:translateY(-26px) scaleX(-.1)}38%{transform:translateY(-22px) scaleX(-.8)}50%{transform:translateY(0) scaleX(-1)}62%{transform:translateY(-22px) scaleX(-.55)}75%{transform:translateY(-26px) scaleX(.1)}88%{transform:translateY(-22px) scaleX(.8)}100%{transform:translateY(0) scaleX(1)}}
@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}