/* ==========================================================================
   Glopy · Pantalla de inicio (splash) — cliente, T21 punto 3 (22/10/2026)
   Secuencia de Jordi (23/10/2026), ~2,2 s en total y luego la app:
     0,0 s  fondo azul marino
     0,2 s  aparecen las estrellas con brillo suave (canvas, splash.js)
     0,4 s  un punto de luz azul en el centro que crece
     0,7 s  la luz se convierte en GLOPY (anillo que se expande, la mascota
            toma forma)
     1,0 s  la mascota ya está
     1,2 s  entrada: un destello orbita alrededor
     1,5 s  rebote suave y queda flotando, con chispas
     1,7 s  aparece el nombre GLOPY debajo con una línea de luz
     2,0 s  pantalla final
     2,2 s  fundido hacia la app
   Todo con transform y opacity: no cuesta rasterizar ni retrasa la carga.
   Con «reducir movimiento» se enseña la pantalla final directamente.
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

.splash-body {
    height: 100vh; height: 100dvh;
    background: #04061a;
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.32s ease;
}
.splash-body.is-leaving { opacity: 0; }

/* Halo general del fondo: nace con la luz central. */
.splash-body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(60% 42% at 50% 46%, rgba(16, 96, 255, 0.30) 0%, rgba(16, 96, 255, 0.10) 45%, rgba(4, 6, 26, 0) 72%);
    opacity: 0;
    animation: sp-fade-in 0.8s ease-out 0.4s forwards;
}

/* 0,2 s · estrellas (el canvas se funde entero). */
.splash-stars {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
    opacity: 0;
    animation: sp-fade-in 0.6s ease-out 0.2s forwards;
}

.splash {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(14px, 3vh, 26px);
    padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
    transform: translateY(-6vh);
}

/* Escenario de la mascota: luz, anillo, destello, chispas e imagen. */
.splash-mascot {
    position: relative;
    width: clamp(160px, 46vw, 220px); aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
}

/* 0,4 s · punto de luz que crece; al formarse GLOPY se queda como halo. */
.splash-light {
    position: absolute; left: 50%; top: 50%;
    width: 26%; height: 26%; margin: -13% 0 0 -13%;
    border-radius: 50%;
    background: radial-gradient(circle, #cfe4ff 0%, #4d8dff 28%, rgba(16, 96, 255, 0.55) 55%, rgba(16, 96, 255, 0) 72%);
    filter: blur(2px);
    opacity: 0; transform: scale(0.15);
    animation: sp-light 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
}
@keyframes sp-light {
    0%   { opacity: 0;   transform: scale(0.2); }
    12%  { opacity: 1;   transform: scale(0.7); }
    30%  { opacity: 1;   transform: scale(1.1); }
    70%  { opacity: 1;   transform: scale(2.6); }
    100% { opacity: 0.9; transform: scale(3.4); filter: blur(10px); }
}

/* 0,7 s · anillo que se expande: la luz "se abre" y deja ver la mascota. */
.splash-ring {
    position: absolute; left: 50%; top: 50%;
    width: 70%; height: 70%; margin: -35% 0 0 -35%;
    border-radius: 50%;
    border: 2px solid rgba(140, 190, 255, 0.9);
    box-shadow: 0 0 18px rgba(61, 134, 255, 0.8), inset 0 0 18px rgba(61, 134, 255, 0.6);
    opacity: 0; transform: scale(0.3);
    animation: sp-ring 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;
}
@keyframes sp-ring {
    0%   { opacity: 0;   transform: scale(0.3); }
    35%  { opacity: 1;   transform: scale(0.95); }
    100% { opacity: 0;   transform: scale(1.5); }
}

/* Halo permanente detrás de la mascota: respira despacio. */
.splash-mascot__glow {
    position: absolute; inset: -34%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(61, 134, 255, 0.55) 0%, rgba(16, 96, 255, 0.28) 38%, rgba(16, 96, 255, 0) 70%);
    filter: blur(6px);
    opacity: 0;
    animation: sp-fade-in 0.5s ease-out 0.8s forwards, sp-breathe 2.6s ease-in-out 1.3s infinite;
}

/* 0,7 → 1,0 s · la mascota toma forma; 1,5 s · rebote suave; después flota. */
.splash-mascot__img {
    position: relative; width: 100%; height: 100%; display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(16, 96, 255, 0.45));
    opacity: 0; transform: scale(0.55);
    animation: sp-form 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards,
               sp-bounce 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 1.5s forwards,
               sp-float 3.2s ease-in-out 2.0s infinite;
}
@keyframes sp-form {
    0%   { opacity: 0;   transform: scale(0.55); filter: drop-shadow(0 0 0 rgba(16, 96, 255, 0)) brightness(1.8); }
    60%  { opacity: 1;   transform: scale(1.04); }
    100% { opacity: 1;   transform: scale(1);    filter: drop-shadow(0 10px 30px rgba(16, 96, 255, 0.45)) brightness(1); }
}
@keyframes sp-bounce {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-10px) scale(1.03); }
    70%  { transform: translateY(3px) scale(0.99); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes sp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 1,2 s · destello que orbita una vez alrededor de la mascota (elipse
   inclinada, un arco de luz que se desvanece). */
.splash-orbit {
    position: absolute; left: 50%; top: 50%;
    width: 150%; height: 54%; margin: -27% 0 0 -75%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(120, 180, 255, 0.95);
    border-right-color: rgba(120, 180, 255, 0.35);
    box-shadow: 0 -2px 14px rgba(61, 134, 255, 0.55);
    opacity: 0;
    transform: rotate(-18deg);
    animation: sp-orbit 0.75s cubic-bezier(0.4, 0, 0.3, 1) 1.2s forwards;
}
@keyframes sp-orbit {
    0%   { opacity: 0; transform: rotate(-18deg) rotateX(60deg) rotateZ(0deg); }
    15%  { opacity: 1; }
    85%  { opacity: 0.6; }
    100% { opacity: 0; transform: rotate(-18deg) rotateX(60deg) rotateZ(380deg); }
}

/* Chispas de cuatro puntas alrededor (1,0 → 2,2 s), cada una a su tiempo. */
.splash-spark {
    position: absolute; width: 14px; height: 14px;
    color: #bcd7ff;
    opacity: 0; transform: scale(0.2);
    animation: sp-spark 0.9s ease-in-out forwards;
    filter: drop-shadow(0 0 6px rgba(120, 180, 255, 0.9));
}
.splash-spark::before, .splash-spark::after {
    content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px;
}
.splash-spark::before { width: 2px; height: 100%; transform: translate(-50%, -50%); }
.splash-spark::after  { width: 100%; height: 2px; transform: translate(-50%, -50%); }
.splash-spark--1 { left: -6%;  top: 18%; animation-delay: 1.0s; }
.splash-spark--2 { right: -4%; top: 10%; animation-delay: 1.25s; width: 10px; height: 10px; }
.splash-spark--3 { right: 4%;  bottom: 2%; animation-delay: 1.55s; width: 18px; height: 18px; }
.splash-spark--4 { left: 8%;   bottom: -8%; animation-delay: 1.9s; width: 9px; height: 9px; }
@keyframes sp-spark {
    0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
    40%  { opacity: 1; transform: scale(1.1) rotate(25deg); }
    100% { opacity: 0; transform: scale(0.4) rotate(45deg); }
}

/* 1,7 s · el nombre sube y se enciende, con una línea de luz debajo. */
.splash-logo {
    position: relative;
    margin: 0;
    font-size: clamp(2.4rem, 11vw, 3.4rem); font-weight: 900; letter-spacing: 0.02em; line-height: 1;
    color: #2b74ff;
    background: linear-gradient(180deg, #4d8dff 0%, #1f6bff 60%, #1557e0 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 22px rgba(16, 96, 255, 0.5));
    opacity: 0; transform: translateY(14px);
    animation: sp-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1.7s forwards;
}
.splash-logo__line {
    position: absolute; left: 10%; right: 10%; bottom: -14px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(61, 134, 255, 0) 0%, rgba(120, 180, 255, 0.95) 50%, rgba(61, 134, 255, 0) 100%);
    filter: blur(1px);
    opacity: 0; transform: scaleX(0.2);
    animation: sp-line 0.9s ease-out 1.85s forwards;
}
@keyframes sp-line {
    0%   { opacity: 0; transform: scaleX(0.2); }
    45%  { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1.15); }
}

@keyframes sp-fade-in { to { opacity: 1; } }
@keyframes sp-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes sp-breathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* Sin movimiento: la pantalla final, quieta, desde el primer fotograma. */
@media (prefers-reduced-motion: reduce) {
    .splash-body::before, .splash-stars, .splash-mascot__glow, .splash-mascot__img, .splash-logo { animation: none; opacity: 1; transform: none; }
    .splash-light, .splash-ring, .splash-orbit, .splash-spark, .splash-logo__line { display: none; }
}