:root {
  --locato-motion-cat-cycle: calc(var(--motion-edge-pulse-duration) * 3);
  --locato-motion-breath-cycle: calc(var(--motion-edge-pulse-duration) * 2);
  --locato-motion-chat-cycle: calc(var(--motion-confirm-hold) * 20);
  --locato-motion-short-chat-cycle: calc(var(--motion-confirm-hold) * 14);
  --locato-motion-tail-angle: 3deg;
  --locato-motion-wave-angle: 2deg;
  --locato-motion-breath-scale: 1.008;
}

.locato-cat__rig {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-box: view-box;
  transform-origin: 50% 86%;
  animation: locato-cat-breathe var(--locato-motion-breath-cycle) var(--motion-reveal-ease) infinite;
  animation-delay: var(--locato-motion-phase, 0ms);
  animation-play-state: paused;
}

.locato-cat__part {
  transform-box: view-box;
  animation-duration: var(--locato-motion-cat-cycle);
  animation-timing-function: var(--motion-reveal-ease);
  animation-iteration-count: infinite;
  animation-delay: var(--locato-motion-phase, 0ms);
  animation-play-state: paused;
}

.locato-cat__part--tail { animation-name: locato-cat-tail; }
.locato-cat__part--wave { animation-name: locato-cat-wave; }
.locato-cat__part--question { animation-name: locato-cat-question; }
.locato-cat__part--signal { animation-name: locato-cat-signal; }

.locato-cat[data-cat="1"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -0.4); }
.locato-cat[data-cat="2"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -1.2); }
.locato-cat[data-cat="3"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -0.8); }
.locato-cat[data-cat="4"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -1.7); }
.locato-cat[data-cat="5"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -0.6); }
.locato-cat[data-cat="6"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -2.1); }
.locato-cat[data-cat="7"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -1.4); }
.locato-cat[data-cat="8"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -0.9); }
.locato-cat[data-cat="9"] { --locato-motion-phase: calc(var(--motion-edge-pulse-duration) * -2.6); }

.locato-cat[data-cat="1"] .locato-cat__part--tail { transform-origin: 21.5% 62.2%; }
.locato-cat[data-cat="2"] .locato-cat__part--tail { transform-origin: 70% 80.8%; }
.locato-cat[data-cat="3"] .locato-cat__part--signal { transform-origin: 84% 39%; }
.locato-cat[data-cat="4"] .locato-cat__part--tail { transform-origin: 25% 78.5%; }
.locato-cat[data-cat="5"] .locato-cat__part--tail { transform-origin: 66.5% 82%; }
.locato-cat[data-cat="6"] .locato-cat__part--tail { transform-origin: 74% 53%; }
.locato-cat[data-cat="7"] .locato-cat__part--tail { transform-origin: 26% 78%; }
.locato-cat[data-cat="7"] .locato-cat__part--question { transform-origin: 54% 15%; }
.locato-cat[data-cat="8"] .locato-cat__part--tail { transform-origin: 66.5% 79.5%; }
.locato-cat[data-cat="9"] .locato-cat__part--tail { transform-origin: 72% 74%; }
.locato-cat[data-cat="9"] .locato-cat__part--wave { transform-origin: 29% 53.5%; }

.locato-cat[data-motion-state="running"] .locato-cat__rig,
.locato-cat[data-motion-state="running"] .locato-cat__part { animation-play-state: running; }

.locato-chat-loop [data-message] {
  animation-duration: var(--locato-motion-chat-cycle);
  animation-timing-function: var(--motion-enter-ease);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.locato-chat-loop--short [data-message] { animation-duration: var(--locato-motion-short-chat-cycle); }
.locato-chat-loop [data-message-order="0"] { animation-name: locato-message-first; }
.locato-chat-loop [data-message-order="1"] { animation-name: locato-message-second; }
.locato-chat-loop [data-message-order="2"] { animation-name: locato-message-third; }
.locato-chat-loop [data-message-order="3"] { animation-name: locato-message-fourth; }
.locato-chat-loop--short [data-message-order="1"] { animation-name: locato-message-short-reply; }
.locato-chat-loop[data-motion-state="running"] [data-message] { animation-play-state: running; }

html[data-motion-mode="paused"] .locato-cat__rig,
html[data-motion-mode="paused"] .locato-cat__part,
html[data-motion-mode="reduced"] .locato-cat__rig,
html[data-motion-mode="reduced"] .locato-cat__part,
html[data-motion-mode="paused"] .locato-chat-loop [data-message],
html[data-motion-mode="reduced"] .locato-chat-loop [data-message] { animation: none; }

@keyframes locato-cat-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--locato-motion-breath-scale)); }
}

@keyframes locato-cat-tail {
  0%, 12%, 70%, 100% { transform: rotate(0deg); }
  28% { transform: rotate(var(--locato-motion-tail-angle)); }
  47% { transform: rotate(calc(var(--locato-motion-tail-angle) * -0.7)); }
}

@keyframes locato-cat-wave {
  0%, 30%, 65%, 100% { transform: rotate(0deg); }
  40%, 54% { transform: rotate(calc(var(--locato-motion-wave-angle) * -1)); }
  47%, 61% { transform: rotate(var(--locato-motion-wave-angle)); }
}

@keyframes locato-cat-question {
  0%, 25%, 75%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(var(--locato-motion-tail-angle)); }
  57% { transform: rotate(calc(var(--locato-motion-tail-angle) * -1)); }
}

@keyframes locato-cat-signal {
  0%, 22%, 50%, 100% { opacity: 1; transform: scale(1); }
  30%, 42% { opacity: 0.55; transform: scale(0.96); }
  36% { opacity: 1; transform: scale(1.03); }
}

@keyframes locato-message-first {
  0% { opacity: 0; transform: translateY(var(--motion-nudge)); }
  4%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes locato-message-second {
  0%, 14% { opacity: 0; transform: translateY(var(--motion-nudge)); }
  18%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes locato-message-third {
  0%, 34% { opacity: 0; transform: translateY(var(--motion-nudge)); }
  38%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes locato-message-fourth {
  0%, 52% { opacity: 0; transform: translateY(var(--motion-nudge)); }
  56%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes locato-message-short-reply {
  0%, 28% { opacity: 0; transform: translateY(var(--motion-nudge)); }
  34%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .locato-cat__rig, .locato-cat__part, .locato-chat-loop [data-message] { animation: none; }
}