/* Site pet — test port of the walking mascot from meganyap.me for visual comparison.
   Dark pet on the light theme, light pet on the dark theme. */
:root, :root[data-theme="dark"] {
  --pet-body: #f0efea; --pet-eye: #141414; --pet-shine: #ffffff;
  --pet-bubble-bg: rgba(240, 239, 234, .92); --pet-bubble-fg: #141414;
}
:root[data-theme="light"] {
  --pet-body: #242424; --pet-eye: #f3e9d6; --pet-shine: #f3e9d6;
  --pet-bubble-bg: rgba(18, 18, 18, .86); --pet-bubble-fg: #f3e9d6;
}

.site-pet-anchor { position: fixed; z-index: 80; left: 0; bottom: 0; width: 100%; height: 0; pointer-events: none; }
.site-pet {
  --pet-x: 40px; --pet-y: 0px; --pet-flip: 1;
  position: absolute; left: 0; bottom: 0; z-index: 80; pointer-events: none;
  transform: translate3d(var(--pet-x), calc(var(--pet-y) * -1), 0);
  will-change: transform;
}
.site-pet__hit {
  display: block; position: relative; margin: -12px; padding: 12px;
  background: none; border: 0; cursor: grab; pointer-events: auto; touch-action: none;
  transform: scaleX(var(--pet-flip)); transform-origin: 50% center;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}
.site-pet[data-dragging] .site-pet__hit { cursor: grabbing; }
.site-pet__svg { display: block; overflow: visible; stroke: none; stroke-width: 0; }

.site-pet .pet-body { fill: var(--pet-body); transition: fill .35s ease; }
.site-pet .pet-eye { fill: var(--pet-eye); transition: fill .35s ease; }
.site-pet .pet-shine { fill: var(--pet-shine); }
.site-pet .pet-shadow { fill: var(--pet-body); }

.pet-hat { display: none; }
.site-pet[data-hat="headphones"] [data-hat-variant="headphones"],
.site-pet[data-hat="cap"] [data-hat-variant="cap"],
.site-pet[data-hat="figma"] [data-hat-variant="figma"],
.site-pet[data-hat="opentowork"] [data-hat-variant="opentowork"] { display: block; animation: pet-acc-in .35s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 22px 24px; }
@keyframes pet-acc-in { from { opacity: 0; transform: scale(.6); } }
/* Logo and lettering stay readable when the pet turns around */
.site-pet .pet-unflip { transform: scaleX(var(--pet-flip)); transform-box: fill-box; transform-origin: center; }
/* The Figma arm sways a little while walking */
.site-pet[data-hat="figma"] [data-hat-variant="figma"] { animation: pet-acc-in .35s cubic-bezier(.34, 1.56, .64, 1), pet-hold .9s ease-in-out .35s infinite; }
@keyframes pet-hold { 50% { transform: translateY(-0.8px) rotate(-2deg); } }
.site-pet[data-paused] [data-hat-variant="figma"] { animation-play-state: running, paused; }

.site-pet__bob { display: block; animation: site-pet-bob .5s ease-in-out infinite; }
.site-pet__leg { transform-origin: 50% 100%; animation: site-pet-leg .46s steps(2) infinite; }
.site-pet__leg--right { animation-delay: .23s; }
.site-pet__eyes { transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.site-pet__eye { transform-origin: 50% center; transform-box: fill-box; transition: transform .12s cubic-bezier(.22, 1, .36, 1); }
.site-pet[data-blink] .site-pet__eye { transform: scaleY(.15); }
.site-pet[data-paused]:not([data-dragging]) .site-pet__leg,
.site-pet[data-paused]:not([data-dragging]) .site-pet__bob { animation-play-state: paused; }

.site-pet__shadow { transform-origin: 22px 53.5px; transition: opacity .18s ease-out, transform .18s ease-out; }
.site-pet[data-dragging] .site-pet__bob { animation: none; }
.site-pet[data-dragging] .site-pet__leg { transform-origin: 50% 0; animation: site-pet-leg-kick .26s ease-in-out infinite; }
.site-pet[data-dragging] .site-pet__leg--right { animation-delay: .13s; }
.site-pet[data-dragging] .site-pet__shadow { opacity: .08; transform: scale(.7); }
.site-pet[data-hopping] .site-pet__bob { animation: site-pet-hop .5s cubic-bezier(.34, 1.56, .64, 1); }
.site-pet[data-dizzy] .site-pet__bob { animation: site-pet-dizzy-sway .6s ease-in-out infinite; }
.site-pet[data-dizzy] .site-pet__eyes { transform-origin: 22px 25px; animation: site-pet-dizzy-eyes .9s linear infinite; }
.site-pet[data-dizzy] .site-pet__leg { animation-play-state: paused; }

.site-pet__emotes { position: absolute; top: 2px; left: 50%; width: 0; height: 0; pointer-events: none; }
.site-pet-emote {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 999px;
  background: var(--pet-body); opacity: 0; transform: translate(-50%, -50%);
  animation: site-pet-emote .7s cubic-bezier(.22, 1, .36, 1) forwards;
}
.site-pet-star {
  position: absolute; top: 4px; left: 50%; width: 4px; height: 4px; border-radius: 999px;
  background: var(--pet-body); box-shadow: 0 0 4px var(--pet-body);
  animation: site-pet-spin-star .9s linear infinite;
}

.site-pet__bubble {
  position: absolute; left: 22px; bottom: calc(100% + 14px);
  padding: 6px 10px; border-radius: 10px;
  background: var(--pet-bubble-bg); color: var(--pet-bubble-fg);
  text-align: center; font: 11px/1.25 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 0) translate(var(--bubble-shift-x, 0px), 4px);
  transition: opacity .18s cubic-bezier(.22, 1, .36, 1), transform .22s cubic-bezier(.22, 1, .36, 1);
}
.site-pet__bubble[data-show] { opacity: 1; transform: translate(-50%, 0) translateX(var(--bubble-shift-x, 0px)); }
.site-pet[data-hat="cap"] .site-pet__bubble, .site-pet[data-hat="headphones"] .site-pet__bubble { bottom: calc(100% + 20px); }
.site-pet__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateX(calc(-1 * var(--bubble-shift-x, 0px)));
  border: 5px solid transparent; border-bottom: 0; border-top-color: var(--pet-bubble-bg);
}

.site-pet[data-bump] .site-pet__bob { animation: site-pet-bump .4s cubic-bezier(.34, 1.56, .64, 1); }
.site-pet-swirl {
  position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; color: var(--pet-body);
  opacity: 0; pointer-events: none; transform: translate(-50%, -50%);
  animation: site-pet-swirl .95s cubic-bezier(.22, 1, .36, 1) forwards;
}
.site-pet-swirl svg { display: block; stroke: currentColor; }
@keyframes site-pet-bump { 0% { transform: none; } 30% { transform: translateX(-3px) rotate(6deg); } 100% { transform: none; } }
@keyframes site-pet-swirl {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.5); }
  30% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--swirl-dx, 0px)), calc(-50% - 34px)) rotate(540deg) scale(1.15); }
}
@keyframes site-pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes site-pet-leg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes site-pet-leg-kick { 0%, 100% { transform: translateY(1px) rotate(-16deg); } 50% { transform: translateY(-1px) rotate(14deg); } }
@keyframes site-pet-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(-6deg); } 100% { transform: translateY(0); } }
@keyframes site-pet-dizzy-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes site-pet-dizzy-eyes { to { transform: rotate(360deg); } }
@keyframes site-pet-spin-star {
  from { transform: translate(-50%, -50%) rotate(0) translate(18px) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg) translate(18px) rotate(-360deg); }
}
@keyframes site-pet-emote {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: .75; transform: translate(calc(-50% + var(--emote-dx, 0px)), calc(-50% - 10px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--emote-dx, 0px) * 1.4), calc(-50% - 28px)) scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
  .site-pet__bob, .site-pet__leg { animation: none; }
}
@media (max-width: 720px), (hover: none) { .site-pet-anchor { display: none; } }