/* ==========================================================================
   AREA UNITED · Entrada de marca (loader / cortina)
   Solo se pinta si <html> lleva .intro-full (lo decide un script inline:
   JS activo, sin reduced-motion). Sale en cada carga, con duración fija.
   Dos capas: .loader-bg (negro granulado = cortina, sube sola al final) y
   .loader-ui (logo centrado, contador abajo-izquierda con estela, barra,
   textos; hace fade out al llegar a 100).
   Red de seguridad: si el JS se atasca, a los 5 s desaparece sola.
   ========================================================================== */

.loader { display: none; }

.intro-full .loader {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: block;
  color: var(--white);
  overflow: hidden;
  animation: loader-safety 1ms linear 5000ms forwards;
}
@keyframes loader-safety { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.loader-bg {
  position: absolute;
  inset: 0;
  background: var(--black);
  overflow: hidden;
  --grain: var(--grain-loader);
  will-change: transform;
}
.loader-ui {
  position: absolute;
  inset: 0;
  padding: var(--gutter);
}

/* --- Marca centrada --- */
.loader-brand {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}
.loader-shield { width: clamp(44px, 4.6vw, 68px); height: auto; opacity: 0; will-change: transform, opacity; }
.loader-wordmark { display: block; clip-path: inset(0 100% 0 0); will-change: clip-path; }
.loader-wordmark img { width: clamp(190px, 20vw, 300px); height: auto; }

/* --- Contador abajo-izquierda con estela --- */
.loader-count {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--gutter) + 18px);
  font-size: clamp(56px, 9vw, 120px);
  line-height: .8;
  letter-spacing: -.02em;
  opacity: 0;
  transform-origin: left bottom;
}
.loader-main { position: relative; z-index: 2; color: var(--white); }
/* Cada eco: misma cifra, solo contorno, desplazado a la derecha n × 0,05em × --trail */
.loader-echo {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.85);
  transform: translateX(calc(var(--trail) * var(--n) * .05em));
  opacity: calc(1 - var(--n) * .09);
  pointer-events: none;
  will-change: transform;
}
.loader-echo:nth-child(3n) { -webkit-text-stroke-color: var(--yellow); }

.loader-meta {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) + 18px);
  color: var(--gray-text);
  opacity: 0;
  text-align: right;
  max-width: 40vw;
}

/* --- Saltar --- */
.loader-skip {
  position: absolute;
  top: calc(var(--gutter) + 4px);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: var(--gray-text);
  border: 1px solid var(--surface-2);
  opacity: 0;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.loader-skip:hover, .loader-skip:focus-visible { color: var(--white); border-color: var(--white); }
.loader-skip kbd { font: inherit; padding: 2px 6px; border: 1px solid currentColor; border-radius: 2px; }

/* --- Barra de progreso: 3 px amarillos que crecen con el contador --- */
.loader-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
}
.loader-bar span {
  display: block;
  height: 100%;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
}

@media (min-width: 768px) {
  .loader-count { bottom: calc(var(--gutter) + 14px); }
  .loader-meta { bottom: calc(var(--gutter) + 14px); }
}