/* Navbar Scroll Styles - CSS personalizado para animaciones GSAP */

.navbar5_component {
  /* Removemos backdrop-filter inicial para aplicarlo dinámicamente */
  background-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2rem 5% 1.5rem;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  /* Transiciones suaves para backdrop-filter, fondo, borde y padding */
  transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, background-color 0.3s ease, border-bottom-width 0.3s ease, padding 0.2s ease;
}

/* Clase para cuando el navbar tiene blur y borde activos */
.navbar5_component.scrolled {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.0);
  padding: 1rem 5% 1rem; /* compactar verticalmente al hacer scroll */
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--_primitives---colors--orange);
}

/* Asegurar que el navbar esté por encima de otros elementos */
.navbar5_component {
  will-change: transform, backdrop-filter;
}

/* Optimización para animaciones GSAP */
.navbar5_component * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Media queries para responsive */
@media screen and (max-width: 991px) {
  .navbar5_component {
    min-height: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .navbar5_component {
    padding: 1.5rem 5% 1rem;
  }
}

@media screen and (max-width: 479px) {
  .navbar5_component {
    padding: 1rem 5% 0.75rem;
  }
}

/* Estados iniciales sin depender de .js-enabled para evitar blink */
.fadedown  { opacity: 0; transform: translateY(-30px); }
.fadeup    { opacity: 0; transform: translateY(30px); }
.fadeleft  { opacity: 0; transform: translateX(30px); }
.faderight { opacity: 0; transform: translateX(-30px); }
.fadebig   { opacity: 0; transform: scale(1.2); }
.fadesmall { opacity: 0; transform: scale(0.8); }