/* =====================================================================
   Фильм при прокрутке: полноэкранный кадр, главы, подписи, эффекты
   ===================================================================== */
.film {
  --chapter-h: 82vh;
  --enter: 1;
  --final: 0;
  --bars: 0;
  position: relative;
  height: calc(100vh + 11 * var(--chapter-h));
  height: calc(100svh + 11 * var(--chapter-h));
  background: var(--bg);
}
html:not(.film-ready) .film { height: 100svh; }
.film__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
.film__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0A0F0B;
  border-radius: calc((1 - var(--enter)) * 44px);
  transform: scale(calc(.86 + .14 * var(--enter)));
  transform-origin: 50% 0;
  will-change: transform;
}
.film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
  transform-origin: 0 0;
  pointer-events: none;
}
.film__fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .7s ease; }
.film__fx.is-on { opacity: 1; }

/* Рентген земли */
.xray__tint { fill: #03150A; opacity: .62; }
.xray__line {
  fill: none;
  stroke: #D9F55A;
  stroke-width: 3.5;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--scan, 0) * 1.4);
  filter: drop-shadow(0 0 6px #C6E832);
}
.xray__line--depth { stroke-width: 2; stroke-dasharray: .02 .015; stroke-dashoffset: 0; opacity: calc(var(--scan, 0) * 1.4); }
.xray__scan { mix-blend-mode: screen; }

/* Геодезия: лучи прибора, цели, проектная сетка */
.survey__beam { fill: none; stroke: #E8FF8C; stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--t, 0)); filter: drop-shadow(0 0 5px #C6E832); }
.survey__beam--b { stroke-dashoffset: calc(1 - max(0, var(--t, 0) * 1.6 - .6)); }
.survey__target { fill: none; stroke: #E8FF8C; stroke-width: 2.5; opacity: calc(var(--t, 0) * 1.5 - .4); filter: drop-shadow(0 0 6px #C6E832); }
.survey__target circle { animation: target-spin 6s linear infinite; transform-box: fill-box; transform-origin: center; stroke-dasharray: 10 8; }
@keyframes target-spin { to { transform: rotate(360deg); } }
.survey__grid { fill: none; stroke: #C6E832; stroke-width: 1.5; stroke-dasharray: 6 8; opacity: calc(var(--t, 0) * .55); }

/* Запуск: поток по сети к зданию */
.flow__under { fill: none; stroke: #C6E832; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--t, 0)); opacity: .8; filter: drop-shadow(0 0 10px #21A038) drop-shadow(0 0 3px #C6E832); }
.flow__under--b { stroke-dashoffset: calc(1 - max(0, var(--t, 0) * 1.4 - .4)); }
.flow__pulse { fill: none; stroke: #F6FFC4; stroke-width: 8; stroke-linecap: round; stroke-dasharray: .035 .14; opacity: calc(var(--t, 0) * 3 - 2); animation: flow-run 1.4s linear infinite; filter: drop-shadow(0 0 10px #C6E832); }
.flow__pulse--b { animation-duration: 1.7s; }
@keyframes flow-run { to { stroke-dashoffset: -.175; } }
.flow__node { fill: #F6FFC4; stroke: #C6E832; stroke-width: 6; opacity: calc(var(--t, 0) * 3 - 2); transform-box: fill-box; transform-origin: center; animation: node-pulse 1.4s ease-out infinite; }
@keyframes node-pulse { 0% { stroke-width: 4; stroke-opacity: 1; } 100% { stroke-width: 40; stroke-opacity: 0; } }

/* Тонировка, виньетка, финальное затемнение, кашетирование */
.film__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, #05090699 0%, transparent 46%),
    linear-gradient(90deg, #070C08d9 0%, #070C0899 28%, transparent 58%),
    linear-gradient(180deg, #070C0880 0%, transparent 22%),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, #00000080 100%);
}
.film__grade::after { content: ''; position: absolute; inset: 0; background: #060A07; opacity: calc(var(--final) * .74); }
.film__grade::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; background: linear-gradient(270deg, #070C08e6 0%, #070C08a6 30%, transparent 60%); }
.film.is-align-right .film__grade { background:
    linear-gradient(0deg, #05090699 0%, transparent 46%),
    linear-gradient(180deg, #070C0880 0%, transparent 22%),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, #00000080 100%); }
.film.is-align-right .film__grade::before { opacity: 1; }
.film__bars i { position: absolute; left: 0; right: 0; height: calc(var(--bars) * 11vh); background: #050806; pointer-events: none; }
.film__bars i:first-child { top: 0; }
.film__bars i:last-child { bottom: 0; }

/* ---------- Подписи с выносками ---------- */
.film__pins { position: absolute; inset: 0; pointer-events: none; }
.film-pin { position: absolute; left: 0; top: 0; transition: opacity .45s ease; }
.film-pin.is-hidden { opacity: 0; }
.film-pin__dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #C6E83244, 0 0 18px #C6E832; transform: scale(0); transition: transform .5s var(--ease-spring) calc(var(--n) * 120ms); }
.film-pin__dot::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--lime); animation: pin-ping 2s ease-out infinite; }
@keyframes pin-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.film-pin__line { position: absolute; left: 0; bottom: 8px; width: 1px; height: 54px; background: linear-gradient(0deg, var(--lime), #C6E83233); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease) calc(100ms + var(--n) * 120ms); }
.film-pin__label { position: absolute; left: 10px; bottom: 46px; padding: 9px 14px; border-radius: 12px; border: 1px solid #FFFFFF26; background: #0B120Dcc; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #F2F6EF; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 14px 30px -14px #000; opacity: 0; transform: translateY(8px); transition: opacity .45s ease calc(250ms + var(--n) * 120ms), transform .6s var(--ease) calc(250ms + var(--n) * 120ms); }
.film-pin.is-flip .film-pin__label { left: auto; right: 10px; }
.film-pin.is-on .film-pin__dot { transform: scale(1); }
.film-pin.is-on .film-pin__line { transform: scaleY(1); }
.film-pin.is-on .film-pin__label { opacity: 1; transform: none; }

/* ---------- Интерфейс поверх кадра ---------- */
.film__hud { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--final)); }
.film__hud a, .film__hud button { pointer-events: auto; }
.film__top {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 100px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.film__badge, .film__daytime, .film__skip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid #FFFFFF22;
  background: #0B120D99;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #DDE6DD;
}
.film__badge { font-size: 11px; }
.film__daytime { font-size: 11px; margin-left: auto; }
.film__daytime svg { width: 34px; height: 20px; overflow: visible; fill: none; stroke: #FFFFFF40; stroke-width: 1.5; stroke-dasharray: 2 3; }
.film__daytime circle { fill: #FFD27A; stroke: none; filter: drop-shadow(0 0 5px #FFB84D); }
.film__skip { font-size: 13px; font-weight: 500; transition: background .3s, color .3s; }
.film__skip:hover { background: var(--lime); color: #132015; border-color: var(--lime); }

.film__copy {
  position: absolute;
  left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  bottom: clamp(76px, 11vh, 130px);
  width: min(680px, 48vw);
  pointer-events: none;
}
.film__index { color: var(--lime); transition: opacity .4s ease, transform .5s var(--ease); }
.film__title { margin-top: 16px; font-size: clamp(40px, 5.4vw, 88px); font-weight: 600; letter-spacing: -.052em; line-height: 1; text-wrap: balance; text-shadow: 0 10px 40px #0007; }
.film__title em { text-shadow: none; }
.film__text { margin-top: 20px; max-width: 520px; color: #CBD6CC; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; text-shadow: 0 2px 16px #000a; transition: opacity .5s ease .2s, transform .7s var(--ease) .2s; }
.film__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  border: 1px solid #FFFFFF26;
  background: #0B120Db3;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #E5ECE3;
  font-size: 13.5px;
  font-weight: 600;
  transition: opacity .5s ease .3s, transform .7s var(--ease) .3s, background .4s, border-color .4s;
}
.film__status-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); animation: pulse-dot 1.6s infinite; }
.film__status.is-ok { background: #21A038; border-color: #21A038; color: #fff; }
.film__status.is-ok .film__status-dot { width: 18px; height: 18px; background: #fff; animation: none; }
.film__status.is-ok .film__status-dot::after { content: ''; position: absolute; left: 5px; top: 4px; width: 7px; height: 4px; border-left: 2px solid #21A038; border-bottom: 2px solid #21A038; transform: rotate(-45deg); }
.film__copy.is-out .film__index,
.film__copy.is-out .film__text,
.film__copy.is-out .film__status,
.film__copy.is-out .film__title { opacity: 0; transform: translateY(-14px); transition: opacity .2s ease, transform .25s ease; }
.film__copy.is-enter .film__index,
.film__copy.is-enter .film__text,
.film__copy.is-enter .film__status { opacity: 0; transform: translateY(16px); transition: none; }
.film__copy.is-enter .split-w > span { transform: translateY(108%); transition: none; }
.film__copy.is-final { visibility: hidden; }
.film__copy.is-right { left: auto; right: max(calc(var(--gutter) + 40px), calc((100vw - var(--container)) / 2 + var(--gutter) + 40px)); width: min(560px, 40vw); }

/* Рейка глав справа */
.film__rail {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 2px;
}
.film__rail button { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #DDE6DD; }
.film__rail-label { position: absolute; right: 30px; top: 50%; margin-top: -12px; padding: 4px 10px; border-radius: 999px; background: #0B120Dcc; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.film__rail-dot { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF59; transition: background .3s, transform .4s var(--ease), box-shadow .3s; }
.film__rail li.is-past .film__rail-dot { background: var(--green); }
.film__rail li.is-active .film__rail-dot { background: var(--lime); transform: scale(1.4); box-shadow: 0 0 0 4px #C6E83233; }
.film__rail button:hover .film__rail-label,
.film__rail button:focus-visible .film__rail-label { opacity: 1; transform: none; }
.film__rail button:hover .film__rail-dot { background: #fff; }

.film__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; height: 3px; border-radius: 3px; background: #FFFFFF1f; overflow: hidden; }
.film__progress i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px #C6E83266; }

/* Манометр испытаний */
.film__gauge {
  position: absolute;
  right: calc(var(--gutter) + 170px);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px 16px 16px;
  border-radius: 24px;
  border: 1px solid #FFFFFF22;
  background: #0B120Dbf;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -30px #000;
  opacity: 0;
  transform: translateY(-50%) translateX(20px) scale(.96);
  transition: opacity .5s ease, transform .7s var(--ease), border-color .4s;
}
.film__gauge.is-on { opacity: 1; transform: translateY(-50%); }
.film__gauge svg { width: 112px; height: 112px; overflow: visible; }
.gauge__track, .gauge__value { fill: none; stroke-width: 8; stroke-linecap: round; transform: rotate(150deg); transform-origin: 60px 60px; }
.gauge__track { stroke: #FFFFFF1f; stroke-dasharray: .6667 1; }
.gauge__value { stroke: url(#g-brand); stroke: var(--lime); stroke-dasharray: 0 1; filter: drop-shadow(0 0 6px #C6E83299); }
.gauge__ticks line { stroke: #FFFFFF55; stroke-width: 1.5; }
.gauge__needle { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.gauge__hub { fill: #fff; }
.gauge__copy { display: flex; flex-direction: column; gap: 8px; color: var(--text-3); }
.gauge__copy b { color: #F2F6EF; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
.film__gauge.is-ok { border-color: #21A038; }
.film__gauge.is-ok .gauge__value { stroke: #34C552; }
.film__gauge.is-ok .gauge__copy b { color: var(--lime); }

/* Финал: знак и короткое позиционирование */
.film__final {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px var(--gutter) 80px;
  text-align: center;
  opacity: var(--final);
  transform: translateY(calc((1 - var(--final)) * 40px)) scale(calc(.96 + .04 * var(--final)));
  pointer-events: none;
}
.film__final.is-on { pointer-events: auto; }
.film__final-lockup { display: flex; align-items: center; gap: 22px; color: #fff; }
.film__final-lockup .logo-mark { width: calc(88px * 247 / 286); height: 88px; fill: #fff; filter: drop-shadow(0 0 30px #21A03866); }
.film__final-lockup .logo-word { display: flex; flex-direction: column; text-align: left; font-family: 'Unbounded', var(--font-body); line-height: 1; }
.film__final-lockup .logo-word span:first-child { font-size: 22px; font-weight: 500; letter-spacing: .24em; margin-bottom: 9px; opacity: .86; }
.film__final-lockup .logo-word span:last-child { font-size: 46px; font-weight: 800; letter-spacing: -.01em; }
.film__final-title { margin-top: 36px; font-size: clamp(32px, 4.4vw, 70px); font-weight: 600; letter-spacing: -.05em; line-height: 1.02; text-wrap: balance; }
.film__final-sub { margin-top: 16px; color: #C3CEC4; font-size: clamp(16px, 1.4vw, 20px); }
.film__final-cta { margin-top: 34px; }

@media (max-width: 1080px) {
  .film__rail { display: none; }
  .film__gauge { right: var(--gutter); }
  .film__copy { width: min(620px, 70vw); }
}
@media (max-width: 760px) {
  .film { --chapter-h: 74vh; }
  .film__top { top: 84px; gap: 8px; }
  .film__badge { display: none; }
  .film__daytime { margin-left: 0; }
  .film__skip { margin-left: auto; }
  .film__copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: 64px; }
  .film__title { font-size: clamp(32px, 9.4vw, 48px); }
  .film__text { font-size: 15px; margin-top: 14px; }
  .film__status { margin-top: 16px; font-size: 12.5px; }
  .film__grade { background: linear-gradient(0deg, #050906f2 0%, #050906b3 38%, transparent 66%), linear-gradient(180deg, #070C08a0 0%, transparent 30%); }
  .film__gauge { top: 146px; right: var(--gutter); padding: 10px 14px 10px 10px; gap: 10px; transform: translateX(20px) scale(.96); }
  .film__gauge.is-on { transform: none; }
  .film__gauge svg { width: 70px; height: 70px; }
  .gauge__copy b { font-size: 13px; }
  .film__progress { bottom: 26px; }
  .film-pin__label { font-size: 12px; padding: 7px 11px; }
  .film__final-lockup .logo-mark { height: 60px; width: calc(60px * 247 / 286); }
  .film__final-lockup .logo-word span:first-child { font-size: 15px; }
  .film__final-lockup .logo-word span:last-child { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__pulse, .flow__node, .survey__target circle, .film-pin__dot::after { animation: none; }
}

/* Видео-источник фильма: заполняет кадр, перематывается прокруткой. */
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0A0F0B; }
@media (max-width: 760px) { .film__video { object-position: 50% 40%; } }