/* СОБИРАЕТСЯ motion.py. Руками не править.
   Таблица ходов — `python3 motion.py`. */

/* ═══ 01 · ПРИЛАДКА ═══════════════════════════════════════════ */
.motion .hero{height:420svh;view-timeline:--hero block}
.motion .hero__pin{position:sticky;top:var(--rail);height:calc(100svh - var(--rail));
  overflow:hidden;padding-bottom:0}
.motion .type{position:absolute;left:0;right:0;top:0;z-index:4;background:var(--bg);
  border-bottom:var(--hair) solid var(--rule);animation:typeout linear both;
  animation-timeline:--hero;animation-range:contain 34% contain 68%}
/* заголовок не растворяется поверх листов, а уходит вверх целиком:
   полупрозрачный текст на документах читался как грязь */
@keyframes typeout{from{transform:translateY(0)}
                   to{transform:translateY(-102%)}}
.motion .hero__foot{position:absolute;left:0;right:0;bottom:0;z-index:5;margin:0;
  background:linear-gradient(to top,var(--bg) 62%,transparent)}
.motion .stage{position:absolute;inset:0;z-index:1}
.motion .wall{position:absolute;inset:0;display:block;padding:0;
  perspective:1900px;perspective-origin:12% 44%}
.motion .wall__g{display:block;position:absolute;left:0;top:0;width:1900px;height:1240px;
  transform-style:preserve-3d;transform-origin:0 50%;animation:turn linear both;
  animation-timeline:--hero;animation-range:contain 2% contain 78%}
@keyframes turn{
  from{transform:translate3d(2%,40svh,0) rotateY(27deg) rotateX(-2.6deg)}
  to  {transform:translate3d(0,-6svh,0) rotateY(6deg) rotateX(-1.1deg)}}
.motion .card{position:absolute;left:calc(var(--l) * 1px);top:calc(var(--t) * 1px);
  z-index:var(--z);transform-style:preserve-3d;animation:fly linear both}
@keyframes fly{from{transform:translate3d(var(--in),40px,-220px);opacity:0}
               to{transform:translate3d(0,0,0);opacity:1}}
.motion .card--i2{animation-timeline:--hero;animation-range:contain 10.0% contain 36.0%}
.motion .card--i3{animation-timeline:--hero;animation-range:contain 14.5% contain 40.5%}
.motion .card--i4{animation-timeline:--hero;animation-range:contain 19.0% contain 45.0%}
.motion .card--i5{animation-timeline:--hero;animation-range:contain 23.5% contain 49.5%}
.motion .card--i0,.motion .card--i1{animation:none}
.motion .lift{transform-style:preserve-3d;animation:back linear both;
  animation-timeline:--hero;animation-range:contain 62% contain 96%}
@keyframes back{from{transform:translate3d(0,0,0);opacity:1}
                to{transform:translate3d(0,0,-150px);opacity:.34}}
.motion .card--lead .lift{animation-name:forward;animation-timeline:--hero;animation-range:contain 62% contain 96%}
@keyframes forward{from{transform:translate3d(0,0,0) rotateY(0deg) scale(1)}
                   to{transform:translate3d(96px,-104px,300px) rotateY(-6deg) scale(1.04)}}
.motion .spec{opacity:0;animation:specin linear both;animation-timeline:--hero;animation-range:contain 74% contain 96%}
@keyframes specin{from{opacity:0;transform:translateX(-14px)}
                  to{opacity:1;transform:none}}
.motion .card:hover{z-index:20}

/* ═══ 02 · ТИРАЖ ══════════════════════════════════════════════ */
.motion .press{height:520svh;view-timeline:--pr block;padding-bottom:0}
.motion .press__pin{position:sticky;top:var(--rail);height:calc(100svh - var(--rail));
  overflow:hidden;display:flex;flex-direction:column;padding-bottom:12px}
.motion .press__body{flex:1;min-height:0;align-items:start}
.motion .press__stage{justify-content:center;height:100%}
.motion .step{animation:lit linear both}
.motion .prg i{animation:litp linear both}
.motion .step__n{animation:num linear both}
.motion .lit--0,
.motion .lit--0 .step__n{animation-timeline:--pr;animation-range:contain 0% contain 30%}
.motion .lit--1,
.motion .lit--1 .step__n{animation-timeline:--pr;animation-range:contain 22% contain 58%}
.motion .lit--2,
.motion .lit--2 .step__n{animation-timeline:--pr;animation-range:contain 48% contain 84%}
.motion .lit--3,
.motion .lit--3 .step__n{animation-timeline:--pr;animation-range:contain 74% contain 100%}
@keyframes lit{0%{background-color:transparent}14%{background-color:var(--lit)}
               86%{background-color:var(--lit)}100%{background-color:transparent}}
@keyframes litp{0%{opacity:.34}14%{opacity:1}86%{opacity:1}100%{opacity:.34}}
@keyframes num{0%{color:var(--fg3)}14%{color:var(--accent)}
               86%{color:var(--accent)}100%{color:var(--fg3)}}
.motion .step:first-child{animation-name:lit0}
.motion .prg i:first-child{animation-name:litp0}
.motion .step:first-child .step__n{animation-name:num0}
@keyframes lit0{0%{background-color:var(--lit)}86%{background-color:var(--lit)}
                100%{background-color:transparent}}
@keyframes litp0{0%{opacity:1}86%{opacity:1}100%{opacity:.34}}
@keyframes num0{0%{color:var(--accent)}86%{color:var(--accent)}100%{color:var(--fg3)}}
.motion .step:last-child{animation-name:lit9}
.motion .prg i:last-child{animation-name:litp9}
.motion .step:last-child .step__n{animation-name:num9}
@keyframes lit9{0%{background-color:transparent}14%{background-color:var(--lit)}
                100%{background-color:var(--lit)}}
@keyframes litp9{0%{opacity:.34}14%{opacity:1}100%{opacity:1}}
@keyframes num9{0%{color:var(--fg3)}14%{color:var(--accent)}100%{color:var(--accent)}}

/* слои листа. Оформление приходит последним: слой «тираж» и есть
   тот момент, когда лист становится тёмной декой */
.motion .prl--1{animation:fadeout linear both;animation-timeline:--pr;animation-range:contain 4% contain 26%}
.motion .prl--2{animation:blink linear both;animation-timeline:--pr;animation-range:contain 16% contain 58%}
.motion .prl--3{animation:blink linear both;animation-timeline:--pr;animation-range:contain 46% contain 86%}
.motion .prl--4{animation:fadein linear both;animation-timeline:--pr;animation-range:contain 74% contain 96%}
.motion .pr__marks{animation:blink linear both;animation-timeline:--pr;animation-range:contain 58% contain 84%}
@keyframes fadeout{from{opacity:1}to{opacity:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes blink{0%{opacity:0}20%{opacity:1}76%{opacity:1}100%{opacity:0}}

/* ═══ 03 · РОССЫПЬ ════════════════════════════════════════════ */
.motion .spread{height:400svh;view-timeline:--sp block}
.motion .spread__pin{position:sticky;top:var(--rail);height:calc(100svh - var(--rail));
  overflow:hidden;display:grid;grid-template-columns:400px minmax(0,1fr);gap:36px;
  padding:0 var(--pad)}
.motion .spread__pin h2{font-size:clamp(23px,2.25vw,33px);max-width:17ch}
.motion .spread__pin .spread__lead{font-size:15px;line-height:1.5}
.motion .spread__side{display:flex;flex-direction:column;padding-bottom:20px;overflow:hidden}
.motion .spread h2,.motion .spread__lead,.motion .spread .folio{padding-left:0;padding-right:0}
.motion .spread__pin .folio{padding-top:16px}
.motion .spread__pin .toc{margin-top:20px}
.motion .table{display:block;position:relative;padding:16px 0 0;height:100%}
.motion .table__g{position:absolute;left:0;top:4px;width:880px;height:700px;
  transform:scale(var(--tsc,1));transform-origin:0 0}
.motion .frag{position:absolute;left:calc(var(--l) * 1px);top:calc(var(--t) * 1px);
  z-index:var(--z);transform:rotate(var(--r));animation:lay linear both}
@keyframes lay{
  from{transform:translate3d(var(--dx),var(--dy),0) rotate(0deg) scale(var(--ds,.95))}
  to{transform:translate3d(0,0,0) rotate(var(--r)) scale(1)}}
.motion .frag--i0{animation-timeline:--sp;animation-range:contain 3% contain 58%}
.motion .frag--i1{animation-timeline:--sp;animation-range:contain 8% contain 63%}
.motion .frag--i2{animation-timeline:--sp;animation-range:contain 13% contain 68%}
.motion .frag--i3{animation-timeline:--sp;animation-range:contain 18% contain 73%}
.motion .frag--i4{animation-timeline:--sp;animation-range:contain 23% contain 78%}
.motion .frag--i5{animation-timeline:--sp;animation-range:contain 28% contain 83%}

/* ═══ 04 · СТОПКИ РАСТУТ ══════════════════════════════════════ */
/* ровный рост, без steps(): дискретность даёт сама фактура полос */
.motion .piles{view-timeline:--piles block}
.motion .pile__bars{animation:grow linear both;
  animation-timeline:--piles;animation-range:cover 10% cover 60%}
@keyframes grow{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ═══ НОУТБУК 1024–1200 ═══════════════════════════════════════ */
.motion.vp-m .spread__pin{grid-template-columns:330px minmax(0,1fr);gap:26px}
/* поле занимает всю ширину колонки и садится по центру
   свободной высоты: иначе снизу оставалась пустая треть */
.motion.vp-m .table__g{--tsc:.68;top:9%}
.motion.vp-m .card--lead{--s:.46}
.motion.vp-m .card--lead .lift{animation-name:forwardm}
@keyframes forwardm{from{transform:translate3d(0,0,0) rotateY(0deg) scale(1)}
                    to{transform:translate3d(24px,-186px,240px) rotateY(-6deg) scale(1)}}

/* ═══ ТЕЛЕФОН ═════════════════════════════════════════════════ */
.motion.vp-s .hero{height:340svh}
.motion.vp-s .press{height:430svh}
.motion.vp-s .spread{height:330svh}
.motion.vp-s .wall{perspective:1100px;perspective-origin:50% 30%}
.motion.vp-s .wall__g{position:absolute;left:0;top:0;width:100%;height:100%;
  animation-name:rise;animation-timeline:--hero;animation-range:contain 2% contain 72%}
@keyframes rise{from{transform:translate3d(0,54svh,0)}to{transform:translate3d(0,2svh,0)}}
.motion.vp-s .card{left:50%;top:9%;margin-left:calc(var(--w,1280) * var(--ms,.3) * -.5px);
  z-index:calc(10 - var(--mi));animation-name:flym}
@keyframes flym{
  from{transform:translate3d(calc(var(--mi) * 5px),calc(var(--mi) * 12px - 34px),
        calc(var(--mi) * -58px));opacity:0}
  to{transform:translate3d(calc(var(--mi) * 9px),calc(var(--mi) * 52px),
      calc(var(--mi) * -24px));opacity:1}}
.motion.vp-s .card .tag,.motion.vp-s .card .spec{display:none}
.motion.vp-s .card--lead .tag{display:flex}
/* на телефоне спецификация остаётся: она держит нижнюю треть экрана */
.motion.vp-s .card--lead .spec{display:block}
.motion.vp-s .lift{animation-name:backs}
@keyframes backs{from{transform:translate3d(0,0,0);opacity:1}
                 to{transform:translate3d(0,26px,-90px);opacity:0}}
.motion.vp-s .card--lead .lift{animation-name:forwards}
@keyframes forwards{from{transform:translate3d(0,0,0) scale(1)}
                    to{transform:translate3d(0,-42px,88px) scale(1)}}
.motion.vp-s .hero__foot{padding:10px var(--pad) 12px;background:var(--bg);
  border-top:var(--hair) solid var(--rule)}
.motion.vp-s .press__body{grid-template-columns:1fr;gap:14px}
.motion.vp-s .steps{position:relative;height:250px;border-top:0;order:2}
.motion.vp-s .step{position:absolute;left:0;right:0;top:96px;border-bottom:0;padding:0;
  margin-left:0;animation-name:show}
.motion.vp-s .step:first-child{animation-name:show0}
.motion.vp-s .step:last-child{animation-name:show9}
@keyframes show{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes show0{0%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes show9{0%{opacity:0}12%{opacity:1}100%{opacity:1}}
.motion.vp-s .press__stage{order:1;height:auto}
.motion.vp-s .spread__pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:0}
.motion.vp-s .spread__side{padding-bottom:0}
.motion.vp-s .spread__pin h2{font-size:clamp(21px,6.2vw,30px);max-width:20ch}
.motion.vp-s .spread__pin .spread__lead{font-size:13.5px;line-height:1.45;margin-top:12px}
.motion.vp-s .spread__pin .toc{display:none}
.motion.vp-s .spread__meta{margin-top:12px;padding-top:10px;gap:4px}
.motion.vp-s .table{padding:6px 0 0}
/* поле по ширине телефона, а не по высоте: иначе крайние листы
   срезаются краем экрана. Пустоту снизу забираем сдвигом вниз */
.motion.vp-s .table__g{--tsc:.395;top:14%}