/* Эффекты боевых страниц (29.09.2026, с тестовой /test/sellers/): наведение и появление на главной, /advertisers/,
   /publishers/, /sellers/. Приёмы v7-open: плоские тени со смещением, короткие переходы (.15s transform, .2s цвет).
   Цвет подсветки — --fx: у владельцев трафика бирюзовый, у остальных — синий акцент; у программ /sellers — свой.
   Наведение — только для мыши (hover + fine pointer); «меньше движения» — всё статично и сразу видно. */
:root { --fx: var(--accent); }
.page-publishers, .hpub { --fx: var(--teal-fg); }

/* ── появление при прокрутке (класс fx-js ставит fx.js — без скрипта всё видно сразу) ── */
.fx-js .fx-rv { opacity: 0; transform: translateY(16px); transition: opacity .35s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.fx-js .fx-rv.is-in { opacity: 1; transform: none; }
/* после появления fx.js снимает fx-rv, и наведение идёт с собственной скоростью карточки */

/* ── карточки с фоном и рамкой: приподнимаются, тень растёт ── */
.fit__col, .hpub__panel, .spk__item, .hblog__col, .acs__card, .ptl__card, .pex__item, .preq__panel, .post-card, .bb__node, .door { transition: transform .15s ease-out, box-shadow .2s ease-out, border-color .2s; }
/* ── строки и колонки без рамки: мягкая подсветка ── */
.start__step, .ppl__side, .ast__phase, .awe__place, .atl__model, .atl__tool, .ppay__step, .sht__step, .ahe__row { transition: background-color .2s; }
.ppay__step::before { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }

/* ── полосы программ /sellers: линия цвета программы прорисовывается слева направо ── */
.prog { position: relative; }
.fx-js .prog::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: var(--bg); transform-origin: right; transition: transform .9s cubic-bezier(.6, 0, .2, 1) .1s; }
.fx-js .prog.is-in::before { transform: scaleX(0); }
.prog__step .sh-ico { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.prog.is-in .prog__step .sh-ico { transform: rotate(-8deg) scale(1.12); }

/* ── первый экран /sellers: карточки программ приподнимаются, за курсором — мягкое пятно цвета программы ── */
.shero__door { position: relative; transition: transform .15s ease-out, box-shadow .2s ease-out; }
.shero__door::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--sh-a) 12%, transparent), transparent 70%); }
.shero__door--traffic::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--sh-b) 12%, transparent), transparent 70%); }
.shero__door > * { position: relative; z-index: 1; }
.shero__prog .sh-ico { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.shero__sub { transition: transform .15s ease-out, box-shadow .2s ease-out; }

/* ── выкуп: шаги и «Кому подходит» ── */
.bb__tick { position: relative; transition: background-color .2s, padding-left .2s; }
.bb__left .bb__tick::after { content: "" !important; display: block !important; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--accent); transition: width .35s ease-out; }
.bb__fit li::before { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .2s; }
.bb__fit li b { transition: color .2s; }

/* ── доказательства: полосы объёма растут при появлении, видео и марки приподнимаются ── */
.fx-js .bbp-deal__bar::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .15s; }
.fx-js .bbp-deal.is-in .bbp-deal__bar::before { transform: none; }
.bbp-deal { transition: background-color .2s; }
.bbp-fig__video { transition: transform .15s ease-out, box-shadow .2s ease-out; }
.bbp-brands__list li { transition: transform .15s ease-out, box-shadow .2s ease-out, border-color .2s; }

/* ── трафик: шаги пути загораются по очереди, строки отчёта подсвечиваются ── */
.stf__step { transition: background-color .3s; }
.stf__num { transition: color .2s, background-color .2s; }
.fx-js .stf__path .stf__step { border-top-color: var(--line); transition: border-color .4s ease-out, background-color .3s; transition-delay: calc(var(--i, 0) * 180ms); }
.fx-js .stf__path.is-in .stf__step { border-top-color: var(--stf); }
.stf__tbl tbody tr, .stf__cmp-row { transition: background-color .15s; }
.stf__vs .vs li { transition: padding-left .2s; }

/* ── «Штурман»: ответ печатается, экраны — строки с полосой цвета программы ── */
.sht__msg--a.is-typing::after { content: "▍"; margin-left: 2px; color: var(--sht); animation: fx-caret .8s steps(1) infinite; }
@keyframes fx-caret { 50% { opacity: 0; } }
.sht__scr li { position: relative; transition: background-color .2s, padding-left .2s; }
.sht__scr li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--sht); transition: width .2s; }

/* ── вопросы, Telegram ── */
.hfaq__item { transition: background-color .2s; }
.tg-row { transition: border-color .2s, box-shadow .2s; }

@media (hover: hover) and (pointer: fine) {
  /* карточки: с тенью 8px — до 12px, без тени — появляется 6px */
  .fit__col:hover, .spk__item:hover, .hblog__col:hover, .pex__item:hover, .post-card:hover, .bb__node:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--shadow-flat); }
  .hpub__panel:hover, .acs__card:hover, .preq__panel:hover, .door:hover { transform: translateY(-4px); box-shadow: 12px 12px 0 var(--shadow-flat); }
  .ptl__card:hover { transform: translateY(-4px); box-shadow: 12px 12px 0 var(--cut-bg); }
  /* рамка — цвета раздела; цветная полоса карточки (сверху, у набора продавцам — слева) остаётся своей */
  .fit__col:hover, .hblog__col:hover, .pex__item:hover, .post-card:hover, .bb__node:hover { border-right-color: var(--fx); border-bottom-color: var(--fx); border-left-color: var(--fx); }
  .post-card:hover, .bb__node:hover { border-top-color: var(--fx); }
  .spk__item:hover { border-top-color: var(--fx); border-right-color: var(--fx); border-bottom-color: var(--fx); }

  .start__step:hover, .ppl__side:hover, .ast__phase:hover, .awe__place:hover, .atl__model:hover, .ppay__step:hover, .sht__step:hover { background: color-mix(in srgb, var(--fx) 6%, transparent); }
  .atl__tool:hover, .ahe__row:hover { background: color-mix(in srgb, var(--fx) 5%, transparent); }
  .ppay__step:hover::before { transform: scale(1.6); }

  .shero__door:hover { transform: translateY(-4px); box-shadow: 12px 12px 0 var(--shadow-flat); }
  .shero__door:hover::after { opacity: 1; }
  .shero__door:hover .shero__prog .sh-ico { transform: rotate(-12deg) scale(1.2); }
  .shero__sub:hover { transform: translateY(-2px); box-shadow: 10px 10px 0 var(--shadow-flat); }

  .bb__tick:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .bb__left .bb__tick:hover { padding-left: 10px; }
  .bb__left .bb__tick:hover::after { width: 100%; }
  .bb__fit li:hover::before { transform: rotate(45deg) scale(1.35); }
  .bb__fit li:hover b { color: var(--accent); }

  .bbp-deal:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .bbp-fig__video:hover { transform: translateY(-3px); box-shadow: 8px 8px 0 var(--shadow-flat); }
  .bbp-brands__list li:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--shadow-flat); border-color: var(--accent); }

  .stf__step:hover { background: var(--stf-tint); }
  .stf__step:hover .stf__num { color: var(--card); background: var(--stf); padding: 0 6px; display: inline-block; }
  .stf__tbl tbody tr:hover, .stf__cmp-row:hover { background: var(--stf-tint); }
  .stf__vs .vs li:hover { padding-left: 8px; }

  .sht__scr li:hover { background: var(--sht-tint); padding-left: 12px; }
  .sht__scr li:hover::before { width: 4px; }

  .hfaq__item:hover { background: color-mix(in srgb, var(--fx) 5%, transparent); }
  .tg-row:hover { border-color: var(--accent); box-shadow: 5px 5px 0 var(--shadow-flat); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-rv, .fx-js .prog::before, .fx-js .bbp-deal__bar::before, .fx-js .stf__path .stf__step { opacity: 1; transform: none !important; transition: none; }
  .fx-js .prog::before { display: none; }
  .fx-js .stf__path .stf__step { border-top-color: var(--stf); }
  .shero__door, .shero__sub, .bbp-fig__video, .bbp-brands__list li, .post-card, .fit__col, .hpub__panel, .spk__item, .hblog__col, .acs__card, .ptl__card, .pex__item, .preq__panel, .bb__node, .door { transition: none; }
  .shero__door:hover, .shero__sub:hover, .bbp-fig__video:hover, .bbp-brands__list li:hover, .post-card:hover, .fit__col:hover, .hpub__panel:hover, .spk__item:hover, .hblog__col:hover, .acs__card:hover, .ptl__card:hover, .pex__item:hover, .preq__panel:hover, .bb__node:hover, .door:hover { transform: none; }
  .sht__msg--a.is-typing::after { animation: none; }
}