/* Библиотека движения: показ контента и переключение блоков. Механика — motion.js.
   Эффект включается атрибутом data-m="…" на блоке. Скрытые начальные состояния действуют
   только под html.m-on — его ставит motion.js; без JS и при «уменьшить движение» всё видно сразу.
   Анимируются только transform, opacity, filter, clip-path. Цвета — из токенов страницы:
   --m-ink (текст), --m-ink-soft (непрочитанный текст), --m-line (линии), --m-acc (акцент). */

:root{
  --m-ink:var(--ink,#1c2024); --m-ink-soft:color-mix(in srgb,var(--m-ink) 22%,transparent);
  --m-line:var(--line2,#d9d9e0); --m-acc:var(--acc,#3e63dd);
  --m-ease:cubic-bezier(.16,1,.3,1); --m-dur:.9s; --m-step:.05s;
  --m-display:var(--font-display,"Inter Tight",system-ui,sans-serif);
  --m-serif:var(--font-accent,"Cormorant",Georgia,serif);
  --m-mono:var(--font-mono,"IBM Plex Mono",ui-monospace,monospace);
  --m-paper:#ffffff; --m-paper-ink:#111113; --m-paper-ink2:#3c3f44;
}

/* ---------- типографика референсов: гротеск + курсив антиквы ---------- */
.m-mix{font-family:var(--m-display);font-weight:500;letter-spacing:-0.035em;text-wrap:balance}
.m-mix em{font-family:var(--m-serif);font-style:italic;font-weight:600;letter-spacing:-0.01em;font-size:1.08em}
.m-mono{font-family:var(--m-mono);font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase}

/* ---------- 1. blur-words: заголовок проявляется из размытия по словам ---------- */
.m-w{display:inline-block;white-space:pre}
.m-on [data-m="blur-words"] .m-w{opacity:0;filter:blur(12px);transform:translateY(.25em)}
.m-on [data-m="blur-words"].m-in .m-w{opacity:1;filter:none;transform:none;
  transition:opacity var(--m-dur) var(--m-ease),filter var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease);
  transition-delay:calc(var(--i) * var(--m-step))}

/* ---------- 2. rise: блок выезжает снизу (интерфейс, карточка) ---------- */
.m-on [data-m="rise"]{opacity:0;transform:translateY(64px);filter:blur(6px)}
.m-on [data-m="rise"].m-in{opacity:1;transform:none;filter:none;
  transition:opacity 1.1s var(--m-ease),transform 1.1s var(--m-ease),filter 1.1s var(--m-ease);transition-delay:var(--m-delay,0s)}

/* ---------- 6. stagger: дети проявляются по очереди ---------- */
.m-on [data-m="stagger"]>*{opacity:0;transform:translateY(24px);filter:blur(8px)}
.m-on [data-m="stagger"].m-in>*{opacity:1;transform:none;filter:none;
  transition:opacity .8s var(--m-ease),transform .8s var(--m-ease),filter .8s var(--m-ease);transition-delay:calc(var(--i) * 90ms)}

/* ---------- 4. scrub: текст «прочитывается» по скроллу ---------- */
[data-m="scrub"] .m-w{transition:color .25s linear}
.m-on [data-m="scrub"] .m-w{color:var(--m-ink-soft)}
.m-on [data-m="scrub"] .m-w.m-read{color:var(--m-ink)}

/* ---------- 5. line: линия прорисовывается по скроллу ---------- */
.m-line{background:var(--m-line);transform-origin:top}
.m-on .m-line[data-m="line"]{transform:scaleY(var(--p,0))}
.m-line--x{transform-origin:left}
.m-on .m-line--x[data-m="line"]{transform:scaleX(var(--p,0))}

/* ---------- 7. grow: картинка вырастает на весь экран и сжимается в «пилюлю» ---------- */
.m-grow{position:relative;height:300vh}
.m-grow__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.m-grow__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:inset(var(--it,20%) var(--is,25%) var(--it,20%) var(--is,25%) round var(--ir,24px))}
.m-grow__text{position:relative;opacity:var(--to,0);transform:translateY(calc((1 - var(--to,0)) * 24px))}

/* ---------- 8. pills: картинки-«пилюли» раскрываются внутри строки заголовка ---------- */
.m-pill{display:inline-block;vertical-align:-.12em;height:.82em;width:var(--w,2.2em);border-radius:999px;overflow:hidden;
  margin:0 .08em}
.m-pill img{width:100%;height:100%;object-fit:cover;display:block}
.m-on [data-m="pills"] .m-pill{width:0;margin:0;transition:width 1s var(--m-ease),margin 1s var(--m-ease);transition-delay:calc(.3s + var(--i) * .15s)}
.m-on [data-m="pills"].m-in .m-pill{width:var(--w,2.2em);margin:0 .08em}

/* ---------- 9. индикатор раздела в шапке: «01 | Введение» ---------- */
.m-indicator{display:inline-flex;align-items:center;gap:12px;height:32px;padding:0 12px;border-radius:8px;
  background:color-mix(in srgb,var(--m-ink) 6%,transparent);overflow:hidden}
.m-indicator__n,.m-indicator__t{display:block;transition:transform .45s var(--m-ease),opacity .45s var(--m-ease)}
.m-indicator.m-swap .m-indicator__n,.m-indicator.m-swap .m-indicator__t{transform:translateY(-110%);opacity:0;transition:none}
.m-indicator__sep{width:1px;height:14px;background:var(--m-line)}

/* ---------- 11. orbit: иконки разлетаются от центра по орбите ---------- */
.m-orbit{position:relative;width:min(560px,100%);aspect-ratio:1;margin:0 auto}
.m-orbit>*{position:absolute;left:50%;top:50%;translate:-50% -50%;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg))}
.m-orbit>.m-orbit__core{transform:none}
.m-on .m-orbit[data-m="orbit"]>:not(.m-orbit__core){transform:translate(0,0) scale(.2);opacity:0}
.m-on .m-orbit[data-m="orbit"].m-in>:not(.m-orbit__core){transform:translate(var(--x),var(--y)) rotate(var(--r,0deg));opacity:1;
  transition:transform 1.2s var(--m-ease),opacity .6s var(--m-ease);transition-delay:calc(var(--i) * 70ms)}

/* ---------- 12. scan: рамки-прицелы идут по изображению по скроллу ---------- */
.m-scan{position:relative}
.m-scan__box{position:absolute;width:var(--bw-scan,14%);aspect-ratio:1;border:2px solid var(--m-acc);border-radius:8px;
  left:calc(var(--x0) + (var(--x1) - var(--x0)) * var(--p,0));top:calc(var(--y0) + (var(--y1) - var(--y0)) * var(--p,0))}

/* ---------- 13. steps: фон размывается, поверх карточка статусов шаг за шагом ---------- */
.m-steps{position:relative;height:260vh}
.m-steps__stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.m-steps__bg{transition:filter .6s var(--m-ease),transform .6s var(--m-ease)}
.m-steps.m-active .m-steps__bg{filter:blur(10px) saturate(.9);transform:scale(.98)}
.m-steps__card{position:absolute;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .5s var(--m-ease),transform .5s var(--m-ease)}
.m-steps.m-active .m-steps__card{opacity:1;transform:none}
.m-steps__step{display:none}
.m-steps__step.m-cur{display:block;animation:m-step-in .45s var(--m-ease)}
@keyframes m-step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 14. stack: секции-карточки наезжают друг на друга ---------- */
.m-stack{display:flex;flex-direction:column;gap:24px}
.m-stack>*{position:sticky;top:calc(96px + var(--i,0) * 16px)}

/* ---------- 15. ребристое стекло: фон с вертикальными «рёбрами» ---------- */
.m-fluted{position:relative;isolation:isolate;overflow:hidden;background:var(--fluted-base,#081236)}
.m-fluted::before{content:"";position:absolute;inset:-20%;z-index:-2;
  background:radial-gradient(40% 50% at calc(30% + var(--fx,0) * 20%) 30%,var(--fluted-1,#2f56d6),transparent 70%),
             radial-gradient(35% 45% at calc(75% - var(--fx,0) * 15%) 60%,var(--fluted-2,#1d3aa8),transparent 70%),
             radial-gradient(60% 50% at 50% 110%,var(--fluted-3,#0b1d5c),transparent 70%);filter:blur(30px)}
.m-fluted::after{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,rgba(255,255,255,.02) 1px 14px,rgba(0,0,0,.18) 14px 16px,rgba(255,255,255,.05) 16px 30px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- 10. scramble: текст собирается из случайных букв ---------- */
[data-m="scramble"]{font-variant-numeric:tabular-nums}

/* ---------- 17. чек: лента выезжает из щели, круговой текст поворачивается ---------- */
.m-slot{position:relative;overflow:hidden;padding-top:12px}
.m-slot::before{content:"";position:absolute;left:-12px;right:-12px;top:0;height:12px;border-radius:6px;background:var(--m-ink);z-index:2}
.m-on [data-m="receipt"]{transform:translateY(-100%)}
.m-on [data-m="receipt"].m-in{transform:none;transition:transform 1.6s cubic-bezier(.22,.9,.3,1)}
.m-receipt{background:var(--m-paper);color:var(--m-paper-ink);font-family:var(--m-mono);padding:28px 24px 0;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(6px at 6px 100%,transparent 98%,#000) bottom/12px 8px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(6px at 6px 100%,transparent 98%,#000) bottom/12px 8px repeat-x}
.m-receipt hr{border:0;border-top:1px dashed var(--m-paper-ink2);margin:16px 0}
.m-barcode{height:56px;margin:16px 0 0;background:repeating-linear-gradient(90deg,var(--m-paper-ink) 0 2px,transparent 2px 4px,var(--m-paper-ink) 4px 5px,transparent 5px 8px,var(--m-paper-ink) 8px 11px,transparent 11px 12px)}
.m-ring{display:block;width:100%;height:auto;transform:rotate(calc(var(--p,0) * 180deg))}

/* ---------- 18. док: панель раскрывается вверх из нижней панели ---------- */
.m-dock{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:min(560px,100%)}
.m-dock__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--m-ease)}
.m-dock__panel>div{overflow:hidden}
.m-dock[data-open] .m-dock__panel{grid-template-rows:1fr}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .m-grow{height:auto}.m-grow__stage{position:relative;height:70vh}
  .m-steps{height:auto}.m-steps__stage{position:relative;height:auto;padding:48px 0}
  .m-stack>*{position:relative;top:auto}
}

/* ---------- 19. tabs: шаги слева, панель справа — переключаются скроллом или кликом ---------- */
.m-tabs{position:relative;height:320vh}
.m-tabs__stage{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
[data-m="tabs"] [data-panel]{display:none}
[data-m="tabs"] [data-panel].m-cur{display:block;animation:m-step-in .5s var(--m-ease)}
[data-m="tabs"] [data-tab]{transition:color .3s var(--m-ease),border-color .3s var(--m-ease)}

/* ---------- 20. dots: объект из точек; цвет — color холста ---------- */
canvas[data-m="dots"]{display:block;width:100%;aspect-ratio:1;touch-action:pan-y}

/* ---------- 21. type: терминал печатает строки ---------- */
.m-term{font-family:var(--m-mono);font-size:13px;line-height:22px}
@media (prefers-reduced-motion:reduce){.m-tabs{height:auto}.m-tabs__stage{position:relative}}