/* Sign-in page: no card. The logo and form stand directly on the colour behind them, as the confirmation popups do. */

/* ---- Behind: the soft colour from glass.css, moving slowly here. Each part is blurred once as its own layer and only
   moved after that, so the moving does not redraw the blur. ---- */
.login-page .glass-aurora svg { will-change: transform; }
.login-page .glass-aurora svg:nth-child(1) { animation: login-drift-a 26s ease-in-out infinite alternate; }
.login-page .glass-aurora svg:nth-child(2) { animation: login-drift-b 32s ease-in-out infinite alternate; }
.login-page .glass-aurora svg:nth-child(3) { animation: login-drift-c 29s ease-in-out infinite alternate; }
@keyframes login-drift-a { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes login-drift-b { to { transform: translate(-14vmax, -8vmax) scale(.9); } }
@keyframes login-drift-c { to { transform: translate(-12vmax, -8vmax) scale(1.12); } }

/* ---- The column ---- */
.login-page > main.container { padding-top: 32px; padding-bottom: 72px; animation: none; }   /* the bottom leaves room for the footer */
.login-float { width: min(100%, 400px); text-align: center; }
.login-float .brand-logo { width: 118px; height: 118px; }
.login-name { margin: 6px 0 22px; font-size: 1.15rem; }
.login-float h1 { margin-bottom: 6px; font-size: 2rem; letter-spacing: -.02em; line-height: 1.2; }
.login-float > .text-secondary { margin-bottom: 26px; }
.login-float form { text-align: left; }
.login-float form .alert, .login-float form .text-danger, .login-float form .field-validation-error { display: block; text-align: left; }
.login-float form span.field-validation-error { margin: 4px 0 0 20px; }

/* ---- Each part arrives a moment after the last ---- */
.login-form > *, .login-form form > * { animation: login-fade .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.login-form > :nth-child(1) { animation-delay: .06s; }
.login-form > :nth-child(2) { animation-delay: .12s; }
.login-form > :nth-child(3) { animation-delay: .18s; }
.login-form > :nth-child(4) { animation-delay: .24s; }
.login-form form > :nth-child(3) { animation-delay: .3s; }
.login-form form > :nth-child(4) { animation-delay: .36s; }
.login-form form > :nth-child(5) { animation-delay: .42s; }
.login-form form > :nth-child(6) { animation-delay: .48s; }
@keyframes login-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.login-form .form-label { color: var(--color-text); transition: color .25s; }
.login-form .mb-3:focus-within .form-label, .login-form .mb-4:focus-within .form-label { color: var(--app-accent-text); }

/* ---- Fields ---- */
.login-form .form-control { transition: border-color .25s, box-shadow .25s, background-color .25s; }
.login-form .form-control:focus { background-color: var(--glass-field); box-shadow: inset 0 1px 2px var(--glass-shade), var(--focus-ring); }
.login-form .input-group > .form-control { border-right: 0; }
.login-form .input-group > .btn {
  --bs-btn-color: var(--color-text); --bs-btn-hover-color: var(--color-text); --bs-btn-active-color: var(--color-text);
  --bs-btn-hover-bg: var(--glass-field); --bs-btn-active-bg: var(--glass-field);
  border-left: 0;
}
.login-form .input-group:focus-within .btn { border-color: var(--magenta-500); }

/* The button: a drop of tinted glass, with light passing over it */
.login-form .btn-primary { min-height: 54px; overflow: hidden; transition: box-shadow .25s, transform .12s; }
.login-form .btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .24) 50%, transparent 65%); transform: translateX(-100%); transition: transform .8s ease; pointer-events: none; }
.login-form .btn-primary > span { display: inline-block; transition: transform .25s ease; }
@media (hover: hover) {
  .login-form .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -6px 12px -6px rgba(255, 255, 255, .34), 0 18px 32px -12px rgba(190, 24, 93, .85); }
  .login-form .btn-primary:hover::before { transform: translateX(100%); }
  .login-form .btn-primary:hover > span { transform: translateX(4px); }
}

.login-page > .powered-by { margin: 0 auto; padding: 6px 16px; animation: none; }

@media (max-width: 575.98px) {
  .login-float .brand-logo { width: 104px; height: 104px; }
  .login-name { margin-bottom: 18px; font-size: 1rem; }
  .login-float h1 { font-size: 1.65rem; }
  .login-float > .text-secondary { margin-bottom: 20px; }
}

/* Asked for less motion: everything is simply there */
@media (prefers-reduced-motion: reduce) {
  .login-page .glass-aurora svg, .login-form > *, .login-form form > * { animation: none; }
  .login-form .btn-primary::before, .login-form .btn-primary > span { transition: none; }
}