/* Entrada · Moxen, adaptada por BRAXON. Licencia: LICENCIA.txt */
:root {
  --en-texto: #f4f4f2;
  --en-suave: #a9a9a6;
  --en-linea: rgba(255, 255, 255, .14);
  --en-cortina: #0a0a0a;
  --en-curva: cubic-bezier(.22, 1, .36, 1);
  --en-sube: cubic-bezier(.76, 0, .24, 1);
}
/* ── el efecto ─────────────────────────────────────────────────────── */
/* La pantalla son seis columnas (detrás) y el contenido (delante). Para
   salir, primero se va el contenido y luego suben las columnas una tras
   otra; para cerrar, bajan en el mismo orden. Todo con transform. */
.en-pantalla { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.en-columnas { position: absolute; inset: 0; display: flex; }
.en-columnas i {
  flex: 1; margin-right: -1px; background: var(--en-cortina);
  transition: transform .9s var(--en-sube) calc(var(--c) * 65ms);
}
.en-centro { position: absolute; inset: 0; display: grid; place-items: center; }

/* la palabra va en una máscara: las letras suben desde debajo de su línea */
.en-palabra {
  display: flex; margin: 0; overflow: hidden; padding: .08em .04em 0; line-height: .9;
  font-family: 'Inter Tight', system-ui, sans-serif; text-transform: uppercase; font-size: clamp(3.6rem, 19vw, 14.5rem); font-weight: 800; letter-spacing: -.05em; color: var(--en-texto);
}
.en-letra {
  display: block; transform: translateY(108%) rotate(10deg); transform-origin: 0 100%;
  transition: transform 1s var(--en-curva) calc(var(--i) * 90ms);
}
/* abajo, la cuenta: una línea que se llena y el número, grande */
.en-pie { font-family: 'Geist Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em;
  position: absolute; left: 2.6rem; right: 2.6rem; bottom: 2.2rem;
  display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 1rem;
  color: var(--en-suave); font-size: .85rem; font-weight: 500; letter-spacing: .02em;
  opacity: 0; transform: translateY(1rem); transition: opacity .35s, transform .6s var(--en-sube);
}
.is-cuenta .en-pie { opacity: 1; transform: none; }
.en-cuenta { font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 500; line-height: .8; letter-spacing: -.04em; color: var(--en-texto); font-variant-numeric: tabular-nums; }
.en-linea { grid-column: 1 / -1; height: 1px; background: var(--en-linea); overflow: hidden; }
.en-linea i { display: block; height: 100%; background: var(--en-texto); transform-origin: 0 50%; transform: scaleX(var(--en-avance, 0)); }

/* entra: cada letra sube a su sitio, una detrás de otra */
.is-entra .en-letra { transform: none; }
/* sale: las letras siguen subiendo, la cuenta se va y suben las columnas */
.is-sale .en-letra { transform: translateY(-108%) rotate(-4deg); transition: transform .55s var(--en-sube) calc(var(--i) * 40ms); }
.is-fuera .en-columnas i { transform: translateY(-100%); }
/* para volver a empezar sin que se vea el camino de vuelta */
.sin-paso, .sin-paso * { transition: none !important; }


/* la portada entra con un leve zum hacia atrás mientras suben las columnas (BRAXON) */
.hero { transition: transform 1.6s var(--en-curva); }
html.cargando .hero { transform: scale(1.06); }
html.cargando { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  .en-letra, .is-sale .en-letra, .en-columnas i, .hero, .en-pie { transition-duration: .01s !important; transition-delay: 0s !important; }
  .en-pantalla { display: none; }
}