/* Otto the otter — moods */
.otto{display:block;position:relative;width:100%;aspect-ratio:220/262;overflow:visible}
.otto .os{display:block;width:100%;height:100%;overflow:visible}
.otto canvas.o3{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.otto.on3d .os{visibility:hidden}
.o3fx{display:none;position:absolute;pointer-events:none;font-weight:800;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.otto.on3d .o3fx.q{right:-2%;top:-6%;width:30%;aspect-ratio:1;border-radius:50%;background:#fff;border:3px solid #8b7cff;color:#6c5ce7;font-size:min(7vw,30px);place-items:center}
.otto.on3d[data-mood=think] .o3fx.q{display:grid;animation:otFloatQ 2.4s ease-in-out infinite}
.otto.on3d[data-mood=sleep] .o3fx.zz{display:block;right:6%;top:2%;color:#8b9bff;font-size:min(8vw,34px);animation:otFloat 2.6s infinite}
.otto.on3d[data-mood=sleep] .o3fx.zz small{font-size:.7em}
.otto.on3d[data-mood=cheer] .o3fx.st,.otto.on3d[data-mood=wow] .o3fx.st{display:block;left:-4%;top:6%;font-size:min(8vw,34px);animation:otTw .9s infinite}
.otto .arm,.otto .tail,.otto .bob,.otto .head,.otto .eye,.otto .brow,.otto .ft,.otto .all,.otto .z,.otto .s{transform-box:view-box}
.otto .arm{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.otto .armL{transform:rotate(6deg)}.otto .armR{transform:rotate(-6deg)}
.otto .bob{animation:otBob 3.2s ease-in-out infinite}
.otto .tail{animation:otTail 2.6s ease-in-out infinite}
.otto .eye{animation:otBlink 4.6s infinite;transform-origin:0 0}
.otto .shut,.otto .fx,.otto .m{display:none}
.otto .m-smile{display:block}
.otto .brow{transition:transform .3s}
@keyframes otBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes otTail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(7deg)}}
@keyframes otBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes otFloat{0%{transform:translateY(8px);opacity:0}30%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
@keyframes otTw{0%,100%{transform:scale(.4);opacity:.2}50%{transform:scale(1);opacity:1}}
/* wave */
.otto[data-mood=wave] .armR{animation:otWave .55s ease-in-out infinite alternate}
@keyframes otWave{from{transform:rotate(-112deg)}to{transform:rotate(-150deg)}}
.otto[data-mood=wave] .m-smile{display:none}.otto[data-mood=wave] .m-open{display:block}
/* cheer */
.otto[data-mood=cheer] .all{animation:otJump .62s cubic-bezier(.3,0,.4,1) infinite;transform-origin:110px 250px}
.otto[data-mood=cheer] .bob{animation:none}
.otto[data-mood=cheer] .armL{transform:rotate(150deg);animation:otCh .31s ease-in-out infinite alternate}
.otto[data-mood=cheer] .armR{transform:rotate(-150deg);animation:otChR .31s ease-in-out infinite alternate}
.otto[data-mood=cheer] .m-smile{display:none}.otto[data-mood=cheer] .m-open{display:block}
.otto[data-mood=cheer] .fx-star{display:block}.otto[data-mood=cheer] .s{animation:otTw .8s infinite;transform-origin:center;transform-box:fill-box}
.otto .s2{animation-delay:.2s!important}.otto .s3{animation-delay:.4s!important}.otto .s4{animation-delay:.6s!important}
@keyframes otJump{0%,100%{transform:translateY(0) scale(1.03,.96)}45%{transform:translateY(-26px) scale(.98,1.03)}}
@keyframes otCh{from{transform:rotate(138deg)}to{transform:rotate(158deg)}}
@keyframes otChR{from{transform:rotate(-138deg)}to{transform:rotate(-158deg)}}
/* think */
.otto[data-mood=think] .armR{transform:rotate(112deg);animation:otTap .7s ease-in-out infinite alternate}
.otto[data-mood=think] .armL{animation:otSw 1.4s ease-in-out infinite alternate}
.otto[data-mood=think] .bob{animation-duration:1.4s}
@keyframes otTap{from{transform:rotate(106deg)}to{transform:rotate(121deg)}}
@keyframes otSw{from{transform:rotate(3deg)}to{transform:rotate(14deg)}}
.otto[data-mood=think] .head{animation:otTilt 1.8s ease-in-out infinite;transform-origin:110px 150px}
.otto[data-mood=think] .eye{transform:translate(3px,-3px)}
.otto[data-mood=think] .m-smile{display:none}.otto[data-mood=think] .m-flat{display:block}
.otto[data-mood=think] .fx-q{display:block;animation:otFloatQ 2.4s ease-in-out infinite}
.otto[data-mood=think] .browR{transform:translateY(-3px) rotate(-8deg)}
@keyframes otTilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
@keyframes otFloatQ{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* sad */
.otto[data-mood=sad] .m-smile{display:none}.otto[data-mood=sad] .m-frown{display:block}
.otto[data-mood=sad] .head{transform:translateY(6px) rotate(-3deg);transform-origin:110px 150px}
.otto[data-mood=sad] .browL{transform:rotate(-14deg)}.otto[data-mood=sad] .browR{transform:rotate(14deg)}
.otto[data-mood=sad] .armL{transform:rotate(3deg)}.otto[data-mood=sad] .armR{transform:rotate(-3deg)}
.otto[data-mood=sad] .bob{animation:none}.otto[data-mood=sad] .tail{animation:none;transform:rotate(-14deg)}
.otto[data-mood=sad] .fx-tear{display:block;animation:otTear 1.8s infinite}
@keyframes otTear{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(26px);opacity:0}}
/* sleep */
.otto[data-mood=sleep] .eyes,.otto[data-mood=sleep] .brow{display:none}.otto[data-mood=sleep] .shut{display:block}
.otto[data-mood=sleep] .m-smile{display:none}.otto[data-mood=sleep] .m-flat{display:block}
.otto[data-mood=sleep] .head{transform:rotate(7deg);transform-origin:110px 150px}
.otto[data-mood=sleep] .bob{animation-duration:4.5s}
.otto[data-mood=sleep] .fx-zzz{display:block}.otto[data-mood=sleep] .z{animation:otFloat 2.6s infinite}.otto[data-mood=sleep] .z2{animation-delay:.8s}.otto[data-mood=sleep] .z3{animation-delay:1.6s}
/* run */
.otto[data-mood=run] .all{transform:rotate(7deg);transform-origin:110px 250px}
.otto[data-mood=run] .bob{animation:otRun .4s ease-in-out infinite}
.otto[data-mood=run] .armL{animation:otArmA .4s ease-in-out infinite alternate}
.otto[data-mood=run] .armR{animation:otArmB .4s ease-in-out infinite alternate}
.otto[data-mood=run] .ftL{animation:otLegA .4s ease-in-out infinite alternate}
.otto[data-mood=run] .ftR{animation:otLegB .4s ease-in-out infinite alternate}
.otto[data-mood=run] .tail{animation:otTailR .4s ease-in-out infinite alternate}
.otto[data-mood=run] .m-smile{display:none}.otto[data-mood=run] .m-open{display:block}
.otto[data-mood=run] .fx-speed{display:block;animation:otSpeed .4s linear infinite}
@keyframes otRun{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes otArmA{from{transform:rotate(-38deg)}to{transform:rotate(48deg)}}
@keyframes otArmB{from{transform:rotate(38deg)}to{transform:rotate(-48deg)}}
@keyframes otLegA{from{transform:translate(-11px,-6px)}to{transform:translate(11px,0)}}
@keyframes otLegB{from{transform:translate(11px,0)}to{transform:translate(-11px,-6px)}}
@keyframes otTailR{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
@keyframes otSpeed{from{transform:translateX(6px);opacity:.2}to{transform:translateX(-8px);opacity:.7}}
/* point (arm out to the left; add .flip to point right) */
.otto[data-mood=point] .armL{transform:rotate(100deg);animation:otPt 1s ease-in-out infinite alternate}
.otto[data-mood=point] .head{transform:rotate(-4deg);transform-origin:110px 150px}
@keyframes otPt{from{transform:rotate(96deg)}to{transform:rotate(108deg)}}
.otto.flip{transform:scaleX(-1)}
/* shy: paws over the eyes */
.otto[data-mood=shy] .armL{transform:translateY(-2px) rotate(-150deg)}
.otto[data-mood=shy] .armR{transform:translateY(-2px) rotate(150deg)}
.otto[data-mood=shy] .eyes{opacity:0}
/* wow */
.otto[data-mood=wow] .m-smile{display:none}.otto[data-mood=wow] .m-o{display:block}
.otto[data-mood=wow] .brow{transform:translateY(-5px)}
.otto[data-mood=wow] .all{animation:otJump 1.1s ease-in-out infinite;transform-origin:110px 250px}
.otto[data-mood=wow] .armL{transform:rotate(60deg)}.otto[data-mood=wow] .armR{transform:rotate(-60deg)}
.otto[data-mood=wow] .fx-star{display:block}.otto[data-mood=wow] .s{animation:otTw .8s infinite;transform-origin:center;transform-box:fill-box}

.otto.imgmode .os{visibility:hidden}
.otto img.oi{position:absolute;left:-7%;top:13.7%;width:114%;height:auto;pointer-events:none}
.otto.imgmode .o3fx{display:none!important}