@view-transition { navigation: auto; }   /* переход между страницами без белой вспышки */

:root {
  --bg: #000;
  --text: #f2f2f2;
  --muted: rgba(242, 242, 242, 0.62);
  --yellow: #ffd500;
  --yellow-glow: rgba(255, 213, 0, 0.28);
  --danger: #ff6b6b;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s;
  --t: 0.32s;
  --t-slow: 0.45s;
  --font: "Montserrat", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--yellow); color: #000; }

/* ---------- Фон (как в проекте «дрон») ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg__glow {
  position: absolute; border-radius: 50%;
  filter: blur(20px);
  will-change: transform;
}
.bg__glow--blue {
  width: 70vmax; height: 70vmax; left: -22vmax; top: -26vmax;
  background: radial-gradient(closest-side, rgba(31, 95, 174, 0.55), rgba(31, 95, 174, 0.18) 55%, transparent);
  animation: drift-a 22s ease-in-out infinite alternate;
}
.bg__glow--amber {
  width: 60vmax; height: 60vmax; right: -20vmax; bottom: -24vmax;
  background: radial-gradient(closest-side, rgba(200, 120, 58, 0.38), rgba(200, 120, 58, 0.12) 55%, transparent);
  animation: drift-b 26s ease-in-out infinite alternate;
}
/* небольшое жёлтое пятно прямо за карточкой — чтобы стекло было что размывать */
.bg__glow--yellow {
  width: 340px; height: 340px; left: 50%; top: 50%; margin: -260px 0 0 -30px;
  background: radial-gradient(closest-side, rgba(255, 213, 0, 0.32), transparent);
  animation: drift-c 18s ease-in-out infinite alternate;
}
.bg__grain {
  position: absolute; inset: 0; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift-a { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-7vmax, -5vmax) scale(1.1); } }
@keyframes drift-c { to { transform: translate(-150px, 120px) scale(1.15); } }

/* ---------- Раскладка ---------- */
.login {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: 24px 16px;
}

/* ---------- Стеклянная карточка (по описанию из плана) ---------- */
.glass-card {
  width: 300px;
  max-width: 100%;
  height: 440px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0px 0px rgba(255, 255, 255, 0);
  position: relative;
  overflow: hidden;

  margin: 0;
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}
.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

/* контент карточки — над слоем эффектов */
.glass-card > :not(.fx) { position: relative; z-index: 1; }

/* ---------- 3D-наклон за курсором (21st.dev) ---------- */
.tilt {
  max-width: 100%;
  transform: perspective(1500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}

/* ---------- Лучи по рамке, точки в углах, сетка (21st.dev) ---------- */
.fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.fx__grid {
  position: absolute; inset: 0; opacity: 0.035;
  background-image: linear-gradient(135deg, #fff 0.5px, transparent 0.5px), linear-gradient(45deg, #fff 0.5px, transparent 0.5px);
  background-size: 30px 30px;
}
.beam { position: absolute; opacity: 0; filter: blur(1.5px); will-change: transform, opacity; }
.beam--top, .beam--bottom { height: 3px; width: 50%; background: linear-gradient(90deg, transparent, #fff, transparent); }
.beam--left, .beam--right { width: 3px; height: 50%; background: linear-gradient(180deg, transparent, #fff, transparent); }
.beam--top    { top: 0;    left: 0;   animation: beam-x 3.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.beam--right  { top: 0;    right: 0;  animation: beam-y 3.5s cubic-bezier(.45, 0, .55, 1) 0.6s infinite; }
.beam--bottom { bottom: 0; right: 0;  animation: beam-x-rev 3.5s cubic-bezier(.45, 0, .55, 1) 1.2s infinite; }
.beam--left   { bottom: 0; left: 0;   animation: beam-y-rev 3.5s cubic-bezier(.45, 0, .55, 1) 1.8s infinite; }
@keyframes beam-x     { 0% { transform: translateX(-100%); opacity: 0; } 15%, 55% { opacity: 0.75; } 71%, 100% { transform: translateX(200%); opacity: 0; } }
@keyframes beam-x-rev { 0% { transform: translateX(100%);  opacity: 0; } 15%, 55% { opacity: 0.75; } 71%, 100% { transform: translateX(-200%); opacity: 0; } }
@keyframes beam-y     { 0% { transform: translateY(-100%); opacity: 0; } 15%, 55% { opacity: 0.75; } 71%, 100% { transform: translateY(200%); opacity: 0; } }
@keyframes beam-y-rev { 0% { transform: translateY(100%);  opacity: 0; } 15%, 55% { opacity: 0.75; } 71%, 100% { transform: translateY(-200%); opacity: 0; } }

.spot { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); animation: spot 2.2s ease-in-out infinite alternate; }
.spot--tl { top: 0; left: 0; width: 5px; height: 5px; filter: blur(1px); }
.spot--tr { top: 0; right: 0; width: 8px; height: 8px; filter: blur(2px); animation-delay: 0.5s; }
.spot--br { bottom: 0; right: 0; width: 8px; height: 8px; filter: blur(2px); animation-delay: 1s; }
.spot--bl { bottom: 0; left: 0; width: 5px; height: 5px; filter: blur(1px); animation-delay: 1.5s; }
@keyframes spot { from { opacity: 0.25; } to { opacity: 0.6; } }

/* ---------- Верх: логотип и заголовок ---------- */
.glass-card__top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand { margin-bottom: 12px; }
.brand__logo {
  width: 64px; height: auto; display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  transition: transform var(--t-slow) var(--ease);
}
.brand:hover .brand__logo { transform: rotate(-8deg) scale(1.06); }

.glass-card__sub {
  margin: 0; font-size: 0.7rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.22em; text-transform: uppercase; color: #cfd2d8;
}
.glass-card__sub b { font-weight: 600; color: var(--text); }

/* ---------- Поля с плавающей подписью ---------- */
.glass-card__fields { display: flex; flex-direction: column; gap: 10px; }
.field { position: relative; }
.field__icon {
  position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
  transition: stroke var(--t) var(--ease);
}
.field__input {
  width: 100%; height: 50px; padding: 18px 14px 4px 42px;
  font: 400 16px/1 var(--font);   /* 16px — чтобы iOS не приближал страницу */
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  outline: none;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field__input--pass { padding-right: 46px; }
.field__label {
  position: absolute; left: 43px; top: 50%;
  font-size: 0.82rem; line-height: 16px; color: var(--muted);
  pointer-events: none; transform-origin: left center;
  transform: translateY(-50%);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease), letter-spacing var(--t) var(--ease);
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-115%) scale(0.76);
  letter-spacing: 0.08em;
}
.field__input:hover { border-color: rgba(255, 255, 255, 0.28); }
.field__input:focus {
  border-color: rgba(255, 213, 0, 0.65);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.12);
}
.field:focus-within .field__icon { stroke: var(--yellow); }
.field__input:focus + .field__label { color: var(--yellow); }
.field__input[aria-invalid="true"] { border-color: rgba(255, 107, 107, 0.75); }
.field:has([aria-invalid="true"]) .field__icon { stroke: var(--danger); }
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px rgba(40, 42, 48, 0.95) inset;
  caret-color: var(--text);
  transition: background-color 9999s;
}

.field__eye {
  position: absolute; top: 3px; right: 3px;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 12px; cursor: pointer;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.field__eye:hover, .field__eye:focus-visible { color: var(--text); }
.field__eye:focus-visible { outline: 2px solid rgba(255, 213, 0, 0.6); outline-offset: -6px; }
.field__eye:active { transform: scale(0.9); }
.eye {
  grid-area: 1 / 1; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.eye--closed { opacity: 0; transform: scale(0.8); }
.field__eye[aria-pressed="true"] .eye--open { opacity: 0; transform: scale(0.8); }
.field__eye[aria-pressed="true"] .eye--closed { opacity: 1; transform: none; }

/* ---------- Сообщение ---------- */
.glass-card__msg {
  min-height: 16px; margin: 0; padding-left: 4px;
  font-size: 0.7rem; line-height: 16px; color: var(--danger);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.glass-card__msg.is-shown { opacity: 1; transform: none; }
.glass-card__msg.is-ok { color: var(--yellow); }

/* ---------- Кнопка и подпись снизу ---------- */
.glass-card__actions { display: flex; flex-direction: column; gap: 14px; }
.btn {
  position: relative;
  width: 100%; height: 48px; padding: 0 16px;
  display: grid; place-items: center;
  font: 600 0.78rem/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase;
  color: #000; background: var(--yellow);
  border: 1px solid var(--yellow); border-radius: 14px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 22px rgba(255, 213, 0, 0.14);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 28px var(--yellow-glow); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn__text, .btn__spin { grid-area: 1 / 1; transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease); }
.btn__text { display: inline-flex; align-items: center; gap: 10px; }
.btn__arrow {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn__spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25); border-top-color: #000;
  opacity: 0; transform: scale(0.6);
  animation: spin 0.8s linear infinite;
}
.btn { overflow: hidden; }
.btn__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-110%);
}
.btn:hover .btn__shine { transform: translateX(110%); transition: transform 0.9s var(--ease); }
.btn.is-loading .btn__shine { animation: shine 1.5s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-110%); } 70%, 100% { transform: translateX(110%); } }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__text { opacity: 0; transform: scale(0.9); }
.btn.is-loading .btn__spin { opacity: 1; transform: none; }
@keyframes spin { to { rotate: 360deg; } }

.glass-card__foot {
  position: relative; margin: 0; padding-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.glass-card__foot::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}
.glass-card__foot svg {
  width: 13px; height: 13px; fill: none; stroke: var(--yellow); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Появление (только после первого кадра) ---------- */
.glass-card { opacity: 0; transform: translateY(14px) scale(0.98); }
.glass-card > :not(.fx) { opacity: 0; transform: translateY(8px); }
html[ready] .glass-card {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform 0.6s var(--ease);
}
html[ready] .glass-card > :not(.fx) {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
html[ready] .glass-card > :nth-child(1) { transition-delay: 0.10s; }
html[ready] .glass-card > :nth-child(2) { transition-delay: 0.18s; }
html[ready] .glass-card > :nth-child(3) { transition-delay: 0.26s; }

/* ошибка — лёгкое покачивание карточки */
.glass-card.is-shake { animation: shake 0.42s var(--ease); }
@keyframes shake {
  20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; }
}

/* ---------- Планшет и телефон ---------- */
@media (max-width: 1023px) {
  .bg__glow--blue { width: 90vmax; height: 90vmax; }
}
@media (max-width: 767px) {
  .bg__glow { filter: blur(12px); }
  .bg__glow--yellow { width: 240px; height: 240px; margin: -190px 0 0 -30px; }
  .btn:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 22px rgba(255, 213, 0, 0.14); }
  .btn:hover .btn__arrow { transform: none; }
  .btn:active { transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .bg__glow, .glass-card.is-shake, .beam, .spot, .btn__shine { animation: none !important; }
  .beam { display: none; }
  .btn__spin { animation-duration: 2s; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}