/* Intro épica: mecha → fuego → desvanecer → entrada del login */
#intro-fuego{
  position:fixed; inset:0; z-index:100000; background:#050805;
  display:block; overflow:hidden; touch-action:manipulation;
  transition:opacity 1.1s ease;
}
#intro-fuego canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#intro-fuego.saliendo{ opacity:0; pointer-events:none; }
#intro-fuego .intro-marca{
  position:absolute; left:0; right:0; bottom:9%; text-align:center;
  font-family:inherit; letter-spacing:.35em; text-transform:uppercase;
  font-size:.8rem; color:#ffd9a0; opacity:0; text-shadow:0 0 14px #ff7a1a;
  transition:opacity 1.2s ease;
}
#intro-fuego .intro-marca.visible{ opacity:.9; }

/* Mientras dura la intro, el login espera oculto */
body.intro-activa .login-overlay{ opacity:0; pointer-events:none; }

/* Al terminar la entrada, el cuadro queda quieto (sin reiniciar la animación base de style.css) */
body:not(.login-entra) .login-card{ animation:none; }

/* Entrada épica del cuadro de login */
body.login-entra .login-overlay{ animation: loginBrasa 1.1s ease-out both; }
body.login-entra .login-card{
  animation: cardEpica 1.2s cubic-bezier(.16,.9,.25,1) both;
}
body.login-entra .login-card > *{
  animation: campoSube .7s ease-out both;
}
body.login-entra .login-card > *:nth-child(1){ animation-delay:.35s }
body.login-entra .login-card > *:nth-child(2){ animation-delay:.45s }
body.login-entra .login-card > *:nth-child(3){ animation-delay:.55s }
body.login-entra .login-card > *:nth-child(4){ animation-delay:.65s }
body.login-entra .login-card > *:nth-child(5){ animation-delay:.75s }
body.login-entra .login-card > *:nth-child(6){ animation-delay:.85s }
body.login-entra .login-card > *:nth-child(7){ animation-delay:.95s }
body.login-entra .login-card > *:nth-child(8){ animation-delay:1.05s }
body.login-entra .login-card > *:nth-child(9){ animation-delay:1.15s }
@keyframes loginBrasa{ from{ background:rgba(60,18,4,.85);} to{ background:rgba(6,12,8,.72);} }
@keyframes cardEpica{
  0%{ opacity:0; box-shadow:0 0 120px 30px rgba(255,120,30,.75); }
  60%{ opacity:1; box-shadow:0 0 70px 10px rgba(255,140,40,.45); }
  100%{ opacity:1; box-shadow:0 24px 60px rgba(0,0,0,.5); }
}
/* Solo opacidad (sin mover ni escalar): así el texto no vibra al terminar */
@keyframes campoSube{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  #intro-fuego{ display:none !important; }
  body.intro-activa .login-overlay{ opacity:1; pointer-events:auto; }
}