/* CANS ONLINE · pantalla de bienvenida al iniciar sesión (mientras se carga la plataforma).
   Escudo que cae con rebote, puntos de colores de sección en ola, letras que suben, saludo,
   barra de progreso real y salida con círculo que se abre. Respeta "reducir movimiento". */

.sp2 {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; background: var(--sp-bg, #0c3292); color: #fff;
  font-family: var(--font); animation: sp2-in .25s ease both;
}
.sp2::after { /* brillo suave al centro */
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .22), transparent 55%);
  animation: sp2-glow 3.2s ease-in-out infinite alternate;
}
.sp2 .cans-pattern { opacity: .07; }
.sp2-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; text-align: center; }

.sp2-shield {
  width: 112px; height: 112px; border-radius: 30px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 0 rgba(7, 30, 92, .55), 0 18px 40px rgba(0, 0, 0, .25);
  animation: sp2-drop .9s cubic-bezier(.34, 1.56, .64, 1) .1s both, sp2-float 2.6s ease-in-out 1.1s infinite;
}
.sp2-shield img { width: 78px; height: 78px; object-fit: contain; animation: sp2-spin .9s cubic-bezier(.22, 1, .36, 1) .1s both; }

.sp2-dots { display: flex; gap: 12px; height: 22px; align-items: flex-end; }
.sp2-dots span {
  width: 16px; height: 16px; border-radius: 50%; background: var(--c);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
  animation: sp2-pop .45s cubic-bezier(.34, 1.56, .64, 1) calc(.75s + var(--i) * .1s) both,
             sp2-wave 1.1s ease-in-out calc(1.3s + var(--i) * .12s) infinite;
}

.sp2-title { display: flex; gap: .04em; font-size: clamp(28px, 7vw, 44px); font-weight: 900; letter-spacing: .06em; line-height: 1; }
.sp2-title span { display: inline-block; animation: sp2-rise .55s cubic-bezier(.22, 1, .36, 1) calc(1s + var(--i) * .045s) both; }
.sp2-title .gap { width: .35em; }

.sp2-hello { font-size: 17px; font-weight: 800; color: rgba(255, 255, 255, .9); min-height: 1.3em; animation: sp2-fade .6s ease 1.65s both; }

.sp2-bar { width: min(240px, 60vw); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; animation: sp2-fade .4s ease .9s both; }
.sp2-bar span {
  display: block; height: 100%; border-radius: 999px; background: #fff; transform-origin: 0 50%;
  transform: scaleX(var(--p, .08)); transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 0 12px rgba(255, 255, 255, .7);
}

.sp2.out { animation: sp2-out .6s cubic-bezier(.65, 0, .35, 1) both; }

@keyframes sp2-in { from { opacity: 0; } }
@keyframes sp2-glow { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.1); opacity: 1; } }
@keyframes sp2-drop { 0% { opacity: 0; transform: translateY(-120px) scale(.6); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes sp2-spin { from { transform: rotate(-200deg) scale(.4); } to { transform: none; } }
@keyframes sp2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sp2-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes sp2-wave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }
@keyframes sp2-rise { from { opacity: 0; transform: translateY(26px) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes sp2-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes sp2-out { from { clip-path: circle(150% at 50% 45%); } to { clip-path: circle(0% at 50% 45%); } }

@media (prefers-reduced-motion: reduce) {
  .sp2, .sp2 *, .sp2::after { animation: none !important; transition: none !important; }
  .sp2.out { opacity: 0; transition: opacity .2s !important; }
}