/* =====================================================================
   LOGIN PREMIUM  ·  hero animado + partículas + entrada escalonada
   Reutilizable por admin.php / alumno.php / docente.php SIN tocar los
   formularios existentes. Sólo aporta capa de fondo premium + micro UX.
   Versión: 1.0  ·  (c) EduClass AI
   ===================================================================== */
.login-hero {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 700px at 30% 30%, rgba(26,115,232,.18), transparent 60%),
                radial-gradient(1100px 650px at 70% 70%, rgba(147,51,234,.16), transparent 60%),
                linear-gradient(155deg, #0f1117, #161925, #0c0e16);
    background-size: 270% 270%;
    animation: loginHeroShift 30s ease-in-out infinite;
    overflow: hidden;
    z-index: 0;
}
@keyframes loginHeroShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      repeating-conic-gradient(from 0deg at 20% 30%, rgba(255,255,255,.04) 0deg 2deg, transparent 2deg 8deg),
      repeating-conic-gradient(from 60deg at 80% 70%, rgba(138,180,248,.03) 0deg 2deg, transparent 2deg 8deg);
    opacity: .55;
    pointer-events: none;
    animation: loginGridDrift 40s linear infinite;
}
@keyframes loginGridDrift {
    from { transform: translate(0,0) rotate(0deg); }
    to   { transform: translate(4px,-6px) rotate(360deg); }
}
.login-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Capas de contenido superpuesto encima del hero */
.login-fg { position: relative; z-index: 1; }

/* Entrada escalonada de los hijos directos del card */
.login-animate-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    animation: loginItemIn .5s cubic-bezier(.2,.1,.15,1.02) both;
}
@keyframes loginItemIn {
    from { opacity:0; transform:translateY(16px); filter:blur(3px); }
    to   { opacity:1; transform:translateY(0);  filter:blur(0); }
}
.login-animate-stagger > :nth-child(1)  { animation-delay: 0.00s; }
.login-animate-stagger > :nth-child(2)  { animation-delay: 0.06s; }
.login-animate-stagger > :nth-child(3)  { animation-delay: 0.12s; }
.login-animate-stagger > :nth-child(4)  { animation-delay: 0.18s; }
.login-animate-stagger > :nth-child(5)  { animation-delay: 0.24s; }
.login-animate-stagger > :nth-child(6)  { animation-delay: 0.30s; }
.login-animate-stagger > :nth-child(7)  { animation-delay: 0.36s; }
.login-animate-stagger > :nth-child(8)  { animation-delay: 0.42s; }
.login-animate-stagger > :nth-child(9)  { animation-delay: 0.48s; }
.login-animate-stagger > :nth-child(10){ animation-delay: 0.54s; }

/* Micro-interacción: focus en inputs */
.login-animate-stagger .login-input,
.login-animate-stagger .alumno-input,
.login-animate-stagger .form-control {
    transition: border-color .22s ease, box-shadow:.22s ease;
}
.login-animate-stagger .login-input:focus,
.login-animate-stagger .alumno-input:focus,
.login-animate-stagger .form-control:focus {
    border-color: var(--primary,#1a73e8);
    box-shadow: 0 0 0 3px rgba(26,115,232,.18);
}

/* Glass overlay opcional sobre el card (no fuerza bg) */
.login-glass {
    backdrop-filter: blur(14px) saturate(175%);
    -webkit-backdrop-filter: blur(14px) saturate(175%);
}