/* ==========================================================================
   How It Works page (how-it-works.php)
   ========================================================================== */

@layer base {
  html, body { scroll-behavior: smooth; }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}
@keyframes cosmicShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.animate-pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }
.animate-arrow-bounce { animation: gentleBounce 2s ease-in-out infinite; }
.cosmic-gradient {
  background: linear-gradient(135deg, #240731, #3a1d47, #4A2860, #240731);
  background-size: 300% 300%;
  animation: cosmicShimmer 14s ease infinite;
}

.shimmer-card { position: relative; overflow: hidden; }
.shimmer-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.shimmer-card:hover::after { transform: translateX(300%) skewX(-20deg); }