/* ==========================================================================
   1. MOVING GRADIENT BACKGROUND
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #f8fafc;
  
  /* Continuous shifting gradient background */
  background: linear-gradient(-45deg, #0f172a, #1e1b4b, #311042, #111827);
  background-size: 400% 400%;
  animation: animatedGradient 12s ease infinite;
  min-height: 100vh;
}

@keyframes animatedGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ==========================================================================
   2. SMOOTH PAGE TRANSITIONS & ANIMATIONS
   ========================================================================== */
/* Apply this class to your main page content containers */
.page-transition,
main,
.page-container {
  animation: fadeInSmooth 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInSmooth {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth transitions for interactive elements */
a, button, input, select {
  transition: all 0.2s ease-in-out;
}