/* Animated horizon shared by login and registration pages. */
@property --bench-auth-gradient-warm-soft {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(251, 146, 60, .1);
}

@property --bench-auth-gradient-warm {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(239, 68, 68, .2);
}

@property --bench-auth-gradient-mid {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(99, 102, 241, .34);
}

@property --bench-auth-gradient-bright {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(56, 189, 248, .58);
}

@property --bench-auth-gradient-soft {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(147, 197, 253, .3);
}

.auth-page-wrap--login,
.auth-page-wrap--register {
    --bench-auth-gradient-warm-soft: rgba(251, 146, 60, .1);
    --bench-auth-gradient-warm: rgba(239, 68, 68, .2);
    --bench-auth-gradient-mid: rgba(99, 102, 241, .34);
    --bench-auth-gradient-bright: rgba(56, 189, 248, .58);
    --bench-auth-gradient-soft: rgba(147, 197, 253, .3);
    min-height: calc(100vh - 76px);
    overflow: hidden;
    isolation: isolate;
    transition:
        --bench-auth-gradient-warm-soft .85s ease,
        --bench-auth-gradient-warm .85s ease,
        --bench-auth-gradient-mid .85s ease,
        --bench-auth-gradient-bright .85s ease,
        --bench-auth-gradient-soft .85s ease;
}

.auth-page-wrap--login::before,
.auth-page-wrap--register::before {
    content: "";
    position: fixed;
    z-index: -2;
    left: -18vw;
    right: -18vw;
    top: -12vh;
    height: 124vh;
    pointer-events: none;
    border-radius: 0 0 50% 50% / 0 0 34% 34%;
    background:
        radial-gradient(ellipse 80% 62% at 50% 82%,
            rgba(255, 255, 255, 0) 0 55%,
            var(--bench-auth-gradient-warm-soft) 60%,
            var(--bench-auth-gradient-warm) 65%,
            var(--bench-auth-gradient-mid) 70%,
            var(--bench-auth-gradient-bright) 75%,
            var(--bench-auth-gradient-soft) 80%,
            transparent 88%);
    filter: blur(10px) saturate(122%);
    opacity: .96;
    transform: translate3d(0, 1%, 0) scale(1.03);
    transform-origin: 50% 82%;
    animation: benchAuthGradient 16s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    will-change: transform;
}

.auth-page-wrap--login::after,
.auth-page-wrap--register::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(246, 250, 255, .34));
}

/* Frosted form surface keeps the animated horizon visible behind the card. */
.auth-page-wrap--login .auth-page-card,
.auth-page-wrap--register .auth-page-card {
    border: 1px solid rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 24px 72px rgba(30, 64, 175, .1);
    backdrop-filter: blur(22px) saturate(112%);
    -webkit-backdrop-filter: blur(22px) saturate(112%);
}

@keyframes benchAuthGradient {
    0% { transform: translate3d(-4%, 2%, 0) scale(1.01) rotate(-.35deg); opacity: .76; }
    50% { transform: translate3d(3%, -1%, 0) scale(1.1) rotate(.3deg); opacity: 1; }
    100% { transform: translate3d(-2%, 1%, 0) scale(1.045) rotate(-.12deg); opacity: .88; }
}

html[data-bench-theme="dark"] .auth-page-wrap--login::before,
html[data-bench-theme="dark"] .auth-page-wrap--register::before {
    opacity: .58;
    filter: blur(16px) saturate(118%);
}

html[data-bench-theme="dark"] .auth-page-wrap--login::after,
html[data-bench-theme="dark"] .auth-page-wrap--register::after {
    background: rgba(10, 12, 17, .68);
}

html[data-bench-theme="dark"] .auth-page-wrap--login .auth-page-card,
html[data-bench-theme="dark"] .auth-page-wrap--register .auth-page-card {
    border-color: rgba(255, 255, 255, .1) !important;
    background: rgba(23, 26, 33, .74) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(22px) saturate(108%);
    -webkit-backdrop-filter: blur(22px) saturate(108%);
}

@media (prefers-reduced-motion: reduce) {
    .auth-page-wrap--login::before,
    .auth-page-wrap--register::before {
        animation: none;
    }
}