/* «Оживающие» иллюстрации SkladSync.
   Базовое состояние — законченная сцена (стрелки нарисованы, подписи видны): так страница выглядит без JS,
   при prefers-reduced-motion и в режиме «без анимации». Начальные состояния включаются только классом
   html.anim-a, который ставит scenes.js, когда движение разрешено. Двигаются только transform,
   opacity и stroke-dashoffset — без перерасчёта раскладки. */
.scene{position:relative;margin:0}
.scene img{display:block;width:100%;height:auto}
.scene-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;font-family:Inter,system-ui,sans-serif}
.scene-svg .tok{opacity:0}
.scene-svg .arr,.scene-svg .chan{stroke-dasharray:1}
.scene-svg .chan{stroke-dasharray:0.02 0.018}
/* Подпись «выпрыгивает» из своего центра. Наконечнику стрелки этого не нужно: его поворот задан атрибутом transform
   вокруг острия (0,0), а transform-origin:center перенёс бы поворот в центр рамки — наконечник съезжал с линии. */
.scene-svg .lbl{transform-box:fill-box;transform-origin:center}

/* Линия прозрачна до начала прорисовки: у штриха нулевой длины круглый конец рисуется точкой. */
@keyframes ss-draw{from{stroke-dashoffset:1;opacity:0}6%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes ss-fade{from{opacity:0}to{opacity:1}}
@keyframes ss-pop{0%{opacity:0;scale:.6}70%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}

/* Вариант A: IntersectionObserver ставит .is-live, сцена проигрывается один раз. */
html.anim-a .scene:not(.is-live) .arr{stroke-dashoffset:1;opacity:0}
html.anim-a .scene:not(.is-live) .head,html.anim-a .scene:not(.is-live) .pop{opacity:0}
html.anim-a .scene:not(.is-live) .chan{opacity:0}
html.anim-a .scene.is-live .arr{animation:ss-draw .7s var(--d,0s) cubic-bezier(.45,0,.2,1) both}
html.anim-a .scene.is-live .head{animation:ss-fade .18s var(--d,0s) ease-out both}
html.anim-a .scene.is-live .pop{animation:ss-pop .45s var(--d,0s) cubic-bezier(.22,1,.36,1) both}
html.anim-a .scene.is-live .chan{animation:ss-fade .5s var(--d,0s) ease-out both}


/* Лёгкое появление блоков текста рядом со сценой — только сдвиг и прозрачность, текст не прячется без JS. */
html.anim-a .rise:not(.is-live){opacity:0;translate:0 14px}
html.anim-a .rise.is-live{transition:opacity .45s cubic-bezier(.22,1,.36,1),translate .45s cubic-bezier(.22,1,.36,1)}

/* Сцены «российских реалий» (tools/world.py): строки и подписи появляются, числа меняются, этикетка выходит из принтера.
   Базовое состояние — законченный кадр: новое число, этикетка вышла, новая строка на месте. */
.scene-svg .n-old{opacity:0}
.scene-svg .w-in,.scene-svg .n-old,.scene-svg .n-new,.scene-svg .shift{transform-box:fill-box}
.scene-svg .print{transform-box:fill-box;transform-origin:top}
.scene-svg .pulse{transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes w-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes n-old{0%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -30%}}
@keyframes n-new{0%{opacity:0;translate:0 30%}100%{opacity:1;translate:0 0}}
@keyframes print{from{scale:1 0}to{scale:1 1}}
@keyframes pulse{0%{opacity:0;scale:.4}40%{opacity:1}100%{opacity:0;scale:1.6}}
@keyframes shift{from{translate:0 -20%}to{translate:0 0}}
html.anim-a .scene:not(.is-live) .w-in,html.anim-a .scene:not(.is-live) .n-new,html.anim-a .scene:not(.is-live) .print{opacity:0}
html.anim-a .scene:not(.is-live) .n-old{opacity:1}
html.anim-a .scene.is-live .w-in{animation:w-in .45s var(--d,0s) cubic-bezier(.22,1,.36,1) both}
html.anim-a .scene.is-live .n-old{animation:n-old .35s var(--d,0s) ease-in both}
html.anim-a .scene.is-live .n-new{animation:n-new .4s calc(var(--d,0s) + .15s) cubic-bezier(.22,1,.36,1) both}
html.anim-a .scene.is-live .print{animation:print .7s var(--d,0s) cubic-bezier(.3,0,.2,1) both}
html.anim-a .scene.is-live .pulse{animation:pulse .6s var(--d,0s) ease-out both}
html.anim-a .scene.is-live .shift{animation:shift .45s var(--d,0s) cubic-bezier(.22,1,.36,1) both}

/* Телефон: второстепенные подписи слоя скрыты, ключевые — крупнее (world.py: d-only / m-only). */
.scene-svg .m-only{display:none}
@media (max-width:600px){.scene-svg .d-only{display:none}.scene-svg .m-only{display:inline}}

/* «Что нового»: рост. Без анимации (нет JS, «уменьшить движение») виден один законченный кадр .g-base. В варианте A его
   заменяют копии того же файла, обрезанные по областям (--l/--r — поля слева и справа): мастерская проявляется, героиня
   входит слева, склад «поднимается» из земли, витрины поднимаются; затем вывеска, стрелки и жетоны (SVG-слой). */
.growth{margin:0 0 34px}
.growth .g-l{position:absolute;left:0;top:0;display:none;clip-path:inset(0 var(--r) 0 var(--l))}
html.anim-a .growth .g-l{display:block}
html.anim-a .growth .g-base{visibility:hidden}
@keyframes g-rise{from{clip-path:inset(100% var(--r) 0 var(--l))}to{clip-path:inset(0 var(--r) 0 var(--l))}}
@keyframes g-in{from{opacity:0;translate:-28px 0}to{opacity:1;translate:0 0}}
@keyframes g-up{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
html.anim-a .growth:not(.is-live) .g-l{opacity:0}
html.anim-a .growth.is-live .g-fade{animation:ss-fade .5s var(--d,0s) ease-out both}
html.anim-a .growth.is-live .g-in{animation:g-in .65s var(--d,0s) cubic-bezier(.22,1,.36,1) both}
html.anim-a .growth.is-live .g-rise{animation:g-rise .95s var(--d,0s) cubic-bezier(.3,0,.2,1) both}
html.anim-a .growth.is-live .g-up{animation:g-up .55s var(--d,0s) cubic-bezier(.22,1,.36,1) both}

@media (prefers-reduced-motion: reduce){
  .scene-svg *,.rise{animation:none!important;transition:none!important}
  .scene-svg .arr{stroke-dashoffset:0!important;opacity:1!important}
  .scene-svg .head,.scene-svg .pop,.scene-svg .chan,.rise{opacity:1!important;translate:none!important}
  .scene-svg .w-in,.scene-svg .n-new,.scene-svg .print{opacity:1!important;translate:none!important;scale:none!important}
  .scene-svg .n-old,.scene-svg .pulse{opacity:0!important}
  .scene-svg .tok{display:none}
}