/* Pantalla de carga AIBG S.L: logo 3D sobre negro + "Loading" con puntos.
   Funciona solo con CSS (se va sola a los 3 s); splash.js la quita del DOM y permite saltarla. */
.splash {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #000; color: #fff; overflow: hidden;
  animation: splash-fuera .9s cubic-bezier(.4, 0, .2, 1) 3.75s forwards;
}
.splash.salta { animation: splash-fuera .35s ease-in .3s forwards; }

.splash-logo, .splash-logo img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
}
.splash-logo img {
  object-fit: contain; object-position: 50% 50%;
  animation: splash-entra 1s cubic-bezier(.16, .84, .3, 1) both;
}

.splash-texto {
  position: absolute; left: 0; right: 0;
  bottom: max(6vh, calc(env(safe-area-inset-bottom) + 28px));
  margin: 0; text-align: center;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .42em; padding-left: .42em; /* compensa el espaciado de la ultima letra */
  text-transform: uppercase; color: rgba(255, 255, 255, .58);
  animation: splash-texto .8s ease .35s both;
}
.splash-punto { color: #ff2b2b; opacity: .15; animation: splash-punto 1.2s ease-in-out infinite; }
.splash-punto:nth-child(2) { animation-delay: .2s; }
.splash-punto:nth-child(3) { animation-delay: .4s; }

@keyframes splash-entra { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes splash-texto { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-punto { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
@keyframes splash-fuera { to { opacity: 0; visibility: hidden; } }
/* Fundido en dos tiempos, sin mezclar el logo con lo de debajo: primero el logo se apaga a negro (3 s),
   luego el negro se abre (3,75 s) y el login entra desde abajo */
.splash { will-change: opacity; }
html.splash-sale .splash-logo img, html.splash-sale .splash-texto { animation: splash-aleja .75s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes splash-aleja { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.05); } }
html.splash-sale .login-escena, html.splash-sale .login-lado { animation: splash-login 1.2s cubic-bezier(.16, .84, .3, 1) .8s both; }
@keyframes splash-login { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) { .splash-texto { font-size: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .splash { animation: splash-fuera .01s linear 3s forwards; }
  .splash.salta { animation: splash-fuera .01s linear forwards; }
  .splash-logo img, .splash-texto, html.splash-sale .splash-logo img,
  html.splash-sale .login-escena, html.splash-sale .login-lado { animation: none; }
  .splash-punto { animation: none; opacity: 1; }
}