/* Dot. Everything that moves. The faces are set by dot.js. */
.dot{--s:32px;--tint:#E8912D;--amp:3px;width:var(--s);height:var(--s);display:inline-block;overflow:visible;vertical-align:middle;flex:none;line-height:0}
.dot svg{width:100%;height:100%;overflow:visible;display:block}
.dot .line{fill:none;stroke:var(--tint);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.dot .line2{fill:none;stroke:var(--tint);stroke-width:1.6;stroke-linecap:round;opacity:.9}
.dot .eye{fill:var(--tint);transform-origin:center;transform-box:fill-box;animation:dot-blink 6s infinite}
.dot .eye.r{animation-delay:.1s}
.dot .eye.alt{animation:none}
.dot .eye.alt path{fill:none;stroke:var(--tint);stroke-width:3;stroke-linecap:round}
.dot .mark{font:600 20px 'IBM Plex Sans',system-ui,sans-serif;fill:var(--tint);animation:dot-pop .25s ease-out}
.dot .orbit{fill:var(--tint)}
.dot .orbit .spin{animation:dot-orb 1.4s linear infinite}

/* it always moves. the tempo is the feeling. */
.dot .g{transform-origin:50px 54px;animation:dot-bob 3.6s ease-in-out infinite}
.dot[data-feel="happy"] .g,.dot[data-feel="wide"] .g{animation:dot-bob .7s ease-in-out infinite;--amp:6px}
.dot[data-feel="sad"] .g,.dot[data-feel="shut"] .g,.dot[data-feel="down"] .g{animation:dot-bob 5.5s ease-in-out infinite;--amp:2px}
.dot[data-feel="dizzy"] .g{animation:dot-sway 1.3s ease-in-out infinite}
.dot[data-feel="shifty"] .g,.dot[data-feel="side"] .g{animation:dot-sway 2.4s ease-in-out infinite;--amp:3px}
.dot[data-feel="tiny"] .g,.dot[data-feel="squint"] .g{animation:dot-bob 2s ease-in-out infinite;--amp:1.5px}
.dot[data-feel="focused"] .g{animation:none}

/* states, on top of the feeling */
.dot.has .g{animation:dot-hop 1.1s cubic-bezier(.3,1.4,.5,1) infinite}
.dot.five .g{animation:dot-tilt 1.4s ease-in-out infinite}
.dot.look .g{animation:dot-sway 2.6s ease-in-out infinite;--amp:4px}
.dot.gone .g{animation:dot-shrug 2.4s ease-in-out infinite}
.dot.sleep .g{animation:dot-bob 6s ease-in-out infinite;--amp:1.5px}
.dot.sleep .mark{animation:dot-zz 3s ease-in-out infinite}
.dot.reacting .g{animation-duration:.9s}

@keyframes dot-bob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(calc(-1 * var(--amp))) scale(1.015,.985)}}
@keyframes dot-sway{0%,100%{transform:translateX(calc(-1 * var(--amp,8px))) rotate(-5deg)}50%{transform:translateX(var(--amp,8px)) rotate(5deg)}}
@keyframes dot-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes dot-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes dot-orb{from{transform:translate(50px,14px) rotate(0) translate(-50px,-14px)}to{transform:translate(50px,14px) rotate(360deg) translate(-50px,-14px)}}
@keyframes dot-hop{0%,55%,100%{transform:translateY(0) scale(1,1)}10%{transform:scale(1.05,.94)}30%{transform:translateY(-12px) scale(.97,1.05)}48%{transform:scale(1.03,.97)}}
@keyframes dot-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes dot-shrug{0%,100%{transform:rotate(0)}30%{transform:translateY(-3px) rotate(-4deg)}60%{transform:translateY(2px) rotate(2deg)}}
@keyframes dot-zz{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(6px,-14px)}}

/* as an avatar: the circle is the Dot itself, no box around it */
.avatar.is-dot{background:none;border:0;padding:0;overflow:visible}
.avatar.is-dot .dot{--s:100%;width:100%;height:100%}

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