/*
  Akita's fixed animations. One mood at a time, set by data-mood on the <svg>.
    idle     breathes and blinks
    curious  tilts its head while a video is checked
    waiting  breathes, blinks and pricks its ears now and then
    happy    wags its tail once a parent says yes
    rest     settles and only breathes (used after a no; never sad)
  Everything stops for prefers-reduced-motion.
*/
.akita {
  display: block;
  overflow: visible;
  color: var(--hp-ink, #172523);
}
.akita g {
  transform-box: fill-box;
}
.akita .ak-breathe {
  transform-origin: 50% 100%;
}
.akita .ak-head {
  transform-origin: 50% 90%;
  transition: transform var(--hp-slow, 420ms) var(--hp-ease-out, ease-out);
}
.akita .ak-eyes {
  transform-origin: 50% 55%;
}
.akita .ak-ear-l {
  transform-origin: 70% 100%;
}
.akita .ak-ear-r {
  transform-origin: 30% 100%;
}
.akita .ak-tail {
  transform-origin: 0% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .akita:not([data-mood="still"]) .ak-breathe {
    animation: ak-breathe 3.8s ease-in-out infinite;
  }
  .akita:not([data-mood="still"]):not([data-mood="rest"]) .ak-eyes {
    animation: ak-blink 5.2s infinite;
  }
  .akita[data-mood="curious"] .ak-head {
    transform: rotate(-7deg);
  }
  .akita[data-mood="curious"] .ak-ear-r,
  .akita[data-mood="waiting"] .ak-ear-l,
  .akita[data-mood="waiting"] .ak-ear-r {
    animation: ak-ear 4.4s var(--hp-ease-out, ease-out) infinite;
  }
  .akita[data-mood="waiting"] .ak-ear-r {
    animation-delay: 0.12s;
  }
  .akita[data-mood="happy"] .ak-tail {
    animation: ak-wag 0.42s ease-in-out 5 alternate;
  }
  .akita[data-mood="happy"] .ak-head {
    animation: ak-perk 0.9s var(--hp-ease-out, ease-out) 1;
  }
  .akita[data-mood="rest"] .ak-breathe {
    animation-duration: 5.4s;
  }
}

@keyframes ak-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-0.6px) scaleY(1.008); }
}
@keyframes ak-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(0.08); }
}
@keyframes ak-ear {
  0%, 70%, 100% { transform: translateY(0) rotate(0); }
  76% { transform: translateY(-2.5px) rotate(0); }
  84% { transform: translateY(0) rotate(0); }
}
@keyframes ak-wag {
  from { transform: rotate(-5deg); }
  to { transform: rotate(7deg); }
}
@keyframes ak-perk {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Growth moment (F19). The container sizes it; both stages share the same ground line. */
.akita-grow {
  position: relative;
  display: grid;
  aspect-ratio: 1;
}
.akita-grow > * {
  grid-area: 1 / 1;
}
.akita-grow-ring {
  align-self: end;
  justify-self: center;
  width: 70%;
  aspect-ratio: 1;
  margin-bottom: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hp-lime, #ddf49b), transparent);
  opacity: 0;
}
.akita-grow-old {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .akita-grow-old {
    animation: ak-grow-out 1.6s var(--hp-ease-out, ease-out) both;
  }
  .akita-grow-new {
    animation: ak-grow-in 1.6s var(--hp-ease-out, ease-out) both;
  }
  .akita-grow-ring {
    animation: ak-grow-ring 1.6s var(--hp-ease-out, ease-out) both;
  }
  .akita-grow-new .ak-tail {
    animation-delay: 1.1s !important;
  }
}
@keyframes ak-grow-out {
  0%, 35% { opacity: 1; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(1.06); }
}
@keyframes ak-grow-in {
  0%, 40% { opacity: 0; transform: translateY(3%) scale(0.92); }
  75%, 100% { opacity: 1; transform: none; }
}
@keyframes ak-grow-ring {
  0%, 35% { opacity: 0; transform: scale(0.6); }
  55% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.25); }
}
.akita-grow-old .akita,
.akita-grow-new .akita {
  transform-origin: 50% 96%;
}