/* ================= LAB · SECUENCIA 5: carga, título y entrada al lobby ================= */

/* ---------- Carga: el logo se "llena" con el progreso ---------- */
#splash { background: radial-gradient(ellipse at 50% 45%, #121a26 0%, #07090d 70%); }
#splash .logo-s::after { background: #0c1119; }
.sp-grid { position: absolute; inset: 0; background:
    linear-gradient(rgba(63, 224, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(63, 224, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.sp-logo { position: relative; }
.sp-ghost { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .16); text-shadow: none; }
.sp-ghost .logo-bullet { opacity: .12; filter: none; }
.sp-ghost .logo-s::after { display: none; }
.sp-fillogo { position: absolute; inset: 0; --p: 0%; clip-path: inset(-20% calc(100% - var(--p)) -20% -5%); transition: clip-path .35s cubic-bezier(.2, 1, .3, 1); }
.sp-fillogo::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: calc(var(--p) - 4px); width: 4px; background: var(--cyan); box-shadow: 0 0 18px var(--cyan), 0 0 40px var(--cyan); transition: left .35s cubic-bezier(.2, 1, .3, 1); transform: skewX(6deg); }
#splash.sp-done .sp-fillogo::after { opacity: 0; transition: opacity .2s; }
#splash.sp-done .sp-logo::after { content: ''; position: absolute; inset: -30% -10%; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); mix-blend-mode: overlay; animation: spGlint .5s ease-out forwards; pointer-events: none; }
@keyframes spGlint { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
#splash.sp-done .sp-fillogo { animation: spPulse .5s ease-out; }
@keyframes spPulse { 30% { filter: drop-shadow(0 0 24px rgba(63, 224, 255, .7)) brightness(1.4); } }
.splash-bar { height: 2px; margin-top: 60px; transform: none; background: rgba(255, 255, 255, .08); }
.sp-row { display: flex; justify-content: space-between; width: min(420px, 70vw); margin-top: 10px; }
#splash-msg { margin-top: 0; font-size: 12px; letter-spacing: 4px; color: #6f86a6; }
#splash-msg::before { content: '▸ '; color: var(--cyan); }
#sp-pct { font-family: var(--cond); font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--cyan); }
#splash.fade { transition: opacity .6s; }

/* ---------- Título ---------- */
#title { position: fixed; inset: 0; z-index: 30; pointer-events: none; font-family: var(--cond); --k: 1; }
.tt-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 65% 55%, transparent 35%, rgba(0, 0, 0, .7) 100%), linear-gradient(90deg, rgba(4, 6, 10, .75), transparent 55%); animation: ttFade 1.4s both; }
.tt-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
@keyframes ttFade { from { opacity: 0; } }
.tt-logo { position: absolute; left: 5vw; top: 20vh; }
.tt-mark { position: relative; font-size: clamp(76px, 14vw, 210px); }
.tt-l { display: inline-block; animation: ttSlam .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes ttSlam {
  0% { opacity: 0; transform: scale(2.6) translateY(-30px); filter: blur(10px); text-shadow: 12px 0 rgba(255, 40, 70, .8), -12px 0 rgba(40, 220, 255, .8); }
  55% { opacity: 1; transform: scale(.94); filter: blur(0); text-shadow: 4px 0 rgba(255, 40, 70, .6), -4px 0 rgba(40, 220, 255, .6); }
  100% { transform: none; text-shadow: 4px 5px 0 rgba(0, 0, 0, .35); }
}
.tt-bullet { animation: ttBullet .45s cubic-bezier(.1, .9, .2, 1) calc(var(--k) * 1.05s) both; }
@keyframes ttBullet { from { opacity: 0; transform: translateX(-70vw) rotate(-35deg); } 60% { opacity: 1; } to { transform: rotate(-35deg); } }
.tt-mark::before { content: ''; position: absolute; top: 18%; left: -70vw; right: 2%; height: 6px; background: linear-gradient(90deg, transparent, rgba(255, 220, 160, .0) 40%, rgba(255, 230, 180, .9)); transform-origin: right; animation: ttTrail .7s ease-out calc(var(--k) * 1.05s) both; pointer-events: none; }
@keyframes ttTrail { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
.tt-shine { position: absolute; inset: -10% -5%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%); mix-blend-mode: overlay; animation: ttShine 3.5s ease-in-out calc(var(--k) * 1.5s) infinite; opacity: 0; }
@keyframes ttShine { 0% { opacity: 1; transform: translateX(-70%); } 30%, 100% { opacity: 1; transform: translateX(70%); } }
.tt-sub { margin: 18px 0 0 10px; font-size: clamp(14px, 1.5vw, 20px); font-weight: 800; letter-spacing: .9em; color: #bcd0ea; animation: ttSub 1s cubic-bezier(.2, 1, .3, 1) calc(var(--k) * 1.35s) both; }
@keyframes ttSub { from { opacity: 0; letter-spacing: 2.2em; filter: blur(4px); } }
.tt-sub::before { content: ''; display: inline-block; width: 40px; height: 3px; margin: 0 14px 4px 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); vertical-align: middle; }

.tt-press { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: 7px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); animation: ttPress .6s ease-out calc(var(--k) * 1.9s) both; }
.tt-press b { font-weight: 800; animation: blink 2s calc(var(--k) * 2.5s) infinite; }
@keyframes ttPress { from { opacity: 0; transform: translate(-50%, 16px); } }
.tt-key { position: relative; width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 6px; box-shadow: 0 3px 0 rgba(255, 255, 255, .35); }
.tt-key i { position: absolute; inset: 7px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: ttKey 2s calc(var(--k) * 2.5s) infinite; }
@keyframes ttKey { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(3px) scale(.9); } }
.tt-prof { position: absolute; left: 4vw; bottom: 5vh; display: flex; align-items: baseline; gap: 10px; color: #d6deea; animation: ttFade .8s calc(var(--k) * 2.2s) both; }
.tt-prof small { font-size: 12px; letter-spacing: 4px; color: var(--cyan); font-weight: 800; }
.tt-prof b { font-size: 22px; font-weight: 800; }
.tt-prof span { font-size: 13px; font-weight: 800; letter-spacing: 2px; padding: 1px 8px; background: rgba(63, 224, 255, .15); border: 1px solid rgba(63, 224, 255, .5); }
.tt-ver { position: absolute; right: 4vw; bottom: 5vh; font-size: 12px; letter-spacing: 3px; color: #7d8ba0; font-weight: 700; animation: ttFade .8s calc(var(--k) * 2.2s) both; }

/* salida: el logo atraviesa la cámara, destello blanco */
#title.tt-out .tt-logo { animation: ttOut .6s cubic-bezier(.6, 0, .9, .4) forwards; }
@keyframes ttOut { to { opacity: 0; transform: scale(1.25) translateX(4vw); filter: blur(8px); } }
#title.tt-out .tt-press { animation: ttPressOut .45s ease-out forwards; }
@keyframes ttPressOut { 0% { opacity: 1; letter-spacing: 7px; } 25% { color: var(--cyan); text-shadow: 0 0 20px var(--cyan); } 100% { opacity: 0; letter-spacing: 30px; } }
#title.tt-out .tt-prof, #title.tt-out .tt-ver, #title.tt-out .tt-sub { opacity: 0; transition: opacity .3s; }
#title.tt-out .tt-vig { opacity: 0; transition: opacity 1.2s .3s; }
#title.tt-out::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 45%, rgba(255, 255, 255, .55), transparent 65%); animation: ubFlash .5s ease-out forwards; }

/* ---------- Entrada al lobby: el menú se arma pieza a pieza ---------- */
body.lobby-enter #lobby .topnav { animation: leDown .6s cubic-bezier(.2, 1.2, .3, 1) .05s both; }
body.lobby-enter #lobby .gear, body.lobby-enter #lobby .wallet { animation: leDown .6s cubic-bezier(.2, 1.2, .3, 1) .15s both; }
body.lobby-enter #lobby .play-stack { animation: leRight .7s cubic-bezier(.2, 1.1, .3, 1) .25s both; }
body.lobby-enter #lobby .dailybox, body.lobby-enter #lobby .live-chip { animation: leRight .6s cubic-bezier(.2, 1.1, .3, 1) .4s both; }
body.lobby-enter #lobby .friend-slot, body.lobby-enter #lobby .change-skin, body.lobby-enter #lobby .party-info { animation: leFade .6s ease-out .55s both; }
body.lobby-enter #lobby .community, body.lobby-enter #lobby .version, body.lobby-enter #lobby #nametags { animation: leFade .6s ease-out .7s both; }
@keyframes leDown { from { opacity: 0; translate: 0 -50px; } }
@keyframes leRight { from { opacity: 0; translate: 80px 0; } }
@keyframes leFade { from { opacity: 0; translate: 0 14px; } }

@media (max-width: 700px) {
  .tt-logo { left: 5vw; top: 14vh; }
  .tt-sub { letter-spacing: .4em; }
  .tt-prof b { font-size: 16px; }
}