/* css/screens/login.css — Grand Mumtoz Director · Login (DESIGN-core §5.0 + VIDEO-INSIGHTS §1 lamp, §2 code boxes).
   Tokens only. Motion: transform / opacity / stroke-dashoffset only. */
.login { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b)); overflow: hidden; background: var(--bg-0); }
.login__hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 420px; }
.login__ornament { position: absolute; top: -30px; left: 50%; width: 260px; height: 260px; transform: translateX(-50%); fill: none; stroke: var(--accent); stroke-width: .8; opacity: .07; pointer-events: none; }
.login__ornament g path, .login__ornament g circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: loginDraw 1.2s var(--e-velvet) forwards; }
.login__glow { position: absolute; top: 40px; left: 50%; width: 520px; height: 420px; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 420ms ease-out;
  background: radial-gradient(ellipse 50% 45% at 50% 22%, var(--lamp-warm), transparent 70%); }
.login.is-lit .login__glow { opacity: .22; }
html[data-theme="light"] .login.is-lit .login__glow { opacity: .45; }
.login.is-instant .login__glow, .login.is-instant .login__card { transition: none; }

/* --- the lamp --- */
.login__lamp { position: relative; z-index: 1; display: block; width: 96px; height: 120px; -webkit-tap-highlight-color: transparent; border-radius: var(--r-md); }
.lamp { display: block; width: 100%; height: 100%; overflow: visible; }
.lamp__base, .lamp__stem { fill: var(--accent); }
.lamp__base { opacity: .9; }
.lamp__shade { fill: var(--bg-3); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; transition: fill 420ms ease-out; }
.lamp__rim { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.lamp__bulb { fill: var(--lamp-warm); opacity: 0; transition: opacity 420ms ease-out; }
.lamp__cord { transform-origin: 128px 90px; animation: cordSwing 6s ease-in-out infinite; transition: transform 180ms var(--e-velvet); cursor: grab; }
.lamp__cord line { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.lamp__cordbead { fill: var(--accent-strong); }
.lamp__cord.is-pull { animation: cordPull 180ms var(--e-velvet); }
.lamp__cord.is-dragging { animation: none; transition: none; cursor: grabbing; }
.login.is-lit .lamp__shade { fill: var(--lamp-warm); }
.login.is-lit .lamp__bulb { opacity: 1; }
.login.is-lit .lamp__cord { animation: none; }
@keyframes cordSwing { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }
@keyframes cordPull { 0% { transform: translateY(0); } 55% { transform: translateY(14px); } 100% { transform: translateY(0); } }
@keyframes loginDraw { to { stroke-dashoffset: 0; } }

.login__brand { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.login__brand .wordmark { font-size: 32px; line-height: 36px; }
.login__brand .overline { overflow: visible; white-space: normal; }
.login__caption { margin-top: 8px; }

/* --- card --- */
.login__side { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; }
.login__card { padding: 20px 18px 16px; border-radius: var(--r-lg); border-top-color: var(--line-gold); opacity: .6; transition: opacity 420ms ease-out, transform 160ms var(--e-exit); }
.login.is-lit .login__card { opacity: 1; }
.login__card.is-leaving { opacity: 0 !important; transform: scale(.98); }
.login__note:not(:empty) { margin-bottom: 12px; }
.login__banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.login__hint { margin: 4px 0 16px; }
.login__code { margin-bottom: 8px; }
.login__boxes { gap: 8px; padding: 6px 0 10px; }
.login__boxes .code-input__cell { width: 44px; height: 52px; font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color var(--t-short), box-shadow var(--t-short), transform 240ms var(--e-velvet), opacity 200ms; }
.login__boxes .code-input__cell.is-filled { color: var(--text-1); border-color: var(--line-strong); }
.login__boxes .code-input__cell.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 14px var(--bead-glow); }
@media (max-width: 359px) { .login__boxes { flex-wrap: wrap; max-width: 160px; margin: 0 auto; } }
.login__line { position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; width: calc(100% - 12px); transform: translateY(-2px); pointer-events: none; }
.login__line path { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.code-input.is-verifying .code-input__cell { transform: scale(.92); }
.code-input.is-verifying .login__line path { opacity: .9; animation: loginLine 500ms var(--e-velvet) forwards; }
@keyframes loginLine { to { stroke-dashoffset: 0; } }
.code-input.is-locked { opacity: 1; }
.login__msg { min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; font: 500 13px/18px var(--font-ui); color: var(--text-2); margin-bottom: 10px; }
.login__msgText.tone--danger { color: var(--danger); }
.login__btn { margin-top: 2px; }
.login__links { display: flex; justify-content: center; margin-top: 10px; }
.login__other { font: 500 13px/18px var(--font-ui); color: var(--accent); min-height: 32px; padding: 0 8px; }
.login__remember { margin-top: 6px; cursor: pointer; }
.login__otherInput { text-align: center; letter-spacing: .1em; }

/* on-screen keypad (coarse pointers) */
.login__keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 260px; margin: 4px auto 0; }
.login__key { height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-3); color: var(--text-1); font: 700 20px/48px var(--font-ui); text-align: center; display: inline-grid; place-items: center; transition: transform var(--t-micro), background-color var(--t-micro); user-select: none; }
.login__key:active { transform: scale(.96); background: var(--bg-4); }
.login__key--back { color: var(--text-2); }
.login__keypad.is-disabled { opacity: .5; pointer-events: none; }

/* success */
.login__success { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; }
.login__check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--text-inverse); background: var(--success); transform: scale(0); animation: loginCheck 320ms cubic-bezier(.2, .9, .2, 1.2) forwards; }
.login__check .i { width: 32px; height: 32px; stroke-width: 2; }
@keyframes loginCheck { to { transform: scale(1); } }
.login.is-success .login__code, .login.is-success .login__msg, .login.is-success .login__btn, .login.is-success .login__links, .login.is-success .login__remember, .login.is-success .login__hint { display: none; }
.login.is-success .login__boxes .code-input__cell { opacity: 0; }

/* foot: language / theme, version */
.login__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.login__prefs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* desktop ≥ 900: left 45 % dark panel with the lamp, right 55 % on bg-1 with the same card */
@media (min-width: 900px) and (min-height: 521px) {
  .login--desk { flex-direction: row; align-items: stretch; padding: 0; }
  .login--desk .login__hero { flex: 0 0 45%; max-width: none; justify-content: center; gap: 12px; background: var(--bg-0); border-right: 1px solid var(--line); padding: 40px; }
  .login--desk .login__lamp { width: 160px; height: 200px; }
  .login--desk .login__glow { top: 20%; width: 720px; height: 620px; }
  .login--desk .login__ornament { width: 420px; height: 420px; top: 50%; transform: translate(-50%, -50%); }
  .login--desk .login__brand .wordmark { font-size: 48px; line-height: 52px; }
  .login--desk .login__brand .i--96 { color: var(--accent); margin-bottom: 8px; }
  .login--desk .login__side { flex: 1 1 55%; max-width: none; margin: 0; justify-content: center; align-items: center; background: var(--bg-1); padding: 40px 24px; }
  .login--desk .login__card { width: 420px; padding: 28px 28px 20px; }
  .login--desk .login__foot { width: 420px; }
}

/* reduced motion: lamp starts lit, no cord swing / glow transition / shake / draw-in */
html[data-motion="reduced"] .lamp__cord, html[data-motion="reduced"] .login__ornament g * { animation: none; }
html[data-motion="reduced"] .login__glow, html[data-motion="reduced"] .login__card, html[data-motion="reduced"] .lamp__shade, html[data-motion="reduced"] .lamp__bulb, html[data-motion="reduced"] .login__boxes .code-input__cell { transition: none; }
html[data-motion="reduced"] .code-input.is-verifying .code-input__cell { transform: none; }
html[data-motion="reduced"] .code-input.is-verifying .login__line path { animation: none; stroke-dashoffset: 0; }
html[data-motion="reduced"] .login__check { animation: none; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .lamp__cord, .login__ornament g * { animation: none; }
  .login__ornament g path, .login__ornament g circle { stroke-dashoffset: 0; }
  .login__glow, .login__card, .lamp__shade, .lamp__bulb { transition: none; }
  .code-input.is-verifying .code-input__cell { transform: none; }
  .login__check { animation: none; transform: scale(1); }
}