/* Preload Macroled — overlay hasta que Typesense / la página esté lista.
   Se oculta desde que llega este CSS (está en el head), no cuando corre el
   script del final. Si no, la página se pinta, después aparece el loader
   y recién ahí vuelve a verse bien. */
html:not(.ml-ready),
html:not(.ml-ready) body {
  background: #f5f5f5 !important;
}

html:not(.ml-ready) body {
  overflow: hidden;
}

html:not(.ml-ready) body > *:not(#ml-preload) {
  opacity: 0 !important;
  pointer-events: none !important;
}

#ml-preload {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #00152b;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#ml-preload.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ml-preload__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  width: min(280px, 78vw);
  box-sizing: border-box;
}

.ml-preload__logo-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  line-height: 0;
}

.ml-preload__logo {
  width: 100%;
  height: auto;
  display: block;
}

/* Base: gris clarito */
.ml-preload__logo--base {
  color: #d5dbe2;
}

/* Capa de color — el avance lo maneja JS con --ml-fill (0 a 1) */
.ml-preload__logo--fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  color: #0077a8;
  clip-path: inset(0 calc((1 - var(--ml-fill, 0)) * 100%) 0 0);
}

/* Logo completo: titila mientras espera el render final */
#ml-preload.is-waiting .ml-preload__logo-wrap {
  animation: ml-preload-pulse 1.05s ease-in-out infinite;
}

@keyframes ml-preload-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-preload__logo--fill {
    clip-path: inset(0 0 0 0);
  }
  #ml-preload.is-waiting .ml-preload__logo-wrap {
    animation: none;
    opacity: 1;
  }
}