/* ════════════════════════════════════════════════════════════════════
   Sofía — Héroe de bienvenida DENTRO de la app (v12.2)

   Módulo APARTE del monolito (regla CLAUDE.md §1): el tratamiento premium
   que ya tenía la puerta de entrada (auth.js) — cara grande, anillo
   champagne, entrada animada ~2s — llevado a #screen-welcome, la pantalla
   que ve un usuario YA logueado al abrir la app. auth.js solo la ve quien
   NO tiene sesión; por eso Roberto nunca veía la animación.

   La animación corre UNA sola vez por apertura: welcome-hero.js pone la
   clase .wh-in al cargar y la saca a los ~2.6s. Sin esa clase, acá quedan
   solo los estilos finales (cara grande + anillo), así volver al inicio
   desde otra pantalla no re-dispara el fade.
   ════════════════════════════════════════════════════════════════════ */

/* ── Estilos permanentes: cara más grande con anillo elegante ── */
#screen-welcome .wb-face-ph{width:150px;height:150px;}
#screen-welcome .wb-face-ph::before{content:"";position:absolute;inset:-10px;border-radius:50%;
  background:conic-gradient(from 200deg,#C6A15B,#EEDCAE,#C6A15B,#A9B2D8,#C6A15B);
  filter:blur(2px);opacity:.55;}
#screen-welcome .wb-face-ph > *:not(.wb-online){position:relative;z-index:1;border-width:4px;
  box-shadow:0 16px 40px rgba(27,32,40,.22);}
/* El puntito "online" mantiene su position:absolute original (si se lo pisa,
   cae al flujo y aparece deformado abajo de la cara). */
#screen-welcome .wb-face-ph .wb-online{position:absolute;z-index:2;bottom:9px;right:13px;}
#screen-welcome .wb-face-nm{font-size:24px;margin-top:14px;}
/* El saludo ("Buen día, Roberto") es el título de bienvenida: más presencia. */
#screen-welcome .wb-hi b{font-size:26px;}

/* ── Entrada animada (~2s), solo mientras welcome-hero.js mantiene .wh-in ── */
#screen-welcome.wh-in .wb-face-ph::before{opacity:0;
  animation:whRing 2.1s ease-out .1s forwards;}
#screen-welcome.wh-in .wb-face-ph > *{opacity:0;transform:scale(.82);
  animation:whFace 1s cubic-bezier(.2,.75,.2,1) .18s forwards;}
#screen-welcome.wh-in .wb-head{opacity:0;animation:whUp .7s ease .55s forwards;}
#screen-welcome.wh-in .wb-face-nm{opacity:0;animation:whUp .7s ease .8s forwards;}
#screen-welcome.wh-in .wb-face-role{opacity:0;animation:whUp .7s ease .95s forwards;}
#screen-welcome.wh-in .btn-start{opacity:0;animation:whUp .7s ease 1.15s forwards;}

@keyframes whFace{to{opacity:1;transform:scale(1);}}
@keyframes whRing{0%{opacity:0;transform:rotate(0deg);}40%{opacity:.9;}
  100%{opacity:.55;transform:rotate(184deg);}}
@keyframes whUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* Con "Reducir movimiento" activo en el teléfono no apagamos todo (eso fue
   parte del bug percibido): dejamos un fundido suave, sin desplazamiento
   ni rotación, que respeta la preferencia y aun así se ve la entrada. */
@media(prefers-reduced-motion:reduce){
  #screen-welcome.wh-in .wb-face-ph > *,
  #screen-welcome.wh-in .wb-head,
  #screen-welcome.wh-in .wb-face-nm,
  #screen-welcome.wh-in .wb-face-role,
  #screen-welcome.wh-in .btn-start{animation:whCalm .8s ease forwards;transform:none;}
  #screen-welcome.wh-in .wb-face-ph::before{animation:whCalmRing .8s ease forwards;transform:none;}
  @keyframes whCalm{from{opacity:0;}to{opacity:1;}}
  @keyframes whCalmRing{from{opacity:0;}to{opacity:.55;}}
}