/* Movimiento visual del acceso; no modifica formularios ni autenticacion. */
@media screen {
  html body.is-login:not(.is-authenticated) section#loginScreen.login-screen {
    position: relative !important;
    isolation: isolate;
    background: #102c50 !important;
  }

  html body.is-login:not(.is-authenticated) section#loginScreen.login-screen::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(110deg, rgba(7, 25, 49, .77), rgba(13, 47, 82, .38)), url('../assets/fondo-aerea-colegio-login.jpg') center / cover no-repeat !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    z-index: -2 !important;
    pointer-events: none;
    animation: plumero-photo-drift 24s ease-in-out infinite alternate !important;
  }

  html body.is-login:not(.is-authenticated) section#loginScreen.login-screen::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: radial-gradient(ellipse at 70% 35%, rgba(160, 216, 255, .24), transparent 60%) !important;
    z-index: -1 !important;
    pointer-events: none;
    animation: plumero-light-drift 12s ease-in-out infinite alternate !important;
  }

  html body.is-login:not(.is-authenticated) #loginScreen .login-photo-brand {
    position: relative;
    background: linear-gradient(145deg, rgba(7, 30, 65, .88), rgba(17, 62, 109, .78)) !important;
    border-color: rgba(173, 219, 255, .25) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 65px rgba(0, 16, 41, .28) !important;
    animation: plumero-brand-float 7s ease-in-out infinite;
  }

  html body.is-login:not(.is-authenticated) #loginScreen .login-panel {
    border-radius: 28px !important;
    border-color: rgba(255, 255, 255, .8) !important;
    box-shadow: 0 24px 65px rgba(0, 16, 41, .28) !important;
    animation: plumero-login-reveal .7s ease-out both;
  }

  html body.is-login:not(.is-authenticated) #loginScreen .login-photo-content p {
    white-space: normal !important;
    word-spacing: .08em;
  }

  html body.is-login:not(.is-authenticated) #loginScreen .login-photo-content p b {
    margin-inline: .12em;
  }

  html body.is-login:not(.is-authenticated) #loginScreen :is(.login-submit, .btn-guardian-access) {
    transition: transform .2s ease, box-shadow .2s ease !important;
  }

  html body.is-login:not(.is-authenticated) #loginScreen :is(.login-submit, .btn-guardian-access):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(11, 61, 119, .22) !important;
  }
}

@keyframes plumero-photo-drift {
  from { scale: 1.04; translate: -.5% 0; }
  to { scale: 1.12; translate: .5% 0; }
}
@keyframes plumero-light-drift {
  from { opacity: .45; }
  to { opacity: 1; }
}
@keyframes plumero-brand-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes plumero-login-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media screen and (max-width: 640px) {
  html body.is-login:not(.is-authenticated) #loginScreen .login-panel {
    border-radius: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.is-login:not(.is-authenticated) section#loginScreen.login-screen::before,
  html body.is-login:not(.is-authenticated) section#loginScreen.login-screen::after,
  html body.is-login:not(.is-authenticated) #loginScreen .login-photo-brand,
  html body.is-login:not(.is-authenticated) #loginScreen .login-panel {
    animation: none !important;
    transform: none !important;
    scale: none !important;
    translate: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen :is(.login-submit, .btn-guardian-access) {
    transition: none !important;
    transform: none !important;
  }
}