#sectionHero .purr_token {
  pointer-events: none;
  z-index: 0;
  transform-origin: center;
  will-change: transform;
}

#sectionHero .purr_token img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

#sectionHero .purr_token.purr_coin_placed {
  position: absolute;
  right: auto;
  bottom: auto;
  z-index: 0;
  animation: none;
  opacity: var(--coin-scroll-opacity, 1);
  transform: translate3d(var(--coin-scroll-x, 0px), var(--coin-scroll-y, 0px), 0)
    rotate(calc(var(--coin-rotation, 0deg) + var(--coin-scroll-rotation, 0deg)))
    scale(var(--coin-scroll-scale, 1));
  transform-origin: center;
  will-change: transform, opacity;
}

#sectionHero .purr_token.purr_coin_placed > img {
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

html.is-head-loaded [data-taxi-view].is-page-entered #sectionHero .purr_token.purr_coin_placed > img {
  animation: purr-coin-cat-sync-intro var(--transition-duration-slower) var(--ease-bounce-soft) both;
}

@keyframes purr-coin-cat-sync-intro {
  from {
    opacity: 0;
    transform: translateY(30vh) scale(0.2);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#sectionHero .purr_token_right {
  position: fixed;
  right: var(--grid-margin);
  bottom: 5%;
  width: clamp(6.5rem, 9vw, 9rem);
  animation: purr-token-drift-right 11s ease-in-out infinite;
}

#sectionHero .widget_wrap .purr_token_left {
  position: absolute;
  left: 52%;
  bottom: calc(100% - 0.35rem);
  width: clamp(5rem, 7vw, 6.75rem);
  animation: purr-token-drift-left 13s ease-in-out infinite;
}

@keyframes purr-token-drift-right {
  0%, 100% {
    transform: translateY(0) rotate(13deg);
  }

  50% {
    transform: translateY(-0.7rem) rotate(20deg);
  }
}

@keyframes purr-token-drift-left {
  0%, 100% {
    transform: translateY(0) rotate(-17deg);
  }

  50% {
    transform: translateY(-0.55rem) rotate(-24deg);
  }
}

@media (max-width: 767px) {
  #sectionHero .purr_token_right {
    right: 1rem;
    bottom: 7.25rem;
    width: 4.75rem;
  }

  #sectionHero .widget_wrap .purr_token_left {
    left: 1.25rem;
    top: 0.75rem;
    bottom: auto;
    width: 4.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sectionHero .purr_token.purr_coin_placed {
    transform: rotate(var(--coin-rotation, 0deg));
  }

  #sectionHero .purr_token.purr_coin_placed > img {
    animation: none;
    opacity: 1;
  }

  #sectionHero .purr_token_right {
    animation: none;
    transform: rotate(13deg);
  }

  #sectionHero .widget_wrap .purr_token_left {
    animation: none;
    transform: rotate(-17deg);
  }
}