/* ==================================================
   ANIMATIONS COMPONENT - Card Animations & Effects
   ================================================== */

/* ==================== PULSATING ILLUMINATION ==================== */

/* Main pulsating animation for cards */
#the-problem-container .lg-card.pulsating-illumination {
  animation: card-border-flash 1.5s ease;
}

#the-problem-container .lg-card.pulsating-illumination::after {
  animation: card-refraction-flash 1.5s ease, card-refraction-shift 1.5s ease;
}

/* ==================== KEYFRAME ANIMATIONS ==================== */

@keyframes card-border-flash {
  0%, 100% { border-color: rgba(255, 255, 255, 0.12); }
  40% { border-color: rgba(191, 90, 242, 0.95); }
}

@keyframes card-refraction-flash {
  0%, 100% { opacity: 0; }
  45% { opacity: 0.30; }
}

@keyframes card-refraction-shift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  42% { transform: translate3d(6px, 6px, 0); }
}

/* ==================== ACCESSIBILITY ==================== */

@media (prefers-reduced-motion: reduce) {
  #the-problem-container .lg-card.pulsating-illumination,
  #the-problem-container .lg-card.pulsating-illumination::after {
    animation: none !important;
  }
  
  #the-problem-container .lg-card {
    transition: none;
    transform: none;
  }
  
  #the-problem-container .lg-card:hover,
  #the-problem-container .lg-card:focus-within {
    transform: none;
  }
}