@layer reading-world {
  .reading-world__number[data-flip-speed="normal"].is-flipping
    .reading-world__number-step--old,
  .reading-world__number[data-flip-speed="normal"].is-flipping
    .reading-world__number-step--next {
    animation-duration: 600ms;
  }

  .reading-world__number[data-flip-speed="medium"].is-flipping
    .reading-world__number-step--old,
  .reading-world__number[data-flip-speed="medium"].is-flipping
    .reading-world__number-step--next {
    animation-duration: 240ms;
  }

  .reading-world__number[data-flip-speed="fast"].is-flipping
    .reading-world__number-step--old,
  .reading-world__number[data-flip-speed="fast"].is-flipping
    .reading-world__number-step--next {
    animation-duration: 100ms;
  }

  .reading-world__bee-orbit {
    inset: 0;
    transform: none;
    animation: none;
    pointer-events: none;
  }

  .reading-world__bee-bob {
    animation: none;
  }

  .reading-world:not(.is-reading-world-visible)
    .reading-world__bee-counter-orbit {
    animation-play-state: paused;
  }

  .reading-world__bee-counter-orbit {
    inset: auto;
    top: 31.7%;
    left: 7.8%;
    inline-size: clamp(0.95rem, 1.6vw, 1.45rem);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: reading-world-bee-projected-equator 24s linear infinite;
    pointer-events: none;
  }

  .reading-world__bee-bob img {
    transform: scaleX(1);
    animation: none;
  }

  @keyframes reading-world-bee-projected-equator {
    0% {
      top: 31.7%;
      left: 7.8%;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.92);
    }

    2% {
      opacity: 1;
    }

    12.5% {
      top: 37.06%;
      left: 20.16%;
      transform: translate(-50%, -50%) scale(0.96);
    }

    25% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.04);
    }

    37.5% {
      top: 62.94%;
      left: 79.84%;
      transform: translate(-50%, -50%) scale(0.96);
    }

    48% {
      opacity: 1;
    }

    50% {
      top: 68.3%;
      left: 92.2%;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.92);
    }

    62.5% {
      top: 62.94%;
      left: 79.84%;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.88);
    }

    75% {
      top: 50%;
      left: 50%;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.84);
    }

    87.5% {
      top: 37.06%;
      left: 20.16%;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.88);
    }

    100% {
      top: 31.7%;
      left: 7.8%;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.92);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .reading-world__bee-counter-orbit {
      top: 50%;
      left: 50%;
      opacity: 1;
      transform: translate(-50%, -50%);
      animation: none;
    }

    .reading-world__bee-bob img {
      transform: scaleX(1);
    }
  }
}