/* Preloader de marca (§7.4). El ciclo de vida está en preloader.js.
   2026-09-30: un barrido de luz revela la M (como un escáner) y, en la puerta, el logo no
   desaparece: vuela hasta su lugar definitivo mientras el velo se disuelve. */
.pre { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; }
.pre__velo {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, var(--noche-2) 0%, var(--noche) 62%);
  animation: pre-in 120ms var(--ease-emph) both;
}
.pre__velo::after {   /* la misma rejilla de la puerta, apenas insinuada */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(127, 182, 232, .07) 1px, transparent 1px) 50% 0 / var(--paso, 4.5rem) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 52%); mask-image: linear-gradient(180deg, transparent 4%, #000 52%);
}
.pre__halo {
  position: absolute; width: min(92vmin, 640px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 127, 204, .28) 0%, rgba(37, 127, 204, .08) 38%, transparent 66%);
  opacity: 0;
  animation: pre-halo-in 700ms var(--ease) 80ms both, pre-halo-respira 2600ms ease-in-out 800ms infinite;
}
.pre__logo { position: relative; width: min(46vmin, 13rem); transform-origin: 0 0; }
/* En la puerta no hay velo: el logo se dibuja sobre el fondo vivo de la bienvenida, y nace del tamaño final
   para que el vuelo sea solo un traslado. */
.puerta .pre__velo { display: none; }
.puerta .pre__logo { width: var(--puerta-logo); }
.pre__m { clip-path: inset(100% 0 0 0); animation: pre-m 700ms var(--ease) 60ms both; }
/* Barrido: una línea de luz que sube por la M al mismo ritmo con que se revela. */
.pre__barrido { position: absolute; inset: 0 -16%; pointer-events: none; animation: pre-barrido 700ms var(--ease) 60ms both; }
.pre__barrido::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--azul-300) 28%, var(--blanco) 50%, var(--azul-300) 72%, transparent);
  box-shadow: 0 0 14px 1px rgba(127, 182, 232, .55);
}
.pre .logo__linea { transform: scaleX(0); transform-origin: left center; animation: pre-linea 450ms var(--ease) 520ms both; }
.pre__palabra { opacity: 0; animation: pre-palabra 450ms var(--ease) 650ms both; }

/* Salida normal: todo se funde y el logo se aleja apenas. */
.pre.es-salida .pre__velo, .pre.es-salida .pre__halo { animation: pre-out 350ms var(--ease-emph) both; }
.pre.es-salida:not(.es-vuelo) .pre__logo { animation: pre-logo-out 350ms var(--ease) both; }
/* Salida en la puerta: el logo vuela a su lugar (lo anima preloader.js, 600 ms) y solo se funde el halo. */
.pre.es-salto { animation: pre-out 180ms ease-out both; }

@keyframes pre-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pre-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pre-halo-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes pre-halo-respira { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .8; transform: scale(1.03); } }
@keyframes pre-m { from { clip-path: inset(100% 0 0 0); transform: translateY(8px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes pre-barrido {
  0% { opacity: 0; transform: translateY(0); }
  12%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-100%); }
}
@keyframes pre-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* El cierre del espaciado se simula con scaleX: la palabra es un trazo vectorial, no texto. */
@keyframes pre-palabra { from { opacity: 0; transform: translateY(4px) scaleX(1.06); } to { opacity: 1; transform: none; } }
@keyframes pre-logo-out { to { opacity: 0; transform: translateY(-1.5%) scale(1.03); } }
@keyframes pre-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pre__halo, .pre__palabra { animation: pre-fade 280ms ease-out both; }
  .pre__m { clip-path: none; animation: pre-fade 280ms ease-out both; }
  .pre__barrido { display: none; }
  .pre .logo__linea { transform: none; animation: pre-fade 280ms ease-out both; }
  .pre.es-salida .pre__velo, .pre.es-salida .pre__halo, .pre.es-salida:not(.es-vuelo) .pre__logo { animation: pre-out 220ms ease-out both; }
}