/* Escena espacial del login (cohete, luna, logo que se forma y explosión). La usan la app (login) y la web (intro).
   Necesita las variables --bg y --fs-sm. */
.space {
  position: relative; height: 320px; margin: 0 -16px; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 100%, rgb(59 130 246 / 0.35), transparent 70%),
    radial-gradient(80% 60% at 50% 30%, rgb(30 42 91 / 0.6), transparent 70%),
    var(--bg);
}
.space::after {
  content: ""; z-index: 4; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(transparent, var(--bg));
}
.space .stars {
  position: absolute; inset: 0; opacity: 0.8;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #cdd6ff, transparent),
    radial-gradient(1px 1px at 44% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 28%, #cdd6ff, transparent),
    radial-gradient(1px 1px at 78% 56%, #fff, transparent), radial-gradient(1px 1px at 88% 20%, #fff, transparent),
    radial-gradient(1px 1px at 8% 60%, #cdd6ff, transparent), radial-gradient(1.5px 1.5px at 56% 64%, #fff, transparent),
    radial-gradient(1px 1px at 36% 74%, #fff, transparent), radial-gradient(1px 1px at 92% 70%, #cdd6ff, transparent);
}
/* Luna con la media luna izquierda iluminada (el lado que mira al cohete) */
.space .moon {
  position: absolute; top: 40px; right: -24px; width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / 0.25) 0 6%, transparent 7%),
    radial-gradient(circle at 22% 66%, rgb(30 42 91 / 0.5) 0 7%, transparent 8%),
    linear-gradient(90deg, #dbe2ff, #a5b4fc 22%, #6366f1 42%, #1e2a5b 62%, #0d1330);
  box-shadow: -6px 0 24px rgb(165 180 252 / 0.45), -2px 0 6px rgb(219 226 255 / 0.5);
}
/* Sombra: un disco oscuro desplazado a la derecha deja solo la media luna izquierda */
.space .moon::after {
  content: ""; position: absolute; inset: -4px -4px -4px 30%; border-radius: 50%;
  background: radial-gradient(circle at 40% 50%, #0b0f1a, #10173a 70%, rgb(16 23 58 / 0.6));
  box-shadow: -10px 0 18px rgb(11 15 26 / 0.85);
}
/* Aterrizaje: el cohete baja frenando, se posa en el horizonte (a 200px de la parte de arriba) y se queda quieto.
   Las animaciones arrancan cuando la escena tiene la clase .go */
.space .launch {
  position: absolute; z-index: 1; left: 50%; top: 70px; width: 80px; height: 280px; margin-left: -40px;
  transform: translateY(-460px) scale(0.75);
}
/* Secuencia: aterriza (0-4 s), espera a que lleguen los iconos al logo y despega disparado (6,2 s) */
.space.go .launch { animation: land 4s linear forwards, blastoff 1.1s cubic-bezier(0.55, 0, 0.9, 0.35) 6.2s forwards; }
@keyframes blastoff {
  0% { transform: translateY(0) scale(1); }
  14% { transform: translateY(5px) scale(1.04, 0.95); }
  100% { transform: translateY(-600px) scale(0.78); }
}
@keyframes land {
  0% { transform: translateY(-460px) scale(0.75); animation-timing-function: ease-out; }
  35% { transform: translateY(-190px) scale(0.88); animation-timing-function: ease-out; }
  62% { transform: translateY(-60px) scale(0.96); animation-timing-function: ease-out; }
  82% { transform: translateY(-6px) scale(1); animation-timing-function: ease-in; }
  90% { transform: translateY(3px) scale(1.03, 0.96); animation-timing-function: ease-out; }
  100% { transform: translateY(0) scale(1); }
}
.space .rocket {
  position: relative; display: block; width: 80px; height: 280px; overflow: visible;
  filter: drop-shadow(0 0 14px rgb(168 85 247 / 0.45));
}
.space .thrust { transform-box: view-box; transform-origin: 60px 197px; }
.space.go .thrust { animation: thrust 4s ease-in forwards, reignite 0.5s ease-out 5.95s forwards; }
@keyframes reignite {
  0% { transform: scale(0, 0); opacity: 0; }
  60% { transform: scale(1.25, 1.35); opacity: 1; }
  100% { transform: scale(1.15, 1.3); opacity: 1; }
}
@keyframes thrust {
  0%, 70% { transform: scale(1); opacity: 1; }
  86% { transform: scale(0.45, 0.3); opacity: 0.8; }
  94%, 100% { transform: scale(0, 0); opacity: 0; }
}
.space .flame { transform-box: view-box; transform-origin: 60px 197px; }
.space .f1 { animation: flicker 0.22s ease-in-out infinite alternate; }
.space .f2 { animation: flicker 0.16s ease-in-out infinite alternate-reverse; }
.space .f3 { animation: flicker 0.11s ease-in-out infinite alternate; }
@keyframes flicker {
  from { transform: scale(0.92, 0.86); opacity: 0.85; }
  to { transform: scale(1.06, 1.12); opacity: 1; }
}
/* Chispas del fuego de frenado (se apagan al aterrizar) */
.space .sparks { position: absolute; left: 50%; top: 150px; }
.space.go .sparks { animation: sparks-off 4s linear forwards, sparks-on 0.2s linear 6s forwards; }
@keyframes sparks-on { to { opacity: 1; } }
/* Estela al despegar */
.space .trail {
  position: absolute; left: 50%; top: 196px; width: 20px; height: 560px; margin-left: -10px;
  border-radius: 10px; filter: blur(8px); opacity: 0; transform-origin: 50% 0;
  background: linear-gradient(rgb(233 213 255 / 0.95), rgb(168 85 247 / 0.6) 25%, rgb(59 130 246 / 0.25) 60%, transparent);
}
.space.go .trail { animation: trail 1.2s ease-out 6.15s forwards; }
@keyframes trail { 0% { opacity: 0; transform: scaleY(0.1); } 30% { opacity: 1; } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes sparks-off { 0%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
.space .sparks i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e9d5ff;
  box-shadow: 0 0 6px #a855f7; opacity: 0; animation: spark-fall 0.9s linear infinite;
}
.space .sparks i:nth-child(1) { --sx: -14px; animation-delay: 0s; }
.space .sparks i:nth-child(2) { --sx: 10px; animation-delay: 0.1s; }
.space .sparks i:nth-child(3) { --sx: -6px; animation-delay: 0.2s; }
.space .sparks i:nth-child(4) { --sx: 16px; animation-delay: 0.3s; }
.space .sparks i:nth-child(5) { --sx: -18px; animation-delay: 0.4s; }
.space .sparks i:nth-child(6) { --sx: 4px; animation-delay: 0.5s; }
.space .sparks i:nth-child(7) { --sx: -10px; animation-delay: 0.6s; }
.space .sparks i:nth-child(8) { --sx: 12px; animation-delay: 0.7s; }
.space .sparks i:nth-child(9) { --sx: -2px; animation-delay: 0.75s; }
.space .sparks i:nth-child(10) { --sx: 20px; animation-delay: 0.85s; }
@keyframes spark-fall {
  0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(var(--sx), 110px); }
}
/* Impacto al tocar el suelo (~3,4 s): fogonazo, ondas expansivas, haz de luz, polvo y resplandor general */
.space .flare {
  position: absolute; z-index: 3; left: 50%; top: 130px; width: 560px; height: 150px; margin-left: -280px;
  border-radius: 50%; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, #fff, rgb(255 255 255 / 0.95) 12%, rgb(233 213 255 / 0.8) 28%, rgb(168 85 247 / 0.5) 55%, transparent);
}
.space.go .flare { animation: flare 5s ease-out forwards; }
@keyframes flare {
  0%, 64% { opacity: 0; transform: scale(0.2, 0.3); }
  69% { opacity: 1; transform: scale(1.05, 1.1); }
  100% { opacity: 0; transform: scale(1.6, 1.2); }
}
.space .shock {
  position: absolute; z-index: 3; left: 50%; top: 192px; width: 60px; height: 16px; margin-left: -30px;
  border-radius: 50%; border: 2px solid rgb(233 213 255 / 0.95); opacity: 0;
  box-shadow: 0 0 12px rgb(196 181 253 / 0.9), inset 0 0 8px rgb(168 85 247 / 0.7);
}
.space.go .shock { animation: shock 4.6s cubic-bezier(0.1, 0.6, 0.3, 1) forwards; }
.space.go .s2 { animation-delay: 0.18s; }
@keyframes shock {
  0%, 73% { opacity: 0; transform: scale(0.3); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(9, 4); }
}
.space .beam {
  position: absolute; z-index: 3; left: 50%; top: -20px; width: 120px; height: 230px; margin-left: -60px;
  mix-blend-mode: screen; opacity: 0; transform-origin: 50% 100%;
  background: radial-gradient(50% 100% at 50% 100%, rgb(255 255 255 / 0.9), rgb(196 181 253 / 0.45) 40%, transparent 75%);
}
.space.go .beam { animation: beam 4.6s ease-out forwards; }
@keyframes beam {
  0%, 72% { opacity: 0; transform: scaleY(0.2); }
  75% { opacity: 1; transform: scaleY(1.1); }
  100% { opacity: 0; transform: scaleY(1.3); }
}
.space .whiteout {
  position: absolute; inset: 0; z-index: 4; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(70% 60% at 50% 62%, rgb(233 213 255 / 0.55), rgb(124 92 255 / 0.25) 50%, transparent 80%);
}
.space.go .whiteout { animation: whiteout 4.6s ease-out forwards; }
@keyframes whiteout { 0%, 72% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }
.space .dust { position: absolute; z-index: 3; left: 50%; top: 196px; }
.space .dust i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
  background: #e9d5ff; box-shadow: 0 0 8px #a855f7;
}
.space.go .dust i { animation: dust 4.4s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
.space .dust i:nth-child(odd) { --side: -1; }
.space .dust i:nth-child(even) { --side: 1; }
.space .dust i:nth-child(n) { --d: 60px; }
.space .dust i:nth-child(3n) { --d: 110px; --up: -14px; }
.space .dust i:nth-child(3n+1) { --d: 150px; --up: -6px; }
.space .dust i:nth-child(3n+2) { --d: 85px; --up: -22px; }
@keyframes dust {
  0%, 76% { opacity: 0; transform: translate(0, 0) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--side) * var(--d)), var(--up)) scale(0.4); }
}
/* Luz del fuego sobre el planeta: crece al acercarse el cohete y queda un brillo suave */
.space .earthlight {
  position: absolute; z-index: 3; left: -20%; right: -20%; top: 100px; bottom: 0; pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(120px 60px at 50% 100px, rgb(233 213 255 / 0.85), transparent),
    radial-gradient(200px 85px at 50% 100px, rgb(168 85 247 / 0.5), transparent),
    radial-gradient(260px 96px at 50% 100px, rgb(59 130 246 / 0.3), transparent);
  opacity: 0.2;
}
.space.go .earthlight { animation: earthlight 4.8s ease-out forwards, liftglow 2.2s ease-out 6.1s forwards; }
@keyframes liftglow { 0% { opacity: 0.3; } 18% { opacity: 1; } 100% { opacity: 0.25; } }
/* Fogonazo del despegue */
.space .liftflash {
  position: absolute; z-index: 3; left: 50%; top: 150px; width: 420px; height: 110px; margin-left: -210px;
  border-radius: 50%; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, #fff, rgb(233 213 255 / 0.8) 25%, rgb(168 85 247 / 0.45) 55%, transparent);
}
.space.go .liftflash { animation: liftflash 1.6s ease-out 6.15s forwards; }
@keyframes liftflash { 0% { opacity: 0; transform: scale(0.3); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5, 1.2); } }
@keyframes earthlight {
  0% { opacity: 0.1; }
  75% { opacity: 1; }
  100% { opacity: 0.3; }
}
/* Logo: reacciona a la secuencia del cohete */
.auth-brand { position: relative; z-index: 6; }
/* Subida rápida y seca ("pam"): se pasa un poco de largo y rebota a su sitio, cerca del borde superior */
.auth-brand.go { animation: brand-rise 0.95s linear 6.35s forwards; }
@keyframes brand-rise {
  0% { margin-top: -118px; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5); }
  70% { margin-top: 12px; transform: scale(1.03, 0.97); animation-timing-function: ease-out; }
  85% { margin-top: 28px; transform: scale(0.99, 1.01); animation-timing-function: ease-in-out; }
  100% { margin-top: 24px; transform: none; }
}
.space.go { animation: space-out 0.75s cubic-bezier(0.55, 0, 0.85, 0.5) 6.35s forwards; }
@keyframes space-out { to { height: 0; opacity: 0; } }
.auth-brand.go .wordmark { animation: logo-pulse 1.1s ease-out 4.95s; }
@keyframes logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgb(168 85 247 / 0)); transform: scale(1); }
  35% { filter: drop-shadow(0 0 18px rgb(168 85 247 / 0.9)) drop-shadow(0 0 32px rgb(59 130 246 / 0.6)); transform: scale(1.04); }
}
.auth-brand .orbit { background-size: 200% 100%; background-image: linear-gradient(90deg, #6366f1, #a855f7, #e9d5ff, #a855f7, #6366f1); }
/* El logo aparece con el destello del aterrizaje; la O (disco) y la t (barra) llegan volando desde la luna */
.auth-brand .w-gym, .auth-brand .orbit, .auth-brand .orbit-a, .auth-brand .tagline, .auth-brand .glyph { opacity: 0; }
.auth-brand.go .w-gym, .auth-brand.go .orbit-a, .auth-brand.go .tagline { animation: reveal 0.6s ease-out 3.35s both; }
.auth-brand.go .orbit { animation: reveal 0.6s ease-out 3.35s both, shimmer 1.4s ease-in-out 5s; }
.auth-brand.go .glyph-o { animation: glyph-in 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.2) 3.7s both; }
@keyframes reveal { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes glyph-in {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(-220deg); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .space.go .launch, .space .launch { animation: none; transform: none; }
  .space.go .thrust, .space .thrust { animation: none; opacity: 0; }
  .space .sparks, .space .flare, .space .shock, .space .beam, .space .whiteout, .space .dust, .space .trail, .space .liftflash { display: none; }
  .auth-brand.go, .auth-brand.go .wordmark, .auth-brand.go .orbit, .space.go { animation: none; }
  .burst, .screenflash { display: none; }
  .auth-brand .w-gym, .auth-brand .orbit, .auth-brand .orbit-a, .auth-brand .tagline, .auth-brand .glyph { opacity: 1; animation: none !important; }
  .space.go .earthlight { animation: none; opacity: 0.3; }
}
.space .planet {
  position: absolute; z-index: 2; left: -35%; right: -35%; bottom: -300px; height: 420px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, #1a2452, #0e1533 30%, var(--bg) 55%);
  box-shadow: 0 -1px 0 #9db4ff, 0 -6px 24px rgb(96 165 250 / 0.9), 0 -24px 64px rgb(59 130 246 / 0.55), 0 -48px 96px rgb(168 85 247 / 0.35);
}

.auth-brand { text-align: center; margin-top: -118px; }
.wordmark {
  font-family: "Sora", "Inter", system-ui, sans-serif; font-weight: 700; font-size: 44px;
  line-height: 1; letter-spacing: -0.02em; color: #f2f4ff;
}
.wordmark { display: inline-flex; align-items: baseline; }
.wordmark .orbit { background: linear-gradient(90deg, #6366f1, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark .orbit-a { color: #a855f7; margin-left: 0.01em; }
.glyph { display: inline-block; overflow: visible; }
.glyph-o { width: 0.76em; height: 0.76em; margin: 0 0.08em 0 0.07em; }
.orbit-moon { fill: #f5f3ff; filter: drop-shadow(0 0 2px #c084fc) drop-shadow(0 0 4px #a855f7); }
/* Explosión blanca al llegar el logo arriba (~7 s): destello en pantalla, núcleo, ondas y rayos */
.screenflash { position: fixed; inset: 0; z-index: 20; pointer-events: none; background: #fff; opacity: 0; }
.auth:has(.auth-brand.go) .screenflash { animation: screenflash 0.5s ease-out 7s; }
@keyframes screenflash { 0% { opacity: 0; } 12% { opacity: 0.75; } 100% { opacity: 0; } }
.burst { position: absolute; left: 50%; top: 24px; width: 0; height: 0; pointer-events: none; z-index: -1; }
.burst > * { position: absolute; left: 0; top: 0; opacity: 0; }
.burst-core {
  width: 360px; height: 160px; margin: -80px 0 0 -180px; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgb(255 255 255 / 0.9) 30%, rgb(233 213 255 / 0.55) 55%, transparent);
}
.burst-ring {
  width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 24px #fff, 0 0 48px rgb(196 181 253 / 0.9);
}
.burst-rays i {
  position: absolute; left: 0; top: 0; width: 70px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, #fff, rgb(233 213 255 / 0));
  transform-origin: 0 50%; transform: rotate(var(--a)) translateX(30px) scaleX(0.2);
}
.burst-rays { opacity: 1; }
.auth-brand.go .burst-core { animation: burst-core 0.8s ease-out 7s; }
.auth-brand.go .burst-ring { animation: burst-ring 0.7s cubic-bezier(0.1, 0.6, 0.3, 1) 7s; }
.auth-brand.go .burst-ring.r2 { animation-delay: 7.1s; }
.auth-brand.go .burst-rays i { animation: burst-ray 0.6s cubic-bezier(0.1, 0.7, 0.3, 1) 7s both; }
@keyframes burst-core { 0% { opacity: 0; transform: scale(0.3); } 15% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8, 1.4); } }
@keyframes burst-ring { 0% { opacity: 1; transform: scale(0.2); } 100% { opacity: 0; transform: scale(5, 2.6); } }
@keyframes burst-ray {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(20px) scaleX(0.2); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(150px) scaleX(1); }
}

/* Lema con aire de otro planeta: tipografía sci-fi con brillo */
.tagline {
  margin-top: 12px; font-family: "Orbitron", "Sora", sans-serif; font-weight: 500; font-size: var(--fs-sm);
  letter-spacing: 0.42em; color: #c7d2fe; white-space: nowrap;
  text-shadow: 0 0 6px rgb(124 140 255 / 0.8), 0 0 18px rgb(168 85 247 / 0.55);
}

/* Estrellas del login: aparecen tras la explosión y titilan */
.login-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.auth:has(.auth-brand.go) .login-stars { animation: stars-in 1.2s ease-out 7.1s forwards; }
.auth > :not(.login-stars):not(.screenflash) { position: relative; z-index: 1; }
@keyframes stars-in { to { opacity: 1; } }
.login-stars i {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #e0e7ff;
  box-shadow: 0 0 6px rgb(196 181 253 / 0.9);
  animation: twinkle var(--d) ease-in-out var(--delay) infinite alternate;
}
.login-stars i.sparkle {
  width: calc(var(--s) * 2.6); height: calc(var(--s) * 2.6); border-radius: 0; box-shadow: none;
  background: linear-gradient(#fff, #c4b5fd);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px #a855f7);
}
@keyframes twinkle {
  from { opacity: 0.15; transform: scale(0.6) rotate(0deg); }
  to { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .auth:has(.auth-brand.go) .login-stars, .login-stars { animation: none; opacity: 1; }
  .login-stars i { animation: none; opacity: 0.7; }
}