/* Движение сайта: сцены продуктов, свет за курсором, рамка, детали. Анимации включает motion.js (класс mo-motion на <html>);
   при «Уменьшить движение» всё стоит в конечном состоянии. Без JS страница выглядит как раньше. */

/* ---------- Переходы между страницами ---------- */
@view-transition { navigation: auto; }
.sticky { view-transition-name: header; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(header) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Шапка: тень после прокрутки ---------- */
.sticky { transition: box-shadow .2s ease; }
.sticky.is-stuck { box-shadow: 0 6px 18px -10px rgba(34, 30, 36, .28); }
.sticky-sensor { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; visibility: hidden; }

/* ---------- Первый экран: слова H1, орбита, знак ---------- */
.mo-hero__title .w { display: inline-block; max-width: 100%; }
@keyframes orbit-turn { from { transform: rotate(-34deg); } to { transform: rotate(326deg); } }
@keyframes mark-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
.mo-motion .mo-hero__art svg > g { animation: orbit-turn 180s linear infinite; }
.mo-motion .mo-hero__art svg image { transform-box: fill-box; transform-origin: center; animation: mark-breathe 4.5s ease-in-out infinite alternate; }

/* ---------- Сцены ---------- */
.scene { display: none; position: relative; width: 100%; min-width: 0; overflow: hidden; height: calc(var(--sh, 170) * 1px); }
.mo-scenes .scene { display: block; }
.mo-scenes .mo-hero__art--scene > svg { display: none; }
.scene__in { position: absolute; left: 0; top: 0; width: calc(var(--sw, 320) * 1px); height: calc(var(--sh0, 170) * 1px); transform-origin: 0 0; transform: translateX(var(--ox, 0px)) scale(var(--k, 1)); }
.scene--card { margin-bottom: 4px; border-radius: 12px; }
.scene--hero { max-width: 100%; }
.mo-hero__art--scene { max-width: 480px; aspect-ratio: auto; width: 100%; }
.mo-hero__art--stack { display: flex; flex-direction: column; gap: var(--space-4); }
.mo-hero__art--stack .ii-price { margin-left: 0; max-width: none; }
.mo-hero__art--scene .scene--mp, .mo-hero__art--scene .scene--tree { border-radius: 16px; }

/* КП: анкета → документ → штампы */
.scene--kp { font-family: var(--font-text); color: var(--on-night); }
.scene--card.scene--kp { background: var(--night); }
.scene--kp .q { position: absolute; left: 0; top: 24px; width: 58%; display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #221e24; border: 1px solid rgba(247, 245, 242, .12); }
.scene--kp .q__h { font: 500 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.scene--kp .q__f { display: grid; gap: 4px; }
.scene--kp .q__f span { font-size: 11px; opacity: .55; }
.scene--kp .q__f i { display: block; min-height: 30px; padding: 6px 10px; border-radius: 8px; background: rgba(247, 245, 242, .08); font: 400 13px/18px var(--font-text); font-style: normal; white-space: nowrap; overflow: hidden; }
.scene--kp .q__f i.typing::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--rec); animation: caret .7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.scene--kp .doc { position: absolute; right: 0; top: 0; width: 62%; height: 400px; padding: 18px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 10px; transform-origin: 70% 80%; }
.scene--kp .doc__top { display: flex; align-items: center; gap: 10px; }
.scene--kp .doc__logo { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-sunken); display: grid; place-items: center; font: 700 13px/1 var(--font-display); color: var(--rec); flex: none; }
.scene--kp .doc__t { font: 600 15px/19px var(--font-display); }
.scene--kp .doc__s { font-size: 11px; color: var(--ink-subtle); }
.scene--kp .lines { width: 100%; height: 46px; }
.scene--kp .lines path { fill: none; stroke: #cfc8c1; stroke-width: 6; stroke-linecap: round; }
.scene--kp table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.scene--kp td { padding: 5px 0; border-bottom: 1px solid var(--surface-sunken); background: none; }
.scene--kp td:last-child { text-align: right; font-weight: 600; }
.scene--kp .bars--doc { display: flex; flex-direction: row; align-items: flex-end; gap: 7px; height: 62px; margin: 0; padding-top: 6px; border-top: 1px dashed var(--line); }
.scene--kp .bars--doc i { flex: 1; border-radius: 4px 4px 0 0; background: var(--ink); transform-origin: bottom; }
.scene--kp .bars--doc i:nth-child(3) { background: var(--rec); }
.scene--kp .doc__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--ink-subtle); }
.scene--kp .stamp { position: absolute; right: 10px; bottom: -10px; display: flex; gap: 6px; }
.scene--kp .stamp span { padding: 7px 12px; border-radius: 999px; background: var(--rec); color: #fff; font: 600 12px/1 var(--font-text); box-shadow: 0 10px 24px rgba(196, 42, 33, .4); }
.scene--kp .stamp span + span { background: #fff; color: var(--ink); }
.scene--kp .flow { position: absolute; left: 40%; top: 150px; width: 22%; height: 120px; overflow: visible; }
.scene--kp .flow path { fill: none; stroke: var(--rec); stroke-width: 2; stroke-dasharray: 4 6; }
.scene--kp .obs { position: absolute; left: 6px; bottom: 4px; width: 96px; height: auto; transform-origin: 50% 60%; }

/* Мини-сцены: проверка сайта, медиаплан, дерево ИИ-системы */
.scene--scan, .scene--mp, .scene--tree { background: var(--surface-sunken); }
.scene--scan .site { position: absolute; inset: 14px 18px; border-radius: 8px; background: #fff; padding: 10px; display: grid; gap: 7px; align-content: start; }
.scene--scan .site i { display: block; height: 8px; border-radius: 4px; background: #e6e1dc; }
.scene--scan .site i.h { height: 22px; background: var(--night); }
.scene--scan .scan { position: absolute; left: 10px; right: 10px; top: 14px; height: 2px; background: var(--rec); box-shadow: 0 0 14px 3px rgba(226, 54, 44, .45); opacity: 0; }
.scene--scan .chk { position: absolute; right: 26px; display: flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-text); padding: 4px 8px; border-radius: 999px; background: #e3f1e9; color: var(--positive); }
.scene--scan .chk.bad { background: var(--rec-tint, #fbe4e1); color: var(--rec-text); }
.scene--mp .mpx { position: absolute; inset: 14px 18px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.scene--mp .mpx__sum { font: 600 26px/30px var(--font-display); font-variant-numeric: tabular-nums; }
.scene--mp .mpx__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 11px; color: var(--ink-muted); }
.scene--mp .mpx__bar { height: 10px; border-radius: 5px; background: #fff; overflow: hidden; }
.scene--mp .mpx__bar b { display: block; height: 100%; background: var(--ink); border-radius: 5px; }
.scene--mp .mpx__row:nth-child(3) .mpx__bar b { background: var(--rec); }
.scene--mp .mpx__note { margin-top: auto; font-size: 10px; color: var(--ink-subtle); }
.scene--tree svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene--tree path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.scene--tree .node { position: absolute; padding: 4px 8px; border-radius: 7px; background: #fff; border: 1px solid var(--line); font: 500 10px/14px var(--font-mono); white-space: nowrap; translate: -50% -50%; color: var(--ink); }
.scene--tree .node--root { background: var(--night); color: #fff; border-color: var(--night); }
.scene--card.scene--mp, .scene--card.scene--scan, .scene--card.scene--tree { border-radius: 12px; }

/* ---------- Свет за курсором в тёмных блоках (только мышь) ---------- */
@property --spot-o { syntax: "<number>"; inherits: false; initial-value: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mo-motion [data-spot] {
    background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(226, 54, 44, calc(.26 * var(--spot-o))), transparent 65%);
    transition: --spot-o .3s ease;
  }
  .mo-motion [data-spot][data-lit] { --spot-o: 1; }
}

/* ---------- Бегущая рамка у флагмана ---------- */
@property --beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beam-spin { to { --beam-a: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    .mo-service--flagship::after {
      content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
      background: conic-gradient(from var(--beam-a), transparent 0 70%, var(--rec) 86%, transparent 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      animation: beam-spin 4.5s linear infinite;
    }
  }
}

/* ---------- Знак Обсервера (линейный) ---------- */
.obs-line { display: block; height: auto; pointer-events: none; }
.next-step .obs-line { width: 76px; flex: none; margin-left: auto; opacity: .9; }
.mo-footer { position: relative; }
.mo-footer > .obs-line { position: absolute; right: var(--space-8); top: var(--space-8); width: 72px; opacity: .55; }
.notfound-mark { margin-top: var(--space-8); display: flex; justify-content: center; padding: var(--space-8); border-radius: var(--radius-l); background: var(--night); }
.obs-line--404 { width: min(260px, 70%); transform-origin: 50% 80%; }
@keyframes obs-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (prefers-reduced-motion: no-preference) { .obs-line--404 { animation: obs-sway 3.2s ease-in-out infinite alternate; } }
@media (max-width: 900px) { .next-step .obs-line { display: none; } .mo-footer > .obs-line { width: 48px; right: var(--space-4); top: var(--space-4); } }

/* ---------- Полосы растут по прокрутке (только где есть animation-timeline) ---------- */
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bars__row i { transform: none; transition: none; transform-origin: left; animation: grow-x linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .mp__bar i { transform-origin: left; animation: grow-x linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  }
}

/* ---------- Кнопки и карточки: стрелка, подъём ---------- */
.arr { display: inline-block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .arr { transition: transform .2s ease; }
  .tool-card:hover .arr, .read-card:hover .arr, .mo-service:hover .arr { transform: translateX(4px); }
  .tool-card, .read-card, .mo-service { transition: border-color .16s ease-out, transform .2s ease, box-shadow .2s ease; }
  .tool-card:hover, .read-card:hover, .mo-service:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
  .mo-hero__actions .mo-btn--primary { will-change: transform; }
}

/* Сцена «утечки Директа» в карточке — красные полосы и сумма */
.scene--leak .mpx__bar b { background: var(--rec); }
.scene--leak .mpx__sum { color: var(--rec-text); }

/* Обсервер — линейный знак с антенной (макет «Обсервер на сайте», 07.10): блок заявки, шапка тёмных блоков, ответ после отправки */
.obs-form { display: block; width: 56px; height: auto; margin: 0 0 var(--space-3); }
.section--night .sec-head:has(> .obs-corner) { position: relative; padding-right: 76px; }
.obs-corner { position: absolute; right: 0; top: 0; width: 52px; height: auto; opacity: .9; pointer-events: none; }
.lead-done { display: grid; justify-items: start; align-content: center; gap: var(--space-3); min-height: 260px; }
.lead-done img { width: 72px; height: auto; }
.lead-done h3 { margin: 0; font: 700 22px/28px var(--font-display); }
.lead-done p { margin: 0; color: var(--ink-muted); }
.lead-done__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 600px) { .obs-form { width: 44px; } .obs-corner { width: 40px; } .section--night .sec-head:has(> .obs-corner) { padding-right: 56px; } }
@media (prefers-reduced-motion: no-preference) { .lead-done img { animation: obs-hop .6s ease-out 1; } }
@keyframes obs-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
form[data-lead-form] > [hidden] { display: none !important; }