/* ==========================================================================
   PlayAmo DE — Animations
   ========================================================================== */

/* ---- Yellow pulse on CTA buttons ---- */
@keyframes yellowPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(245, 230, 66, 0.35); }
  50%       { box-shadow: 0 4px 30px rgba(245, 230, 66, 0.62); }
}
.btn--primary { animation: yellowPulse 3s ease-in-out infinite; }
.btn--primary:hover { animation: none; }

/* ---- Badge float ---- */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
.hero__badge { animation: floatBadge 4s ease-in-out infinite; }

/* ---- Stat numbers glow ---- */
.stat__num {
  animation: statGlow 3.5s ease-in-out infinite;
}
@keyframes statGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(245, 230, 66, 0.4); }
  50%       { text-shadow: 0 0 40px rgba(245, 230, 66, 0.75); }
}

/* ---- Sticky promo slide up ---- */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.sticky-promo { animation: slideUp 0.5s 1s var(--ease-out) both; }

/* ---- Promo banner border pulse ---- */
.promo-banner {
  animation: borderPulse 4s ease-in-out infinite;
}
.promo-banner:hover { animation: none; }
@keyframes borderPulse {
  0%, 100% { border-color: rgba(245, 230, 66, 0.18); }
  50%       { border-color: rgba(245, 230, 66, 0.42); }
}

/* ---- Feature items hover glow ---- */
.features li {
  position: relative;
}
.features li::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 0% 50%, rgba(54, 232, 122, 0.07), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur);
}
.features li:hover::before { opacity: 1; }

/* ---- Header glow on scroll ---- */
.site-header.is-scrolled::after {
  animation: headerGlow 4s ease-in-out infinite;
}
@keyframes headerGlow {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}