/* marketing-motion.css — анимационная механика публичной витрины (landing).
 *
 * Делит ответственность с Tailwind: ЦВЕТ задаётся cz-токен-классами в разметке
 * (бренд-градиенты, currentColor для свечения/маркера), здесь — ТОЛЬКО движение:
 * keyframes, маски, transform/opacity, reveal-состояния, prefers-reduced-motion.
 * Никаких hardcoded бренд-hex (ZERO-rule UI). Классы префикс `mkt-`.
 *
 * Парный JS: static/marketing-fx.js. Подключение: landing.html
 * (extra_head → этот CSS; extra_scripts → marketing-fx.js).
 */

/* ── Hero: фон ken-burns + canvas mesh + свечение ──────────────────────── */
.mkt-hero-bg{will-change:transform;animation:mkt-kb 26s ease-in-out infinite alternate}
@keyframes mkt-kb{from{transform:scale(1.02)}to{transform:scale(1.09) translateX(-1.2%)}}

/* canvas-слой видим справа (за щитом), слева текст остаётся чистым */
.mkt-hero-canvas{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 34%,#000 62%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 34%,#000 62%);
}

/* свечение над щитом — цвет берётся из currentColor (text-cz-* в разметке) */
.mkt-hero-glow{
  background:radial-gradient(circle,currentColor 0%,transparent 62%);
  filter:blur(8px);pointer-events:none;
  animation:mkt-glow 4.8s ease-in-out infinite;
}
@keyframes mkt-glow{0%,100%{opacity:.30;transform:scale(.96)}50%{opacity:.6;transform:scale(1.06)}}

/* акцентный дэш в eyebrow «дышит» */
.mkt-dash{transform-origin:left;animation:mkt-dash 3.6s ease-in-out infinite}
@keyframes mkt-dash{0%,100%{transform:scaleX(.55);opacity:.7}50%{transform:scaleX(1);opacity:1}}

/* entrance hero-контента при загрузке */
.mkt-up{opacity:0;transform:translateY(20px);animation:mkt-up .8s cubic-bezier(.2,.7,.2,1) forwards}
.mkt-up.mkt-d1{animation-delay:.05s}.mkt-up.mkt-d2{animation-delay:.16s}
.mkt-up.mkt-d3{animation-delay:.28s}.mkt-up.mkt-d4{animation-delay:.40s}.mkt-up.mkt-d5{animation-delay:.52s}
@keyframes mkt-up{to{opacity:1;transform:none}}

/* ── Reveal по скроллу (JS добавляет .mkt-in через IntersectionObserver) ── */
.mkt-reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.mkt-reveal.mkt-in{opacity:1;transform:none}
.mkt-reveal.mkt-s1{transition-delay:.06s}.mkt-reveal.mkt-s2{transition-delay:.18s}
.mkt-reveal.mkt-s3{transition-delay:.30s}.mkt-reveal.mkt-s4{transition-delay:.42s}

/* ── Journey: рельс + прочерчивание + фоновый маркер ──────────────────── */
.mkt-jfill{width:0;transition:width 1.7s cubic-bezier(.4,.6,.2,1)}
.mkt-jline.mkt-drawn .mkt-jfill{width:100%}
/* маркер — фоновый слой (за нодами); цвет/свечение из currentColor */
.mkt-jpulse{background:currentColor;box-shadow:0 0 14px 3px currentColor;opacity:0}
.mkt-jpulse.mkt-run{opacity:1}
/* ноды появляются «по очереди» (scale+fade) — sequential lighting через stagger reveal */
.mkt-jnode{transition:transform .5s cubic-bezier(.2,1.4,.4,1),box-shadow .4s}
.mkt-reveal.mkt-in .mkt-jnode{animation:mkt-pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes mkt-pop{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ── Форматы: дорисовка контура иконки при reveal ─────────────────────── */
.mkt-draw path,.mkt-draw rect,.mkt-draw circle{stroke-dasharray:120;stroke-dashoffset:120}
.mkt-reveal.mkt-in .mkt-draw path,.mkt-reveal.mkt-in .mkt-draw rect,.mkt-reveal.mkt-in .mkt-draw circle{
  animation:mkt-draw 1.1s .15s ease forwards}
@keyframes mkt-draw{to{stroke-dashoffset:0}}
/* фоновый glyph-watermark «оживает» на hover карточки */
.mkt-fcard .mkt-watermark{transition:transform .3s,opacity .3s}
.mkt-fcard:hover .mkt-watermark{transform:scale(1.06) rotate(-4deg);opacity:1}

/* ── a11y: уважение системной настройки «уменьшить движение» ──────────── */
@media (prefers-reduced-motion: reduce){
  .mkt-hero-bg,.mkt-hero-glow,.mkt-dash{animation:none!important}
  .mkt-up{animation:none!important;opacity:1!important;transform:none!important}
  .mkt-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .mkt-jfill{transition:none!important;width:100%!important}
  .mkt-jpulse{display:none!important}
  .mkt-reveal.mkt-in .mkt-jnode,
  .mkt-reveal.mkt-in .mkt-draw path,
  .mkt-reveal.mkt-in .mkt-draw rect,
  .mkt-reveal.mkt-in .mkt-draw circle{animation:none!important}
  .mkt-draw path,.mkt-draw rect,.mkt-draw circle{stroke-dashoffset:0!important}
}
/* JS-форс reduced (body.mkt-reduce) — зеркалит media-query для надёжности */
body.mkt-reduce .mkt-hero-bg,body.mkt-reduce .mkt-hero-glow,body.mkt-reduce .mkt-dash{animation:none!important}
body.mkt-reduce .mkt-up{animation:none!important;opacity:1!important;transform:none!important}
body.mkt-reduce .mkt-reveal{opacity:1!important;transform:none!important;transition:none!important}
body.mkt-reduce .mkt-jfill{transition:none!important;width:100%!important}
body.mkt-reduce .mkt-jpulse{display:none!important}
body.mkt-reduce .mkt-reveal.mkt-in .mkt-jnode,
body.mkt-reduce .mkt-reveal.mkt-in .mkt-draw path,
body.mkt-reduce .mkt-reveal.mkt-in .mkt-draw rect,
body.mkt-reduce .mkt-reveal.mkt-in .mkt-draw circle{animation:none!important}
body.mkt-reduce .mkt-draw path,body.mkt-reduce .mkt-draw rect,body.mkt-reduce .mkt-draw circle{stroke-dashoffset:0!important}