/* Keep the original centred auth card. Motivations are small additions on desktop and a short landing on phones. */
.auth-compact { height: auto; min-height: 100%; background: #171717; }
.auth-compact .auth-page {
  min-height: 100vh; min-height: 100svh;
  flex-direction: column; gap: 18px; padding: 24px;
  overflow: clip; isolation: isolate;
  background: transparent;
}
.login-pixel-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .52; pointer-events: none; }
/* Aurora backdrop (trae-style) in the mmode palette: copper / mauve / teal / green
   blobs drifting slowly under the pixel canvas; cards stay above (z-index 1-2). */
.auth-compact::before {
  content: ''; position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 34% at 18% 20%, rgba(241, 125, 80, .10), transparent 70%),
    radial-gradient(34% 30% at 84% 16%, rgba(217, 119, 87, .07), transparent 70%),
    radial-gradient(42% 38% at 80% 80%, rgba(241, 125, 80, .06), transparent 70%);
  filter: blur(72px);
  will-change: transform;
  animation: loginAuroraA 26s ease-in-out infinite alternate;
}
.auth-compact::after {
  content: ''; position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(30% 26% at 62% 30%, rgba(217, 119, 87, .05), transparent 70%),
    radial-gradient(circle at 50% 42%, transparent 52%, rgba(0, 0, 0, .5) 100%);
  filter: blur(64px);
  will-change: transform;
  animation: loginAuroraB 34s ease-in-out infinite alternate;
}
@keyframes loginAuroraA {
  from { transform: rotate(-4deg) scale(1) translate(-2%, 1%); }
  to   { transform: rotate(5deg) scale(1.16) translate(3%, -2%); }
}
@keyframes loginAuroraB {
  from { transform: rotate(3deg) scale(1.08) translate(2%, 2%); }
  to   { transform: rotate(-5deg) scale(1) translate(-3%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-compact::before, .auth-compact::after { animation: none; }
}
.auth-welcome { position: relative; z-index: 2; text-align: center; max-width: 100%; }
.auth-welcome h1 { font-size: 28px; font-weight: 550; letter-spacing: -.8px; line-height: 1.2; }
.auth-welcome h1 > span:last-child { color: #f17d50; }
.auth-welcome > p { margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.auth-compact .auth-card { position: relative; z-index: 2; flex-shrink: 0; min-width: 0; }
.auth-compact .auth-logo { flex-wrap: wrap; }
.auth-compact .auth-logo-text { flex: 1 1 120px; min-width: 0; }
.auth-compact .auth-lang { margin-left: auto; }
.auth-compact .auth-form :is(input, button):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.auth-compact .auth-form input { font-size: 16px; }
.auth-compact .auth-form > .btn { white-space: normal; }
.auth-compact #pk-status:empty { display: none; }
.auth-compact .auth-flash { line-height: 1.45; }
.auth-compact .pass-toggle { min-width: 30px; min-height: 30px; justify-content: center; }
.auth-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.auth-motives { position: relative; z-index: 1; border: 0; width: min(960px, 100%); min-width: 0; }
.auth-motive-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.auth-motive-slot { display: flex; min-width: 0; }
.auth-motives:focus-visible { outline: 2px solid #f17d50; outline-offset: 6px; }
/* Cards grow from real canvas cells. Only the active cards own compositor
   layers; the static grid remains available without JS or with reduced motion. */
.auth-motives.pixel-motion { height: var(--pixel-stage-height, 280px); max-width: 960px; pointer-events: none; }
.auth-motives.pixel-motion .auth-motive-grid { display: block; }
.auth-motives.pixel-motion .auth-motive-slot { display: contents; }
.auth-motives.pixel-motion .auth-motive { position: absolute; top: 0; left: 0; width: 252px; visibility: hidden; pointer-events: none; }
.auth-motives.pixel-motion .auth-motive.is-active { visibility: visible; pointer-events: auto; }
.auth-motives.pixel-motion .auth-motive:not(.is-active) .telemetry-bars i { animation-play-state: paused; }
.auth-motives.pixel-motion.pixel-wide { position: fixed; inset: 0; width: auto; max-width: none; height: auto; }
.auth-motives.pixel-motion.pixel-wide:focus-visible { outline: none; }
.auth-motive-content { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.auth-motive {
  --telemetry-phase: 0s;
  position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 16px;
  border: 1px solid #ffffff22; border-radius: 4px; background: #232220f5;
  box-shadow: 0 25px 60px #0003;
}
.auth-motive-slot:nth-child(2) .auth-motive { --telemetry-phase: -.8s; }
.auth-motive-slot:nth-child(3) .auth-motive { --telemetry-phase: -1.6s; }
.auth-motive-slot:nth-child(4) .auth-motive { --telemetry-phase: -2.4s; }
.auth-motive-slot:nth-child(5) .auth-motive { --telemetry-phase: -3.2s; }
.auth-motive .telemetry-bracket { position: absolute; left: -1px; top: -1px; width: 23px; height: 23px; border-left: 2px solid #f17d50; border-top: 2px solid #f17d50; pointer-events: none; }
.auth-motive .auth-motive-tag { margin-bottom: 14px; color: #a2a8ad; font-size: 9px; line-height: 1.4; font-weight: 400; letter-spacing: 1px; }
.auth-motive h3 { font-family: inherit; font-size: 18px; font-weight: 550; letter-spacing: -.45px; line-height: 1.3; margin-bottom: 10px; hyphens: auto; overflow-wrap: anywhere; }
.auth-motive h3 em { display: block; font-style: normal; color: #f17d50; }
.auth-motive p:not(.auth-motive-tag) { color: #b5b4b1; font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.auth-motive-code, .auth-motive-contact { margin-top: auto; font: 10px/1.4 Consolas, monospace; letter-spacing: .5px; }
.auth-motive-code { color: #f17d50; }
.auth-motive-contact { align-self: flex-start; }
.auth-motive .telemetry-bars { display: flex; align-items: flex-end; gap: 4px; height: 24px; margin-top: 12px; pointer-events: none; }
.auth-motive .telemetry-bars i { display: block; width: 7px; height: 45%; background: #f17d5066; transform-origin: bottom; animation: loginBarBreathe 4s ease-in-out var(--telemetry-phase) infinite alternate; animation-play-state: paused; }
.auth-motive .telemetry-bars i:nth-child(3n) { height: 90%; animation-delay: calc(var(--telemetry-phase) - 1.5s); }
.auth-motive .telemetry-bars i:nth-child(2n) { height: 65%; animation-delay: calc(var(--telemetry-phase) - .7s); }
.auth-motive .telemetry-bars i:nth-child(5n) { height: 100%; animation-delay: calc(var(--telemetry-phase) - 2s); }
.auth-motives.is-in-view .telemetry-bars i { animation-play-state: running; }
.login-motion-paused .auth-motive .telemetry-bars i { animation-play-state: paused; }
@keyframes loginBarBreathe { from { transform: scaleY(.7); opacity: .5; } to { transform: scaleY(1); opacity: .85; } }
@keyframes compactLoginEnter { from { opacity: .2; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.login-first-visit .auth-compact .auth-card { animation: compactLoginEnter .55s ease-out both; }
.auth-intro-pending .auth-compact .auth-page .auth-intro * { animation-play-state: paused; }
/* Short desktop windows keep the form and cards next to each other. */
@media (min-width: 761px) and (max-width: 1099px), (min-width: 761px) and (max-height: 720px) {
  .auth-compact .auth-page { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 500px); gap: 16px 20px; padding: 16px; align-content: center; }
  .auth-compact .auth-page:has(.pixel-motion) { column-gap: 12px; }
  .auth-welcome { grid-column: 1 / -1; }
  .auth-motive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-motive { padding: 12px; }
  .auth-motive h3 { font-size: 17px; margin-bottom: 7px; }
  .auth-motive p:not(.auth-motive-tag) { margin-bottom: 4px; }
  .auth-motive .auth-motive-tag { font-size: 8px; margin-bottom: 5px; }
  .auth-motive .telemetry-bars { height: 16px; margin-top: 8px; }
}
/* On phones the same cards form a short landing below the login form. */
@media (max-width: 760px) {
  .auth-compact .auth-page { justify-content: flex-start; gap: 20px; padding: 28px 20px; }
  .auth-compact .auth-card { margin-top: auto; margin-bottom: auto; }
  .auth-welcome { max-width: 400px; }
  .auth-welcome h1 { font-size: 26px; letter-spacing: -.7px; }
  .auth-motives { max-width: 400px; }
  .auth-motives.pixel-motion { margin-top: -8px; }
  .auth-motive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-motive { padding: 14px; }
  .auth-motive h3 { font-size: 18px; }
  .auth-motive .auth-motive-tag { font-size: 8px; letter-spacing: .5px; }
  .auth-motive-contact { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 11px; letter-spacing: 0; }
}
@media (max-width: 480px) {
  .auth-compact .auth-page { padding: 24px 16px; gap: 18px; }
  .auth-motives.pixel-motion { margin-top: -6px; }
  .auth-welcome h1 { font-size: 24px; letter-spacing: -.7px; }
  .auth-welcome > p { font-size: 12px; }
  .auth-compact .auth-card { padding: 20px; gap: 12px; }
  .auth-compact .auth-logo { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 4px 10px; }
  .auth-compact .auth-intro { --logo: 46px; grid-row: 1 / 3; }
  .auth-compact .auth-title { font-size: 20px; }
  .auth-compact .auth-subtitle { font-size: 11px; }
  .auth-compact .auth-logo-text { gap: 1px; }
  .auth-compact .auth-lang { grid-column: 2; margin-left: 0; justify-self: start; }
}
@media (max-width: 359px) {
  .auth-motive-grid { grid-template-columns: 1fr; }
  .auth-motive h3 em { display: inline; }
}
/* Wide screens use the empty space beside the form, without adding scroll. */
@media (min-width: 1100px) and (min-height: 620px) {
  .auth-compact .auth-page:has(.pixel-wide) { display: flex; flex-direction: column; padding: 24px; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-compact *, .auth-compact *::before, .auth-compact *::after { animation: none !important; transition: none !important; }
  .auth-compact .mmd-intro__smoke, .auth-compact .mmd-intro__smoke-loop { display: none; }
  .auth-compact .mmd-intro__bmw { transform: translate(0, -50%) rotate(var(--roll-tilt)); }
}