@keyframes wf-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
@keyframes wf-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes wf-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes wf-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes wf-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 41, 119, 0.35);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 41, 119, 0);
  }
}
@keyframes wf-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes wf-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wf-animate-fade-in {
  animation: wf-fade-in 0.5s ease forwards;
}
.wf-animate-slide-left {
  animation: wf-slide-in-left 0.5s ease forwards;
}
.wf-animate-slide-right {
  animation: wf-slide-in-right 0.5s ease forwards;
}

.wf-fade-in-observer {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.wf-fade-in-observer.is-visible {
  opacity: 1;
  transform: none;
}

.wf-stagger-1 {
  transition-delay: 0.05s;
}
.wf-stagger-2 {
  transition-delay: 0.12s;
}
.wf-stagger-3 {
  transition-delay: 0.19s;
}
.wf-stagger-4 {
  transition-delay: 0.26s;
}
.wf-stagger-5 {
  transition-delay: 0.33s;
}
.wf-stagger-6 {
  transition-delay: 0.4s;
}
.wf-stagger-7 {
  transition-delay: 0.47s;
}
.wf-stagger-8 {
  transition-delay: 0.54s;
}

.btn--primary:not(:disabled) {
  animation: wf-pulse 2.5s ease-in-out infinite;
}
.btn--primary:hover {
  animation: none;
}

.wf-rating-row__fill {
  animation: wf-slide-in-left 0.6s ease forwards;
}

.wf-hero__bonus-val {
  position: relative;
}
.wf-hero__bonus-val::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(46, 222, 217, 0.3) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: wf-shimmer 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}