/* === Overlay semitransparente === */
#loader-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); /* oscurece el fondo */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Contenedor máscara */
.logo-mask {
  position: relative;
  width: 180px;   /* tamaño del logo */
  height: 180px;
  overflow: hidden;
}

/* Logo base negro estático */
.logo-mask::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('assets/imgs/GRUPO HORIZON ISOTIPO - BLANCO.png') center/contain no-repeat;
  filter: brightness(0); /* negro total */
  z-index: 1;
}

/* Logo blanco que se revela */
.loader-logo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  -webkit-clip-path: inset(100% 0 0 0); /* soporte iOS */
  clip-path: inset(100% 0 0 0);
  animation: reveal 2s forwards;
  z-index: 2;
}

/* Animación de relleno vertical */
@keyframes reveal {
  0%   { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); }
  100% { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
}

/* Cuando termina se oculta */
#loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}