/* ============================================================
   MDExamPrep — GSAP-Complementary CSS Keyframe Animations
   ============================================================
   Pure CSS animations used as fallbacks and complements to GSAP.
   Utility classes follow a .animate-* naming convention.
   ============================================================ */

/* -------------------- Fade Variants -------------------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -------------------- Scale -------------------- */

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* -------------------- Slide Variants -------------------- */

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideInUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* -------------------- Ambient / Looping -------------------- */

@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
  50%      { filter: drop-shadow(0 0 16px currentColor); }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.8;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* -------------------- Page Transition -------------------- */

@keyframes pageFlip {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-160deg); }
}

/* -------------------- Loading States -------------------- */

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ============================================================
   Utility Classes
   ============================================================ */

.animate-fade-in-up {
  animation: fadeInUp 0.5s var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease both;
}

.animate-scale-in {
  animation: scaleIn 0.4s var(--ease-elastic, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.animate-breathe {
  animation: breathe 3s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* ============================================================
   Stagger Delay Utilities
   Usage: <div class="animate-fade-in-up delay-3">…</div>
   ============================================================ */

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* ============================================================
   Reduced Motion — Accessibility
   Collapses all animations to near-instant for users who
   prefer reduced motion at the OS level.
   ============================================================ */

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