/* ==========================================================================
   DSA Learning Module — Keyframe Animations
   Mirrors /python_animation/css/animations.css
   ========================================================================== */

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes floatY { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
@keyframes floatBlobA { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, 40px) scale(1.08); } 66% { transform: translate(-30px, 70px) scale(0.94); } }
@keyframes floatBlobB { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-70px, 50px) scale(1.1); } 70% { transform: translate(30px, -40px) scale(0.92); } }
@keyframes floatBlobC { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, -60px) scale(1.12); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
@keyframes scrollDot { 0% { top: 6px; opacity: 1; } 70% { top: 20px; opacity: 0; } 100% { top: 6px; opacity: 0; } }
@keyframes bounceDown { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes softGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
@keyframes drift { 0% { transform: translate(0, 0); } 50% { transform: translate(24px, -30px); } 100% { transform: translate(0, 0); } }

/* ==========================================================================
   Topic icon animations — every card's icon keeps animating at rest, each
   style picked to echo the DSA concept it represents. Same class names as
   Python Animation's icon-anim-* system.
   ========================================================================== */

@keyframes iconSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.icon-anim-spin svg { animation: iconSpin 5s linear infinite; }

@keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.icon-anim-pulse svg { animation: iconPulse 2.1s ease-in-out infinite; }

@keyframes iconBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.icon-anim-bounce svg { animation: iconBounce 1.8s ease-in-out infinite; }

@keyframes iconBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
.icon-anim-blink svg { animation: iconBlink 1.3s steps(1) infinite; }

@keyframes iconSwing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.icon-anim-swing svg { animation: iconSwing 2.4s ease-in-out infinite; }

@keyframes iconFlicker { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); } 45% { opacity: 0.5; } 50% { opacity: 1; filter: drop-shadow(0 0 6px currentColor); } 55% { opacity: 0.7; } }
.icon-anim-flicker svg { animation: iconFlicker 2.6s ease-in-out infinite; }

@keyframes iconSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.icon-anim-slide svg { animation: iconSlide 1.9s ease-in-out infinite; }

@keyframes iconPartPulse { 0%, 100% { opacity: 0.45; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.05); } }
.icon-anim-stagger svg > rect,
.icon-anim-stagger svg > circle,
.icon-anim-stagger svg > path { transform-box: fill-box; transform-origin: center; animation: iconPartPulse 1.8s ease-in-out infinite; }
.icon-anim-stagger svg > rect:nth-child(1), .icon-anim-stagger svg > circle:nth-child(1), .icon-anim-stagger svg > path:nth-child(1) { animation-delay: 0s; }
.icon-anim-stagger svg > rect:nth-child(2), .icon-anim-stagger svg > circle:nth-child(2), .icon-anim-stagger svg > path:nth-child(2) { animation-delay: 0.25s; }
.icon-anim-stagger svg > rect:nth-child(3), .icon-anim-stagger svg > circle:nth-child(3), .icon-anim-stagger svg > path:nth-child(3) { animation-delay: 0.5s; }
.icon-anim-stagger svg > rect:nth-child(4), .icon-anim-stagger svg > circle:nth-child(4), .icon-anim-stagger svg > path:nth-child(4) { animation-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}