/* ================================================================
   animations.css — Micro-interactions, Entrance Effects & Motion
   ================================================================ */

/* ---------- Fade In ---------- */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Slide Up (entrance) ---------- */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Slide Down ---------- */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Slide In from Left ---------- */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- Slide In from Right ---------- */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- Scale In (subtle pop) ---------- */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Spinner ---------- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Pulse (for points earned, notifications) ---------- */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- Shake (for wrong answers) ---------- */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
}

/* ---------- Progress bar fill ---------- */
@keyframes progress-fill {
  from {
    width: 0%;
  }
}

/* ---------- Fade In + Slide Up (premium entrance) ---------- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Glow pulse (for accent elements) ---------- */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--accent-glow);
  }
  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}

/* ---------- Utility Classes ---------- */
.animate-fade-in {
  animation: fade-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-slide-up {
  animation: slide-up 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-slide-down {
  animation: slide-down 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-scale-in {
  animation: scale-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-shake {
  animation: shake 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-pulse {
  animation: pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

/* ---------- Staggered Children ---------- */
.stagger-children > * {
  opacity: 0;
  animation: slide-up 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stagger-children > *:nth-child(1) {
  animation-delay: 0.05s;
}

.stagger-children > *:nth-child(2) {
  animation-delay: 0.1s;
}

.stagger-children > *:nth-child(3) {
  animation-delay: 0.15s;
}

.stagger-children > *:nth-child(4) {
  animation-delay: 0.2s;
}

.stagger-children > *:nth-child(5) {
  animation-delay: 0.25s;
}

.stagger-children > *:nth-child(6) {
  animation-delay: 0.3s;
}

.stagger-children > *:nth-child(7) {
  animation-delay: 0.35s;
}

.stagger-children > *:nth-child(8) {
  animation-delay: 0.4s;
}

.stagger-children > *:nth-child(9) {
  animation-delay: 0.45s;
}

.stagger-children > *:nth-child(10) {
  animation-delay: 0.5s;
}

/* ---------- Shimmer slide (progress bars) ---------- */
@keyframes shimmer-slide {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ---------- Skeleton pulse (loading placeholders) ---------- */
@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ---------- Sunrise (green beam behind hero) ---------- */
@keyframes sunrise {
  from {
    transform: translateX(-50%) translateY(100%);
  }
  to {
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------- Feature Row Entrance ---------- */
@keyframes feature-enter {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(-0.6deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

.animate-feature {
  animation: feature-enter 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.features-section .animate-feature:nth-of-type(1) {
  animation-delay: 0.05s;
}

.features-section .animate-feature:nth-of-type(2) {
  animation-delay: 0.15s;
}

.features-section .animate-feature:nth-of-type(3) {
  animation-delay: 0.25s;
}

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

  .stagger-children > * {
    opacity: 1 !important;
    animation: none !important;
  }

  .card:hover,
  .btn:hover,
  .nav-links a:hover,
  .stat-card:hover,
  .progress-card:hover,
  .badge-item:hover {
    transform: none !important;
  }

  .quiz-option:hover {
    transform: none !important;
  }
}