/* ═══════════════════════════════════════════════════════════════════════════
   LA PUERTA — el escudo, la fecha y la cuenta atrás.
   ═══════════════════════════════════════════════════════════════════════════

   Esta hoja la comparten las dos puertas: la raíz del dominio, que es una
   página de Next (`src/app/page.tsx`), y la copia estática `holding.html`.
   Estaban escritas dos veces y ya habían empezado a separarse —la cuenta atrás
   entró en una y no en la otra, y la que la tenía no la ve nadie porque no es
   la que sirve el dominio—. Una sola hoja para las dos.

   ── LAS FUENTES ────────────────────────────────────────────────────────────

   Dos caras sueltas y no `fonts.css` entera: aquí solo hay cifras y dos
   rótulos, y la hoja completa arrastra además las cursivas y Montserrat. Son
   40 KB en la única página pública del club.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/libre-caslon-display-400-normal-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/libre-franklin-400-normal-latin.woff2) format('woff2');
}

/* Esta página va suelta, sin el reinicio del resto de la web. Sin
   `border-box` el relleno se suma al alto y el documento acaba midiendo más
   que la ventana: la puerta tendría desplazamiento aunque no se viera. */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

.puerta {
  margin: 0;
  min-height: 100dvh;          /* `dvh` y no `vh`: en el móvil la barra del
                                  navegador se come parte de la ventana */
  background: #241A10;
  display: grid;
  grid-auto-flow: row;
  align-content: center;
  justify-items: center;
  gap: clamp(18px, 6vh, 64px);
  padding: 6vmin;
  color: #BFB5A2;
  overflow: hidden;            /* la puerta es una pantalla y se queda quieta */
}

/* El escudo se mide también contra el ALTO: si la página no se desplaza, lo
   que no quepa se pierde, y en una pantalla apaisada de teléfono el escudo
   solo ya ocupaba más que la pantalla entera. */
.puerta-marca {
  width: min(620px, 74vw);
  max-height: 34vh;
  height: auto;
  object-fit: contain;
  opacity: 0;
  animation: puerta-entra 1.6s cubic-bezier(.22,.61,.36,1) .25s forwards;
}

.aviso {
  margin: 0;
  font-family: 'Libre Franklin', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #BFB5A2;
  text-align: center;
  opacity: 0;
  animation: puerta-entra 1.6s cubic-bezier(.22,.61,.36,1) .8s forwards;
}
.aviso p { margin: 0; }
/* La misma frase en el otro idioma, debajo y más callada: la puerta es la
   única página pública y la ve quien llega de fuera, pero no por eso las dos
   líneas pesan lo mismo. */
.aviso .otro {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .26em;
  opacity: .42;
}
.aviso[hidden] { display: none; }

.cuenta {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(22px, 5vw, 54px);
  margin: 0;
  opacity: 0;
  animation: puerta-entra 1.6s cubic-bezier(.22,.61,.36,1) 1s forwards;
}
.cuenta > div { text-align: center; }
.cuenta b {
  display: block;
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, min(7vw, 9vh), 68px);
  line-height: 1;
  color: #F3EAD8;
  /* Todas las cifras del mismo ancho: sin esto los segundos empujan a los
     minutos cada vez que pasan de un 1 a un 8. */
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
}
.cuenta span {
  display: block;
  margin-top: clamp(8px, 1.4vh, 13px);
  font-family: 'Libre Franklin', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .72;
}
.cuenta[hidden] { display: none; }

@keyframes puerta-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}