.dino {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
}

.dino svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dino svg g {
  transform-box: fill-box;
  transform-origin: center;
}

.dino .dino__figure,
.dino .dino__anchor {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* Idle animations per stage */
.dino .dino__eye {
  animation: dino-blink 4.5s infinite;
}

.dino--stage-0 .dino__egg {
  transform-origin: 50% 95%;
  animation: dino-egg-wobble 3.2s ease-in-out infinite;
}

.dino--stage-1 .dino__head,
.dino--stage-5 .dino__torso {
  animation: dino-breathe 2.8s ease-in-out infinite;
}

.dino--stage-2 .dino__leg--back {
  animation: dino-step 1.2s ease-in-out infinite;
}

.dino--stage-2 .dino__leg--front {
  animation: dino-step 1.2s ease-in-out 0.6s infinite;
}

.dino--stage-3 .dino__head {
  transform-origin: 20% 80%;
  animation: dino-look 4s ease-in-out infinite;
}

.dino--stage-3 .dino__tail,
.dino--stage-4 .dino__tail,
.dino--stage-5 .dino__tail {
  transform-origin: 100% 30%;
  animation: dino-wag 2s ease-in-out infinite;
}

.dino--stage-4 .dino__torso,
.dino--stage-4 .dino__head {
  animation: dino-proud 3s ease-in-out infinite;
}

.dino--stage-5 .dino__leg--front {
  animation: dino-stomp 3.5s ease-in-out infinite;
}

/* Companion reactions */
.dino--companion {
  max-width: 150px;
}

.dino--cheer {
  animation: dino-cheer 0.8s ease-out;
}

.dino--puzzled {
  animation: dino-puzzled 0.9s ease-in-out;
}

@keyframes dino-blink {
  0%, 92%, 100% {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0.1);
  }
}

@keyframes dino-egg-wobble {
  0%, 70%, 100% {
    transform: rotate(0);
  }

  76% {
    transform: rotate(-6deg);
  }

  82% {
    transform: rotate(5deg);
  }

  88% {
    transform: rotate(-3deg);
  }
}

@keyframes dino-breathe {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes dino-step {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes dino-look {
  0%, 40%, 100% {
    transform: rotate(0);
  }

  55%, 65% {
    transform: rotate(-10deg);
  }

  75%, 85% {
    transform: rotate(6deg);
  }
}

@keyframes dino-wag {
  0%, 100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(8deg);
  }
}

@keyframes dino-proud {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes dino-stomp {
  0%, 80%, 100% {
    transform: translateY(0);
  }

  88% {
    transform: translateY(-14px);
  }

  94% {
    transform: translateY(2px);
  }
}

@keyframes dino-cheer {
  0% {
    transform: translateY(0) scale(1);
  }

  30% {
    transform: translateY(-30px) scale(1.08);
  }

  60% {
    transform: translateY(0) scale(0.96);
  }

  80% {
    transform: translateY(-10px) scale(1.02);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes dino-puzzled {
  0%, 100% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-10deg);
  }

  40% {
    transform: rotate(8deg);
  }

  60% {
    transform: rotate(-6deg);
  }

  80% {
    transform: rotate(3deg);
  }
}

/* Pterosaur: gentle wing flapping as idle animation */
.dino--pterosaur .dino__wing {
  transform-origin: 50% 20%;
  animation: dino-wing 1.6s ease-in-out infinite alternate;
}

@keyframes dino-wing {
  to {
    transform: scaleY(0.75);
  }
}