@import "tailwindcss";

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#wrapper {
  flex: 1;
}

/* ANNOTATION: A new, subtle gradient for the hero section background. It's lighter and less saturated than the footer. */
.hero-gradient-bg {
  background-image: radial-gradient(at top left, #e0e7ff, transparent 50%), radial-gradient(at top right, #dbeafe, transparent 50%);
}

.dark .hero-gradient-bg {
  background-image: radial-gradient(at top left, #1e293b, transparent 50%), radial-gradient(at top right, #312e81, transparent 50%);
}

.footer-gradient {
  background: linear-gradient(90deg, #4f46e5, #818cf8);
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0; /* Start hidden */
  animation: fadeInUp 0.6s ease-out forwards;
}

/* ANNOTATION: Added more stagger delays to handle the increased number of animated elements on the page. */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }