/* Smooth Header Animation Styles */
.header-animated {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
}

/* Hidden state - slides up and fades out */
.header-animated.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Visible state - slides down and fades in */
.header-animated.header-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Ensure the header maintains its fixed position during animations */
.header-animated {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: white;
  /* No box-shadow to avoid unwanted lines */
}

/* Prevent layout shift by adding padding to body */
body.header-animated-page {
  padding-top: 76px; /* Match your header height */
}

/* Mobile adjustments */
@media (max-width: 991.98px) {
  body.header-animated-page {
    padding-top: 70px; /* Adjust for mobile header height */
  }
}

/* Smooth scrolling for better user experience */
html.header-animated-page {
  scroll-behavior: smooth;
}

/* Performance optimization - reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .header-animated {
    transition: none;
  }
}

/* No additional visual effects that could create unwanted lines */

/* Remove any conflicting borders or shadows that might create unwanted lines */
.header-animated {
  border: none;
  box-shadow: none;
}