/* AST intro ZeitHund avatar — Website/public/games/ZeitHund art + motion */

.zh-dog-overlay {
  --fur: #c4a574;
  --fur-dark: #8a6a3e;
  --snout: #e8d4b0;
  --zh-dog-scale: 1;
  --look-x: 0;
  --look-y: 0;
  --head-tilt: 0deg;

  position: absolute;
  z-index: 16;
  pointer-events: none;
  transform: translate(-50%, -88%) scale(var(--zh-dog-scale));
  transform-origin: center bottom;
  will-change: left, top;
}

/* Bookend default corner (when not using left/top %) */
.zh-dog-overlay:not(.zh-dog-avatar) {
  right: clamp(4%, 6vw, 10%);
  bottom: clamp(2%, 3vh, 6%);
  left: auto;
  top: auto;
  transform: scale(var(--zh-dog-scale));
  transform-origin: bottom right;
}

.zh-dog {
  position: relative;
  color: inherit;
  transform-origin: center bottom;
}

.zh-dog svg {
  display: block;
  overflow: visible;
  width: min(200px, 26vw);
  height: auto;
}

.zh-dog .body,
.zh-dog .head,
.zh-dog .leg,
.zh-dog .ear,
.zh-dog .tail {
  fill: var(--fur);
}

.zh-dog .ear-inner {
  fill: #d4b896;
}

.zh-dog .snout {
  fill: var(--snout);
}

.zh-dog .nose,
.zh-dog .eye {
  fill: #1a1410;
}

.zh-dog .eye-shine {
  fill: #fff;
}

.zh-dog .mouth,
.zh-dog .mouth-huff,
.zh-dog .brow {
  stroke: #5a4030;
  fill: none;
}

.zh-dog .mouth-huff,
.zh-dog .brow {
  opacity: 0;
}

.zh-dog .head-group {
  transform-origin: 148px 78px;
  transition: transform 0.28s ease;
}

.zh-dog .eyes {
  transform-origin: 149px 74px;
}

.zh-dog .tail {
  stroke: var(--fur);
  fill: none;
  transform-origin: 52px 108px;
}

.zh-dog .shadow {
  fill: rgba(0, 0, 0, 0.35);
}

.zh-dog .legs {
  transform-origin: 100px 148px;
}

/* Walk stride */
.zh-dog.is-walking .legs {
  animation: zh-dog-stride 0.28s ease-in-out infinite;
}

.zh-dog.is-walking .dog-body {
  animation: zh-dog-walk-bob 0.28s ease-in-out infinite;
}

.zh-dog.is-walking .tail {
  animation: zh-dog-wag 0.28s ease-in-out infinite;
}

/* Sniff: nose dip */
.zh-dog.is-sniffing .head-group {
  animation: zh-dog-sniff 0.7s ease;
}

.zh-dog.is-sniffing .dog-body {
  animation: zh-dog-sniff-bob 0.7s ease;
}

/* Look: pupils + head tilt toward target */
.zh-dog.is-looking .head-group {
  transform: rotate(var(--head-tilt));
}

.zh-dog.is-looking .eyes {
  transform: translate(calc(var(--look-x) * 1px), calc(var(--look-y) * 1px));
}

/* Frown while stalking a bite target (site huffy brows + mouth) */
.zh-dog.is-frowning .mouth {
  opacity: 0;
}

.zh-dog.is-frowning .mouth-huff,
.zh-dog.is-frowning .brow {
  opacity: 1;
}

.zh-dog.is-frowning .brow-l,
.zh-dog.is-frowning .brow-r {
  stroke: #2a1c12;
}

.zh-dog.is-frowning .head-group {
  transform: rotate(-10deg) translate(2px, -2px);
}

/* Bite chomp */
.zh-dog.is-biting .dog-body {
  animation: zh-dog-bite-lunge 0.48s ease;
}

.zh-dog.is-biting .head-group {
  animation: zh-dog-bite-head 0.48s ease;
}

.zh-dog.is-biting .mouth {
  opacity: 0;
}

.zh-dog.is-biting .mouth-huff {
  opacity: 1;
  stroke-width: 3.2;
}

/* Site woof bounce */
.zh-dog.woofing .dog-body {
  animation: zh-dog-bounce 0.35s ease;
}

.zh-dog.woofing .tail {
  animation: zh-dog-wag 0.28s ease-in-out 2;
}

/* Wag-only (button) */
.zh-dog.wagging .tail {
  animation: zh-dog-wag 0.28s ease-in-out 3;
}

/* Poop squat */
.zh-dog.is-pooping .dog-body {
  animation: zh-dog-poop-squat 0.5s ease;
}

.zh-dog.is-pooping .tail {
  animation: zh-dog-poop-tail 0.5s ease;
}

.zh-poop-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
}

.zh-poop-ball {
  position: absolute;
  border-radius: 50% 45% 50% 40%;
  background:
    radial-gradient(circle at 35% 30%, #8a5a32 0%, #5c3a1c 55%, #3d2410 100%);
  box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.35);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.zh-poop-ball.is-settled {
  opacity: 0.92;
}

.zh-poop-trail {
  position: absolute;
  border-radius: 40%;
  background: #5a3818;
  transform: translate(-50%, -50%) rotate(18deg);
  z-index: 1;
  pointer-events: none;
}

@keyframes zh-dog-poop-squat {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  35% {
    transform: translateY(6px) scaleY(0.92) scaleX(1.04);
  }
  55% {
    transform: translateY(8px) scaleY(0.9) scaleX(1.06);
  }
}

@keyframes zh-dog-poop-tail {
  0%,
  100% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(28deg);
  }
  70% {
    transform: rotate(10deg);
  }
}

@keyframes zh-dog-stride {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes zh-dog-walk-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes zh-dog-sniff {
  0%,
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
  25% {
    transform: rotate(18deg) translate(4px, 10px);
  }
  45% {
    transform: rotate(14deg) translate(2px, 8px);
  }
  65% {
    transform: rotate(20deg) translate(5px, 12px);
  }
}

@keyframes zh-dog-sniff-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(4px);
  }
}

@keyframes zh-dog-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px) scale(1.03);
  }
}

@keyframes zh-dog-bite-lunge {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  35% {
    transform: translateX(10px) scale(1.06);
  }
  55% {
    transform: translateX(14px) scale(1.08);
  }
  75% {
    transform: translateX(4px) scale(1.02);
  }
}

@keyframes zh-dog-bite-head {
  0%,
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
  30% {
    transform: rotate(12deg) translate(6px, 4px);
  }
  50% {
    transform: rotate(18deg) translate(10px, 6px) scale(1.05);
  }
  70% {
    transform: rotate(6deg) translate(2px, 2px);
  }
}

@keyframes zh-dog-wag {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-22deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zh-dog.is-walking .legs,
  .zh-dog.is-walking .dog-body,
  .zh-dog.is-walking .tail,
  .zh-dog.is-sniffing .head-group,
  .zh-dog.is-sniffing .dog-body,
  .zh-dog.woofing .dog-body,
  .zh-dog.woofing .tail,
  .zh-dog.wagging .tail,
  .zh-dog.is-pooping .dog-body,
  .zh-dog.is-pooping .tail,
  .zh-dog.is-biting .dog-body,
  .zh-dog.is-biting .head-group {
    animation: none;
  }
}