/* Раздел «Простой переход»: колонка «бумага и цифра»
   (спека docs/superpowers/specs/2026-09-27-landing-migration-strata-design.md).
   Ничего не растягивается: колонка и шкала — SVG постоянного масштаба, линии рисует js/landing-migration.js по настоящим
   положениям истоков и входов. Начальные состояния вступления — только под .mig-ready (его ставит скрипт): без скрипта
   раздел сразу в финальном виде. */

.migration-visual {
  --mig-flow: h;
  --col-w: 120px;
  --col-h: 300px;
  --mig-files-w: 300px;   /* зона файлов */
  --mig-cab-w: 420px;     /* зона кабинета */
  --leg-gap: 64px;        /* от края колонки до легенды: через шкалу идёт выноска */
  position: relative;
  display: grid;
  grid-template-columns: var(--mig-files-w) minmax(160px, 1fr) var(--mig-cab-w);
  align-items: center;
  min-height: 390px;
  padding: 28px 0 48px;
  border-top: 1px solid rgba(169, 228, 194, .17);
}

/* ---------- файлы ---------- */
.mig-files { position: relative; z-index: 1; grid-column: 1; }
.mig-cap, .mig-caption { margin: 0; color: #a9d9bf; font-size: 13px; font-weight: 500; line-height: 1.4; }
.mig-files ul { display: grid; gap: 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.mig-file { position: relative; display: flex; align-items: center; gap: 14px; min-height: 42px; }
.mig-file svg { flex: none; width: 34px; height: 42px; }
.mig-file svg text { fill: #0B4A3C; font: 700 8.5px "JetBrains Mono", "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }
.mig-fname { color: rgba(255, 255, 255, .9); font-size: 15px; font-weight: 500; line-height: 1.3; }
.mig-short { display: none; }
.mig-node { position: absolute; top: 50%; right: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #7fd3a8; }
.mig-caption { position: absolute; right: calc(var(--mig-cab-w) + 24px); bottom: 16px; left: var(--mig-files-w); text-align: center; }

/* ---------- кабинет: колонка, шкала, легенда ---------- */
.mig-cab { position: relative; z-index: 1; grid-column: 3; justify-self: end; width: var(--mig-cab-w); }
.mig-cab-title { margin: 0 0 14px; font-size: 15px; font-weight: 650; line-height: 1.2; }
.mig-cab-body { position: relative; height: var(--col-h); }
.mig-col { position: absolute; top: 0; left: 0; width: var(--col-w); height: var(--col-h); }
.mig-col-art { display: block; width: 100%; height: 100%; overflow: visible; }
.mig-col-shell { fill: rgba(11, 74, 60, .22); stroke: rgba(169, 228, 194, .35); stroke-width: 1; }
.mig-beam { fill: #e6fbef; }
.mig-beam-glow { fill: #7fd3a8; fill-opacity: .18; }
.mig-in { position: absolute; width: 0; height: 0; }
.mig-in--h { left: 0; }
.mig-in--v { top: 0; display: none; }

.mig-ruler { position: absolute; top: 0; left: calc(var(--col-w) + 12px); width: 44px; height: var(--col-h); }
.mig-ruler svg { display: block; width: 8px; height: 100%; overflow: visible; }
.mig-ruler path { fill: none; stroke: rgba(169, 228, 194, .45); stroke-width: 1.2; }
.mig-ruler-top, .mig-ruler-bottom { position: absolute; left: 14px; color: #a9d9bf; font: 500 12px/1 "JetBrains Mono", "Cascadia Mono", Consolas, monospace; white-space: nowrap; transform: translateY(-50%); }
.mig-ruler-top { top: 0; }
.mig-ruler-bottom { top: 100%; }

.mig-legend { position: absolute; top: 0; right: 0; left: calc(var(--col-w) + var(--leg-gap)); height: var(--col-h); margin: 0; padding: 0; list-style: none; }
.mig-legend li { position: absolute; left: 0; display: grid; justify-items: start; gap: 7px; transform: translateY(-9px); }
.mig-legend li::before { position: absolute; top: 9px; left: calc(-1 * var(--leg-gap)); width: calc(var(--leg-gap) - 8px); border-top: 1px dashed rgba(169, 228, 194, .4); content: ""; }
.mig-legend b { font-size: 15px; font-weight: 650; line-height: 18px; white-space: nowrap; }
.mig-chip { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 9px; border: 1px solid rgba(169, 228, 194, .28); border-radius: 6px; background: rgba(3, 30, 23, .92); color: #e6fbef; font: 500 12px/1 "JetBrains Mono", "Cascadia Mono", Consolas, monospace; white-space: nowrap; }
.mig-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #7fd3a8; }
.mig-dot--term { background: #f2b35b; }
.mig-legend .mig-note { display: flex; align-items: center; gap: 8px; transform: translateY(-50%); color: #a9d9bf; font-size: 12px; }
.mig-legend .mig-note::before { content: none; }
.mig-note svg { width: 10px; height: 26px; }
.mig-note path { fill: none; stroke: #a9e4c2; stroke-opacity: .7; stroke-width: 1.2; }
/* та же мысль на узких экранах: между «Запасами» и «Отчётностью» там нет места для стрелки — строка под плашкой «Отчётности»;
   без стрелки «из данных» говорит, откуда она собирается */
.mig-note-m { display: none; }
.mig-coords { margin: 18px 0 0; color: #a9d9bf; font: 500 12px/1.3 "JetBrains Mono", "Cascadia Mono", Consolas, monospace; }

/* ---------- линии (путь пишет скрипт; viewBox = размер слоя в пикселях) ---------- */
.mig-flow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mig-ln { fill: none; stroke: url(#migLineGrad); stroke-width: 1.6; stroke-linecap: round; }
.mig-ln-glow { fill: none; stroke: #7fd3a8; stroke-opacity: .12; stroke-width: 7; stroke-linecap: round; }
.mig-end-halo { fill: none; stroke: #a9e4c2; stroke-opacity: .45; stroke-width: 1; }
.mig-end-dot { fill: #e6fbef; }

/* ---------- пакеты данных: анимации композитора (transform + opacity по точкам пути; слой и анимации — из скрипта) ---------- */
.mig-pkts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mig-pkt { position: absolute; top: 0; left: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 1px; background: #e6fbef; }
/* до старта и в паузе задержки анимация пакет не показывает — он не должен висеть в углу слоя */
.mig-ready .mig-pkt { opacity: 0; }

/* ---------- факты ---------- */
.mig-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(169, 228, 194, .2); border-bottom: 1px solid rgba(169, 228, 194, .2); }
.mig-facts li { display: flex; align-items: baseline; gap: 18px; min-width: 0; padding: 24px 28px; border-right: 1px solid rgba(169, 228, 194, .16); }
.mig-facts li:first-child { padding-left: 0; }
.mig-facts li:last-child { border-right: 0; }
.mig-facts b { flex: none; font-size: clamp(38px, 3.4vw, 48px); font-weight: 700; line-height: .9; letter-spacing: -.05em; white-space: nowrap; }
.mig-facts span { color: rgba(232, 245, 238, .78); font-size: 14px; line-height: 1.45; }

/* ---------- вступление: старт — под .mig-ready, финал — под .mig-ready.in ---------- */
.mig-ready .mig-fx, .mig-ready .mig-layer, .mig-ready .mig-end { opacity: 0; }
.mig-ready.in .mig-fx { opacity: 1; animation: mig-show .5s var(--fd, 0s) ease-out backwards; }
.mig-ready.in .mig-layer { opacity: 1; animation: mig-settle .5s var(--ld, 0s) cubic-bezier(.22, .8, .22, 1) backwards; }
.mig-ready.in .mig-end { opacity: 1; animation: mig-show .4s var(--fd, 0s) ease-out backwards; }
/* --len — длина пути в px без единиц; +1px — запас, чтобы округление не оставляло точку на конце; без --len линия скрыта */
.mig-ready .mig-ln, .mig-ready .mig-ln-glow { stroke-dasharray: calc(var(--len, 100000) * 1px + 1px); stroke-dashoffset: calc(var(--len, 100000) * 1px + 1px); }
.mig-ready.in .mig-ln, .mig-ready.in .mig-ln-glow { stroke-dashoffset: 0; animation: mig-draw 1s var(--d, 0s) cubic-bezier(.22, .8, .22, 1) backwards; }
/* край открытия пикселей считается от рамки группы .mig-px: её задаёт подложка #04241c — ровно x 60..120 × 0..300
   (tools/build-migration-column.mjs; что клетки не выходят за подложку, проверяет tests/landing-migration.test.mjs) */
.mig-ready .mig-px { clip-path: inset(0 0 0 100%); }
.mig-ready.in .mig-px { clip-path: inset(0 0 0 0); animation: mig-scan 1.6s 2.1s cubic-bezier(.22, .8, .22, 1) backwards; }
.mig-ready .mig-beam, .mig-ready .mig-beam-glow { opacity: 0; }
/* полоса едет тем же временем, что край открытия (одна кривая на весь путь); проявление — отдельной анимацией */
.mig-ready.in .mig-beam, .mig-ready.in .mig-beam-glow { opacity: 1; animation: mig-beam 1.6s 2.1s cubic-bezier(.22, .8, .22, 1) backwards, mig-show .24s 2.1s ease-out backwards; }

/* постоянные: мерцание «горячих» клеток и точек-статусов; пауза вне экрана — класс .mig-paused */
.mig-hot, .mig-dot { animation: mig-blink 2.4s ease-in-out infinite; }
.mig-paused .mig-hot, .mig-paused .mig-dot { animation-play-state: paused; }

@keyframes mig-show { from { opacity: 0; } }
@keyframes mig-settle { from { opacity: 0; transform: translateY(10px); } }
@keyframes mig-draw { from { stroke-dashoffset: calc(var(--len, 100000) * 1px + 1px); } }
@keyframes mig-scan { from { clip-path: inset(0 0 0 100%); } }
@keyframes mig-beam { from { transform: translateX(60px); } }
@keyframes mig-blink { 50% { opacity: .35; } }

/* ---------- факты до 1180 px: число над подписью (иначе «4 формы» сжимает подпись в столбик) ---------- */
@media (max-width: 1180px) {
  .mig-facts li { display: block; }
  .mig-facts b { display: block; margin-bottom: 8px; }
  .mig-facts span { display: block; }
}

/* ---------- узкие экраны: файлы строкой, линии спускаются в верх колонки ---------- */
/* Столбик flex: колонка у левого края во всю ширину блока (базовые justify-self: end и align-items: center
   в блочной раскладке сжали бы кабинет и прижали вправо), подпись «Оцифровываем…» — после координат (order). */
@media (max-width: 999px) {
  .migration-visual { --mig-flow: v; --col-w: 84px; --col-h: 210px; --leg-gap: 52px; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 24px 0 36px; }
  .mig-files, .mig-cab, .mig-caption { max-width: 560px; }
  .mig-files ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  .mig-file { flex-direction: column; justify-content: flex-start; gap: 8px; min-height: 0; padding-bottom: 20px; text-align: center; }
  .mig-long { display: none; }
  .mig-short { display: inline; }
  .mig-fname { font-size: 12.5px; line-height: 1.25; }
  .mig-node { top: auto; right: auto; bottom: 0; left: 50%; margin: 0 0 0 -3px; }
  .mig-cab { width: auto; margin-top: 96px; }
  .mig-cab-title { display: none; }
  .mig-in--h { display: none; }
  .mig-in--v { display: block; }
  .mig-ruler { left: calc(var(--col-w) + 10px); }
  .mig-ruler svg { width: 5.6px; }
  .mig-ruler-top, .mig-ruler-bottom { left: 11px; }
  .mig-ruler-top { transform: none; }
  .mig-ruler-bottom { left: -1px; transform: none; }
  .mig-legend li { gap: 5px; transform: translateY(-8px); }
  .mig-legend li::before { top: 8px; }
  .mig-legend b { font-size: 14px; line-height: 16px; }
  .mig-chip { gap: 6px; height: 20px; padding: 0 7px; font-size: 11px; }
  .mig-legend .mig-note { display: none; }
  .mig-legend .mig-note-m { display: block; color: #a9d9bf; font-size: 12px; font-weight: 500; line-height: 15px; white-space: nowrap; }
  .mig-coords { margin-top: 38px; }
  .mig-caption { position: static; order: 1; margin: 18px 0 0; text-align: left; }
  .mig-facts { grid-template-columns: 1fr; }
  .mig-facts li { display: block; padding: 16px 0; border-right: 0; border-bottom: 1px solid rgba(169, 228, 194, .16); }
  .mig-facts li:last-child { border-bottom: 0; }
  .mig-facts b { display: block; margin-bottom: 6px; font-size: 34px; }
}

/* ---------- 320–374 px: легенда ближе к колонке, иначе самая длинная плашка выходит за поле;
   «15 м» — левее, под концом шкалы, чтобы не упираться в последнюю плашку ---------- */
@media (max-width: 374px) {
  .migration-visual { --leg-gap: 36px; }
  .mig-ruler-bottom { left: -9px; }
}

@media (prefers-reduced-motion: reduce) {
  .migration-visual *, .migration-visual *::before { animation: none !important; }
}