/*
 * Pantalla de carga con el logo animado (Lottie). Ver public/loader/loader.js.
 * Va como hoja externa (no en línea) porque el CSP del servidor no permite estilos/scripts en línea.
 */
#alti-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: #0a0a0a;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s;
  /* Red de seguridad sin JS: si loader.js no llega a quitarla, se va sola */
  animation: alti-loader-failsafe 0.4s ease 12s forwards;
}

#alti-loader.is-leaving,
#alti-loader.is-leaving-fast {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#alti-loader.is-leaving-fast {
  transition-duration: 0.25s, 0s;
  transition-delay: 0s, 0.25s;
}

/* La comp es 1920×1080 y el logo armado ocupa ~63 % del ancho:
   ~540 px en escritorio, ~300 px en un teléfono. Los bordes de la comp están vacíos. */
.alti-loader__anim {
  /* Centrado explícito: en móvil es más ancha que la pantalla y un grid la alinearía a la izquierda */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, 125vw);
  aspect-ratio: 16 / 9;
}

.alti-loader__anim svg {
  display: block;
}

html.alti-loading {
  overflow: hidden;
}

@keyframes alti-loader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ── Medidor: barra fina centrada bajo el logo y porcentaje ──
   Al inicio el símbolo solo es más grande (~44 % del alto de la animación, alto = ancho × 9/16)
   que el logo armado (~32 %): el medidor va por debajo del símbolo grande para no tocarlo. */
.alti-loader__meter {
  --w: min(860px, 125vw);
  --mw: clamp(132px, 13vw, 168px);
  position: absolute;
  left: 50%;
  top: calc(50% + var(--w) * 0.5625 * 0.225 + clamp(18px, 2.2vw, 26px));
  width: var(--mw);
  margin-left: calc(var(--mw) / -2);
  color: rgba(242, 244, 241, 0.42);
}

.alti-loader__meter > * {
  opacity: 0;
}

.alti-loader__bar {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(242, 244, 241, 0.1);
  overflow: hidden;
}
.alti-loader__bar i {
  position: absolute;
  inset: 0;
  background: #37cc8e;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.alti-loader__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 11px;
  font: 500 9.5px/1 "Geist Variable", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.alti-loader__pct {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.alti-loader__pct b {
  font-weight: 500;
  color: rgba(242, 244, 241, 0.78);
}

/* Entra en cascada suave solo cuando la animación corre (loader.js pone html.alti-loading) */
html.alti-loading .alti-loader__meter > * {
  animation: alti-loader-meter-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
html.alti-loading .alti-loader__meta { animation-delay: 0.1s; }

/* Al empezar la salida del logo, el medidor se retira primero */
#alti-loader.is-exiting .alti-loader__meter {
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes alti-loader-meter-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}