/* ==========================================================
   LA BIENVENIDA — LA FRASE ESCRIBIÉNDOSE
   ----------------------------------------------------------
   Dos cosas en pantalla: la frase, que se escribe sola, y el
   contador, abajo y pequeño. El contador informa, no protagoniza:
   un número grande en el centro convertiría la espera en el tema,
   y el tema es la frase.
   ========================================================== */
.bienv{
  position:fixed; inset:0; z-index:500;
  display:grid; place-items:center;
  padding:clamp(1.4rem, 5vw, 3rem);
  /* No es un blanco plano: se ilumina por el centro, como una hoja
     bajo un flexo. Es lo que hace que la frase parezca escrita
     sobre algo y no flotando en el vacío. */
  background:radial-gradient(ellipse 65% 55% at 50% 46%,
             #ffffff 0%, #fafafa 45%, #f2f2f2 100%);
  color:#0e0d0b;
  overflow:hidden;
}
.bienv[hidden]{ display:none }

/* ---------- La frase, trazada ----------
   Ya no hay tipografía propia: la frase usa la de los titulares de
   sección, que es Space Grotesk para el cuerpo y la serif en
   cursiva para la palabra que canta. Se decide dentro del dibujo,
   porque un SVG no hereda la tipografía de la página: hay que
   decírsela, y además necesita un tamaño en píxeles para poder
   medirse. Lo que se ve en pantalla lo manda el ancho de aquí.

   Se probó una caligrafía (Parisienne) y se ha cambiado por ésta:
   una letra que sólo aparece en la pantalla de bienvenida y en
   ningún otro sitio de la web es una voz que se estrena y no vuelve.
   ========================================================== */
.bienv__frase{
  margin:0;
  width:min(100%, 900px);
  display:grid;
  gap:clamp(.1rem, .8vh, .45rem);
  justify-items:center;

  /* EL CUERPO LO PONE EL CSS, NO UNA MEDICIÓN.
     ----------------------------------------------------------
     Antes cada línea era un dibujo que se estiraba al ancho de su
     caja, y había que medir cuánto ocupaba cada frase para darle a
     cada caja esa proporción — si no, la línea con menos letras
     salía con las letras más grandes.

     Ahora son dos líneas de texto de verdad, así que las dos usan
     el mismo cuerpo por el mismo motivo por el que lo usan dos
     renglones de cualquier párrafo: porque son la misma frase. No
     hay nada que medir ni que igualar. */
  font-family:var(--sans, ui-sans-serif, system-ui, sans-serif);
  font-weight:700;
  font-size:clamp(1.9rem, 8.6vw, 4.6rem);
  line-height:1.06;
  letter-spacing:-.03em;
  text-align:center;
}
.bienv__linea{ display:block }

/* Las dos capas, una encima de otra. La rellena va en el flujo y
   es la que le da tamaño a la caja; la del contorno se superpone
   en absoluto, calcada. Que las dos se construyan con el mismo
   texto y la misma tipografía es lo que garantiza que encajen: no
   hay ninguna medida escrita a mano que pueda descuadrarse. */
.trazo{ position:relative; display:inline-block; white-space:nowrap }
.trazo__capa{ display:block; white-space:nowrap; user-select:none }
.trazo__contorno{ position:absolute; left:0; top:0; width:100% }

/* El recorte se sale un pelo por arriba y por abajo para no
   cortarle las tildes ni las colas a la cursiva. */

/* ---------- El contador ---------- */
/* El contador: abajo, y con un tamaño que acompaña a la pantalla
   en vez de quedarse fijo. Informa, no protagoniza — un número
   grande en el centro convertiría la espera en el tema, y el tema
   es la frase. Pero tampoco puede ser un pie de página: es la
   única cifra en pantalla y tiene que leerse de un vistazo. */
.bienv__carga{
  position:absolute; left:50%; bottom:clamp(1.6rem, 7vh, 4rem);
  transform:translateX(-50%);
  margin:0;
  display:flex; align-items:baseline; gap:.1rem;
  font-family:var(--sans, ui-sans-serif, system-ui, sans-serif);
  font-size:clamp(1rem, 2.4vw, 1.6rem);
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;   /* que no baile al cambiar de cifra */
  color:rgba(14,13,11,.42);
}
.bienv__num::after{ content:"%"; font-size:.62em; opacity:.55; margin-left:.12em }

/* ---------- El final ----------
   La pantalla sube y deja ver la web. Hacia arriba y no en fundido
   porque en esta web todo lo que se va, se va en una dirección: el
   panel de las transiciones cae, esta cortina sube. Un fundido no
   dice a dónde ha ido. */
.bienv.es-fin{
  transform:translateY(-100%);
  transition:transform .85s cubic-bezier(.65,0,.35,1);
}

/* Mientras está puesta, la página de debajo no se mueve. La clase
   la pone el guion de la cabecera; aquí solo se deja constancia de
   que esta pantalla depende de ella. */
html.entrando, html.entrando body{ overflow:hidden }



/* Quien pide menos movimiento ve la frase entera, quieta, y la
   pantalla se retira sin viaje. No se le quita la bienvenida: se le
   quita el movimiento, que es lo que pidió. */
@media (prefers-reduced-motion: reduce){
  .bienv.es-fin{ transition:none; transform:translateY(-100%) }
}