.fade-enter {
  opacity: 0;
  transform: translateY(10px);
}
.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s ease-in-out;
}

/* ===============================
   Elegant Circular Page Spinner
   =============================== */
#pageLoader {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#pageLoader.active {
  display: flex;
  opacity: 1;
}

@keyframes spin-smooth {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-smooth {
  animation: spin-smooth 1.2s linear infinite;
  border-top-color: #7AC943; /* your green */
  border-right-color: #3FA9F5; /* your blue accent */
}