/* Страница пароля к кейсу под NDA (case-lock.html), подключается после styles.css */
:root {
  /* ошибка в форме пароля, значение описано в DESIGN.md */
  --error: #f87171;
}

/* всё по центру узкой колонки, сверху замочек 160 */
.lock { display: flex; flex-direction: column; align-items: center; width: min(480px, 100% - 2 * var(--pad)); min-height: calc(100vh - var(--header-h)); margin: 0 auto; padding: 24px 0 120px; justify-content: center; text-align: center; }
.lock-img { width: 144px; height: 144px; margin-bottom: 32px; }
.lock-title { font-family: var(--accent-font); font-size: clamp(32px, 3vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
.lock-form { display: flex; gap: 12px; width: 100%; margin-top: 32px; }
.lock-input { flex: 1; min-width: 0; height: 56px; padding: 0 24px; border: 1px solid var(--line-strong); border-radius: 80px; background: var(--card); color: var(--ink); font: 400 18px/24px var(--onest); outline: none; transition: border-color 0.2s ease; }
.lock-input::placeholder { color: var(--faint); }
.lock-input:focus-visible { border-color: var(--ink); }
.lock-input[aria-invalid="true"] { border-color: var(--error); }
.lock-btn { flex: none; border: 0; cursor: pointer; font-family: var(--onest); }
.lock-error { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--error); }
.lock-note { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--muted); }
.lock-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lock-form.is-shaking { animation: lock-shake 0.4s ease; }
@keyframes lock-shake { 25% { translate: -6px 0; } 50% { translate: 6px 0; } 75% { translate: -3px 0; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .lock { padding: 24px 0 96px; }
  .lock-img { width: 108px; height: 108px; margin-bottom: 24px; }
  .lock-form { flex-direction: column; }
  .lock-input { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .lock-form.is-shaking { animation: none; } }

/* Поле кода как Password от mishanaer (MIT), увеличено под страницу: ячейки 48×56, зазор 6, после третьей разделитель.
   Цвета наши: ячейка --card, пустая ячейка показывает бледный 0, рамка-курсор --ink, при ошибке --error */
.otp { justify-content: center; }
.otp-row { position: relative; }
.otp-slots { position: relative; display: flex; align-items: center; gap: 6px; }
.otp-slot { position: relative; display: grid; place-items: center; width: 48px; height: 56px; overflow: hidden; border-radius: 16px; background: var(--card); font-size: 22px; font-weight: 600; line-height: 1; color: var(--ink); }
.otp-sep { width: 12px; height: 2px; margin: 0 7px; border-radius: 2px; background: var(--line-strong); }
.otp-char { position: absolute; }
.otp-char.is-empty { color: var(--faint); }
.otp-char.is-masked::before { content: ""; display: block; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1.67 3.5l8.66 5M1.67 8.5l8.66-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1.67 3.5l8.66 5M1.67 8.5l8.66-5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* цифра въезжает снизу на лёгкой пружине */
.otp-char.is-in { animation: otp-in 0.22s cubic-bezier(0.34, 1.3, 0.64, 1); }
@keyframes otp-in { from { opacity: 0.25; translate: 0 15px; } }
/* рамка-курсор переезжает между ячейками */
.otp-ring { position: absolute; top: 0; left: 0; width: 48px; height: 56px; border: 3px solid var(--ink); border-radius: 16px; pointer-events: none; opacity: 0; translate: var(--x, 0) 0; transition: translate 0.12s ease-in-out, opacity 0.15s ease-out, border-color 0.15s ease-out; }
.otp-row:focus-within .otp-ring { opacity: 1; }
.otp.is-error .otp-ring { border-color: var(--error); transition: translate 0.12s ease-in-out, opacity 0.15s ease-out, border-color 0s; }
.otp.is-checking .otp-ring { opacity: 0; }
/* проверка: ячейки по очереди пульсируют волной */
.otp.is-checking .otp-slot { color: var(--muted); animation: otp-pulse 0.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.1s); }
@keyframes otp-pulse { 50% { opacity: 0.4; } }
/* настоящий ввод прозрачный поверх ячеек: так работают вставка, автозаполнение кода и клавиатура телефона */
.otp-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; opacity: 0; cursor: text; }
.otp.is-shaking { animation: otp-shake 0.5s ease; }
@keyframes otp-shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -2.5px 0; } 80% { translate: 2.5px 0; } }
@media (max-width: 640px) {
  .lock-form.otp { flex-direction: row; }
  .otp-slot, .otp-ring { width: 44px; height: 52px; }
  .otp-slots { gap: 5px; }
  .otp-sep { margin: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .otp-char.is-in, .otp.is-checking .otp-slot, .otp.is-shaking { animation: none; } .otp-ring { transition: none; } }

/* Страница 404 (404.html): котик, номер ошибки крупно, текст и кнопка на главную */
.lock .final-cat { margin-bottom: 32px; }
.nf-text { margin-top: 12px; font-size: 18px; line-height: 28px; color: var(--muted); text-wrap: balance; }
.nf-btn { margin-top: 32px; }
@media (max-width: 640px) { .lock .final-cat { margin-bottom: 24px; } .nf-text { font-size: 16px; line-height: 24px; } }