/* ============ login scene „Пред механата по здрач" ============ */
/* Visual source of truth: docs/superpowers/specs/assets/2026-06-11-kiro-login-mockup-v4.html */

.login-mode header, .login-mode nav { display: none }
.login-mode .body { padding: 0; overflow: hidden }

/* backdrop echoes the scene's vertical color script — graceful on ultra-wide windows */
.lg-wrap { position: relative; height: 100%; overflow: hidden;
  background: linear-gradient(#1b1736, #3a2750 28%, #74394f 42%, #43302a 47%, #2c1d10 52%, #382616) }
/* fixed 390×844 composition, uniformly scaled to viewport height by login.js fit() */
.lg-stage { position: absolute; left: 50%; bottom: 0; width: 390px; height: 844px;
  transform-origin: 50% 100%; transform: translateX(-50%) }
.lg-stage svg.lg-scene { position: absolute; left: -200px; top: 0; width: 790px; height: 844px }

/* ---- title in the sky ---- */
.lg-title { position: absolute; top: 56px; left: 0; right: 0; text-align: center; pointer-events: none }
.lg-title .t-pre { font-family: 'Caveat', cursive; font-size: 19px; color: #f3cf9e; opacity: .92 }
.lg-title h1 { font-family: 'Alfa Slab One', serif; font-size: 46px; line-height: 1.06; color: #ffce5c;
  text-shadow: 0 2px 0 #5e2c18, 0 10px 26px rgba(0,0,0,.45); margin: 2px 0 7px }
.lg-title .t-sub { font-size: 10px; letter-spacing: 5px; font-weight: 800; color: #f0e3c8; opacity: .72 }

/* ---- the hanging board (login form) ---- */
.lg-board { position: absolute; top: 388px; left: 50%; transform: translateX(-50%);
  width: 314px;
  background: linear-gradient(172deg, #5d4128, #452f1b);
  border: 3px solid #221507; border-radius: 13px; padding: 11px;
  box-shadow: 0 16px 30px rgba(0,0,0,.55), inset 0 1px 0 #7a583699 }
.lg-parch { position: relative; background: #f4ead0; border-radius: 7px; padding: 14px 15px 11px;
  box-shadow: inset 0 0 24px rgba(122,90,40,.22);
  background-image: radial-gradient(circle at 85% 6%, #e3d0a455, transparent 38%),
                    radial-gradient(circle at 8% 95%, #e3d0a444, transparent 34%) }
.lg-nail { position: absolute; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9a8a6e, #3a2a18); box-shadow: 0 1px 2px rgba(0,0,0,.5) }
.lg-nail.l { left: 9px } .lg-nail.r { right: 9px }
.lg-lab { font-size: 10px; letter-spacing: 2.4px; font-weight: 900; color: #c8542a; text-transform: uppercase }
.lg-say { font-family: 'Caveat', cursive; font-size: 21.5px; line-height: 1.07; color: #241a12; margin: 4px 0 10px }
.lg-inp { width: 100%; border: 2px solid #d8c49a; border-radius: 9px; background: #fffdf4;
  padding: 9px 12px; font-family: 'Nunito'; font-size: 15px; font-weight: 700; color: #241a12; outline: none;
  transition: border-color .2s }
.lg-inp + .lg-inp { margin-top: 8px }
.lg-inp:focus { border-color: #2f4a2c }
.lg-inp::placeholder { font-family: 'Caveat', cursive; font-size: 19px; font-weight: 600; color: #a08c64 }
.lg-btn { width: 100%; margin-top: 11px; border: 2px solid #1c2e19; border-radius: 11px; cursor: pointer;
  background: linear-gradient(#35522f, #2c4527); color: #f8efdc;
  font-family: 'Nunito'; font-weight: 800; font-size: 15.5px; padding: 10px;
  box-shadow: 0 4px 0 #182814; transition: transform .08s, box-shadow .08s }
.lg-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #182814 }
.lg-err { font-family: 'Caveat', cursive; font-size: 18px; color: #a8431f; margin-top: 6px }
.lg-err:empty { display: none }
.lg-note { font-family: 'Caveat', cursive; font-size: 16px; color: #8a6f48; text-align: left; padding-right: 54px; margin-top: 7px }
.lg-seal { position: absolute; right: -7px; bottom: -13px; width: 54px; transform: rotate(11deg);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)) }

/* ---- living sky ---- */
.lg-wrap .tw { animation: lgTw 5s ease-in-out infinite }
.lg-wrap .tw.t2 { animation-delay: -1.6s; animation-duration: 6.4s }
.lg-wrap .tw.t3 { animation-delay: -3.2s; animation-duration: 4.4s }
@keyframes lgTw { 0%,100% { opacity: .25 } 50% { opacity: .95 } }
.lg-wrap .shoot { animation: lgShoot 18s linear infinite; opacity: 0 }
@keyframes lgShoot { 0% { transform: translate(0,0); opacity: 0 } 1% { opacity: .85 }
  5.5% { transform: translate(-120px,78px); opacity: 0 } 100% { transform: translate(-120px,78px); opacity: 0 } }
.lg-wrap .cl { animation: lgClA 90s ease-in-out infinite alternate }
.lg-wrap .cl.c2 { animation-duration: 70s; animation-direction: alternate-reverse }
.lg-wrap .cl.c3 { animation-duration: 55s }
@keyframes lgClA { from { transform: translateX(-14px) } to { transform: translateX(16px) } }
.lg-wrap .flock { animation: lgFlock 40s linear infinite }
@keyframes lgFlock { from { transform: translate(-110px,170px) } to { transform: translate(470px,148px) } }
.lg-wrap .bob { animation: lgBob 4.8s ease-in-out infinite alternate }
@keyframes lgBob { from { transform: translateY(0) } to { transform: translateY(5px) } }
.lg-wrap .bird .wup { animation: lgFlapU .55s steps(1,end) infinite }
.lg-wrap .bird .wdn { animation: lgFlapD .55s steps(1,end) infinite }
.lg-wrap .b2 .wup, .lg-wrap .b2 .wdn { animation-delay: -.18s }
.lg-wrap .b3 .wup, .lg-wrap .b3 .wdn { animation-delay: -.36s }
.lg-wrap .b4 .wup, .lg-wrap .b4 .wdn { animation-delay: -.09s }
.lg-wrap .b5 .wup, .lg-wrap .b5 .wdn { animation-delay: -.27s }
@keyframes lgFlapU { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes lgFlapD { 0%,100% { opacity: 0 } 50% { opacity: 1 } }
.lg-wrap .drift2 { animation: lgDrift2 70s linear infinite }
@keyframes lgDrift2 { from { transform: translate(120px,-8px) } to { transform: translate(-320px,26px) } }

/* ---- tavern life ---- */
.lg-wrap .puffs { animation: lgPuff 7s ease-in-out infinite }
.lg-wrap .puffs.p2 { animation-delay: -3.5s }
@keyframes lgPuff { 0% { transform: translate(0,0); opacity: 0 } 25% { opacity: .4 }
  60% { opacity: .3 } 100% { transform: translate(-10px,-26px); opacity: 0 } }
.lg-wrap .lglow { animation: lgFlick 4.2s ease-in-out infinite }
@keyframes lgFlick { 0%,100% { opacity: .16 } 30% { opacity: .21 } 55% { opacity: .13 } 75% { opacity: .2 } }
.lg-wrap .ffy { animation: lgFfy 11s ease-in-out infinite }
.lg-wrap .ffy.f2 { animation-duration: 14s; animation-delay: -5s }
.lg-wrap .ffy.f3 { animation-duration: 9s; animation-delay: -2.5s }
@keyframes lgFfy { 0%,100% { transform: translate(0,0); opacity: .1 } 35% { opacity: .85 }
  50% { transform: translate(10px,-16px); opacity: .5 } 70% { opacity: .75 } 85% { transform: translate(4px,-5px); opacity: .2 } }
.lg-wrap .k-eyes2 { transform-box: fill-box; transform-origin: center; animation: lgBlink 5.2s infinite }
@keyframes lgBlink { 0%,93.5%,100% { transform: scaleY(1) } 96% { transform: scaleY(.08) } }
.lg-wrap .k-stache2 { transform-box: fill-box; transform-origin: center; animation: lgTwitch 9s ease-in-out infinite }
@keyframes lgTwitch { 0%,90%,100% { transform: rotate(0) } 93% { transform: rotate(-1.6deg) } 96% { transform: rotate(1.1deg) } }

@media (prefers-reduced-motion: reduce) { .lg-wrap * { animation: none !important } }