/* Bubble's moves (site/bubble.js draws him). Each part turns around its own joint, in the drawing's
   units: hips at (138, 298) and (162, 298) on the pen's end, shoulders at (122, 238) and (178, 238). */
.bubble { display: inline-block; line-height: 0; }
.bubble .bb { width: 100%; height: auto; overflow: visible; }
.bb .bb-leg, .bb .bb-arm, .bb .bb-top, .bb .bb-rings path { transform-box: view-box; }
.bb-legl { transform-origin: 138px 298px; }
.bb-legr { transform-origin: 162px 298px; }
.bb-arm-l { transform-origin: 122px 238px; }
.bb-arm-r { transform-origin: 178px 238px; }
.bb-top { transform-origin: 150px 300px; }
.bb-eyes { transition: transform .12s ease-out; }
.bb-eye { transform-box: fill-box; transform-origin: center; animation: bb-blink 3.6s infinite; }
.bb-eye-r { opacity: 0; }
.bb-quill { opacity: 0; transition: opacity .2s ease; }
.bb-ink { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.bb-rings path { opacity: 0; transform-origin: 244px 192px; }

/* idle: breathing */
[data-bubble="idle"] .bb-top { animation: bb-breathe 2.8s ease-in-out infinite; }

/* walk: legs swing in turn, the body bobs twice a stride, the free arm swings */
[data-bubble="walk"] .bb-legl { animation: bb-step .76s ease-in-out infinite; }
[data-bubble="walk"] .bb-legr { animation: bb-step .76s ease-in-out infinite reverse; }
[data-bubble="walk"] .bb-top { animation: bb-bob .38s ease-in-out infinite; }
[data-bubble="walk"] .bb-arm-l { animation: bb-swing .76s ease-in-out infinite; }

/* talk: the mic comes up to his mouth and sound rings out */
[data-bubble="talk"] .bb-arm-r { animation: bb-mic 1.4s ease-in-out infinite; }
[data-bubble="talk"] .bb-top { animation: bb-breathe 1.4s ease-in-out infinite; }
[data-bubble="talk"] .bb-rings path { animation: bb-ring 1.4s ease-out infinite; }
[data-bubble="talk"] .bb-rings path:nth-child(2) { animation-delay: .18s; }
[data-bubble="talk"] .bb-rings path:nth-child(3) { animation-delay: .36s; }

/* write: a little red pen appears in his hand, he scribbles, the ink line draws itself */
[data-bubble="write"] .bb-quill { opacity: 1; }
[data-bubble="write"] .bb-arm-l { animation: bb-scribble .34s ease-in-out infinite; }
[data-bubble="write"] .bb-ink { animation: bb-ink 2.2s ease-in-out infinite; }
[data-bubble="write"] .bb-top { animation: bb-breathe 2.2s ease-in-out infinite; }

/* cheer: a hop with both arms up, and both eyes open */
[data-bubble="cheer"] { animation: bb-hop .6s cubic-bezier(.3, .7, .4, 1) infinite; }
[data-bubble="cheer"] .bb-arm-l { transform: rotate(86deg); }
[data-bubble="cheer"] .bb-arm-r { transform: rotate(-24deg); }
[data-bubble="cheer"] .bb-wink { opacity: 0; }
[data-bubble="cheer"] .bb-eye-r { opacity: 1; }

/* wave: hello */
[data-bubble="wave"] .bb-arm-l { animation: bb-wave .9s ease-in-out infinite; }
[data-bubble="wave"] .bb-top { animation: bb-breathe 2.8s ease-in-out infinite; }

@keyframes bb-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes bb-breathe { 50% { transform: translateY(-4px); } }
@keyframes bb-bob { 50% { transform: translateY(-7px); } }
@keyframes bb-step { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes bb-swing { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes bb-mic { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-22deg); } }
@keyframes bb-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes bb-scribble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(10deg); } 70% { transform: rotate(-6deg); } }
@keyframes bb-ink { 0% { stroke-dashoffset: 100; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes bb-hop { 0%, 100% { transform: translateY(0) scaleY(1); } 12% { transform: translateY(0) scaleY(.95); } 45% { transform: translateY(-14%) scaleY(1.03); } }
@keyframes bb-wave { 0%, 100% { transform: rotate(58deg); } 50% { transform: rotate(92deg); } }

@media (prefers-reduced-motion: reduce) {
  .bubble, .bubble * { animation: none !important; }
  [data-bubble="write"] .bb-ink { stroke-dashoffset: 0; opacity: 1; }
}