/*
  Store-connected beat. Three stills of the same character, shown one at a time.

  <div class="frank-connected" role="img" aria-label="Frank, store connected">
    <img class="pose pose-open" alt="" src="/platform/art/mascot/frank-connected-open.webp">
    <img class="pose pose-joy" alt="" src="/platform/art/mascot/frank-connected.webp">
    <img class="pose pose-lean" alt="" src="/platform/art/mascot/frank-connected-lean.webp">
  </div>

  Play this only after the server says the store is connected.
  The joy still (frank-connected.webp) is the reduced-motion pose.
  Give the box a width. The images are transparent and sit on the page background.
*/
.frank-connected {
  position: relative;
  width: 220px;
  aspect-ratio: 1;
}
.frank-connected .pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.frank-connected .pose-open { animation: frank-pose-open 2.4s linear infinite; }
.frank-connected .pose-joy { animation: frank-pose-joy 2.4s linear infinite; }
.frank-connected .pose-lean { animation: frank-pose-lean 2.4s linear infinite; }
@keyframes frank-pose-open {
  0%, 32% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes frank-pose-joy {
  0%, 32% { opacity: 0; }
  33%, 65% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes frank-pose-lean {
  0%, 65% { opacity: 0; }
  66%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .frank-connected .pose { animation: none; opacity: 0; }
  .frank-connected .pose-joy { opacity: 1; }
}