@layer animations {
  @keyframes shimmerGold {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }

  @keyframes floatUpDown {
    0% { transform: translateY(-8px); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(-8px); }
  }

  @keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(217,119,6,0)); }
    50% { filter: drop-shadow(0 0 8px rgba(217,119,6,0.4)); }
  }

  @keyframes particleDrift {
    0% { transform: translateY(40px); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: translateY(-120px); opacity: 0; }
  }

  @keyframes drawUnderline {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }

  @keyframes countBadgePop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  @keyframes fadeSlideUp {
    0% { opacity: 0; transform: translateY(32px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes rotateSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes borderShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }

  @keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  @keyframes imageReveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0% 0 0); }
  }

  .underline-active + .section__underline {
    animation: drawUnderline 0.8s ease forwards;
  }

  .bonus-card__badge.pop {
    animation: countBadgePop 0.6s ease;
  }

  .hero__image.reveal,
  .game-card img.reveal {
    animation: imageReveal 1s ease forwards;
  }

  .btn--primary::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 1px solid rgba(217,119,6,0.3);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .btn--primary:hover::after {
    opacity: 1;
    transform: scale(1.08);
  }

  .btn:active,
  .feature-card:active,
  .bonus-card:active {
    transform: scale(0.98);
  }

  .animate-on-scroll.is-visible {
    animation: fadeSlideUp 0.6s ease forwards;
  }

  .payments__track {
    display: inline-flex;
    gap: 32px;
    animation: marqueeScroll 16s linear infinite;
  }

  .payments__track span {
    background: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(217,119,6,0.1);
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}