/* Вход в портал: форма-лист на ленте металла, сходящей с рулона. Мир портала: светлый фон, Inter, бирюза логотипа. */
:root {
  --bg: #fafafa; --plate: #fff; --fg: #18181b; --muted: #5f5f68; --line: #e4e4e7; --line-strong: #d4d4d8;
  --teal: #2c7d6f; --teal-d: #256a5e; --teal-l: #3fa08a; --teal-50: #eef8f6; --teal-100: #d5efe9; --ring: rgba(44,125,111,.28);
  --err: #b42318; --warn: #93570a;
  --R: clamp(110px, min(19vw, 21vh), 230px);   /* радиус рулона (~40% высоты экрана) */
  --H: clamp(96px, 11vw, 132px);       /* ширина ленты */
  --mid: 50%;                           /* осевая линия ленты */
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg); font: 400 15px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; overflow-x: hidden; }
::selection { background: var(--teal-100); color: var(--fg); }

/* ---------- линия: рулон и лента ---------- */
.line { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.coil { position: absolute; width: calc(var(--R) * 2); height: calc(var(--R) * 2); left: calc(var(--R) * -0.55); top: calc(var(--mid) + var(--H) / 2 - var(--R) * 2); }
.coil .turns { transform-origin: 0 0; animation: turn 1.4s var(--ease) both; }
.strip { position: absolute; left: calc(var(--R) * .45); right: 0; top: calc(var(--mid) - var(--H) / 2); height: var(--H);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #c3ccd3 0, #9aa5ae 16%, #86919a 58%, #66717a 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 22px 40px -18px rgba(30, 38, 44, .35);
  clip-path: inset(0 0 0 0); animation: unspool 1.4s var(--ease) both; }
/* риски реза вдоль кромки — бегут, когда лента подаётся */
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 2px, transparent 2px 88px); background-position-x: 0; }
.strip::before { top: 0; } .strip::after { bottom: 0; left: var(--R); opacity: .45; }
@keyframes unspool { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes turn { from { transform: rotate(160deg); } to { transform: rotate(0deg); } }
@keyframes feed { to { background-position-x: 88px; } }
@keyframes spinc { to { transform: rotate(-360deg); } }
body.feeding .strip::before, body.feeding .strip::after { animation: feed .6s linear infinite; }
body.feeding .coil .turns { animation: spinc 3.2s linear infinite; }

/* ---------- лист: форма ---------- */
.sheet { position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: flex-end; padding: 32px max(7vw, 32px) 32px calc(var(--R) * 1.6); }
.plate { position: relative; width: 100%; max-width: 408px; background: var(--plate); border: 1px solid var(--line); border-radius: 12px; padding: 34px 36px 28px;
  box-shadow: 0 1px 2px rgba(16, 24, 22, .05), 0 28px 56px -20px rgba(16, 52, 46, .28); }
.logo { display: block; width: 172px; height: auto; margin: -6px 0 26px -8px; }
h1 { margin: 0 0 22px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.fld { margin-bottom: 16px; }
.fld > label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 7px; color: #27272a; }
input[type=email], input[type=password], input[type=text] { width: 100%; height: 48px; padding: 0 14px; font: 500 16px Inter, system-ui, sans-serif; color: var(--fg); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 8px; outline: none; caret-color: var(--teal); transition: border-color .15s, box-shadow .15s; }
input:hover { border-color: #a1a1aa; }
input:-webkit-autofill, input:-webkit-autofill:hover { -webkit-text-fill-color: var(--fg); box-shadow: 0 0 0 40px #fff inset; transition: background-color 9999s; }
input:-webkit-autofill:focus { -webkit-text-fill-color: var(--fg); box-shadow: 0 0 0 40px #fff inset, 0 0 0 4px var(--ring); }
input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px var(--ring); }
input[aria-invalid=true] { border-color: var(--err); }
input[aria-invalid=true]:focus { box-shadow: 0 0 0 40px #fff inset, 0 0 0 4px rgba(180, 35, 24, .18); }
.pw { position: relative; } .pw input { padding-right: 52px; }
.eye { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #52525b; cursor: pointer; }
.eye:hover { background: #f4f4f5; color: var(--fg); }
.eye:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.eye .off { opacity: 0; transition: opacity .15s; } .eye[aria-pressed=true] .off { opacity: 1; }
.hint { margin: 7px 0 0; font-size: 13px; font-weight: 500; color: var(--warn); }
.hint:empty { display: none; }
.check { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 18px; font-size: 14px; color: #3f3f46; cursor: pointer; user-select: none; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.check input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.err { margin: 0 0 14px; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--err); background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px; }
.err:empty { display: none; }
.go { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 8px; background: var(--teal); color: #fff; font: 600 16px Inter, system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 18px -10px rgba(37, 106, 94, .8); transition: background-color .15s, transform .08s; }
.go:hover { background: var(--teal-d); } .go:active { transform: translateY(1px); }
.go:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.go:disabled { background: var(--teal-d); cursor: progress; }
.spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; display: none; animation: spinc .7s linear infinite reverse; }
.go:disabled .spin { display: block; }
.help { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- узкий экран: рулон и лента — полосой сверху ---------- */
@media (max-width: 760px) {
  :root { --R: 80px; --H: 52px; --mid: 112px; }
  .coil { left: -42px; }
  .strip { left: 10px; }
  .sheet { align-items: flex-start; justify-content: center; padding: 124px 16px 32px; }
  .plate { max-width: 480px; }
  .plate { padding: 28px 22px 22px; border-radius: 12px; }
  .logo { width: 150px; margin-bottom: 20px; }
}
@media (max-height: 560px) and (min-width: 761px) { .sheet { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) {
  .strip, .coil .turns { animation: none !important; }
  body.feeding .strip::before, body.feeding .strip::after, body.feeding .coil .turns { animation: none !important; }
  input, .go, .eye .off { transition: none; }
}