/* v2 «Зал, в котором работают агенты»: герой-зал, тёмные полосы-сцены, порталы, щель-проявление, магнитные кнопки. Поверх site.css и trial.css. */

/* ───── герой: зал ───── */
/* зал не sticky: холст агентов лежит над страницей, и зал должен уезжать вместе с героем; герой без своего контекста наложения, чтобы текст встал над холстом */
html.v2.ftr-reveal main { z-index: auto; } /* иначе main — контекст наложения, и текст героя остаётся под холстом агентов */
html.v2 .hero.hall { position: relative; z-index: auto; height: 100svh; background: #050505; overflow: clip; }
.hall__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050505; }
.hall__poster { position: absolute; left: 50%; top: 50%; width: max(100%, 100svh * 1672 / 941); height: auto; aspect-ratio: 1672 / 941;
  transform: translate(calc(-50% + var(--mx, 0) * -12px), calc(-50% + var(--my, 0) * -6px + var(--sy, 0) * 60px)) scale(calc(1.02 + var(--sy, 0) * .14)); transform-origin: 70% 60%;
  transition: transform 1s cubic-bezier(.2,0,0,1); }
html.hall-3d .hall__poster { opacity: 0; }
.hall__floor { position: absolute; inset: 0; z-index: 1; }
.ag.ag--hall, .portal { position: absolute; width: 0; height: 0; }
.ag.ag--hall { translate: 0 0; }
.hall__vig { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,5,.62) 0, rgba(5,5,5,.42) 20%, rgba(5,5,5,.14) 40%, rgba(5,5,5,0) 54%),
              linear-gradient(0deg, rgba(5,5,5,.55) 0, rgba(5,5,5,.3) 10%, rgba(5,5,5,.08) 22%, rgba(5,5,5,0) 32%); }
html.hall-3d .hall__vig { z-index: 4; }
/* уход в свет при прокрутке: долли + засветка */
.hall::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #F2F2F0; opacity: calc(var(--sy, 0) * var(--sy, 0) * 1.1); }
html.hall-3d .hall::after { opacity: clamp(0, (var(--sy, 0) - .3) * 2.5, 1); } /* бумага накрывает зал к --sy .7: размытая стена при долли не видна */
html.v2 .hero__intro.hall__intro { position: absolute; inset: 0; height: 100svh; z-index: 5; background: none; padding-top: 24svh;
  transform: translateY(calc(var(--sy, 0) * -90px)); opacity: calc(1 - var(--sy, 0) * 1.6); }
html.v2 .hero__hint { z-index: 5; }
html.v2 .hero__sub { color: var(--paper); text-shadow: 0 2px 30px rgba(0,0,0,.6); }
html.v2 .hero__desc { color: var(--silver); }
@media (max-width: 700px) {
  html.v2 .hero__intro.hall__intro { padding-top: 18svh; }
  html.v2 .hero__sub { font-size: 16px; margin-top: 16px; } html.v2 .hero__desc { display: none; }
  html.v2 .hero__cta { margin-top: 20px; } html.v2 .hero__cta .btn { height: 44px; }
  .hall__poster { transform-origin: 72% 60%; width: max(100%, 100svh * 1672 / 941 * .9); }
  .ag--hall[data-agent="scout"], .ag--hall[data-agent="link"] { display: none; }
  .ag--hall[data-agent="builder"] { left: 80% !important; bottom: 11% !important; }
  .ag--hall[data-agent="kvant"] { left: 62% !important; bottom: 6% !important; }
}

/* ───── полосы-сцены ───── */
.stage { --floor: 34px; position: relative; isolation: isolate; color: var(--paper); background: #0B0B0B; border-top: 1px solid #1C1C1C; border-bottom: 1px solid #1C1C1C; overflow: clip; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--gx, 72%) var(--gy, 30%), rgba(255,248,236,.07), transparent 70%),
    linear-gradient(0deg, #080808 0, #0F0F0F var(--floor), #0C0C0C calc(var(--floor) + 1px), #0B0B0B 60%, #090909 100%);
  transition: opacity .6s; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .055; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stage__in { position: relative; z-index: 1; height: 100%; }
/* линия пола и его отражение */
.stage__floor, .stage--build, .stage--clerk, .stage--demo { position: relative; }
.stage .ag, .stage .portal { position: absolute; bottom: var(--floor); translate: -50% 0; width: 0; height: 0; }
.stage--scan { height: 580px; margin-top: 64px; }
.stage--scan .stage__in { display: grid; grid-template-rows: 1fr 250px; }
.stage--scan .path--scan { margin-top: 0; padding-top: 40px; align-content: start; }
.stage__floor { position: relative; height: 250px; }
.stage--build { height: 300px; width: 100%; margin: 8px 0 48px; }
.stage--demo { height: 240px; margin-top: 32px; }
.stage--conveyor { height: 280px; margin-top: 56px; }
.stage--team { height: 320px; margin-top: 56px; }
.stage--clerk { height: 260px; margin-top: 32px; }
/* дорожка конвейера: тонкая стальная линия по полу */
.stage--conveyor .stage__in::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: var(--floor); height: 1px; background: linear-gradient(90deg, transparent, #3A3A3A 10%, #3A3A3A 90%, transparent); }

/* портал без движка: CSS-щель, чтобы комната не стояла тёмной до загрузки и без WebGL */
html:not(.portals-on) .portal::before { content: ""; position: absolute; left: -2px; bottom: 0; width: 4px; height: calc(var(--s, 150) * 1.3px); background: #FFFDF8;
  box-shadow: 0 0 10px 2px rgba(255,250,240,.9), 0 0 60px 14px rgba(255,250,240,.35), 0 0 140px 40px rgba(255,250,240,.12); animation: portal-breathe 3.2s ease-in-out infinite alternate; }
html:not(.portals-on) .portal::after { content: ""; position: absolute; left: -90px; bottom: -8px; width: 180px; height: 36px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,250,240,.35), transparent); }
.portal--big { --s: 320; }
.portal--hall { --s: 200; }
@keyframes portal-breathe { from { opacity: .82; } to { opacity: 1; filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { html:not(.portals-on) .portal::before { animation: none; } }

/* текст в разборе проявляется там, где прошёл луч Скаута: --bx = x луча в % */
.path--scan { --bx: 110%; }
html.motion.scan-live .path--scan { mask-image: linear-gradient(90deg, #fff calc(var(--bx) - 8%), rgba(255,255,255,.16) calc(var(--bx) + 1%)); -webkit-mask-image: linear-gradient(90deg, #fff calc(var(--bx) - 8%), rgba(255,255,255,.16) calc(var(--bx) + 1%)); }
.path--scan li { color: var(--silver); }
.path--scan li.lit-step { color: var(--paper); }
.path--scan li::after { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,0,0,1); }
.path--scan li.lit-step::after { transform: scaleX(1); }
html.motion .path--scan li, html.motion .path--scan li::after { animation: none !important; }
.path--scan h3 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; margin-top: 12px; }

/* сайты: этапы на бумаге, подсвечиваются ходом сборки */
.split--stage { grid-template-columns: 5fr 1fr 6fr; }
.split__stage { grid-column: 3; }
.seq--v2 { grid-column: auto; padding-left: 40px; }
.seq--v2 li { color: var(--mut); }
.seq--v2 li::before { background: var(--paper); border-color: var(--line-l); }
.seq--v2 li.on { color: var(--fg); } .seq--v2 li.on::before { background: #0A0A0A; border-color: #0A0A0A; box-shadow: 0 0 12px 2px rgba(10,10,10,.25); }

/* конвейер: узлы текста загораются вслед карточке */
.flow4--v2 > div { transition: opacity .5s; }
.flow4--v2.live > div { opacity: .55; }
.flow4--v2.live > div.on { opacity: 1; }
.flow4--v2 > div.on::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 12px rgba(91,214,138,.8); }
.flow4--v2 > div.flow4__human.on::before { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 12px rgba(242,208,79,.8); }

/* команда */
.passes--5 { grid-template-columns: repeat(5, 1fr); margin-top: 0; }
.passes--5 .pass { cursor: pointer; }
.passes--5 .pass.on { border-top-color: var(--ac); box-shadow: 0 24px 50px -24px rgba(0,0,0,.3), inset 0 0 0 1px var(--ac); transform: translateY(-4px); }
.stage--team .ag { transition: translate .6s cubic-bezier(.2,0,0,1); }
@media (max-width: 1100px) { .passes--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .split__stage { grid-column: 1; } .seq--v2 { padding-left: 32px; } .stage--scan { height: auto; } .stage--scan .stage__in { grid-template-rows: auto 160px; } .stage--scan .path--scan { grid-template-columns: 1fr 1fr; padding-bottom: 24px; } .stage__floor { height: 160px; } }
@media (max-width: 700px) { html.motion.scan-live .path--scan { mask-image: none; -webkit-mask-image: none; } .stage--scan .path--scan { grid-template-columns: 1fr; gap: 28px; } .stage--team .ag[data-agent="scout"], .stage--team .ag[data-agent="link"] { display: none; }
  .stage--team .ag[data-agent="kvant"] { left: 18% !important; } .stage--team .ag[data-agent="builder"] { left: 50% !important; } .stage--team .ag[data-agent="clerk"] { left: 82% !important; } }
@media (max-width: 600px) { .passes--5 { grid-template-columns: 1fr; } }

/* задачи */
.tasks2 .rows { margin-top: 56px; }
.rows li.on { color: var(--fg); } .rows li.on::before { width: 100%; }

/* вопросы */
.faq__ag { position: relative; height: 150px; }
.faq__ag .ag { position: absolute; left: 60px; bottom: 0; }

/* барьер */
.barrier { position: relative; min-height: 100svh; display: grid; align-content: end; padding-block: 0 96px; overflow: clip; background: #070707; }
.barrier__stage { position: absolute; inset: 0; z-index: 0; }
.barrier__stage .ag, .barrier__stage .portal { position: absolute; bottom: 54%; translate: -50% 0; width: 0; height: 0; }
.barrier__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 54%; height: 1px; background: linear-gradient(90deg, transparent, #2A2A2A 20%, #2A2A2A 80%, transparent); }
.barrier__in { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: start; }
.barrier .b__h--xl { max-width: 14em; }
.barrier .b__lead { max-width: 30em; margin: 0; }
@media (max-width: 700px) { .barrier { min-height: 100svh; padding-bottom: 72px; } .barrier__stage .ag, .barrier__stage .portal { bottom: 58%; } .ag--barrier[data-agent="scout"], .ag--barrier[data-agent="link"] { display: none; } }

/* ───── движение: щель проявляет заголовки ───── */
html.motion .slit { position: relative; }
html.motion .slit.in { clip-path: inset(-6px -8px -6px -8px); animation: slit-reveal 1.3s cubic-bezier(.2,0,0,1) both; }
html.motion .slit.in::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 12px 3px rgba(255,250,240,.9), 0 0 40px 10px rgba(255,250,240,.35); animation: slit-line 1.3s cubic-bezier(.2,0,0,1) both; pointer-events: none; }
[data-theme="light"] .slit.in::after, .sec--paper .slit.in::after { background: #0A0A0A; box-shadow: 0 0 10px 2px rgba(10,10,10,.5); }
@keyframes slit-reveal { from { clip-path: inset(-6px 100% -6px -8px); } to { clip-path: inset(-6px -8px -6px -8px); } }
@keyframes slit-line { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* магнитные кнопки */
.mag { transition: transform .45s cubic-bezier(.2,0,0,1), background var(--t1), color var(--t1), border-color var(--t1); will-change: transform; }
.mag.near { transition: transform .15s ease-out; }

/* курсор-точка на светлых секциях */
.cur { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; font: 500 13px/1 var(--latin); color: var(--black); mix-blend-mode: difference; color: #fff; opacity: 0; transform: translate(-50%, -50%); transition: opacity .3s; }
html.cur-on .cur { opacity: 1; }
@media (pointer: coarse) { .cur { display: none; } }

/* сцены внутри split демо */
.split--demo .stage--demo { grid-column: 1 / -1; }

/* в зале кнопка Кванта лежала бы под 3D-сценой холста: прячем её, пока герой на экране */
html.in-hall .kbot { opacity: 0; pointer-events: none; }
.kbot { transition: opacity .4s; }

/* полоса-сцена открывается диафрагмой из щели (STUDIOS §портал A) */
/* сцены без появления: canvas с агентами не обрезается clip-path и не гаснет opacity, поэтому полупрозрачная серая коробка с агентами снаружи выглядела поломкой */
html.motion .stage.rv { opacity: 1; transform: none; clip-path: none; transition: none; }
/* слова заголовка героя выходят по одному */
html.motion .hero__h1 .w { animation: rise 1s cubic-bezier(.2,0,0,1) both; }
html.motion .hero__h1 .w:nth-child(1) { animation-delay: .8s; } html.motion .hero__h1 .w:nth-child(3) { animation-delay: .95s; } html.motion .hero__h1 .w:nth-child(5) { animation-delay: 1.1s; }
/* реплика агента: HTML над головой, по проекции позиции (STUDIOS §11) */
.say { position: fixed; z-index: 6; pointer-events: none; transform: translate(-50%, -100%); padding: 8px 12px; background: #F2F2F0; color: #0A0A0A; font: 500 13px/1.25 var(--cyr); white-space: nowrap; border-radius: 0; box-shadow: 0 8px 30px -10px rgba(0,0,0,.6); animation: say-in .35s cubic-bezier(.2,0,0,1) both; }
.say::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.say.out { animation: say-out .3s ease-in both; }
@keyframes say-in { from { opacity: 0; transform: translate(-50%, -90%) scale(.9); } }
@keyframes say-out { to { opacity: 0; transform: translate(-50%, -110%); } }