/*
 * Okularity v14.0.38 — bounded, compositor-friendly sign-in atmosphere.
 * No canvas, backdrop filters, blend modes, animated blur or moving full-screen
 * texture. Gradients/shadows are static paint; only small layers move/fade.
 * The static scene is the default. JavaScript opts into motion after setup.
 */
.login-body {
    background: #050a18;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
}
.login-body::before, .login-body::after { display: none; }
.login-atmosphere {
    --oku-glow-size: 680px;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    background:
        radial-gradient(ellipse at 14% 20%, #173853 0, transparent 54%),
        radial-gradient(ellipse at 89% 79%, #422637 0, transparent 52%),
        radial-gradient(ellipse at 22% 92%, #102f3e 0, transparent 45%),
        #060c1b;
}
/* Each moving surface is <= 760 CSS pixels and is further capped in device
   pixels by JS. Nothing is sized from the diagonal of a large monitor. */
.login-glow {
    display: block;
    position: absolute;
    width: min(84vw, var(--oku-glow-size));
    height: min(84vw, var(--oku-glow-size));
    contain: strict;
    pointer-events: none;
}
.login-glow--blue {
    left: calc(23% - min(84vw, var(--oku-glow-size)) / 2);
    top: calc(29% - min(84vw, var(--oku-glow-size)) / 2);
    background: radial-gradient(ellipse at 48% 47%, #4786ac70 0, #34729736 29%, #244c7020 46%, transparent 70%);
}
.login-glow--coral {
    right: calc(18% - min(84vw, var(--oku-glow-size)) / 2);
    bottom: calc(24% - min(84vw, var(--oku-glow-size)) / 2);
    background: radial-gradient(ellipse at 52% 48%, #ee7d6552 0, #ad59612e 28%, #62304d18 49%, transparent 71%);
}
.login-glow--violet {
    left: calc(60% - min(84vw, var(--oku-glow-size)) / 2);
    top: calc(16% - min(84vw, var(--oku-glow-size)) / 2);
    background: radial-gradient(ellipse at 47% 52%, #9671b947 0, #6c54872e 27%, #35305016 47%, transparent 69%);
}
.login-body[data-login-motion="on"] .login-glow--blue {
    animation: oku-glow-blue 13s ease-in-out infinite alternate;
}
.login-body[data-login-motion="on"] .login-glow--coral {
    animation: oku-glow-coral 17s ease-in-out infinite alternate;
}
.login-body[data-login-motion="on"] .login-glow--violet {
    animation: oku-glow-violet 19s ease-in-out infinite alternate;
}
/* Twelve tiny lights, not 120 freshly generated radial gradients per frame.
   Positions and initial phases are assigned once; no per-frame DOM writes. */
.login-sprite {
    display: block;
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c2dfed;
    box-shadow: 0 0 7px 2px #96c8e333;
    opacity: 0;
    pointer-events: none;
}
.login-sprite:nth-of-type(3n) {
    background: #f2b5a3;
    box-shadow: 0 0 7px 2px #ee927233;
}
.login-body[data-login-motion="on"] .login-sprite {
    animation: oku-sprite-drift var(--oku-sprite-duration, 18s) ease-in-out infinite alternate;
}
.login-body .login-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 64px 24px;
    background: none;
}
.login-body .login-form-panel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: none;
}
/* Opaque, shaded glass look. No live backdrop blur of the moving scene. */
.login-body .login-card {
    position: relative;
    width: min(100%, 460px);
    padding: 44px 40px 36px;
    border: 1px solid #cbd7f12a;
    border-radius: 28px;
    background: linear-gradient(145deg, #192640, #0b1428 68%, #16192e);
    box-shadow: 0 24px 64px #00071680, inset 0 1px 0 #ffffff12;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #edf4fb;
}
.login-body .login-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ff795bbb 48%, #8fc7ff88 68%, transparent);
}
.login-body .login-card::after { display: none; }
.login-body .login-logo { display: block; max-width: 220px; margin: 0 auto 24px; }
.login-body .login-logo img { display: block; width: 100%; height: auto; filter: none; }
.login-welcome { text-align: center; margin: -2px 0 30px; }
.login-mantra {
    margin: 0 0 14px;
    color: #ee735d;
    font: 700 10px/1.4 Montserrat, sans-serif;
    letter-spacing: .235em;
    text-transform: uppercase;
}
/* Same 4-second focus cycle. Crossfade a crisp word with a once-painted soft
   copy. The shadows NEVER animate; only opacity changes. No layout movement. */
.login-focus-word { display: inline-block; position: relative; color: #ff7b63; white-space: nowrap; }
.login-focus-sharp { display: inline-block; opacity: 1; }
.login-focus-soft {
    display: block;
    position: absolute;
    inset: 0;
    color: transparent;
    text-shadow: 0 0 3px #ff7b63, 0 0 7px #ff7b6380;
    opacity: 0;
    pointer-events: none;
}
.login-body[data-login-motion="on"] .login-focus-sharp { animation: oku-focus-clear 4s ease-in-out infinite; }
.login-body[data-login-motion="on"] .login-focus-soft { animation: oku-focus-soft 4s ease-in-out infinite; }
.login-welcome h1 { font-family: Montserrat, sans-serif; font-size: 28px; letter-spacing: -.035em; color: #f4f6fb; margin: 0; }
.login-body .login-card .login-field input {
    background: #091224;
    border: 1px solid #93afcf35;
    border-radius: 13px;
    min-height: 56px;
    color: #f0f4fa;
    color-scheme: dark;
}
.login-body .login-card .login-field input:focus { border-color: #e66a54dc; box-shadow: 0 0 0 3px #df604d20; background: #0c1830; outline: none; }
.login-body .login-card .login-field input::placeholder { color: #aabbd2; opacity: 1; }
.login-body .login-form .button-primary {
    min-height: 56px;
    border-radius: 13px;
    background: linear-gradient(110deg, #df432c, #c72d1d);
    border: 1px solid #ff856a4d;
    box-shadow: 0 8px 24px #d83b2726;
    transition: transform .18s ease;
}
.login-body .login-form .button-primary:hover { transform: translateY(-1px); filter: none; }
.login-body .login-form .button-primary:focus-visible { outline: 2px solid #ffd0c1; outline-offset: 4px; }
.login-copyright { text-align: center; color: #75839b; letter-spacing: .045em; font-size: 10px; margin: 25px 0 0; }
.login-body .login-challenge-card, .login-body .password-setup-card { max-width: 540px; }
.login-body .login-challenge-copy h1 { color: #f4f6fb; }
.login-body .login-challenge-copy p { color: #b8c7dd; }
.login-body .login-card .alert { color: #edf4fb; }

@keyframes oku-glow-blue {
    from { transform: translate3d(-145px, -90px, 0); }
    to { transform: translate3d(170px, 125px, 0); }
}
@keyframes oku-glow-coral {
    from { transform: translate3d(115px, 110px, 0); }
    to { transform: translate3d(-155px, -110px, 0); }
}
@keyframes oku-glow-violet {
    from { transform: translate3d(-125px, 80px, 0); }
    to { transform: translate3d(135px, -85px, 0); }
}
@keyframes oku-sprite-drift {
    0% { transform: translate3d(-50px, 80px, 0); opacity: .14; }
    50% { opacity: .72; }
    100% { transform: translate3d(75px, -110px, 0); opacity: .25; }
}
@keyframes oku-focus-clear {
    0%, 27%, 77%, 100% { opacity: 1; }
    47%, 55% { opacity: 0; }
}
@keyframes oku-focus-soft {
    0%, 27%, 77%, 100% { opacity: 0; }
    47%, 55% { opacity: .95; }
}
/* Lower-end hardware or sustained missed frames: only two glow surfaces, one light shaft and
   the tiny focus word remain animated. Sprites do not consume compositing work. */
.login-body[data-login-quality="lite"] .login-glow--violet,
.login-body[data-login-quality="lite"] .login-sprite { display: none; }
/* Pause CSS as well as JS when the document is hidden or placed in bfcache. */
.login-body[data-login-suspended="true"] .login-glow,
.login-body[data-login-suspended="true"] .login-sprite,
.login-body[data-login-suspended="true"] .login-focus-sharp,
.login-body[data-login-suspended="true"] .login-focus-soft { animation-play-state: paused !important; }
/* Static fallback retains the artwork and leaves FOCUS sharp. */
.login-body[data-login-motion="off"] .login-glow,
.login-body[data-login-motion="off"] .login-sprite,
.login-body[data-login-motion="off"] .login-focus-sharp,
.login-body[data-login-motion="off"] .login-focus-soft { animation: none !important; }
.login-body[data-login-motion="off"] .login-focus-sharp { opacity: 1; }
.login-body[data-login-motion="off"] .login-focus-soft { opacity: 0; }
@media (max-width: 600px) {
    .login-body .login-shell { padding: 28px 18px 52px; }
    .login-body .login-card { padding: 34px 25px; border-radius: 24px; }
    .login-body .login-logo { margin-bottom: 22px; }
    .login-mantra { font-size: 9px; letter-spacing: .18em; }
    .login-welcome h1 { font-size: 26px; }
    .login-sprite:nth-child(n+7) { display: none; }
    .login-glow--violet { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .login-body *, .login-body *::before, .login-body *::after { animation: none !important; transition: none !important; }
    .login-focus-sharp { opacity: 1 !important; }
    .login-focus-soft, .login-sprite { display: none !important; }
}
@media (forced-colors: active) {
    .login-atmosphere { display: none; }
    .login-focus-sharp { opacity: 1 !important; animation: none !important; }
    .login-focus-soft { display: none !important; }
}

/* v38: top-down light shafts, painted once to a small WebP texture.
   No canvas, masks, animated gradients/filters or backdrop blur. */
.login-spotlight {
    position:absolute;
    width:var(--oku-beam-width, 490px);
    height:var(--oku-beam-height, 920px);
    left:calc(50% - var(--oku-beam-width, 490px) / 2);
    top:-35px;
    contain:strict;
    transform-origin:50% 0;
    pointer-events:none;
    background-repeat:no-repeat;
    background-size:100% 100%;
    opacity:.48;
}
.login-spotlight--cyan {
    background-image:url('../images/login-beam-cyan.webp');
    transform:translate3d(-80px,0,0) rotate(-17deg);
}
.login-spotlight--coral {
    background-image:url('../images/login-beam-coral.webp');
    transform:translate3d(105px,0,0) rotate(14deg);
    opacity:.33;
}
.login-body[data-login-motion="on"] .login-spotlight--cyan { animation:oku-beam-cyan 16s ease-in-out infinite alternate; }
.login-body[data-login-motion="on"] .login-spotlight--coral { animation:oku-beam-coral 21s ease-in-out infinite alternate; animation-delay:-11s; }
/* A faint reflected wash across the top of the card, not a full-card filter. */
.login-body .login-card::after {
    display:block; content:""; position:absolute; pointer-events:none;
    left:0; top:0; width:100%; height:125px; border-radius:inherit;
    background:radial-gradient(ellipse at 22% 0, #7bcff32c, transparent 64%),
        radial-gradient(ellipse at 90% 0, #e9938322, transparent 56%);
    opacity:.35;
}
.login-body[data-login-motion="on"] .login-card::after { animation:oku-card-reflection 8s ease-in-out infinite alternate; }
@keyframes oku-beam-cyan {
    0% { transform:translate3d(-100px,0,0) rotate(-20deg); opacity:.4; }
    50% { opacity:.84; }
    100% { transform:translate3d(55px,0,0) rotate(13deg); opacity:.57; }
}
@keyframes oku-beam-coral {
    0% { transform:translate3d(115px,0,0) rotate(18deg); opacity:.31; }
    50% { opacity:.69; }
    100% { transform:translate3d(-65px,0,0) rotate(-14deg); opacity:.42; }
}
@keyframes oku-card-reflection { from { opacity:.15; } to { opacity:.9; } }
.login-body[data-login-quality="lite"] .login-spotlight--coral { display:none; }
.login-body[data-login-suspended="true"] .login-spotlight,
.login-body[data-login-suspended="true"] .login-card::after { animation-play-state:paused !important; }
.login-body[data-login-motion="off"] .login-spotlight,
.login-body[data-login-motion="off"] .login-card::after { animation:none !important; }
@media (max-width:600px) {
    .login-spotlight { top:-80px; }
    .login-spotlight--coral { display:none; }
    .login-glow { width:min(78vw, var(--oku-glow-size)); height:min(78vw, var(--oku-glow-size)); }
}
@media (prefers-reduced-motion:reduce) {
    .login-body .login-spotlight, .login-body .login-card::after { animation:none !important; }
}