@import url('/assets/spectrum-mail.css');

/* Shared authentication surface: the primary action uses the same VIS
   orange as Spectrum's internal submit commands. */
.login-form button[type="submit"] {
    background: #f2a900;
    border: 1px solid #f2a900;
    color: #fff;
    box-shadow: 0 5px 14px rgb(242 169 0 / 20%);
    transition: background-color 140ms ease, border-color 140ms ease,
        box-shadow 140ms ease, transform 140ms ease;
}

.login-form button[type="submit"]:hover {
    background: #d99400;
    border-color: #d99400;
    box-shadow: 0 7px 18px rgb(217 148 0 / 28%);
}

.login-form button[type="submit"]:active { transform: translateY(1px); }
.login-form button[type="submit"]:focus-visible {
    outline: 3px solid rgb(242 169 0 / 34%);
    outline-offset: 3px;
}

/* Default Spectrum authentication canvas: a restrained network topology,
   shared branding grammar and no provider-specific imagery. */
:root { --accent: #f2a900; }
@keyframes spectrum-ambient-drift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    50% { background-position: 56px -38px, -48px 54px, 42px 48px, 0 0; }
    100% { background-position: -44px 62px, 64px -36px, -58px 38px, 0 0; }
}
@keyframes spectrum-orbit-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-42px, -28px, 0) scale(1.055); }
    100% { transform: translate3d(30px, -52px, 0) scale(1.025); }
}
@keyframes spectrum-topology-flow {
    0% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.08); opacity: .24; }
    50% { transform: translate3d(2%, -1.5%, 0) scale(1.1); opacity: .38; }
    100% { transform: translate3d(-1%, -3%, 0) scale(1.08); opacity: .28; }
}
.login-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 24%, rgb(242 169 0 / 12%) 0 2px, transparent 3px),
        radial-gradient(circle at 76% 18%, rgb(140 190 205 / 14%) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 78%, rgb(242 169 0 / 9%) 0 3px, transparent 4px),
        linear-gradient(135deg, #09171d 0%, #132a34 52%, #0c2028 100%);
    animation: spectrum-ambient-drift 18s linear infinite alternate;
}
.login-page::before,
.login-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
}
.login-page::before {
    inset: -8%;
    opacity: .28;
    background-image:
        linear-gradient(28deg, transparent 0 37%, rgb(151 194 207 / 16%) 37.15% 37.35%, transparent 37.5%),
        linear-gradient(151deg, transparent 0 61%, rgb(151 194 207 / 12%) 61.1% 61.28%, transparent 61.4%),
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgb(242 169 0 / 7%) 29%, transparent 48%);
    animation: spectrum-topology-flow 16s ease-in-out infinite alternate;
}
.login-page::after {
    width: min(58vw, 760px);
    aspect-ratio: 1;
    right: -14vw;
    bottom: -38vw;
    border: 1px solid rgb(151 194 207 / 12%);
    border-radius: 50%;
    box-shadow: 0 0 0 68px rgb(151 194 207 / 3%), 0 0 0 136px rgb(242 169 0 / 2%);
    animation: spectrum-orbit-drift 22s ease-in-out infinite alternate;
}
.login-card { position: relative; border: 1px solid rgb(255 255 255 / 18%); }
.login-brand { display: flex; align-items: center; gap: 13px; }
.login-brand img { width: 54px; height: 54px; object-fit: contain; background: var(--accent); padding: 4px; border-radius: 12px; }
.login-brand h1 { margin: 0; font-size: 2rem; line-height: 1; }
.login-intro { margin-top: 18px; }
.login-intro .eyebrow { margin: 0 0 5px; }
.login-intro p { margin: 0; }
@media (max-width: 520px) {
    .login-card { padding: 26px 22px; border-radius: 20px; }
    .login-brand img { width: 48px; height: 48px; }
    .login-brand h1 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .login-page,
    .login-page::before,
    .login-page::after { animation: none; }
}