/* css/core/splash.css — intro que se ve antes de que se muestre cualquier
   pantalla real (login, app o panel de coach). Vive fuera del flujo normal:
   position:fixed + z-index alto, se autodestruye a los pocos segundos.
   Referencia: brand/BRAND.md → "Splash: logo centrado, barra RGB de 2,1 s,
   texto 'Preparando tu entrenamiento'". La barra (.gize-bar) viene de
   brand/tokens.css, que ya la frena con prefers-reduced-motion. */

body.is-booting { overflow: hidden; }

#splash {
  /* Sin height fija: en iOS 100svh es más corto que la pantalla real y deja
     una franja abajo donde se ve el contenido de atrás. inset:0 cubre todo. */
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--gize-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  animation: splash-out .4s ease 2.2s forwards;
}

.splash-logo {
  display: block; width: clamp(180px, 52vw, 260px); height: auto;
}

/* Entrada del logo: el arco de la G se traza, el punto azul aparece con un
   rebote chico y después entra la palabra. Termina a 1,5 s, antes que la barra. */
.sl-arc {
  stroke-dasharray: 1; stroke-dashoffset: 1; /* pathLength="1" en el SVG */
  animation: sl-draw .9s cubic-bezier(.6,.05,.25,1) .1s forwards;
}
.sl-dot {
  transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: sl-pop .45s cubic-bezier(.3,1.6,.5,1) .85s forwards;
}
.sl-word {
  opacity: 0;
  animation: sl-word .5s ease 1s forwards;
}

.splash-txt {
  font: 500 14px var(--gize-font); color: var(--gize-text-2); letter-spacing: .01em;
  animation: splash-in .5s cubic-bezier(.2,.7,.2,1) .15s both;
}

@keyframes sl-draw { to { stroke-dashoffset: 0; } }
@keyframes sl-pop { to { transform: scale(1); } }
@keyframes sl-word { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes splash-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .sl-arc, .sl-dot, .sl-word, .splash-txt { animation: none; }
  .sl-arc { stroke-dashoffset: 0; }
  .sl-dot { transform: none; }
  .sl-word { opacity: 1; }
  #splash { animation: splash-out .3s linear 1.2s forwards; }
}