/* Video fijo detrás del contenido (JS lo enciende/apaga) */
#bg-video{
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  opacity: 0;                 /* oculto por defecto */
  pointer-events: none;
  z-index: 1;               
  transition: opacity .5s ease;
}
#bg-video.is-active{ opacity: .55; } /* ajusta opacidad a tu gusto */




/* --- 1. CONFIGURACIÓN INICIAL DEL HEADER --- */
/* Esta es la clase de tu Elemento de Bloque */
.navigation {
  /* Hacemos el header transparente y lo fijamos */
  background-color: transparent;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;

  /* Tu código de padding y transición */
padding: clamp(2rem, 4vw, 2rem) clamp(1.5rem, 5vw, 6rem);
	
  transition: padding 0.2s ease-in-out;
 
  overflow: hidden;
  backface-visibility: hidden;
}



/* --- 3. LA "OLA" (Pseudo-elemento) --- */
.navigation:before {
  transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1) 0s;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-25%) scaleY(1) scaleX(1.2);
  bottom: 100%; /* Oculta por encima */
  width: 150%;
  height: 180%;
  background-color: #ffffff; /* Fondo blanco de la ola */
  display: block;
  z-index: -1;
}

/* --- 4. ESTADO AL HACER SCROLL (.navigation--scrolled) --- */
.navigation.navigation--scrolled {
  /* Reducimos el padding */
  padding: clamp(0.5rem, 2vw, 1.2rem) clamp(1rem, 4vw, 3rem);

}

.navigation.navigation--scrolled:before {
  bottom: -35%; /* La ola baja */
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}


.navigation .logo-dark { display: none; }
.navigation .logo-light { display: block; }
.navigation.navigation--scrolled .logo-light { display: none; }
.navigation.navigation--scrolled .logo-dark { display: block; }


/* --- Arreglo para la Barra de Admin de WordPress --- */
body.admin-bar .navigation {
  top: 32px;
}