/**
 * Page Animations and Transitions
 * Smooth page load and navigation animations
 */

/* Page slide-in animation on load */
body,
.main {
  animation: pageSlideIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

/* Ensure hero sections animate smoothly */
#hero,
.hero {
  animation: pageSlideIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Force animation on all direct children of main for consistent feel */
.main > section:first-child {
  animation: pageSlideIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Page transition overlay - prevents white flash */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

body.page-transition-out::before {
  opacity: 1;
  pointer-events: auto;
}

/* Smooth scroll behavior */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  body,
  .main {
    animation: none;
    transition: none;
  }
}