/* ==========================================================================
   bb2026 — PORTADA / CORTINA DE ENTRADA Y FONDO DE CARGA.

   Lo que pide la clienta, con la secuencia de la referencia (ryanedy):
     1. fondo BLANCO puro mientras carga (no el papel calido);
     2. cortina a pantalla completa, blanca, con el logotipo CENTRADO;
     3. la cortina se desvanece y ENTONCES el hero se abre de arriba abajo.

   MEDIDO en la referencia: .homepage tiene background-color rgb(255,255,255)
   y la cortina es un .fade-animation position fixed con z-index 1000000 y
   background #fff que se desvanece hasta opacity 0 / visibility hidden.
   Aqui se hace lo mismo con el z-index del sistema (1500, por encima del
   cursor, que es 1200) en vez de un numero arbitrario.

   Namespace .bb-curtain. No toca header, footer, nav ni z-index existentes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONDO DE CARGA DE LA PORTADA
   El papel calido (#F7F5F2) se percibia como gris. La portada arranca en
   blanco puro; el papel sigue siendo el fondo de las secciones de
   contenido, que lo llevan declarado una por una (.bb-bg-paper, .bb-hsvcs,
   .bb-hstrip, .bb-habout), asi que su aspecto no cambia en nada.
   -------------------------------------------------------------------------- */
body.home { background: var(--bb-load-bg); }

/* --------------------------------------------------------------------------
   LA CORTINA
   -------------------------------------------------------------------------- */
.bb-curtain {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-white);
  /* Decorativa: nunca atrapa un clic, ni siquiera mientras se ve. */
  pointer-events: none;
}

/* El logotipo, centrado. Reserva de caja con la relacion del original
   (818 x 144) para que no haya salto mientras el PNG llega. */
.bb-curtain__logo {
  position: relative;
  width: min(260px, 62vw);
  aspect-ratio: 818 / 144;
}
.bb-curtain__logo-img {
  display: block;
  width: 100%;
  height: auto;
}
/* Sobre blanco toca la version de tinta. bb_logo_pair() imprime las dos
   (es el contrato del helper y se reutiliza tal cual); la clara se
   descarta aqui, que es donde se sabe que el fondo es blanco. */
.bb-curtain__logo-img--claro { display: none; }

/* --------------------------------------------------------------------------
   RETIRADA — la hace el CSS, NO el JS.
   Requisito duro: si el JS falla, la cortina se tiene que ir igual. Una
   animacion CSS con fill 'both' acaba en su estado final aunque no haya
   JS, asi que el contenido nunca queda bloqueado. El JS (curtain.js) solo
   la saca del pintado al terminar; no es quien la retira.
   El tiempo lo manda SOLO el CSS, no el estado de carga de la foto. Se
   probo atarlo al 'load' de la primera imagen y con la foto en cache el
   desvanecido arrancaba en el milisegundo cero: MEDIDO, la cortina pasaba
   de opacity 1 a 0 antes de los 206 ms y el logotipo no se llegaba a
   leer. Con un retardo fijo la secuencia es siempre la misma.
   -------------------------------------------------------------------------- */
.bb-curtain {
  animation: bb-curtain-out var(--bb-dur-curtain) var(--bb-ease) var(--bb-delay-curtain) both;
}

/* Red de seguridad final: una vez fuera, deja de existir para el pintado.
   La pone el JS, y si no llega da igual: la animacion ya la deja en
   opacity 0 y visibility hidden. */
.bb-curtain.is-done { display: none; }

@keyframes bb-curtain-out {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* --------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO — sin cortina en absoluto.
   Nada que desvanecer y nada que esperar: el hero se ve directamente.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-curtain { display: none; }
}