/* ════════════════════════════════════════════════════════════════════
   Sofía — Splash de bienvenida animada (v12.4)

   Módulo APARTE del monolito (regla CLAUDE.md §1).

   La splash nativa de Android (ícono + fondo marfil) la controla el
   sistema y no se puede animar. Apenas la página pinta, ESTA splash la
   reemplaza. La v12.3 era demasiado sutil (escala 10%, halo invisible
   sobre marfil — Roberto la vio "sin efecto"). La v12.4 va en serio:

   - Fondo navy profundo (el mismo del retrato): la cara flota, no se
     pierde en blanco, y el cambio marfil→navy se lee como "la app
     arrancó".
   - Anillo champagne GIRANDO alrededor de la cara, bien visible.
   - La cara entra con rebote (spring) y queda respirando suave.
   - "Sofía" en blanco + "TU COACH PERSONAL DE INGLÉS" en champagne.
   - Todo se disuelve ~2.5–3.0s y encadena con la entrada del héroe.

   CSS puro sobre pseudo-elementos de <html> y <body>: pinta sin esperar
   al JS del monolito. Cinturón de seguridad: welcome-hero.js agrega
   .sf-splash-done a <html> a los ~3.2s y estas capas mueren sí o sí.

   Capas (todas fixed, pointer-events:none, z-index arriba de todo):
   - html::before → telón navy + la línea "TU COACH PERSONAL DE INGLÉS".
   - html::after  → disco conic champagne que gira detrás de la cara.
   - body::before → la cara (el mismo ícono de la splash nativa).
   - body::after  → el nombre "Sofía".
   ════════════════════════════════════════════════════════════════════ */

html::before{content:"TU COACH PERSONAL DE INGLÉS";position:fixed;inset:0;z-index:2147483000;
  pointer-events:none;
  background:radial-gradient(120% 85% at 50% 30%,#1D2A45 0%,#131B2C 55%,#0B101B 100%);
  display:flex;justify-content:center;align-items:flex-start;
  padding-top:calc(46vh + 160px);box-sizing:border-box;
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.22em;color:#C6A15B;text-align:center;
  animation:sfTagIn .8s ease .85s both, sfOut .55s ease 2.5s forwards;}

/* Disco conic champagne: la cara tapa el centro, queda el aro girando. */
html::after{content:"";position:fixed;z-index:2147483001;pointer-events:none;
  width:224px;height:224px;left:calc(50% - 112px);top:calc(46vh - 112px);
  border-radius:50%;filter:blur(9px);
  background:conic-gradient(from 210deg,#C6A15B,#F3E3B8,#8E7BC0,#C6A15B 55%,#EEDCAE,#C6A15B);
  animation:sfRingIn .9s ease .12s both, sfSpin 7s linear infinite, sfOut .55s ease 2.5s forwards;}

body::before{content:"";position:fixed;z-index:2147483002;pointer-events:none;
  width:164px;height:164px;left:calc(50% - 82px);top:calc(46vh - 82px);
  border-radius:44px;background:url('img/app-icon-512.png') center/cover no-repeat;
  border:4px solid rgba(255,255,255,.92);
  box-shadow:0 0 60px rgba(198,161,91,.35),0 26px 70px rgba(0,0,0,.55);
  animation:sfFaceIn .95s cubic-bezier(.34,1.45,.45,1) both,
            sfBreathe 1.6s ease-in-out .95s infinite alternate,
            sfOut .55s ease 2.5s forwards;}

body::after{content:"Sofía";position:fixed;z-index:2147483002;pointer-events:none;
  left:0;right:0;top:calc(46vh + 100px);text-align:center;
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:40px;font-weight:700;
  letter-spacing:-.02em;color:#F7F3EA;text-shadow:0 4px 24px rgba(0,0,0,.45);
  animation:sfUp .8s cubic-bezier(.2,.75,.25,1) .5s both, sfOut .55s ease 2.5s forwards;}

/* Entrada con rebote: chica y apagada → pasa de largo → asienta. */
@keyframes sfFaceIn{0%{opacity:0;transform:scale(.62);}100%{opacity:1;transform:scale(1);}}
/* Respiración continua hasta el fundido (alternate: 1 → 1.045 → 1 …). */
@keyframes sfBreathe{from{transform:scale(1);}to{transform:scale(1.045);}}
@keyframes sfSpin{to{transform:rotate(360deg);}}
@keyframes sfRingIn{from{opacity:0;}to{opacity:.85;}}
@keyframes sfUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
/* OJO: el telón navy es html::before — su entrada NO puede animar opacity
   (dejaría ver la app detrás medio segundo). Solo se funde el texto (color). */
@keyframes sfTagIn{from{color:transparent;letter-spacing:.38em;}to{color:#C6A15B;letter-spacing:.22em;}}
@keyframes sfOut{to{opacity:0;visibility:hidden;}}

/* Con "Reducir movimiento": sin giros ni escalas, pero la splash aparece
   entera y se disuelve — nunca "no se ve nada". */
@media(prefers-reduced-motion:reduce){
  html::before,html::after,body::before,body::after{
    animation:sfOut .5s ease 1.6s forwards;transform:none;}
}

/* Cinturón de seguridad: welcome-hero.js pone esta clase a los ~3.2s.
   Si por cualquier motivo la animación no corrió, la splash muere acá. */
html.sf-splash-done::before,html.sf-splash-done::after,
html.sf-splash-done body::before,html.sf-splash-done body::after{
  display:none !important;animation:none !important;}

/* v13.44 — Al tocar "Progreso" desde Practicar o el Gym (?journey=1), la app
   pintaba primero el Inicio y recién después saltaba a "Tu viaje": un
   parpadeo de otra pantalla. La puerta del <head> marca sf-deep-journey antes
   del primer pintado; mientras dura, se ve "Tu viaje" y no el Inicio. El
   deep-link de la app saca la marca apenas abre la pantalla de verdad. */
html.sf-deep-journey #screen-welcome.active{display:none;}
html.sf-deep-journey #screen-journey{display:flex;flex-direction:column;}