@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes floatBounce {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes raindropFall {
  0% {
    opacity: 0;
    translate: 0 -120px;
    scale: 1 1.3;
  }

  60% {
    opacity: 1;
    translate: 0 10px;
    scale: 1 0.9;
  }

  80% {
    translate: 0 -5px;
    scale: 1 1.05;
  }

  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1 1;
  }
}

@keyframes glowPulse {

  0%,
  100% {
    text-shadow: 0 0 10px rgba(247, 184, 50, 0.5);
  }

  50% {
    text-shadow:
      0 0 20px rgba(247, 184, 50, 0.8),
      0 0 30px rgba(247, 184, 50, 0.6);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Hanken Grotesk", sans-serif;
  font-optical-sizing: auto;
}

body {
  min-height: 100vh;
  background: #ffffff;
}

@media (prefers-color-scheme: dark) {

  body,
  main {
    background: #0d0905;
    color: #ffffff;
  }

  img.dark-invert {
    filter: invert(1) brightness(2);
  }
}

.unbounded {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.cta-shadow {
  box-shadow: 0px 12.5px 41.67px 0px #ffc02e4d;
}

.hero-heading {
  line-height: 0.95;
}

.meta-text {
  line-height: 16.25px;
  letter-spacing: 2.98px;
  vertical-align: middle;
  text-transform: uppercase;
  animation: fadeInUp 0.8s ease-out;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.fade-in-up-delay-1 {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.fade-in-up-delay-2 {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.float-bounce {
  animation: floatBounce 3s ease-in-out infinite;
}

.float-bounce-delay-1 {
  animation: floatBounce 3.5s ease-in-out infinite 0.2s;
}

.float-bounce-delay-2 {
  animation: floatBounce 3.2s ease-in-out infinite 0.4s;
}

.float-bounce-delay-3 {
  animation: floatBounce 3.8s ease-in-out infinite 0.1s;
}

.float-bounce-delay-4 {
  animation: floatBounce 3.3s ease-in-out infinite 0.3s;
}

.roll-in-left-1 {
  animation:
    raindropFall 0.8s ease-out 0.1s both,
    floatBounce 3s ease-in-out infinite 1s;
}

.roll-in-left-2 {
  animation:
    raindropFall 0.8s ease-out 0.3s both,
    floatBounce 3s ease-in-out infinite 1.2s;
}

.roll-in-left-3 {
  animation:
    raindropFall 0.8s ease-out 0.5s both,
    floatBounce 3s ease-in-out infinite 1.4s;
}

.roll-in-left-4 {
  animation:
    raindropFall 0.8s ease-out 0.7s both,
    floatBounce 3s ease-in-out infinite 1.6s;
}

.roll-in-left-5 {
  animation:
    raindropFall 0.8s ease-out 0.9s both,
    floatBounce 3s ease-in-out infinite 1.8s;
}

.roll-in-right-1 {
  animation:
    raindropFall 0.8s ease-out 0.1s both,
    floatBounce 3s ease-in-out infinite 1s;
}

.roll-in-right-2 {
  animation:
    raindropFall 0.8s ease-out 0.3s both,
    floatBounce 3s ease-in-out infinite 1.2s;
}

.roll-in-right-3 {
  animation:
    raindropFall 0.8s ease-out 0.5s both,
    floatBounce 3s ease-in-out infinite 1.4s;
}

.roll-in-right-4 {
  animation:
    raindropFall 0.8s ease-out 0.7s both,
    floatBounce 3s ease-in-out infinite 1.6s;
}

.roll-in-right-5 {
  animation:
    raindropFall 0.8s ease-out 0.9s both,
    floatBounce 3s ease-in-out infinite 1.8s;
}

.glow-accent {
  animation: glowPulse 3s ease-in-out infinite;
}

.shimmer-button {
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

* {
  box-sizing: border-box;
}

/* Success Modal Animations */
#success-modal:not(.pointer-events-none) .confetti-left-anim {
  animation: confettiSplash 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
}

#success-modal:not(.pointer-events-none) .confetti-right-anim {
  animation: confettiSplash 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
}

#success-modal:not(.pointer-events-none) .success-badge-anim {
  animation: badgeScaleIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s both;
}

#success-modal:not(.pointer-events-none) .modal-text-fade {
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

@keyframes confettiSplash {
  0% {
    transform: translate(60px, 40px) scale(0) rotate(-45deg);
    opacity: 0;
  }
  60% {
    transform: translate(-10px, -10px) scale(1.15) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes badgeScaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}