/* Local cinematic login. Scene controls never participate in the form or replace its state. */
.login.login-with-scene { max-width: none; min-height: 100dvh; padding: 64px clamp(28px, 7vw, 140px) 100px; grid-template-rows: auto 1fr; row-gap: 48px; column-gap: clamp(48px, 9vw, 180px); background: var(--ui-133); }
.login-with-scene > .wordmark { position: relative; z-index: 2; grid-column: 1 / -1; margin: 0; font-size: clamp(2.1rem, 3vw, 3.2rem); letter-spacing: .12em; }
.login-with-scene > .wordmark .brand-type > span { font-size: .72rem; letter-spacing: .65em; margin-top: 10px; }
.login-with-scene::before { display: none; }
.login-with-scene > .login-intro, .login-with-scene > .login-form { z-index: 2; }
.login-with-scene > .login-intro { align-self: center; padding: 0; }
.login-with-scene > .login-form { align-self: center; }
.login-with-scene .login-intro .wordmark { margin-bottom: clamp(58px, 11vh, 130px); }
.login-with-scene .login-intro h1 { max-width: 740px; text-shadow: 0 3px 36px color-mix(in srgb, var(--black) 73.3333%, transparent); }
.login-with-scene .login-intro > p { color: var(--ui-930a); text-shadow: 0 2px 20px var(--black); }
.login-with-scene .login-intro .eyebrow { color: var(--accent-904); text-shadow: 0 1px 12px var(--black); }
.login-with-scene .login-proof { color: var(--ui-853a); }
.login-with-scene .login-orbit { display: none; }
.login-with-scene .login-form { background: linear-gradient(145deg, color-mix(in srgb, var(--accent-240) 92.9412%, transparent), color-mix(in srgb, var(--ui-179) 92.1569%, transparent)); border-color: color-mix(in srgb, var(--accent-800a) 22.7451%, transparent); box-shadow: 0 26px 100px color-mix(in srgb, var(--black) 53.3333%, transparent), inset 0 1px color-mix(in srgb, var(--ui-944a) 7.0588%, transparent); }
.login-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--ui-133); }
.login-scene-sky { position: absolute; inset: 0; }
.login-scene-poster, .login-scene-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 38% 50%; opacity: 0; transition: opacity .55s ease; filter: saturate(.96); }
.login-scene-poster.is-ready, .login-scene-video.is-playing { opacity: 1; }
.login-scene-poster { animation: earth-drift 48s ease-in-out infinite alternate; animation-play-state:paused; }
.login-scene[data-moving=true] .login-scene-poster { animation-play-state:running; }
@keyframes earth-drift { from { transform:scale(1); } to { transform:scale(1.035) translate3d(.4%,0,0); } }
.login-scene-shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ui-126) 50.1961%, transparent) 0%, color-mix(in srgb, var(--ui-126) 9.4118%, transparent) 38%, color-mix(in srgb, var(--ui-126) 36.0784%, transparent) 61%, color-mix(in srgb, var(--ui-126) 72.1569%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--ui-133) 90.9804%, transparent) 0%, color-mix(in srgb, var(--ui-133) 8.2353%, transparent) 33%, color-mix(in srgb, var(--ui-133) 13.3333%, transparent) 77%, color-mix(in srgb, var(--ui-133) 65.098%, transparent) 100%); }
.login-scene-horizon { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--accent-823) 3.9216%, transparent); box-shadow: inset 0 0 160px color-mix(in srgb, var(--black) 20%, transparent); }
.login-scene-controls { position: absolute; z-index: 3; left: clamp(28px, 7vw, 140px); bottom: 34px; width: min(460px, calc(100% - 56px)); color: var(--ui-978); }
.login-scene-controls .login-scene-playback { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; margin-top: 7px; padding: 6px 2px; font-size: .65rem; line-height: 1.4; color: var(--ui-857); border: 0; background: transparent; box-shadow: none; letter-spacing: .02em; }
.login-scene-controls .login-scene-playback:hover { color: var(--white); background: transparent; }
.login-scene-controls .login-scene-playback:disabled { color: var(--ui-782); cursor: default; opacity: 1; }
.scene-pause-icon { width: 9px; height: 10px; border-left: 2px solid; border-right: 2px solid; }
.scene-play-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.login-scene-controls button:focus-visible { outline: 2px solid var(--accent-912); outline-offset: 4px; }
@media (min-width: 1800px) { .login-with-scene .login-intro h1 { font-size: 6.2rem; } .login-with-scene .login-form { max-width: 540px; justify-self: end; width: 100%; } }
@media (max-width: 850px) {
  .login.login-with-scene { max-width: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 44px max(26px, calc((100vw - 620px) / 2)) 40px; gap: 30px; }
  .login-with-scene > .login-intro { order: 1; padding: 0; }
  .login-with-scene > .login-form { order: 2; width: 100%; background: var(--ui-209); backdrop-filter: none; }
  .login-with-scene .login-intro .wordmark { margin-bottom: 60px; }
  .login-scene-controls { position: relative; order: 3; left: auto; bottom: auto; width: min(100%, 460px); margin: 0; }
  .login-scene-sky { height: min(900px, 100%); }
  .login-scene-poster, .login-scene-video { object-position: 28% center; }
  .login-scene-shade { background: linear-gradient(0deg, var(--ui-133) 4%, color-mix(in srgb, var(--ui-133) 13.3333%, transparent) 65%, color-mix(in srgb, var(--ui-133) 30.1961%, transparent) 100%), linear-gradient(90deg, color-mix(in srgb, var(--ui-126) 33.3333%, transparent), color-mix(in srgb, var(--ui-126) 5.098%, transparent) 70%, color-mix(in srgb, var(--ui-126) 21.9608%, transparent)); }
}
@media (max-width: 480px) {
  .login.login-with-scene { padding: 24px 22px; gap: 22px; }
  .login-with-scene .login-intro h1 { font-size: clamp(2rem, 8.8vw, 2.75rem); margin-bottom: 0; }
  .login-with-scene .login-intro .wordmark { margin-bottom: 24px; }
  .login-with-scene .login-intro > p, .login-with-scene .login-proof { display: none; }
  .login-scene-sky { height: 700px; }
}
@media (prefers-reduced-motion: reduce) { .login-scene-poster, .login-scene-video, .login-scene-controls button { transition: none !important; animation: none !important; } .login-scene-video { display: none; } }