body.auth-screen[data-login-background]{position:relative;isolation:isolate;min-height:100dvh}
body.auth-screen[data-login-background]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body.auth-screen[data-login-background="contours"]::before{background:linear-gradient(90deg,transparent, #202322 65%),url("login-contours.svg") center/cover}
body.auth-screen[data-login-background="light"]::before{background:radial-gradient(ellipse at 14% 12%,#91a85818,transparent 48%),radial-gradient(ellipse at 92% 85%,#78b7c416,transparent 48%),radial-gradient(ellipse at 55% 48%,#30363255,transparent 55%)}
body.auth-screen[data-login-background="lanes"]::before{background:linear-gradient(90deg,#20232200,#202322 47%,#202322 58%,#20232200),repeating-linear-gradient(128deg,transparent 0 119px,#b9c8be09 120px 121px,transparent 122px 240px)}

body.auth-screen[data-login-background="lanes"]::before{
 background:linear-gradient(90deg,#20232200,#202322 43%,#202322 62%,#20232200),repeating-linear-gradient(128deg,transparent 0 119px,#b9c8be0b 120px 121px,transparent 122px 240px);
 background-size:100% 100%,600px 600px;
 animation:base-lanes-drift 50s linear infinite;
}
body.auth-screen[data-login-background="lanes"]::after{
 content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 12% 25%,#d0fa6912,transparent 40%),radial-gradient(ellipse at 87% 75%,#6ccee414,transparent 40%),radial-gradient(ellipse at 75% 15%,#b49ade0c,transparent 32%);
 animation:base-ci-light 24s ease-in-out infinite alternate;
}
@keyframes base-lanes-drift{from{background-position:0 0,0 0}to{background-position:0 0,600px 600px}}
@keyframes base-ci-light{from{transform:translate3d(-1%,0,0);opacity:.55}to{transform:translate3d(1%,2%,0);opacity:1}}
@media(prefers-reduced-motion:reduce){body.auth-screen[data-login-background="lanes"]::before,body.auth-screen[data-login-background="lanes"]::after{animation:none}}

/* Center the complete login group within the available screen. */
body.look-apple.background-air.auth-screen{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box;min-height:100dvh!important;gap:0!important;padding:32px 24px!important}
body.look-apple.background-air.auth-screen .login-panel{position:relative;z-index:1;flex:0 1 390px;margin:0!important}
body.auth-screen[data-login-background="lanes"]::before{background-image:repeating-linear-gradient(128deg,transparent 0 119px,#b9c8be0b 120px 121px,transparent 122px 240px);background-size:600px 600px;animation:base-lanes-full 50s linear infinite}
body.auth-screen[data-login-background="lanes"]::after{background:radial-gradient(ellipse at 28% 40%,#d0fa691a,transparent 48%),radial-gradient(ellipse at 72% 64%,#6ccee41c,transparent 46%),radial-gradient(ellipse at 52% 22%,#b49ade14,transparent 40%)}
@keyframes base-lanes-full{from{background-position:0 0}to{background-position:600px 600px}}
@media(prefers-reduced-motion:reduce){body.auth-screen[data-login-background="lanes"]::before,body.auth-screen[data-login-background="lanes"]::after{animation:none}}

/* Generated CI artwork, with a slow pan and zoom behind the login. */
body.auth-screen[data-login-background="lanes"]::before{inset:-3%;background:linear-gradient(#20232222,#20232222),url("base-login-training-illustration.webp") center/cover no-repeat;animation:base-image-drift 36s ease-in-out infinite alternate;will-change:transform}
body.auth-screen[data-login-background="lanes"]::after{background:radial-gradient(ellipse at center,#20232218,transparent 65%);animation:none}
@keyframes base-image-drift{from{transform:scale(1) translate3d(-.5%,0,0)}to{transform:scale(1.035) translate3d(.5%,.5%,0)}}
@media(prefers-reduced-motion:reduce){body.auth-screen[data-login-background="lanes"]::before{animation:none;will-change:auto}}

/* Clearly visible movement along the artwork's flowing tracks. */
body.auth-screen[data-login-background="lanes"]::before{inset:-10%;animation:base-image-flow 14s ease-in-out infinite alternate}
body.auth-screen[data-login-background="lanes"]::after{inset:-15%;background:linear-gradient(128deg,transparent 20%,#d0fa690c 33%,#6ccee422 40%,#b49ade12 47%,transparent 60%);background-size:220% 220%;mix-blend-mode:screen;animation:base-track-light 12s ease-in-out infinite alternate}
@keyframes base-image-flow{from{transform:scale(1) translate3d(-3%,-2%,0) rotate(-.5deg)}to{transform:scale(1.08) translate3d(3%,2%,0) rotate(.5deg)}}
@keyframes base-track-light{from{background-position:0% 20%;opacity:.35}to{background-position:100% 80%;opacity:.85}}
@media(prefers-reduced-motion:reduce){body.auth-screen[data-login-background="lanes"]::before,body.auth-screen[data-login-background="lanes"]::after{animation:none;transform:none}}

/* Calm illustrated training backdrop, with a clear central login area. */
body.auth-screen[data-login-background="lanes"]::before{inset:0;background:linear-gradient(#20232230,#20232230),url("base-login-training-illustration.webp") center/cover no-repeat;animation:none;transform:none;will-change:auto}
body.auth-screen[data-login-background="lanes"]::after{inset:0;background:radial-gradient(ellipse at center,#20232220,transparent 65%);animation:none;mix-blend-mode:normal}

@media(max-width:600px){
 body.auth-screen[data-login-background="lanes"]::before{background-image:linear-gradient(#20232230,#20232230),url("base-login-training-mobile.webp");background-position:center;background-size:cover}
 body.auth-screen[data-login-background="lanes"]::after{background:linear-gradient(transparent 18%,#20232255 30%,#20232255 70%,transparent 84%)}
}

/* Sport-specific light follows the equipment and route, behind the login. */
.login-sport-accents{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.login-sport-accents svg{position:absolute;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.login-neon-mobile{display:none}
.neon-gym{stroke:#ba97ed;stroke-width:2.4;filter:drop-shadow(0 0 5px #aa72ed);animation:base-gym-pulse 5s ease-in-out infinite}
.neon-bike{stroke:#64d7f4;stroke-width:2.3;filter:drop-shadow(0 0 5px #41cfee);animation:base-bike-pulse 6s ease-in-out infinite}
.neon-road{stroke:#d0fa69;stroke-width:2.5;stroke-dasharray:65 300;filter:drop-shadow(0 0 5px #c7ef67);opacity:.65;animation:base-road-flow 12s linear infinite}
@keyframes base-gym-pulse{0%,100%{opacity:.45}45%{opacity:.95}65%{opacity:.65}}
@keyframes base-bike-pulse{0%,100%{opacity:.45}55%{opacity:.9}}
@keyframes base-road-flow{to{stroke-dashoffset:-730}}
@media(max-width:600px){.login-neon-desktop{display:none}.login-neon-mobile{display:block}.neon-gym,.neon-bike{stroke-width:2}.neon-road{stroke-width:2.5;stroke-dasharray:40 170}}
@media(prefers-reduced-motion:reduce){.neon-gym,.neon-bike,.neon-road{animation:none;opacity:.5}}
