/* Движение tarasovlab.dev: токены, схемы, общие правила. Спецификация: design/motion-2026-10-15/MOTION-SPEC.md.
   База: всё нарисовано и видно. Скрывает что-либо только JS (WAAPI с fill:backwards) на время сцены. */
:root{
  --mo-feedback:100ms;--mo-state:120ms;--mo-reveal:240ms;--mo-draw:300ms;--mo-hop:380ms;
  --mo-hold-arrive:1300ms;--mo-scene-max:3600ms;
  --mo-ease-out:cubic-bezier(.2,.7,.2,1);--mo-ease-inout:cubic-bezier(.4,0,.2,1);--mo-ease-in:cubic-bezier(.4,0,1,1);
}
@keyframes mo-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mo-state{from{opacity:0}to{opacity:1}}
@keyframes mo-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* ---- схемы ---- */
.scheme-fig{
  /* цвета схем следуют теме: значения берутся из токенов assets/site.css */
  --sc-panel:var(--white);--sc-line:var(--line);--sc-ink:var(--ink);--sc-muted:var(--muted);--sc-accent:var(--accent);
  --sc-accent-soft:var(--accent-soft);--sc-bar:var(--mute-fill);--sc-paper:var(--surface);--sc-row:var(--surface);--sc-arrow:var(--ink);
  --sc-on-accent:var(--on-accent);--sc-radius:var(--radius,2px);--sc-font:var(--sans,inherit);
  margin:0;
}
.scheme-box{display:block}
.scheme{display:block;width:100%;height:auto}
.scheme text{font-family:var(--sc-font)}
svg.scheme.scheme--tall{display:none}
@media (max-width:760px){svg.scheme.scheme--wide{display:none}svg.scheme.scheme--tall{display:block;max-width:360px;margin:0 auto}}
.sc-panel{fill:var(--sc-panel);stroke:var(--sc-line);stroke-width:2}
.sc-hubb{stroke:var(--sc-accent);stroke-width:2.5}
.sc-paper{fill:var(--sc-paper);stroke:var(--sc-line);stroke-width:2}
.sc-frame{fill:var(--sc-panel);stroke:var(--sc-ink);stroke-width:2.5}
.sc-row{fill:var(--sc-row);stroke:var(--sc-line);stroke-width:1.5}
.sc-branch{fill:none;stroke:var(--sc-accent);stroke-width:2.5}
.sc-dashed{stroke:var(--sc-muted);stroke-dasharray:8 6;stroke-width:2}
.sc-bar{fill:var(--sc-bar)}.sc-acc{fill:var(--sc-accent)}
.sc-t{fill:var(--sc-ink);font-weight:700}
.sc-s{fill:var(--sc-muted);font-weight:500}
.sc-k{fill:var(--sc-accent);font-weight:800;letter-spacing:.12em}
.sc-c{fill:var(--sc-ink);font-weight:600}
.sc-chipbg{fill:var(--sc-accent-soft);stroke:var(--sc-accent);stroke-width:1.5}
.sc-chipf{fill:var(--sc-accent)}
.sc-chipt{fill:var(--sc-on-accent);font-weight:700}
.sc-chipo{fill:var(--sc-panel);stroke:var(--sc-accent);stroke-width:2}
.sc-chipt-o{fill:var(--sc-accent);font-weight:700}
.sc-line{stroke:var(--sc-arrow);stroke-width:3;fill:none}
.sc-thin{stroke:var(--sc-muted);stroke-width:2}
.sc-head{fill:var(--sc-arrow)}.sc-hthin{fill:var(--sc-muted)}
.sc-qrs{fill:none;stroke:var(--sc-ink);stroke-width:2}.sc-qrf{fill:var(--sc-ink)}
/* временные слои: в покое невидимы */
.sc-packet,.sc-qrframe,.sc-scan,.sc-corner{opacity:0}
.sc-packet{fill:var(--sc-accent)}
.sc-qrframe{fill:none;stroke:var(--sc-accent);stroke-width:3}
.sc-scan{fill:var(--sc-accent)}
.sc-corner{fill:none;stroke:var(--sc-accent);stroke-width:3}
[data-fx]{transform-box:fill-box;transform-origin:50% 50%}
/* схема ниже экрана на загрузке: скрыта заранее, пока её не видно; сцену запускает JS при первом появлении */
.scheme-fig[data-motion=armed] [data-fx]{opacity:0}
[data-fx=draw]{transform-origin:0 50%}[data-fx=drawv]{transform-origin:50% 0}
/* вариант «без QR» (Разделение счёта): выбор пользователя, остаётся после сцены */
.scheme-fig[data-variant=photo] .branch-qr{opacity:.45}
.scheme-fig[data-variant=photo] .branch-photo .sc-dashed{stroke:var(--sc-accent);stroke-dasharray:none;stroke-width:2.5}
/* подписи и кнопки */
.scheme-steps{list-style:none;margin:12px 0 0;padding:0}
.scheme-steps li{position:relative;padding:2px 0 2px 14px;color:var(--sc-muted)}
.scheme-steps .bar{position:absolute;left:0;top:3px;bottom:3px;width:3px;background:var(--sc-accent);opacity:0}
.scheme-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.scheme-btn{min-height:44px;min-width:44px;padding:0 16px;border:2px solid var(--sc-accent);background:transparent;color:var(--sc-accent);
  font-weight:600;font-size:15px;line-height:1.2;font-family:inherit;border-radius:var(--sc-radius);cursor:pointer;transition:background-color var(--mo-feedback),color var(--mo-feedback)}
.scheme-btn[aria-pressed=true]{background:var(--sc-accent);color:var(--sc-on-accent)}
@media (hover:hover){.scheme-btn:hover{background:var(--sc-accent-soft)}.scheme-btn[aria-pressed=true]:hover{background:var(--sc-accent)}}
.scheme-btn:focus-visible{outline:3px solid var(--sc-ink);outline-offset:3px}
.scheme-btn[hidden]{display:none}
.scheme-cap{color:var(--sc-muted);font-size:13px;margin-top:12px}

/* ---- карточки «Как это работает» (R4): по умолчанию видны ---- */
.screen-card[data-motion=armed]{opacity:0}

/* ---- общий список возможностей на apps/*: <strong> остаётся в потоке текста ---- */
body .info-panel .list-clean li{display:block;min-width:0}
body .info-panel .list-clean li::before{display:inline;margin-right:.5em}
body .info-panel{min-width:0;overflow-wrap:break-word}
@media (max-width:900px){body .info-panel{overflow-wrap:break-word}}


/* ---- без движения ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.fig.scheme-fig{padding:16px;background:var(--white)}
@media (max-width:760px){.fig.scheme-fig{padding:8px}}