/* Экран входа: сцена по мотивам логотипа M2M Trade. */
:root {
  --sky-left: #4e9dd5;   /* небо логотипа, слева */
  --sky-mid: #a4b8a5;
  --sky-right: #f4c245;  /* небо логотипа, справа */
  --blue: #4395dd;       /* буквы «M2M» */
  --hill: #090909;       /* холм */
  --ink: #141a21;
  --muted: #5d6877;
  --line: #d5dde7;
  --paper: #ffffff;
  --danger: #c4321f;
  --app-bg: #f4f6fa;     /* фон дашборда — им заканчивается переход */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.login {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background: var(--hill);
  font: 15px/1.5 "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- сцена ---------- */
.scene { position: fixed; inset: 0; }
.sky {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--sky-left) 0%, var(--sky-mid) 50%, var(--sky-right) 100%);
  animation: sky-in .9s ease-out both;
}
.land { position: absolute; inset: 0; width: 100%; height: 100%; }
.hill { fill: var(--hill); transform-box: view-box; animation: hill-in 1.1s var(--ease-out) .05s both; }
.truck .body { fill: var(--hill); }
.truck .window { fill: rgba(255, 255, 255, .5); }
.truck .arc { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: 0; animation: signal 2.4s ease-in-out infinite; }
.truck .a2 { animation-delay: .25s; }
.truck .a3 { animation-delay: .5s; }

/* спутники и орбиты */
.orbit { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1.3; stroke-dasharray: 2 9; stroke-linecap: round; }
.sat .core { fill: var(--hill); stroke: var(--hill); }
.sat .panel { fill: #1f3d5c; stroke: var(--hill); stroke-width: 1.4; }
.sat .panel-grid { fill: none; stroke: rgba(170, 210, 255, .55); stroke-width: .9; }
.sat .sheen { fill: rgba(255, 255, 255, .22); }
.sat .blink { fill: #ff5a3c; animation: blink 1.6s steps(1, end) infinite; }
.sat .blink.b2 { animation-delay: .7s; }
.sat-far { opacity: .62; }
@keyframes blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .15; } }

/* линии связи (прозрачность и движение задаёт login.js) */
.link { stroke: rgba(255, 255, 255, .9); stroke-width: 1.6; stroke-dasharray: 1.5 10; stroke-linecap: round; opacity: 0; }
.beam { stroke: #fff; stroke-width: 2.2; stroke-dasharray: 3 11; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); }
.ping { opacity: 0; }
.ping .ring { fill: none; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center;
  animation: ring 1.6s ease-out infinite; }
.ping .r2 { animation-delay: .8s; }
@keyframes ring { from { transform: scale(.4); opacity: .95; } to { transform: scale(3.2); opacity: 0; } }

/* вышка связи */
.tower .mast { fill: #262c33; stroke: #262c33; }
.tower .mast-lattice { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.6; }
.tower .beacon { fill: #ff5a3c; animation: beacon 2.2s ease-in-out infinite; }
.tower .wave { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2; transform-box: fill-box; transform-origin: center;
  animation: wave 3.6s ease-out infinite; }
.tower .w2 { animation-delay: 1.2s; }
.tower .w3 { animation-delay: 2.4s; }
@keyframes wave { from { transform: scale(.3); opacity: .9; } to { transform: scale(6); opacity: 0; } }
@keyframes beacon { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@keyframes sky-in { from { opacity: 0; } }
@keyframes hill-in { from { transform: translateY(260px); } }
@keyframes signal {
  0%, 15% { opacity: 0; }
  35%, 60% { opacity: .95; }
  85%, 100% { opacity: 0; }
}

/* ---------- карточка ---------- */
.login-wrap {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px 16px 12vh;
}
.card {
  width: min(400px, 100%);
  padding: 30px 32px 26px;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(9, 9, 9, .30), 0 2px 8px rgba(9, 9, 9, .10);
  animation: card-in .9s var(--ease-out) .35s both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(26px) scale(.98); } }

.brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.logo { width: 56px; height: auto; border-radius: 14px; display: block; box-shadow: 0 4px 12px rgba(9, 9, 9, .18); }
.wordmark { font-family: "Unbounded", "Manrope", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .01em; line-height: 1.15; }
.tagline { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 3px; }

h1 { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.lead { margin: 6px 0 22px; color: var(--muted); font-size: 14px; }

.field { display: block; margin-bottom: 14px; }
.field > span:first-child { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--ink); background: #fbfcfe;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field input:hover { border-color: #b9c6d6; }
.field input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(67, 149, 221, .18); }
.field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(196, 50, 31, .12); }

.pw { position: relative; display: block; }
.pw input { padding-right: 48px; }
.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent;
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.eye:hover { background: #eef2f7; color: var(--ink); }
.eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.eye svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.eye .strike { opacity: 0; transition: opacity .15s; }
.eye[aria-pressed="false"] .strike { opacity: 1; }

.error {
  margin: 2px 0 14px; padding: 10px 12px; border-radius: 10px;
  background: #fdeeeb; color: var(--danger); font-size: 13.5px; font-weight: 600; line-height: 1.4;
}

.submit {
  position: relative; width: 100%; height: 50px; margin-top: 6px;
  border: 0; border-radius: 13px; cursor: pointer;
  background: var(--hill); color: #fff;
  font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .01em;
  transition: transform .12s, background-color .2s, box-shadow .2s;
  box-shadow: 0 8px 20px rgba(9, 9, 9, .22);
}
.submit:hover { background: #1d2126; }
.submit:active { transform: translateY(1px); }
.submit:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.submit .spinner, .submit .check { position: absolute; inset: 0; margin: auto; opacity: 0; transition: opacity .15s; }
.submit .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; }
.submit .check { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; }
.submit.loading { pointer-events: none; }
.submit.loading .label, .submit.done .label { opacity: 0; }
.submit.loading .spinner { opacity: 1; animation: spin .7s linear infinite; }
.submit.done { background: #1f7a3d; box-shadow: 0 8px 20px rgba(31, 122, 61, .3); }
.submit.done .check { opacity: 1; animation: draw .35s ease-out forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hint { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

.card.shake { animation: shake .42s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

/* ---------- переход на дашборд ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: var(--hill);
  clip-path: ellipse(0% 0% at 50% 100%);
  display: grid; place-items: center;
}
.curtain img { width: 84px; border-radius: 20px; opacity: 0; transform: scale(.9); }

body.leaving .card { animation: card-out .45s var(--ease-out) forwards; }
body.leaving .curtain { animation: curtain-up .75s cubic-bezier(.7, 0, .2, 1) .2s forwards; }
body.leaving .curtain img { animation: mark-in .5s var(--ease-out) .65s forwards; }
@keyframes card-out { to { opacity: 0; transform: translateY(-30px) scale(.96); } }
@keyframes curtain-up { to { clip-path: ellipse(150% 150% at 50% 100%); } }
@keyframes mark-in { to { opacity: 1; transform: scale(1); } }

/* ---------- маленькие экраны и «меньше движения» ---------- */
@media (max-width: 480px) {
  .card { padding: 24px 20px 22px; border-radius: 18px; }
  h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .truck .arc { opacity: .8; }
  .tower .wave { opacity: 0; }
}