/* Page Transition Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply smooth fade-in to body */
body {
  animation: fadeIn 0.3s ease-out;
}

/* Apply slide-up animation to main content */
main,
.main-content,
[role="main"] {
  animation: fadeInUp 0.4s ease-out;
}

/* Staggered animation for cards and sections */
.content-section,
.feature-card,
.card {
  animation: fadeInUp 0.5s ease-out;
  animation-fill-mode: both;
}

.content-section:nth-child(1) { animation-delay: 0.1s; }
.content-section:nth-child(2) { animation-delay: 0.2s; }
.content-section:nth-child(3) { animation-delay: 0.3s; }
.content-section:nth-child(4) { animation-delay: 0.4s; }

/* Navigation stays fixed, no animation */
nav {
  animation: fadeIn 0.2s ease-out;
}

/* Footer subtle fade */
footer {
  animation: fadeIn 0.5s ease-out;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

/* Smooth transitions for interactive elements */
a, button {
  transition: all 0.2s ease;
}

/* Page transition for links (optional - requires JS) */
.page-transitioning {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease-out;
}