.mascot { position: relative; display: block; width: 100%; height: 100%; }
.mascot-art { display: block; width: 100%; height: 100%; transform-origin: 50% 80%; animation: hv-sway 4s cubic-bezier(.333, 1, .667, 1) infinite; }
.who-claude .mascot-art { animation-delay: .35s; }
.who-muse .mascot-art { animation-delay: .7s; }
.who-gemini .mascot-art { animation-delay: 1.05s; }
.who-chatgpt .mascot-art { animation-delay: 1.4s; }
.mascot-art svg, .mascot-art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.crown { position: absolute; width: 46%; left: 27%; top: -16%; z-index: 2; animation: hv-float 3.2s ease-in-out infinite; }
.eyes { transform-origin: 50px 42px; animation: hv-blink 4.6s infinite; }
.clawd .clawd-leg { transform-origin: 50% 0; transform-box: fill-box; animation: hv-step 1.15s ease-in-out infinite; }
.clawd .leg-1 { animation-delay: .12s; }
.clawd .leg-2 { animation-delay: .24s; }
.clawd .leg-3 { animation-delay: .36s; }
.clawd .arm-l, .clawd .arm-r { transform-box: fill-box; transform-origin: 100% 50%; animation: hv-wave 2.6s ease-in-out infinite; }
.clawd .arm-r { transform-origin: 0 50%; animation-delay: .2s; }
.gemini-star { transform-origin: 50% 50%; animation: hv-star 7s ease-in-out infinite; }
.dotcrop { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.dotsprite {
  position: absolute; left: 0; top: 50%;
  width: calc(100% * 2172 / var(--cw));
  height: calc(100% * 724 / var(--cw));
  background: url("/trending-on-x/assets/characters/dots.webp") 0 0 / 100% 100% no-repeat;
  transform: translate(calc(-100% * var(--ox) / 2172), -50%);
  animation: hv-hop 2.8s ease-in-out infinite;
}
@keyframes hv-sway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hv-blink { 0%, 86%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.12); } }
@keyframes hv-step { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hv-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
@keyframes hv-star { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes hv-hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) {
  .mascot-art, .crown, .eyes, .clawd .clawd-leg, .clawd .arm-l, .clawd .arm-r, .gemini-star, .dotsprite { animation: none; }
}
html.hv-still .mascot-art,
html.hv-still .crown,
html.hv-still .eyes,
html.hv-still .clawd .clawd-leg,
html.hv-still .clawd .arm-l,
html.hv-still .clawd .arm-r,
html.hv-still .gemini-star,
html.hv-still .dotsprite { animation: none; }