/* ═══════════════════════════════════════════════════════════════════════
   PRELOADER · solo en la home
   Fondo azul de marca, logo que se llena de verde como un liquido y una
   barra de progreso real debajo. Al 100% la pantalla se desliza hacia arriba.
   ═══════════════════════════════════════════════════════════════════════ */

body.preloader-activo {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  background: var(--azul-marca);
  transform: translateY(0);
  transition: transform 750ms var(--curva-salida);
}

/* Se desliza hacia arriba y descubre el sitio. */
.preloader--sale {
  transform: translateY(-100%);
  pointer-events: none;
}

.preloader[hidden] { display: none; }

.preloader__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-8);
}

/* El logo recorta el contenido del SVG con su propia transparencia.
   La relacion de aspecto es la del PNG (595x193) para que el liquido
   suba alineado con las letras. */
.preloader__logo {
  display: block;
  width: 200px;
  max-width: 58vw;
  height: auto;
  aspect-ratio: 595 / 193;

  -webkit-mask-image: url('/assets/vixoz_logo_2026.png');
          mask-image: url('/assets/vixoz_logo_2026.png');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .preloader__logo { width: 300px; max-width: 42vw; }
}

/* Sin soporte de mask-image el llenado pintaria un rectangulo verde sobre
   toda la caja. En ese caso mostramos el logo tal cual, sin animar. */
@supports not ((-webkit-mask-image: url('#')) or (mask-image: url('#'))) {
  .preloader__logo {
    background: url('/assets/vixoz_logo_2026.png') center / contain no-repeat;
  }
  .preloader__vacio,
  .preloader__liquido { display: none; }
}

/* La parte del logo todavia sin llenar: azul translucido sobre el azul
   de fondo, como pide la spec. */
.preloader__vacio { fill: rgba(255, 255, 255, 0.17); }

/* El liquido verde, recortado a la silueta del logo por la mascara. */
.preloader__liquido { fill: var(--verde-marca); }

/* ── Barra de progreso ─────────────────────────────────────────────── */

.preloader__barra {
  position: relative;
  width: 88px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.preloader__barra-relleno {
  width: 100%;
  height: 100%;
  background: var(--verde-marca);
  transform: scaleX(0);
  transform-origin: left center;
  /* Sin transition: el valor lo escribe el JS por frame, ya suavizado.
     Una transition encima lo dejaria siempre atrasado respecto al logo. */
}

.preloader__porcentaje {
  font-family: var(--fuente-texto);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: var(--tracking-etiqueta);
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

/* ── Movimiento reducido ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
  .preloader--sale { opacity: 0; transform: none; }
}