/* Fade-in animation for scroll-triggered elements */
/* Content is visible by default (static-first); only animate when animations.js confirms support */
.fade-in {
  /* Visible by default - no hidden state applied until .fade-ready is added */
}

/* .fade-ready is only added by animations.js after confirming IntersectionObserver support */
html.fade-ready .fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98),
              transform 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}

html.fade-ready .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay variants for staggered animations */
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html.fade-ready .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .fade-in-delay-1,
  .fade-in-delay-2,
  .fade-in-delay-3,
  .fade-in-delay-4 {
    transition-delay: 0s;
  }
}

/* Mobile nav: visible by default for no-JS, hidden when JS available */
#mobile-menu {
  /* Visible by default for no-JS users */
}

html.js #mobile-menu {
  /* JS will toggle this via hidden class */
}

/* No-JS fallback: only apply on mobile screens */
@media (max-width: 767px) {
  /* Hide hamburger menu button when no JS (nav links are visible) */
  html:not(.js) #mobile-menu-button {
    display: none;
  }

  /* Show mobile nav links by default when no JS */
  html:not(.js) #mobile-menu {
    display: block !important;
  }
}