/* entrada-sitio — pantalla de entrada con contador 0-100 y una cortina de dos
   hojas que se abre al terminar de contar, revelando la página. Patrón de
   showcase (GSAP), portado como implementación propia: 100% CSS, sin JS, sin
   bucles de animación. El conteo usa el truco de registrar --lui-num con
   @property para poder animarlo e imprimirlo con counter(). */

@property --lui-num {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

[data-lui~="entrada-sitio"] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  /* El envoltorio no bloquea nada: solo las hojas de la cortina lo hacen,
     así en cuanto se apartan deja de haber nada que capture clics. */
  pointer-events: none;
}

[data-lui~="entrada-sitio"] .lui-hoja {
  position: absolute;
  /* Solo top/bottom aquí: si además se fija "inset:0" quedan left Y right
     los dos a 0 a la vez que width:50%, la caja queda sobre-restringida y
     el navegador ignora "right" — las dos hojas nacen encimadas en la mitad
     izquierda y la derecha de la pantalla se ve desde el primer fotograma. */
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--lui-entrada-fondo, #0d0d0c);
  pointer-events: auto;
  animation-duration: var(--lui-entrada-duracion-cortina, .9s);
  animation-timing-function: cubic-bezier(.76, 0, .24, 1);
  animation-fill-mode: forwards;
  /* La espera es la duración del conteo más un respiro: si se cambia
     --lui-entrada-duracion-cifra la cortina sigue abriendo justo a tiempo. */
  animation-delay: calc(var(--lui-entrada-duracion-cifra, 1.8s) + .2s);
}
[data-lui~="entrada-sitio"] .lui-hoja.izq {
  left: 0;
  animation-name: lui-cortina-izq;
}
[data-lui~="entrada-sitio"] .lui-hoja.der {
  right: 0;
  animation-name: lui-cortina-der;
}
/* Dos keyframes separados a propósito: comparten duración pero cada hoja
   viaja a un lado distinto, y una transform compartida pisaría a la otra. */
@keyframes lui-cortina-izq { to { transform: translateX(-100%); } }
@keyframes lui-cortina-der { to { transform: translateX(100%); } }

[data-lui~="entrada-sitio"] .lui-centro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6em;
  color: var(--lui-entrada-texto, #f5f4f0);
  animation: lui-desvanece .4s ease forwards;
  animation-delay: calc(var(--lui-entrada-duracion-cifra, 1.8s) + .2s);
}
@keyframes lui-desvanece { to { opacity: 0; visibility: hidden; } }

[data-lui~="entrada-sitio"] .lui-cifra {
  font: 600 clamp(2.5em, 9vw, 6em)/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; /* si no, el ancho baila y tiembla el centrado */
}
[data-lui~="entrada-sitio"] .lui-cifra::before {
  content: counter(lui-num);
  counter-reset: lui-num var(--lui-num);
  animation: lui-contar var(--lui-entrada-duracion-cifra, 1.8s) linear forwards;
}
@keyframes lui-contar { from { --lui-num: 0; } to { --lui-num: 100; } }

[data-lui~="entrada-sitio"] .lui-barra {
  width: min(40vw, 220px);
  height: 2px;
  overflow: hidden; /* que el relleno no se salga por los bordes redondeados */
  background: color-mix(in srgb, var(--lui-entrada-texto, #f5f4f0) 22%, transparent);
}
[data-lui~="entrada-sitio"] .lui-relleno {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lui-acento, #c8a24a);
  animation: lui-progreso var(--lui-entrada-duracion-cifra, 1.8s) linear forwards;
}
@keyframes lui-progreso { to { width: 100%; } }

/* Sin JS no hay forma de bloquear el scroll durante los ~2s de cortina.
   inset:0 en position:fixed hace que las hojas sigan tapando toda la pantalla
   pase lo que pase con el scroll de fondo, así que en la práctica no se nota. */

@media (prefers-reduced-motion: reduce) {
  /* No es contenido real, es una cortina decorativa: con reduced-motion
     mejor quitarla entera y enseñar la página ya, no dejarla a medio abrir. */
  [data-lui~="entrada-sitio"] { display: none; }
}