/* Gamoo, the mascot: shared moods and motion. Art lives in /mascot.js. */

.gm { display: block; width: 100%; height: 100%; overflow: visible; }
.gm .gm-eye { transform-box: fill-box; transform-origin: center; transition: transform .08s ease, opacity .2s; }
.gm .gm-pupil { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.gm .gm-shut, .gm .gm-joy, .gm .gm-zz { transition: opacity .25s; }
.gm.is-blink .gm-eye { transform: scaleY(.1); }
.gm.is-sleep .gm-eye, .gm.is-happy .gm-eye { opacity: 0; }
.gm.is-sleep .gm-shut, .gm.is-sleep .gm-zz, .gm.is-happy .gm-joy { opacity: 1; }
.gm.is-think .gm-pupil { animation: gm-scan 1.6s ease-in-out infinite; }
.gm .gm-bits rect { transform-box: fill-box; animation: gm-bit 3.4s ease-in-out infinite; }
.gm .gm-bits rect:nth-child(2) { animation-delay: -1.2s; }
.gm .gm-bits rect:nth-child(3) { animation-delay: -2.3s; }
.gm.is-sleep .gm-zz text { transform-box: fill-box; animation: gm-z 2.8s ease-out infinite; }
.gm.is-sleep .gm-zz text:nth-child(2) { animation-delay: -1.4s; }

@keyframes gm-bit { 50% { transform: translate(2px, -3px); } }
@keyframes gm-scan { 0%, 100% { transform: translate(-3.5px, -2.5px); } 50% { transform: translate(3.5px, -2.5px); } }
@keyframes gm-z { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(5px, -9px); opacity: 0; } }
@keyframes gm-float { 0%, 100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
@keyframes gm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes gm-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes gm-hop { 0%, 45%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(-16px) scale(.96, 1.04); } 30% { transform: translateY(0) scale(1.05, .95); } }

@media (prefers-reduced-motion: reduce) {
  .gm *, .gm { animation: none !important; transition: none !important; }
}