raft-ui/dist/components/steps/otter-indicator.css

React UI components for Raft.

/* ─────────────────────────────────────────────────────────────────────────
   OtterIndicator — an otter posed by a status (an agent's turn, a step). The
   picture is fixed art; only the badges and the "z" take token colours.
   ───────────────────────────────────────────────────────────────────────── */

.r-otter-indicator {
  overflow: visible;
}
.r-otter-indicator * {
  transform-box: view-box;
}
.r-otter-indicator__body {
  transform-origin: 24px 28px;
}
.r-otter-indicator__arm {
  transform-origin: 29px 27px;
}
.r-otter-indicator__ripple {
  opacity: 0;
  transform-origin: 6px 30.5px;
}
.r-otter-indicator__z {
  opacity: 0;
}
.r-otter-indicator__parcel--adrift {
  transform-origin: 6px 25px;
}
@media (prefers-reduced-motion: no-preference) {
  .r-otter-indicator__wave {
    animation: r-otter-indicator-wave 1.2s linear infinite;
  }
  .r-otter-indicator__wave--back {
    animation-duration: 2s;
  }
  .r-otter-indicator--process .r-otter-indicator__body {
    animation: r-otter-indicator-bob 1.8s ease-in-out infinite alternate;
  }
  .r-otter-indicator--process .r-otter-indicator__arm {
    animation: r-otter-indicator-paddle 0.9s ease-in-out infinite alternate;
  }
  .r-otter-indicator--process .r-otter-indicator__ripple {
    animation: r-otter-indicator-ripple 1.8s ease-out infinite;
  }
  .r-otter-indicator--process .r-otter-indicator__ripple--late {
    animation-delay: 0.9s;
  }
  .r-otter-indicator--finish .r-otter-indicator__wave {
    animation-duration: 3s;
  }
  .r-otter-indicator--finish .r-otter-indicator__body {
    animation: r-otter-indicator-bob 3.2s ease-in-out infinite alternate;
  }
  .r-otter-indicator--wait .r-otter-indicator__body {
    animation: r-otter-indicator-breathe 2.4s ease-in-out infinite alternate;
  }
  .r-otter-indicator--wait .r-otter-indicator__z {
    animation: r-otter-indicator-z 2.4s ease-out infinite;
  }
  .r-otter-indicator--wait .r-otter-indicator__z--late {
    animation-delay: 1.2s;
  }
  .r-otter-indicator--error .r-otter-indicator__body {
    animation: r-otter-indicator-shiver 0.18s linear infinite alternate;
  }
  .r-otter-indicator--error .r-otter-indicator__parcel--adrift {
    animation: r-otter-indicator-drift 2s ease-in-out infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  .r-otter-indicator__z {
    opacity: 1;
  }
}
@keyframes r-otter-indicator-bob {
  from {
    transform: translateY(-0.6px) rotate(-3deg);
  }
  to {
    transform: translateY(1.2px) rotate(2deg);
  }
}
@keyframes r-otter-indicator-paddle {
  from {
    transform: rotate(-35deg);
  }
  to {
    transform: rotate(30deg);
  }
}
@keyframes r-otter-indicator-wave {
  to {
    transform: translateX(-12px);
  }
}
@keyframes r-otter-indicator-ripple {
  from {
    opacity: 0.8;
    transform: scale(0.4);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes r-otter-indicator-breathe {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.02, 1.05);
  }
}
@keyframes r-otter-indicator-z {
  from {
    opacity: 0;
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(4px, -7px);
  }
}
@keyframes r-otter-indicator-shiver {
  from {
    transform: translateX(-0.4px);
  }
  to {
    transform: translateX(0.4px);
  }
}
@keyframes r-otter-indicator-drift {
  from {
    transform: translate(0, 0) rotate(-18deg);
  }
  to {
    transform: translate(-1.5px, 1.2px) rotate(-8deg);
  }
}