/* ОРКЕСТР — сцена «Системы → платформа» на лендинге (site/index.html #orch). Токены — ../styles.css (портал). Прогресс сцены --p (0…1, с
   плавностью) и --pt (сырой) ставит scene.js на секции. Всё интерполируется в CSS от --p. */


/* ---------- секция ---------- */
.orch { position: relative; height: calc(var(--section-vh, 280) * 1vh); --p: 0; --pt: 0; }
.orch-pin { position: sticky; top: var(--chrome-h, 0px); height: calc(100vh - var(--chrome-h, 0px)); overflow: hidden; display: flex; flex-direction: column; }   /* на лендинге — под прибитым чердаком (--chrome-h из script.js), не под ним */
.orch-head {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 56px 64px 0; max-width: 1440px; margin: 0 auto;
  transition: none;
}
.orch-head-a { opacity: clamp(0, calc(1 - var(--pt) * 2.4), 1); transform: translateY(calc(var(--pt) * -12px)); }
.orch-head-b { opacity: clamp(0, calc((var(--pt) - 0.55) * 2.6), 1); transform: translateY(calc((1 - var(--pt)) * 12px)); }
.orch-caption { margin-top: 12px; max-width: 640px; font-size: 17px; color: var(--site-text-2); text-wrap: pretty; }
.orch-head-b .orch-caption { max-width: 760px; }

/* сцена — под заголовком, во всю ширину */
.orch-stage {
  position: absolute; left: 0; right: 0; top: 214px; bottom: 0;
  max-width: 1440px; margin: 0 auto; padding: 0 64px;
}
.orch-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orch-line-chaos { fill: none; stroke: #b9b4a8; stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: calc(1 - var(--p) * 1.6); }
.orch-line-order { stroke: #dfff00; stroke-width: 3; vector-effect: non-scaling-stroke; opacity: clamp(0, calc((var(--p) - 0.55) * 2.2), 1); }
.orch-cards { position: absolute; inset: 0; }

/* карточка: из позиции A (--ax/--ay %, поворот --ar) в ячейку сетки B (--bc/--br);
   ширина 22% → 26%, содержимое гаснет, каркас проявляется */
.orch-card {
  --bx: calc(4 + var(--bc) * 35);        /* колонки: 4 / 39 / 74 % (ширина 22%) */
  --by: calc(1 + var(--br) * 37);        /* ряды: 1 / 38 / 75 % */
  position: absolute;
  left: calc((var(--ax) + (var(--bx) - var(--ax)) * var(--p)) * 1%);
  top: calc((var(--ay) + (var(--by) - var(--ay)) * var(--p)) * 1%);
  width: 22%;
  min-height: 92px;
  transform: rotate(calc(var(--ar) * (1 - var(--p))));
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: var(--site-surface);
  box-shadow: 0 10px 22px -12px rgba(26, 26, 26, calc(0.35 * (1 - var(--p))));
  font-size: 12px; line-height: 1.35;
  overflow: hidden;
}
.orch-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; opacity: calc(1 - var(--p) * 1.25); }
.orch-card-wire { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; opacity: clamp(0, calc((var(--p) - 0.5) * 2.4), 1); background: var(--site-bg); }
.orch-card-wire i { display: block; height: 8px; border-radius: 4px; background: var(--site-border); }
.orch-card-wire i:nth-child(1) { width: 55%; }
.orch-card-wire i:nth-child(2) { width: 85%; }
.orch-card-wire i:nth-child(3) { width: 70%; }
/* содержимое карточек хаоса — всё выдуманное */
.oc-from { font-weight: 600; }
.oc-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-meta, .oc-label { font-size: 10px; color: var(--site-text-3); letter-spacing: .04em; text-transform: uppercase; }
.oc-file { font-family: var(--mono); font-size: 11px; padding: 3px 6px; border: 1px solid var(--site-border); border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-doc { font-weight: 600; }
.oc-field { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--site-text-2); }
.oc-field-v { flex: 1; max-width: 45%; height: 10px; border: 1px solid var(--site-border); border-radius: 3px; }
.oc-bubble { align-self: flex-end; max-width: 92%; padding: 5px 8px; border-radius: 10px 10px 2px 10px; background: var(--site-pill-bg); color: var(--site-pill-text); }
.oc-bubble-left { align-self: flex-start; border-radius: 10px 10px 10px 2px; background: var(--site-surface); border: 1px solid var(--site-border); }
.oc-grid { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 3px; margin-top: 4px; }
.oc-grid i { display: block; height: 7px; background: var(--site-table-border); border-radius: 2px; }
.oc-grid i:nth-child(4n+2) { background: var(--site-border); }
.oc-src { font-size: 13px; }
.oc-dst { color: var(--site-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orch-sticker {
  position: absolute; left: calc(var(--ax) * 1%); top: calc(var(--ay) * 1%);
  padding: 8px 12px; background: rgba(223, 255, 0, 0.6); color: var(--site-primary);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; transform: rotate(var(--ar));
  box-shadow: 0 8px 16px -10px rgba(26,26,26,.35);
  opacity: calc(1 - var(--p) * 2);
}
/* окно платформы в центре: проявляется на второй половине */
.orch-win {
  position: absolute; left: 33%; top: 25%; width: 34%;
  opacity: clamp(0, calc((var(--p) - 0.4) * 2.2), 1);
  transform: scale(calc(0.92 + 0.08 * var(--p)));
  z-index: 2;
  pointer-events: none;                 /* пока окно невидимо (первая половина сцены) — по нему не кликнуть */
}
.orch.is-b .orch-win, .orch-static .orch-stage-b .orch-win { pointer-events: auto; }
.orch-win .ba-win-body { padding: 12px 14px; gap: 10px; }
.orch-win .ba-sheet td { padding: 5px 8px; }
.orch-win .ba-win { box-shadow: 0 24px 48px -20px rgba(88, 80, 150, 0.35), var(--site-shadow); }
.orch-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--site-surface)); pointer-events: none; }

/* ---------- статичный режим (reduced-motion / телефон): без пина, А и Б подряд ---------- */
.orch.orch-static { height: auto; }
.orch-static .orch-pin { position: static; height: auto; overflow: visible; display: block; }
.orch-static .orch-head { position: static; padding: 56px 16px 0; opacity: 1; transform: none; }
.orch-static .orch-stage { position: relative; top: auto; height: 560px; margin: 24px auto 0; padding: 0 16px; overflow: hidden; }
.orch-static .orch-stage-b { --p: 1; }
.orch-static .orch-stage-b .orch-line-chaos { opacity: 0; }
.orch-static .orch-stage-b .orch-sticker { opacity: 0; }
.orch-static .orch-fade { display: none; }
@media (max-width: 767px) {
  .orch-card { width: 30%; font-size: 10px; min-height: 70px; }
  .orch-card-body { padding: 7px 8px; }
  .orch-static .orch-stage { height: 460px; }
  .orch-win { left: 20%; width: 60%; top: 26%; }
  .orch-card { --bx: calc(2 + var(--bc) * 34); --by: calc(2 + var(--br) * 36); }
}
@media (max-width: 1279px) and (min-width: 768px) {
  .orch-head { padding-left: 32px; padding-right: 32px; }
  .orch-stage { padding: 0 32px; }
}