@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.6);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

[data-aos] {
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
[data-aos="fade-in"] {
  transform: none;
}
[data-aos="fade-left"] {
  transform: translateX(24px);
}
[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

.hero-content {
  animation: fadeInUp 0.7s ease both;
}
.hero-badge {
  animation: fadeIn 0.5s ease both;
}
.animate-glow {
  animation: glow 2.5s ease-in-out infinite;
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}
.animate-bounce-in {
  animation: bounceIn 0.6s ease both;
}

.btn-primary,
.btn-reg,
.btn-bonus {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-reg::after,
.btn-bonus::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.btn-primary:hover::after,
.btn-reg:hover::after,
.btn-bonus:hover::after {
  transform: translateX(100%);
}

.card,
.bonus-card,
.slot-card {
  will-change: transform;
}