body.account-atmosphere{background:#060e0c;isolation:isolate}.account-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#07100c}.scene-art{position:absolute;inset:-4%;background:url('account-portal.webp') center/cover no-repeat;animation:portal-camera 28s ease-in-out infinite alternate;will-change:transform}.account-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#040c07d9 0%,#040c0755 45%,#04100a15 75%),linear-gradient(0deg,#040b09 0%,transparent 30%,#040b0920 80%)}.scene-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 42%,#63ff6e30,transparent 48%);mix-blend-mode:screen;animation:portal-breath 7s ease-in-out infinite alternate}.scene-mist{position:absolute;inset:40% -20% -20%;background:radial-gradient(ellipse at 30% 75%,#99d39425,transparent 48%),radial-gradient(ellipse at 75% 65%,#76c8a825,transparent 50%);filter:blur(22px);animation:portal-mist 22s ease-in-out infinite alternate}.scene-sparks{position:absolute;inset:0}.scene-sparks i{position:absolute;left:var(--x);bottom:-20px;width:var(--size);height:var(--size);border-radius:50%;background:#dafba1;box-shadow:0 0 8px 2px #88ee6377;animation:portal-spark var(--duration) linear infinite;animation-delay:var(--delay)}.account-atmosphere main{position:relative;padding-top:38px;min-height:calc(100svh - 180px)}.account-atmosphere .login{margin:0 auto;max-width:430px}.account-atmosphere .crest{height:130px;width:280px;filter:drop-shadow(0 4px 18px #000)}.account-atmosphere .login-box{background:linear-gradient(135deg,#14231ef5,#090f0efa);box-shadow:0 24px 80px #000b,0 0 45px #72ce5912;backdrop-filter:blur(10px)}.account-atmosphere .account-cover{background:linear-gradient(90deg,#06160bf5,#06160b55),url('account-portal.webp') center 48%/cover}.account-atmosphere .gold-button{transition:box-shadow .25s,transform .25s}.account-atmosphere .gold-button:hover{box-shadow:0 0 24px #d6bd6950;transform:translateY(-2px)}.effects-toggle{position:fixed;right:20px;bottom:20px;z-index:20;color:#e6d9b4;background:#09170ee8;border:1px solid #a18c57;padding:10px 15px;font-size:13px;border-radius:4px;backdrop-filter:blur(10px)}.effects-paused .account-scene *{animation-play-state:paused!important}.account-atmosphere footer{position:relative;text-shadow:0 2px 6px #000;padding-bottom:65px;color:#b6bbab}@keyframes portal-camera{from{transform:scale(1) translateX(-.5%)}to{transform:scale(1.055) translateX(1%)}}@keyframes portal-breath{from{opacity:.3}to{opacity:1}}@keyframes portal-mist{from{transform:translateX(-5%);opacity:.4}to{transform:translateX(7%);opacity:.9}}@keyframes portal-spark{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.7}80%{opacity:.5}100%{transform:translate3d(80px,-95vh,0);opacity:0}}@media(max-width:750px){.account-atmosphere .login{margin:auto}.account-atmosphere main{padding-top:20px}.scene-art{background-position:62% center}.account-scene:after{background:linear-gradient(#05110944,#05110999)}.account-atmosphere .crest{height:115px}.effects-toggle{right:12px;bottom:12px}.scene-sparks i:nth-child(n+15){display:none}}@media(prefers-reduced-motion:reduce){.account-scene *{animation:none!important}.account-atmosphere .gold-button{transition:none}}
/* Clear login panel reveals the animated scene through its medieval frame. */
.account-atmosphere .login-box{background:transparent;backdrop-filter:none;box-shadow:none}
.account-atmosphere .login-box .panel-title{background:transparent;box-shadow:none}
.account-atmosphere .login-box h1,.account-atmosphere .login-box p,.account-atmosphere .login-box label,.account-atmosphere .login-box .notice,.account-atmosphere .login-box .back,.account-atmosphere .login-box .panel-title{text-shadow:0 2px 3px #000,0 0 8px #000,0 0 16px #000;color:#f0e4c6}
.account-atmosphere .login-box h1{color:#f2d28b}
.account-atmosphere .login-box input{background:#06100a80}

/* A separate animated Warcraft scene inside the account frame. */
.account-atmosphere .login-box{isolation:isolate;background:#09101a}
.login-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.login-art-image{position:absolute;inset:-5%;background:linear-gradient(#060a1555,#060a1599),url('login-sanctum.webp') center/cover;animation:sanctum-drift 22s ease-in-out infinite alternate}
.login-art-light{position:absolute;inset:-30%;background:radial-gradient(ellipse at 35% 35%,#9ca3ff40,transparent 45%),linear-gradient(115deg,transparent 35%,#9addff16 48%,transparent 62%);mix-blend-mode:screen;animation:sanctum-light 9s ease-in-out infinite alternate}
.account-atmosphere .login-box input{background:#060b16aa}
@keyframes sanctum-drift{from{transform:scale(1);background-position:45% center}to{transform:scale(1.07);background-position:55% center}}
@keyframes sanctum-light{from{opacity:.25;transform:translate(-4%,-2%)}to{opacity:.85;transform:translate(5%,4%)}}
@media(prefers-reduced-motion:reduce){.login-art *{animation:none!important}}