/* Monochrome liquid metal + a light travelling around the entry card. */
@property --beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.login-shell { isolation: isolate; box-shadow: 0 30px 90px #00000030, 0 2px 8px #00000014; }
.login-shell::after {
  position: absolute; z-index: 4; inset: 0; padding: 1px; border-radius: inherit;
  background: conic-gradient(from var(--beam-angle), transparent 0% 76%, #bfc2c50c 83%, #e8e8e78c 91%, #ffffffed 94%, transparent 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  content: ''; pointer-events: none; animation: chrome-border-orbit 12s linear infinite;
}
.login-shell::before { z-index: 3; opacity: .32; }
.chrome-scene { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.chrome-canvas { display: block; width: 100%; height: 100%; }
.chrome-scene::after {
  position: absolute; inset: 0; content: ''; pointer-events: none;
  background: linear-gradient(90deg, #131416f5 0%, #131416c9 27%, #13141650 66%, #1314160a 100%),
    linear-gradient(180deg, #131416db 0%, #13141638 29%, transparent 58%, #131416bb 92%, #131416 100%);
}
.login-story.has-chrome .chrome-scene { opacity: 1; }
.login-story.has-chrome .login-story-art { opacity: 0; }
.login-story.has-chrome .ribbon-art, .login-story.has-chrome .ribbon-tracer, .login-story.has-chrome .ribbon-marker { animation: none; }
.login-story-brand, .login-story-copy, .login-features { position: relative; z-index: 2; }
.login-story-copy h2 { text-shadow: 0 2px 22px #13141680; }
.login-story .login-feature { width: fit-content; }
.login-story .login-feature .ui-icon { color: #b7b9bf; }
.login-card { position: relative; background: linear-gradient(155deg, #ffffff03, transparent 38%), var(--surface); }
.login-access-badge { border-color: var(--line-strong); background: var(--brand-soft); }
.discord-login-button, .login-card .primary-button {
  min-height: 50px; border-color: #ffffff24; box-shadow: 0 1px 0 #ffffff3b inset, 0 4px 12px #00000010;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s;
}
.discord-login-button:hover, .login-card .primary-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 1px 0 #ffffff3b inset, 0 8px 24px #00000020; }
.discord-login-button:active, .login-card .primary-button:not(:disabled):active { transform: translateY(0); }
html[data-theme='light'] .login-shell { box-shadow: 0 28px 70px #2020200b, 0 2px 8px #20202005; }
html[data-theme='light'] .login-shell::after { background: conic-gradient(from var(--beam-angle), transparent 0% 76%, #38383808 83%, #38383850 91%, #2222229c 94%, transparent 98%); }
html[data-theme='light'] .chrome-scene::after {
  background: linear-gradient(90deg, #fafaf8f5 0%, #fafaf8c9 27%, #fafaf850 66%, #fafaf80a 100%),
    linear-gradient(180deg, #fafaf8db 0%, #fafaf838 29%, transparent 58%, #fafaf8bb 92%, #fafaf8 100%);
}
html[data-theme='light'] .login-story-copy h2 { text-shadow: 0 2px 22px #fafaf8aa; }
html[data-theme='light'] .login-story .login-feature .ui-icon { color: var(--muted); }
html[data-theme='light'] .discord-login-button, html[data-theme='light'] .login-card .primary-button { border-color: #00000020; }
@keyframes chrome-border-orbit { to { --beam-angle: 360deg; } }
@media (max-width: 600px) {
  .chrome-scene::after { background: linear-gradient(90deg, #131416f5 0%, #131416b3 36%, #13141633 100%), linear-gradient(180deg, #131416a6, transparent 60%, #13141640); }
  html[data-theme='light'] .chrome-scene::after { background: linear-gradient(90deg, #fafaf8f5 0%, #fafaf8b3 36%, #fafaf833 100%), linear-gradient(180deg, #fafaf8a6, transparent 60%, #fafaf840); }
}
@media (forced-colors: active) { .chrome-scene, .login-shell::after { display: none; } }
/* The shared motion-off and reduced-motion rules override this layer too. */