/* The original monochrome logo and wordmark stay intact. All four performances
   start and finish at the identical neutral pose, so switching cannot jump. */
.zoomies-brand {
  width: min(320px, 100%);
  position: relative;
  padding-bottom: 44px;
}
.zoomies-brand__art {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
}
.zoomies-brand__fallback,
.zoomies-brand__svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: none;
}
.zoomies-brand__svg {
  position: absolute;
  inset: 0;
  visibility: hidden;
  overflow: visible;
}
.zoomies-brand.is-ready .zoomies-brand__svg {
  visibility: visible;
}
.zoomies-brand.is-ready .zoomies-brand__fallback {
  visibility: hidden;
}
.zoomies-brand .zoomies-brand__pause {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.4rem;
  background: transparent;
  color: #f4f5f7;
  font: inherit;
  font-size: 0.6rem;
  min-height: 36px;
  cursor: pointer;
}
.zoomies-brand .zoomies-brand__pause[hidden] {
  display: none;
}
.zoomies-brand__pause:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
}
.zoomies-brand__pause:focus-visible {
  outline: 2px solid var(--z-brand-fast-cyan);
  outline-offset: 3px;
}
.zoomies-brand .zb-body,
.zoomies-brand .zb-head,
.zoomies-brand .zb-tail,
.zoomies-brand .zb-ear-left,
.zoomies-brand .zb-ear-right,
.zoomies-brand .zb-paw-front,
.zoomies-brand .zb-paw-back,
.zoomies-brand .zb-eyes,
.zoomies-brand .zb-tongue {
  transform-box: view-box;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.zoomies-brand .zb-body {
  transform-origin: 625px 685px;
  animation: zb-breathe 2.4s ease-in-out infinite;
}
.zoomies-brand .zb-head {
  transform-origin: 578px 450px;
  animation: zb-hello 5.6s ease-in-out infinite;
}
.zoomies-brand .zb-tail {
  transform-origin: 795px 615px;
  animation: zb-wag 0.52s ease-in-out infinite;
}
.zoomies-brand .zb-ear-left {
  transform-origin: 505px 325px;
  animation: zb-ear-left 2.4s ease-in-out infinite;
}
.zoomies-brand .zb-ear-right {
  transform-origin: 643px 303px;
  animation: zb-ear-right 2.4s ease-in-out infinite;
}
.zoomies-brand .zb-paw-front {
  transform-origin: 548px 566px;
  animation: zb-wave 5.6s ease-in-out infinite;
}
.zoomies-brand .zb-paw-back {
  transform-origin: 437px 560px;
}
.zoomies-brand .zb-eyes {
  transform-origin: 584px 350px;
  animation: zb-blink 4.7s linear infinite;
}
.zoomies-brand .zb-tongue {
  transform-origin: 620px 427px;
  animation: zb-pant 1.1s ease-in-out infinite;
}
.zoomies-brand[data-gesture="zoom"] .zb-body {
  animation: zb-bound 0.65s ease-in-out infinite;
}
.zoomies-brand[data-gesture="zoom"] .zb-paw-front {
  animation: zb-stride 0.65s ease-in-out infinite;
}
.zoomies-brand[data-gesture="zoom"] .zb-paw-back {
  animation: zb-stride 0.65s ease-in-out -0.325s infinite;
}
.zoomies-brand[data-gesture="zoom"] .zb-ear-left {
  animation: zb-fly-left 0.65s ease-in-out infinite;
}
.zoomies-brand[data-gesture="zoom"] .zb-ear-right {
  animation: zb-fly-right 0.65s ease-in-out infinite;
}
.zoomies-brand[data-gesture="zoom"] .zb-tail {
  animation-duration: 0.32s;
}
.zoomies-brand[data-gesture="zoom"] .zb-head {
  animation: zb-alert 6.1s ease-in-out infinite;
}
.zoomies-brand[data-gesture="curious"] .zb-head {
  animation: zb-curious 6s ease-in-out infinite;
}
.zoomies-brand[data-gesture="curious"] .zb-paw-front {
  animation: zb-lift 6s ease-in-out infinite;
}
.zoomies-brand[data-gesture="curious"] .zb-tail {
  animation-duration: 1.1s;
}
.zoomies-brand[data-gesture="curious"] .zb-ear-left {
  animation: zb-ear-twitch 6s ease-in-out infinite;
}
.zoomies-brand[data-gesture="curious"] .zb-eyes {
  animation-delay: -1.7s;
}
.zoomies-brand[data-paused="true"] * {
  animation-play-state: paused !important;
}
@keyframes zb-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.005, 1.012);
  }
}
@keyframes zb-hello {
  0%,
  100% {
    transform: rotate(0);
  }
  12%,
  27% {
    transform: rotate(-7deg) translateY(-3px);
  }
  40%,
  57% {
    transform: rotate(4deg);
  }
  72%,
  84% {
    transform: rotate(-3deg);
  }
}
@keyframes zb-wag {
  0%,
  100% {
    transform: rotate(0);
  }
  25%,
  75% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(16deg);
  }
}
@keyframes zb-ear-left {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(8deg);
  }
}
@keyframes zb-ear-right {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-7deg);
  }
}
@keyframes zb-wave {
  0%,
  12%,
  58%,
  100% {
    transform: rotate(0) translate(0);
  }
  22%,
  42% {
    transform: rotate(19deg) translate(0, -9px);
  }
  32%,
  50% {
    transform: rotate(8deg) translate(0, -7px);
  }
}
@keyframes zb-blink {
  0%,
  33%,
  37%,
  71%,
  75%,
  100% {
    transform: scaleY(1);
  }
  35%,
  73% {
    transform: scaleY(0.06);
  }
}
@keyframes zb-pant {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.15) translateY(2px);
  }
}
@keyframes zb-bound {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-29px) scale(0.985, 1.02);
  }
}
@keyframes zb-stride {
  0%,
  100% {
    transform: rotate(0) translate(0);
  }
  25% {
    transform: rotate(-10deg) translate(0, 4px);
  }
  50% {
    transform: rotate(17deg) translate(5px, -13px);
  }
}
@keyframes zb-fly-left {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(17deg);
  }
}
@keyframes zb-fly-right {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-14deg);
  }
}
@keyframes zb-alert {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  44% {
    transform: rotate(-2deg);
  }
  25%,
  36% {
    transform: rotate(7deg);
  }
  66%,
  78% {
    transform: rotate(-6deg);
  }
}
@keyframes zb-curious {
  0%,
  100% {
    transform: rotate(0);
  }
  15%,
  38% {
    transform: rotate(12deg) translateY(-3px);
  }
  53%,
  75% {
    transform: rotate(-8deg);
  }
  87% {
    transform: rotate(3deg);
  }
}
@keyframes zb-lift {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  40% {
    transform: rotate(10deg) translateY(-6px);
  }
  55%,
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes zb-ear-twitch {
  0%,
  35%,
  52%,
  100% {
    transform: rotate(0);
  }
  40%,
  47% {
    transform: rotate(13deg);
  }
  44% {
    transform: rotate(-3deg);
  }
}
.zoomies-brand .zb-spinner {
  transform-box: view-box;
  transform-origin: 625px 505px;
}
.zoomies-brand[data-gesture="spin"] .zb-spinner {
  animation: zb-spin 5.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.zoomies-brand[data-gesture="spin"] .zb-body {
  animation: zb-bound 0.42s ease-in-out infinite;
}
.zoomies-brand[data-gesture="spin"] .zb-paw-front {
  animation: zb-stride 0.42s ease-in-out infinite;
}
.zoomies-brand[data-gesture="spin"] .zb-paw-back {
  animation: zb-stride 0.42s ease-in-out -0.21s infinite;
}
.zoomies-brand[data-gesture="spin"] .zb-ear-left {
  animation: zb-fly-left 0.42s ease-in-out infinite;
}
.zoomies-brand[data-gesture="spin"] .zb-ear-right {
  animation: zb-fly-right 0.42s ease-in-out infinite;
}
.zoomies-brand[data-gesture="spin"] .zb-tail {
  animation-duration: 0.26s;
}
@keyframes zb-spin {
  0% {
    transform: rotate(0);
  }
  8% {
    transform: rotate(-12deg);
  }
  34% {
    transform: rotate(360deg);
  }
  60% {
    transform: rotate(720deg);
  }
  70% {
    transform: rotate(736deg);
  }
  82%,
  100% {
    transform: rotate(720deg);
  }
}

/* One clock gives every layer a neutral boundary before the next gesture. */
.zoomies-brand[data-gesture] [class^="zb-"] {
  animation-duration: calc(6000ms / var(--zb-cycles, 1));
  animation-iteration-count: var(--zb-cycles, 1);
  animation-delay: 0s;
  animation-fill-mode: both;
}
.zoomies-brand .zb-body,
.zoomies-brand .zb-ear-left,
.zoomies-brand .zb-ear-right {
  --zb-cycles: 3;
}
.zoomies-brand .zb-tail {
  --zb-cycles: 12;
}
.zoomies-brand .zb-tongue {
  --zb-cycles: 6;
}
.zoomies-brand[data-gesture="curious"] .zb-tail {
  --zb-cycles: 6;
}
.zoomies-brand[data-gesture="curious"] .zb-ear-left {
  --zb-cycles: 1;
}
.zoomies-brand:is([data-gesture="zoom"], [data-gesture="spin"])
  :is(.zb-body, .zb-paw-front, .zb-paw-back, .zb-ear-left, .zb-ear-right) {
  --zb-cycles: 10;
}
.zoomies-brand[data-gesture="spin"] .zb-tail {
  --zb-cycles: 20;
}
.zoomies-brand:not([data-gesture]) [class^="zb-"] {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .zoomies-brand.is-ready .zoomies-brand__svg {
    visibility: hidden;
  }
  .zoomies-brand.is-ready .zoomies-brand__fallback {
    visibility: visible;
  }
  .zoomies-brand .zoomies-brand__pause {
    display: none;
  }
  .zoomies-brand [class^="zb-"] {
    animation: none !important;
  }
}
@media (pointer: coarse) {
  .zoomies-brand .zoomies-brand__pause {
    min-height: 44px;
  }
}