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

@keyframes course-pop-in {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes course-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

@keyframes course-confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(360deg); opacity: 0; }
}

@keyframes course-dash {
  to { stroke-dashoffset: -16; }
}

@keyframes course-spark {
  0%   { box-shadow: 0 0 0 0 var(--highlight); }
  100% { box-shadow: 0 0 0 20px rgba(251, 192, 45, 0); }
}

@keyframes course-yellow-glow-pulse {
  0% {
    box-shadow:
      0 0 0 rgba(251, 192, 45, 0),
      0 0 0 rgba(251, 192, 45, 0);
  }
  50% {
    box-shadow:
      0 0 18px rgba(251, 192, 45, 0.9),
      0 0 36px rgba(251, 192, 45, 0.7);
  }
  100% {
    box-shadow:
      0 0 0 rgba(251, 192, 45, 0),
      0 0 0 rgba(251, 192, 45, 0);
  }
}

@keyframes course-aura-up {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0.3;
  }
  30% {
    transform: translate(var(--shiftX, 0px), -14px) scale(0.6);
    opacity: 0.7;
  }
  45% {
    transform: translate(var(--shiftX, 0px), -22px) scale(0.75);
    opacity: 0.9;
  }
  70% { opacity: 1; }
  100% {
    transform: translate(var(--shiftX, 0px), var(--endY, -90px)) scale(1.05);
    opacity: 0;
  }
}

@keyframes course-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.apply-shake {
  animation: course-shake 0.4s ease-in-out !important;
}