/* САЙТ-ГЕРОЙ — стили анимации героя лендинга (site/index.html #stage). Токены (--site-*) берутся из ../styles.css лендинга
   (сами — 1:1 из портала). Размеры внутри сцены — в cqw (доля ширины сцены), поэтому кадры
   читаемы и на телефоне, и на десктопе без медиа-запросов. Своя графика: SVG-иконки в разметке. */


/* ---------- сцена ---------- */
.stage {
  position: relative;
  margin: 32px auto 0;
  width: 100%;
  max-width: 1000px;
  cursor: pointer;
  outline: none;
}
.stage:focus-visible { outline: 2px solid var(--site-primary); outline-offset: 2px; }
.stage-dots { display: none; }
/* ---------- устройство: свой SVG-контур ноутбука, экран = сплит ---------- */
.device { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; aspect-ratio: 1000 / 640; }
.device-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* экран — внутренний белый прямоугольник рамки (4% / 3.75% / 92% / 86.9% от viewBox) */
.screen {
  position: absolute; left: 4%; top: 3.75%; width: 92%; height: 86.9%;
  display: grid; grid-template-columns: 40% 60%;
  border-radius: 1%; overflow: hidden; background: var(--site-surface);
  container-type: inline-size;
}
/* левая панель — «платформа параллельно» */
.side { position: relative; padding: 2cqw 1.8cqw; border-right: 1px solid var(--site-table-border); background: var(--site-bg); font-size: 1.32cqw; line-height: 1.35; overflow: hidden; min-width: 0; }
.side-head { display: flex; align-items: center; gap: 0.5em; font-size: 0.8em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--site-text-2); }
.side-status { margin-left: auto; color: var(--site-text-3); font-weight: 500; }
.side-tick { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--site-accent); flex-shrink: 0; animation: side-tick 1.6s ease-in-out infinite; }
@keyframes side-tick { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .55; } }
.side-list { margin-top: 1.2em; display: flex; flex-direction: column; gap: 0.55em; }
.side-row { position: relative; display: flex; align-items: flex-start; gap: 0.55em; padding: 0.55em 0.7em; border: 1px solid var(--site-border); border-radius: 0.55em; background: var(--site-surface); color: var(--site-primary); opacity: 0; transform: translateY(0.5em); animation: side-in .45s ease both; }
@keyframes side-in { to { opacity: 1; transform: none; } }
.side-row.is-old { color: var(--site-text-2); }
.side-check { flex-shrink: 0; width: 1.05em; height: 1.05em; margin-top: 0.1em; border-radius: 50%; border: 1px solid var(--site-primary); display: inline-flex; align-items: center; justify-content: center; }
.side-check svg { width: 0.65em; height: 0.65em; }
.side-check path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: side-check .4s ease .25s both; }
@keyframes side-check { to { stroke-dashoffset: 0; } }
/* импульс от строки к сцене: лаймовая точка уходит вправо и тает */
.side-pulse { position: absolute; right: -0.4em; top: 50%; width: 0.55em; height: 0.55em; margin-top: -0.28em; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 0 0.3em rgba(223,255,0,.35); animation: side-pulse .9s ease-out .3s both; pointer-events: none; }
@keyframes side-pulse { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(6em); opacity: 0; } }
.side-mobile { display: none; }
/* правая панель — сцена сделки; окно заполняет панель */
.win-box { position: relative; min-width: 0; container-type: inline-size; }

/* «окно» платформы */
.win {
  position: absolute; inset: 0;
  background: var(--site-surface);
  border: 0; border-radius: 0; box-shadow: none;
  overflow: hidden;
  font-size: 2.7cqw; line-height: 1.4;
  color: var(--site-primary);
}
/* курсор — гладко переезжает к месту действия текущего кадра (позиции — scenario.cursor) */
.win-cursor { position: absolute; left: calc(var(--cx, 50) * 1%); top: calc(var(--cy, 50) * 1%); width: 1.1em; height: 1.4em; z-index: 5; transition: left 1.1s cubic-bezier(.3,.7,.3,1), top 1.1s cubic-bezier(.3,.7,.3,1); pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); animation: cursor-idle 4s ease-in-out infinite; }
.win-cursor svg { width: 100%; height: 100%; }
@keyframes cursor-idle { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(0.35em, -0.2em); } 65% { transform: translate(-0.25em, 0.3em); } }
.win-cursor.is-click { animation: cursor-click .25s ease; }
@keyframes cursor-click { 50% { transform: scale(.82); } }
.win-bar {
  display: flex; align-items: center; gap: 0.8em;
  height: 3em; padding: 0 1.2em;
  border-bottom: 1px solid var(--site-table-border);
  background: var(--site-bg);
}
.win-brand { height: 1.05em; width: auto; }
.win-title { font-size: 0.9em; font-weight: 600; color: var(--site-text-2); }
.win-paused {
  margin-left: auto; font-size: 0.75em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--site-pill-text); background: var(--site-pill-bg); padding: 0.15em 0.5em; border-radius: 0.4em;
}

/* кадры стопкой */
.frame {
  position: absolute; left: 0; right: 0; top: 3em; bottom: 0;
  padding: 1.3em 1.4em;
  opacity: 0; transform: translateY(0.5em);
  transition: opacity var(--tr, .7s) ease, transform var(--tr, .7s) ease;
  pointer-events: none;
}
.frame.is-active { opacity: 1; transform: none; }
.frame.is-leaving { opacity: 0; transform: translateY(-0.5em); }

/* вход элементов кадра — каскадом по --i; анимация перезапускается при каждом входе кадра */
.el { opacity: 0; }
.frame.is-active .el { animation: pv-rise .55s ease both; animation-delay: calc(var(--d0, .25s) + var(--i, 0) * var(--stag, .55s)); }
@keyframes pv-rise { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }

/* мини-кнопки (по .portal-btn / -secondary) */
.mini-btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.5em 0.9em; border-radius: 0.5em;
  font-size: 0.9em; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.mini-btn-primary { background: var(--site-primary); color: var(--site-on-primary); }
.mini-btn-secondary { background: transparent; color: var(--site-text-2); border: 1px solid var(--site-border); }
.win .lime-dot { width: 0.5em; height: 0.5em; }

/* К1 сжат до ~2.8 с (аудит 21.09: разбор — вход, не витрина; время отдано К4 «ИИ рекомендует») */
/* ---------- К1 — магическое окно (по .portal-composer: радиус 16, тень композера, поле 18px,
   печатающийся плейсхолдер #aca89c с курсором, ряд действий: «+» 34×34 слева, круглая стрелка
   34px справа — серая пустая, лаймовое стекло при содержимом) ---------- */
.k1-composer {
  position: relative;
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 0.8em;                 /* 16px при базе 20 → radius-lg */
  box-shadow: var(--site-shadow);
  padding: 1em 1em 0.7em;
  display: flex; flex-direction: column;
}
.k1-field { position: relative; min-height: 1.4em; font-size: 0.9em; line-height: 1.4; margin-bottom: 1.1em; }
.k1-placeholder { color: #aca89c; white-space: nowrap; overflow: hidden; display: inline-block; max-width: 100%; text-overflow: ellipsis; transition: opacity .4s ease; }
.k1-caret { display: inline-block; opacity: .5; animation: pv-caret 1s steps(1) infinite; }
@keyframes pv-caret { 50% { opacity: 0; } }
.frame.is-active .k1-placeholder { animation: pv-fadeout .3s ease .55s both; }
@keyframes pv-fadeout { to { opacity: 0; } }
.k1-file {
  position: absolute; left: 0; top: -0.15em;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.35em 0.7em; background: var(--site-pill-bg); border-radius: 0.5em;
  font-family: var(--mono); font-size: 0.85em; color: var(--site-pill-text);
  opacity: 0;
}
.k1-file svg { width: 1.2em; height: auto; }
.frame.is-active .k1-file { animation: pv-drop .7s cubic-bezier(.2,.8,.2,1) .25s both; }
@keyframes pv-drop { 0% { opacity: 0; transform: translateY(-5em) rotate(-4deg); } 70% { opacity: 1; transform: translateY(0.25em) rotate(0); } 100% { opacity: 1; transform: none; } }
/* разбор раскрывается внутри окна: плашка → строки → «ещё N» */
.k1-panel-wrap { display: grid; grid-template-rows: 0fr; }         /* окно в покое компактное, разбор его раскрывает */
.frame.is-active .k1-panel-wrap { animation: pv-grow .5s ease .9s both; }
@keyframes pv-grow { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
.k1-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.k1-plate {
  display: inline-flex; align-items: center; gap: 0.5em; width: fit-content;
  padding: 0.4em 0.7em; background: var(--site-pill-bg); color: var(--site-pill-text);
  border-radius: 0.5em; font-size: 0.85em; font-weight: 600; opacity: 0;
}
.frame.is-active .k1-plate { animation: pv-rise .4s ease 1s both; }
.k1-table { width: 100%; margin-top: 0.6em; border-collapse: separate; border-spacing: 0; font-size: 0.85em; }
.k1-table th { text-align: left; font-size: 0.65em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--site-text-3); padding: 0.25em 0.4em; border-bottom: 1px solid var(--site-table-border); opacity: 0; }
.frame.is-active .k1-table th { animation: pv-rise .35s ease 1.3s both; }
.k1-table td { padding: 0.3em 0.4em; border-bottom: 1px solid var(--site-table-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20em; }
.k1-table td:first-child, .k1-table td:nth-child(3) { font-family: var(--mono); color: var(--site-text-2); font-variant-numeric: tabular-nums; }
.k1-table tbody tr { opacity: 0; }
.frame.is-active .k1-table tbody tr { animation: pv-rise .4s ease both; animation-delay: calc(1.4s + var(--r, 0) * .15s); }
.k1-more { margin-top: 0.4em; font-size: 0.7em; color: var(--site-text-3); opacity: 0; }
.frame.is-active .k1-more { animation: pv-rise .35s ease 2.1s both; }
/* ряд действий композера */
.k1-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.8em; }
.k1-attach {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; border: 1px solid var(--site-border); border-radius: 0.4em;
  background: var(--site-surface); font-size: 1em; line-height: 1; color: var(--site-primary);
}
.k1-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--site-border); color: var(--site-text-2);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.k1-send svg { width: 0.75em; height: 0.75em; }
.frame.is-active .k1-send { animation: pv-send-live .4s ease 1s both; }
@keyframes pv-send-live { to { background: rgba(223, 255, 0, 0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(223,255,0,.25); } }

/* ---------- К2 ---------- */
.frame-k2 { padding-top: 2.6em; display: flex; flex-direction: column; justify-content: center; }
.frame-k3 { display: flex; flex-direction: column; justify-content: center; }
.soon-tag:empty { display: none; }
.soon-tag {
  position: absolute; top: 0.7em; right: 1.1em; z-index: 2;
  font-size: 0.65em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--site-text-3); border: 1px solid var(--site-border); border-radius: 0.4em; padding: 0.15em 0.45em;
  background: var(--site-surface);
}
.k2-hint {
  display: grid; grid-template-columns: auto 1fr; gap: 0.3em 0.6em; align-items: start;
  padding: 0.9em 1em; border: 1px solid var(--site-border); border-radius: 0.6em;
  background: var(--site-surface); box-shadow: var(--site-shadow);
}
.k2-hint .lime-dot { margin-top: 0.45em; }
.k2-hint p { font-size: 0.95em; font-weight: 500; }
.k2-actions { grid-column: 2; display: flex; gap: 0.5em; margin-top: 0.3em; }
.k2-suppliers { margin-top: 1em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.k2-suppliers li {
  padding: 0.7em 0.8em; border: 1px solid var(--site-border); border-radius: 0.5em; background: var(--site-bg);
  font-size: 0.85em; font-weight: 600; opacity: 0;
}
.k2-suppliers li small { display: block; margin-top: 0.2em; font-size: 0.7em; font-weight: 400; color: var(--site-text-2); font-family: var(--mono); }
.frame.is-active .k2-suppliers li { animation: pv-rise .5s ease both; animation-delay: calc(1.3s + var(--i, 0) * .25s); }

/* ---------- К3 ---------- */
.k3-counter { font-size: 0.8em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--site-text-2); }
.k3-cards { margin-top: 0.8em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
.k3-card {
  padding: 0.8em; border: 1px solid var(--site-border); border-radius: 0.6em; background: var(--site-surface); box-shadow: var(--site-shadow);
  display: flex; flex-direction: column; gap: 0.4em; min-height: 10em; opacity: 0;
}
.frame.is-active .k3-card { animation: pv-card .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.4s + var(--i, 0) * var(--card-stag, .9s)); }
@keyframes pv-card { from { opacity: 0; transform: translateY(1em) scale(.97); } to { opacity: 1; transform: none; } }
.k3-name { font-size: 0.9em; font-weight: 600; }
.k3-badge {
  display: inline-flex; align-items: center; gap: 0.35em; width: fit-content;
  font-size: 0.675em; font-weight: 600; padding: 0.175em 0.45em; border-radius: 0.35em;
  background: var(--site-pill-bg); color: var(--site-pill-text);
}
.k3-badge:empty { display: none; }
.k3-badge::before { content: ''; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--site-accent); }
.k3-sum { margin-top: auto; font-size: 1.2em; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.k3-term { font-size: 0.7em; color: var(--site-text-2); }

/* ---------- К4 ---------- */
.frame-k4 { --stag: .35s; }
.k4-facts { display: flex; flex-wrap: wrap; gap: 0.4em; }
.k4-facts li { padding: 0.3em 0.6em; border-radius: 0.4em; background: var(--site-pill-bg); color: var(--site-pill-text); font-size: 0.75em; font-weight: 600; font-variant-numeric: tabular-nums; }
.k4-status { margin-top: 0.6em; font-size: 0.65em; color: var(--site-text-3); font-variant-numeric: tabular-nums; }
.k4-sheet { width: 100%; margin-top: 0.4em; border-collapse: separate; border-spacing: 0; font-size: 0.75em; }
.k4-sheet th { text-align: left; font-size: 0.75em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--site-text-3); padding: 0.25em 0.5em; border-bottom: 1px solid var(--site-table-border); }
.k4-sheet td { padding: 0.35em 0.5em; border-bottom: 1px solid var(--site-table-border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.k4-sheet td:nth-child(2), .k4-sheet td:nth-child(3) { font-family: var(--mono); }
.k4-sheet td:last-child { color: var(--site-text-2); }
.k4-sheet tr.is-lead td { background: var(--site-bg); font-weight: 600; }
.k4-sheet tr.is-lead td:first-child { box-shadow: inset 0.25em 0 0 var(--site-accent); }
.k4-ai { margin-top: 0.7em; padding: 0.8em 0.9em; border: 1px solid var(--site-border); border-radius: 0.6em; background: var(--site-bg); }
.k4-ai-label { display: flex; align-items: center; gap: 0.45em; font-size: 0.7em; }
.k4-ai-icon { width: 1.3em; height: 1.3em; flex-shrink: 0; }
.k4-ai-title { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--site-primary); }
.k4-ai-meta { color: var(--site-text-3); }
.k4-ai-line { margin-top: 0.45em; font-size: 0.85em; line-height: 1.45; min-height: 2.9em; }
.k4-type-caret { display: inline-block; opacity: .5; animation: pv-caret 1s steps(1) infinite; }
.k4-step { margin-top: 0.6em; padding-top: 0.55em; border-top: 1px solid var(--site-table-border); display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.k4-step-text { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.k4-step-label { font-size: 0.6em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--site-text-3); }
.k4-step-why { font-size: 0.7em; color: var(--site-text-2); }
.frame-k4 .k4-step { opacity: 0; }
.frame.is-active .k4-step { animation: pv-rise .5s ease 4.3s both; }

/* ---------- К5 ---------- */
.k5-center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8em; text-align: center; }
.k5-btn { --d0: .1s; font-size: 1em; padding: 0.65em 1.2em; }
.frame.is-active .k5-btn { animation: pv-press .9s ease both; }
@keyframes pv-press { 0% { opacity: 0; transform: translateY(0.5em); } 30% { opacity: 1; transform: none; } 55% { transform: scale(.94); } 75% { transform: scale(1); opacity: 1; } 100% { opacity: .35; transform: scale(.96); } }
.k5-done { --d0: 1s; --stag: 0s; display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.k5-check { width: 3.5em; height: 3.5em; }
.k5-check-path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.frame.is-active .k5-check-path { animation: pv-check .5s ease 1.25s both; }
@keyframes pv-check { to { stroke-dashoffset: 0; } }
.k5-done-text { font-size: 1.2em; font-weight: 600; letter-spacing: -.01em; }
.k5-order { font-family: var(--mono); font-size: 0.75em; color: var(--site-text-3); }
.k5-invariant { --d0: 1.9s; --stag: 0s; font-size: 0.95em; font-weight: 600; color: var(--site-pill-text); }

/* ---------- прогресс и служебное ---------- */
.stage-progress { position: relative; margin: 18px 0 0; display: flex; justify-content: center; gap: 8px; }
.stage-progress li { width: 8px; height: 8px; border-radius: 50%; background: var(--site-border); transition: background-color .3s ease, transform .3s ease; }
.stage-progress li.is-on { background: var(--site-primary); transform: scale(1.15); }
.stage-reduced { position: relative; margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--site-text-3); }

/* телефон (<768): рамка ноутбука скрыта, сцена во всю ширину, левая панель — одна строка-тикер */
@media (max-width: 767px) {
  .device { aspect-ratio: auto; max-width: none; }
  .device-frame { display: none; }
  .screen { position: relative; left: auto; top: auto; width: 100%; height: auto; display: flex; flex-direction: column; border: 1px solid var(--site-border); border-radius: var(--site-radius-lg); box-shadow: var(--site-shadow); }
  .side { display: none; }
  .side-mobile { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--site-table-border); background: var(--site-bg); font-size: 12px; white-space: nowrap; overflow: hidden; }
  .side-mobile-label { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--site-text-3); font-size: 10px; flex-shrink: 0; }
  .side-mobile-text { overflow: hidden; text-overflow: ellipsis; }
  .win-box { aspect-ratio: 4 / 5; }
  .win { font-size: 3.7cqw; }
  .k2-suppliers, .k3-cards { grid-template-columns: 1fr; gap: 0.5em; }
  .k3-card { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.3em 0.6em; padding: 0.7em 0.8em; }
  .k3-name { flex: 1 1 100%; }
  .k3-sum { margin-top: 0; margin-left: auto; font-size: 1.1em; }
  .k3-badge { order: 3; }
  .k3-term { order: 4; flex: 1 1 100%; }
  .k2-suppliers li { padding: 0.5em 0.8em; display: flex; justify-content: space-between; align-items: baseline; }
  .k2-suppliers li small { margin-top: 0; }
  .k1-table td:nth-child(4), .k1-table th:nth-child(4) { display: none; }
  .k1-placeholder { font-size: 0.9em; }
  .k4-ai-line { font-size: 0.85em; min-height: 0; }
  .k4-sheet td:nth-child(4), .k4-sheet th:nth-child(4) { display: none; }
  .k4-step { flex-direction: column; align-items: flex-start; }
}

/* reduced-motion: без переходов и входных анимаций (anim.js показывает статичный К4) */
@media (prefers-reduced-motion: reduce) {
  .frame, .stage-progress li { transition: none; }
  .frame.is-active .el, .frame.is-active .k1-file, .frame.is-active .k1-placeholder, .frame.is-active .k1-plate, .frame.is-active .k1-table th, .frame.is-active .k1-table tbody tr, .frame.is-active .k1-more, .frame.is-active .k1-send, .frame.is-active .k2-suppliers li,
  .frame.is-active .k3-card, .frame.is-active .k4-step, .frame.is-active .k5-btn, .frame.is-active .k5-check-path { animation: none; }
  .frame.is-active .el, .frame.is-active .k1-file, .frame.is-active .k1-plate, .frame.is-active .k1-table th, .frame.is-active .k1-table tbody tr, .frame.is-active .k1-more, .frame.is-active .k2-suppliers li, .frame.is-active .k3-card, .frame.is-active .k4-step { opacity: 1; }
  .k1-placeholder { display: none; }
  .k1-panel-wrap { grid-template-rows: 1fr; }
  .frame.is-active .k5-check-path { stroke-dashoffset: 0; }
  .stage { cursor: default; }
}
/* тач: без hover-эффектов — их здесь и нет; курсор-указатель не показывается */
@media (hover: none) { .stage { cursor: default; } }