@keyframes gentle-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(0, -.55rem, 0) rotate(.8deg);
  }
}

@keyframes cylinder-shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  10% {
    transform: translate3d(-.45rem, -.15rem, 0) rotate(-3deg);
  }

  20% {
    transform: translate3d(.55rem, .1rem, 0) rotate(3.5deg);
  }

  30% {
    transform: translate3d(-.65rem, -.1rem, 0) rotate(-4deg);
  }

  40% {
    transform: translate3d(.65rem, .15rem, 0) rotate(4deg);
  }

  50% {
    transform: translate3d(-.48rem, 0, 0) rotate(-3deg);
  }

  60% {
    transform: translate3d(.42rem, -.15rem, 0) rotate(2.5deg);
  }

  70% {
    transform: translate3d(-.28rem, .1rem, 0) rotate(-1.5deg);
  }

  80% {
    transform: translate3d(.18rem, 0, 0) rotate(1deg);
  }
}

@keyframes cylinder-glow {
  0%,
  100% {
    opacity: .94;
  }

  50% {
    opacity: 1;
  }
}

@keyframes stick-sway {
  0%,
  100% {
    opacity: .08;
    transform: translate(-50%, 1rem) rotate(-8deg);
  }

  25% {
    opacity: .82;
    transform: translate(-50%, -.5rem) rotate(16deg);
  }

  50% {
    opacity: .64;
    transform: translate(-50%, .2rem) rotate(-13deg);
  }

  75% {
    opacity: .88;
    transform: translate(-50%, -.3rem) rotate(12deg);
  }
}

@keyframes result-card-in {
  0% {
    opacity: 0;
    transform: translateY(1rem) scale(.94) rotate(-1deg);
  }

  70% {
    opacity: 1;
    transform: translateY(-.18rem) scale(1.01) rotate(.25deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes dot-pulse {
  0%,
  100% {
    opacity: .35;
    transform: scale(.75);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.loading-visual.is-shaking .fortune-cylinder--loading {
  animation: cylinder-shake 2.2s var(--ease-premium) both, cylinder-glow 1.1s ease-in-out infinite;
}

.loading-visual.is-shaking .fortune-stick {
  animation: stick-sway 2.2s ease-in-out both;
}

.loading-dots i {
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.loading-dots i:nth-child(2) {
  animation-delay: .18s;
}

.loading-dots i:nth-child(3) {
  animation-delay: .36s;
}

.result-card--revealing {
  animation: result-card-in .8s var(--ease-premium) both, gentle-float 6s ease-in-out 1.1s infinite;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .loading-visual.is-shaking .fortune-cylinder--loading,
  .loading-visual.is-shaking .fortune-stick {
    animation: none;
  }
}