/* Анимация лендинга «Подпись: подписать документы» (разметка — scripts/build-signquick.mjs, поведение — signquick-demo.js).
   Телефон — общий с демо клинера (swipe-demo.css: .sd, .sd-phone, .sd-screen, .sd-status); размеры — в em от --w.
   Экран — как в приложении: белый фон, чёрный текст и кнопки, светло-серые плашки.
   Без класса .play — конечное состояние (подпись стоит на строке); .play проигрывает её постановку. */
.sq .sd-phone { background: #111; box-shadow: 0 3.5em 8em rgba(0,0,0,.26), 0 0 0 .1em rgba(0,0,0,.12), inset 0 0 0 .12em rgba(255,255,255,.08); }
.sq-screen { background: #efefef; color: #171719; text-align: left; display: flex; flex-direction: column; }
.sq-top { display: flex; align-items: center; gap: .6em; padding: .2em 1em .9em; }
.sq-top b { flex: 1; min-width: 0; font-size: 1.12em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.sq-back { width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.sq-back svg { width: 1.2em; height: 1.2em; color: #171719; }
.sq-save { flex: none; padding: .6em .95em; border-radius: 2em; background: #171719; color: #fff; font-size: .82em; font-weight: 600; }

/* Лист документа */
.sq-page { flex: 1; margin: 0 1.2em; padding: 1.6em 1.4em 1.4em; background: #fff; border-radius: .5em; box-shadow: 0 .5em 1.6em rgba(0,0,0,.08); display: flex; flex-direction: column; gap: .62em; }
.sq-h { width: 58%; height: .9em; margin: 0 auto .7em; border-radius: .3em; background: #2b2b2e; }
.sq-line { height: .42em; border-radius: .21em; background: #dcdcde; }
.sq-line.gap { margin-top: .7em; }
.sq-field { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2em; margin-top: auto; padding-top: 1.2em; }
.sq-slot, .sq-date { display: flex; flex-direction: column; gap: .3em; }
.sq-slot { flex: 1.4; }
.sq-date { flex: 1; }
.sq-slot small, .sq-date small { border-top: .1em solid #171719; padding-top: .3em; font-size: .62em; color: #8e8e93; }
.sq-date b { font-size: .78em; font-weight: 500; font-family: "Courier New", Courier, monospace; color: #3a3a3e; padding-bottom: .2em; }
.sq-place { position: relative; display: block; height: 4.4em; margin-bottom: -.6em; }
.sq-sig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sq-sig path { fill: none; stroke: #1b2a6b; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Рамка выделения с ручками по углам — видна только во время постановки */
.sq-frame { position: absolute; inset: -.35em -.4em; border: .1em dashed #171719; border-radius: .3em; opacity: 0; }
.sq-frame::before, .sq-frame::after { content: ""; position: absolute; width: .7em; height: .7em; border-radius: 50%; background: #fff; border: .12em solid #171719; }
.sq-frame::before { left: -.4em; top: -.4em; }
.sq-frame::after { right: -.4em; bottom: -.4em; }

.sq-pg { margin: .9em 0 0; text-align: center; font-size: .72em; color: #8e8e93; }

/* Панель внизу: «Подпись», «Инициалы», «На все страницы» */
.sq-tools { margin: .9em .9em 1.6em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; padding: .55em; border-radius: 1.6em; background: #fff; box-shadow: 0 .4em 1.2em rgba(0,0,0,.07); }
.sq-tool { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .55em .2em; border-radius: 1.1em; color: #171719; }
.sq-tool svg { width: 1.7em; height: 1.7em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sq-tool small { font-size: .7em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sq-tool.on { background: #171719; color: #fff; }

/* Проигрывание: нажатие «Подпись» → подпись выезжает на строку в рамке → прорисовывается → рамка исчезает */
.sq.play .sq-tool.on { animation: sq-press 4.2s ease both; }
.sq.play .sq-place { animation: sq-drop 4.2s cubic-bezier(.2,.8,.2,1) both; }
.sq.play .sq-sig path { animation: sq-draw 4.2s ease both; }
.sq.play .sq-frame { animation: sq-frame 4.2s ease both; }
@keyframes sq-press { 0%, 6% { transform: none; } 10% { transform: scale(.9); } 16%, 100% { transform: none; } }
@keyframes sq-drop { 0%, 14% { opacity: 0; transform: translateY(9em) scale(.7); } 34%, 100% { opacity: 1; transform: none; } }
@keyframes sq-draw { 0%, 34% { stroke-dashoffset: 1; } 72%, 100% { stroke-dashoffset: 0; } }
@keyframes sq-frame { 0%, 14% { opacity: 0; } 22%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sq.play .sq-tool.on, .sq.play .sq-place, .sq.play .sq-sig path, .sq.play .sq-frame { animation: none; }
}