/* ═══════════════════════════════════════════════════════════════
   boot.css — Pantalla de arranque
   ───────────────────────────────────────────────────────────────
   La película de 4 s de la App Belk (assets/videos/boot.mp4, el mismo
   archivo que belk_flutter/assets/boot/boot.mp4) sobre fondo negro,
   con la barra de carga abajo y el botón de saltar arriba.

   FONDO NEGRO en web y en app: es el mismo #0D0C0B de la App Belk
   (BelkDark.bg), que además es el fondo de la propia película. Por eso
   el video puede ir "contain" sin que se note dónde termina el archivo
   y empieza la página: es todo el mismo negro.

   LA PELÍCULA VA ENTERA, NUNCA RECORTADA. Es vertical (1080×1920,
   9:16) porque nació para el teléfono. En un navegador ancho queda
   centrada, con el negro a los lados; el halo azul de .bt-stage::before
   —el mismo celeste del logo— es lo que hace que ese negro se lea como
   escenario y no como una barra que sobró. En el teléfono la película
   llena casi toda la pantalla y el halo no se ve.

   LLEVA barra de carga (el usuario la pidió el 2026-08-07, después de
   haberla quitado el 06). Lo que sigue prohibido es el texto de estado
   tipo "cargando sistema": la barra sola basta. La barra avanza con el
   reloj pero se detiene en 92 % hasta que la página está lista de
   verdad — nunca finge haber terminado.

   EL PÓSTER ES LA RED: si el navegador no puede reproducir el mp4, se
   queda el primer cuadro fijo (.bt-poster) y la presentación dura y se
   cierra igual. Por eso el póster está SIEMPRE puesto debajo y se
   retira solo cuando el video ya está pintando (.bt-playing).
   ═══════════════════════════════════════════════════════════ */

html.bt-lock, html.bt-lock body { overflow: hidden !important; }

#belkBoot{
  --T: 4000ms;          /* dura lo que boot.mp4; se cambia junto con T en js/boot-screen.js */
  --cyan:#1CA3F0;
  --ink:#F4EFE8;

  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0D0C0B;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 1;
  transition: opacity .34s ease;
}
#belkBoot.bt-off{ opacity: 0; pointer-events: none; }

/* ── Escenario ───────────────────────────────────────────────
   Ocupa todo menos el sitio de la barra de carga. El video se
   escala dentro con object-fit, así que basta con darle la caja. */
.bt-stage{
  position: absolute;
  inset: 0 0 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El halo: el mismo celeste del logo, muy bajo, detrás de la película.
   Solo existe para que el negro de los lados en el navegador ancho se
   lea como escenario. No se ve en el teléfono, donde el video tapa
   prácticamente toda la pantalla. */
.bt-stage::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: 120vmin;
  height: 120vmin;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(28,163,240,.10) 0, rgba(28,163,240,.03) 45%, transparent 70%);
  pointer-events: none;
}

/* Póster y película comparten caja y encaje: al cambiar uno por el
   otro no se mueve ni un píxel. */
.bt-poster,
.bt-film{
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
}

/* El póster está puesto desde el primer instante (es lo que se ve
   mientras el mp4 baja) y se va cuando el video ya pinta. */
.bt-poster{ transition: opacity .2s ease; }
.bt-film{
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity .2s ease;
}
#belkBoot.bt-playing .bt-poster{ opacity: 0; }
#belkBoot.bt-playing .bt-film{ opacity: 1; }
/* Sin video utilizable: se saca del paso para que no tape el póster
   con su propio fondo negro. El :not(.bt-playing) es un seguro, no un
   adorno: si las dos clases llegaran a convivir, esta regla escondería
   el video y la de arriba el póster, y la capa quedaría en negro. Con
   el video pintando manda siempre el video. */
#belkBoot.bt-sinvideo:not(.bt-playing) .bt-film{ display: none; }

/* ── Barra de carga ──────────────────────────────────────────
   Avanza con el reloj de la presentación, pero NO llega al final
   hasta que la página está lista de verdad: se queda esperando en
   92 % si la carga se atrasa. Nunca finge haber terminado. */
.bt-load{
  position: absolute;
  left: 50%;
  bottom: max(26px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(240px, 74%);
  height: 4px;
  border-radius: 999px;
  background: rgba(244,239,232,.14);
  overflow: hidden;
}
.bt-load i{
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--cyan);
  transition: width .26s linear;
}
@media (min-width: 768px) and (min-height: 640px){
  .bt-load{ width: min(320px, 74%); height: 5px; }
}

/* ── Saltar ──────────────────────────────────────────────────
   Aparece al segundo: antes tapa el arranque de la película, y quien
   quiera irse igual puede hacer clic en cualquier parte o teclear. */
.bt-skip{
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: #9C948B;
  font: inherit;
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  animation: bt-fade .4s ease 1s forwards;
}
.bt-skip:hover{ background: rgba(255,255,255,.07); color: var(--ink); }

@keyframes bt-fade{ to{ opacity: 1; } }

/* Sin animación: no se reproduce nada (js/boot-screen.js ni pide el
   mp4) y se queda el cuadro fijo del póster. */
@media (prefers-reduced-motion: reduce){
  #belkBoot{ transition-duration: .01ms; }
  .bt-skip{ animation-duration: .01ms; animation-delay: 0s; opacity: 1; }
  .bt-film{ display: none; }
  .bt-poster{ opacity: 1; transition: none; }
}