/* Taggy, the Taggs Studio mascot. Shared by index.html and studio.html.
   Placement on each page lives in that page's stylesheet. */

.taggy { pointer-events: none; }
.taggy-svg { overflow: visible; width: 100%; height: auto; }
.taggy-tilt {
  transform-box: view-box;
  transform-origin: 50% 95%;
  transition: transform .5s var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1));
}
.taggy-pupil { transition: transform .12s ease-out; }
.taggy-lid {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(0);
  opacity: 0;
  transition: transform .09s ease-in, opacity 0s linear .09s;
}
.taggy.is-blinking .taggy-lid { transform: scaleY(1); opacity: 1; transition: transform .09s ease-out, opacity 0s; }
.taggy-arm { transform-box: fill-box; transition: transform .45s var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)); }
.taggy-arm-l { transform-origin: 80% 15%; }
.taggy-arm-r { transform-origin: 20% 15%; }
.taggy.is-happy .taggy-arm-l { transform: rotate(38deg); }
.taggy.is-happy .taggy-arm-r { transform: rotate(-120deg); }
.taggy-mouth { transition: d .3s var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)); }
.taggy.is-happy .taggy-mouth { d: path("M90 178 Q110 208 130 178"); }

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