/* ============================================================================
   common.css — общие стили проекта.
   Пока охватывает только страницу «Вход». После готовности «Черепохи»
   добавим сюда её правила и объединим всё в один общий файл.
   ============================================================================ */

/* ---- базовые сбросы ---- */
* { box-sizing: border-box; }
body { margin: 0; background: #e4e4e6; overflow: hidden; }
img, svg { -webkit-user-drag: none; user-drag: none; }

/* ============================================================================
   СТРАНИЦА «ВХОД»
   ============================================================================ */

/* ---- анимации ---- */
@keyframes pin-shake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-5px); }
  40%,60% { transform: translateX(5px); }
}
@keyframes pf-type { from { max-width: 0; } to { max-width: 32ch; } }

/* ---- плашка ввода ПИН ---- */
.pf.shake { animation: pin-shake .42s cubic-bezier(0.36,0.07,0.19,0.97); }
.pf {
  padding: 8px 8px 8px 22px;
  height: 60px;
  cursor: default;
  background: rgba(232,232,232,0.16);
  -webkit-backdrop-filter: blur(38px) saturate(180%);
  backdrop-filter: blur(38px) saturate(180%);
  transition: height .7s cubic-bezier(.5,.1,.2,1),
              padding .7s cubic-bezier(.5,.1,.2,1),
              background .4s ease,
              -webkit-backdrop-filter .5s ease,
              backdrop-filter .5s ease;
}
.pf:hover { background: rgba(236,236,236,0.22); }
.pf.loading {
  height: 4px; padding: 0; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  cursor: default;
}

/* поле ввода + печатающаяся подсказка */
.pf-in { -webkit-user-select: text; user-select: text; cursor: default; }
/* невидимый спейсер в конце PIN: даёт РЕАЛЬНЫЙ 3px зазор между последним символом
   (точкой ИЛИ цифрой) и кареткой. Надёжнее letter-spacing, который у цифр обрезается. */
.pf-caretgap { display: inline-block; width: 3px; }
.pf-in[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.8);
  pointer-events: none;
  font-weight: 400;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  vertical-align: bottom;
}
.pf.chrome .pf-in[data-empty="true"]::before { animation: pf-type 0.5s steps(32,end) forwards; }
.pf.infocus .pf-in[data-empty="true"]::before { display: none; }

/* кнопки (глаз / вход): фон прозрачный, реагирует сама иконка (SVG) — при наведении −30% альфы */
.pf-eye svg, .pf-btn svg { transition: none; opacity: 1; }
.pf.chrome .pf-btn:hover svg,
.pf.chrome.has-pin .pf-eye:hover svg { opacity: 0.7; }
/* иконки не перехватывают события: единственная hit-зона — сама кнопка */
.pf-eye *, .pf-btn * { pointer-events: none; }

/* появление содержимого плашки */
.pf-eye { color: #ffffff; background: transparent; opacity: 0; pointer-events: none; }
.pf.chrome.has-pin .pf-eye { opacity: 1; pointer-events: auto; }
.pf-in, .pf-btn { opacity: 0; pointer-events: none; }
.pf.chrome .pf-in, .pf.chrome .pf-btn { opacity: 1; pointer-events: auto; }

/* линия-прелоадер (заливка плашки) */
.pf-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  transform: scaleX(0); transform-origin: 0% 50%;
  border-radius: 9999px;
  background: rgba(228,228,230,0.6);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  transition: transform 1.6s cubic-bezier(.5,.12,.2,1), opacity .6s ease;
  pointer-events: none; z-index: 0;
}

/* ---- анимация выхода (успешный вход): контент гаснет → плашка сжимается в линию → линия уходит слева направо ---- */
.pf.exit .pf-in, .pf.exit .pf-eye, .pf.exit .pf-btn {
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .5s ease !important;
}
.pf.exit-line {
  height: 4px !important; padding: 0 !important;
  background: rgba(228,228,230,0.85) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  transition: height .55s cubic-bezier(.5,.1,.2,1),
              padding .55s cubic-bezier(.5,.1,.2,1),
              background .3s ease !important;
}
.pf.exit-line.exit-empty {
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 1.3s cubic-bezier(.5,.12,.2,1) !important;
}