@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

@keyframes float-mid {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes sparkle {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes wave {
  0%, 100% { transform: scaleY(.6); }
  50% { transform: scaleY(1); }
}

@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

.floating-letter {
  position: absolute;
  z-index: 0;
  top: calc(10% + (var(--i) * 7%));
  left: calc(6% + (var(--i) * 8%));
  color: rgba(108,76,241,.25);
  font-size: calc(28px + (var(--i) % 4) * 10px);
  font-weight: 900;
  user-select: none;
  animation: float-slow 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .35s);
}

.floating-letter:nth-of-type(3n) { color: rgba(53,198,244,.25); }
.floating-letter:nth-of-type(4n) { color: rgba(255,107,107,.24); }
.floating-letter:nth-of-type(5n) { color: rgba(255,211,78,.45); }

.hero-blur {
  position: absolute;
  border-radius: 999px;
  filter: blur(32px);
  animation: drift 8s ease-in-out infinite;
}

.hero-blur--one {
  top: 5rem;
  right: 8%;
  width: 4rem;
  height: 4rem;
  background: rgba(255,211,78,.42);
}

.hero-blur--two {
  bottom: 6rem;
  left: 12%;
  width: 6rem;
  height: 6rem;
  background: rgba(88,214,178,.42);
  animation-delay: 2s;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}

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

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}