/* История «Сито» при прокрутке: кадры из Blender на холсте (R9, раздел 7). Устройство — образец 09 системы, вид — свой. */
.film{position:relative;background:#212529;padding:0!important;border:0}
.film-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#212529}
.film-stage canvas,.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.film-stage picture{display:contents}
/* затемнение под текст: слева — для сцен 2–5, сверху — для первого экрана с заголовком по центру */
.film-scrim,.film-top{position:absolute;inset:0;pointer-events:none;transition:opacity .6s}
.film-scrim{background:linear-gradient(90deg,rgba(33,37,41,.96) 0%,rgba(33,37,41,.9) 34%,rgba(33,37,41,.55) 46%,rgba(33,37,41,0) 58%),linear-gradient(0deg,rgba(33,37,41,.7) 0%,rgba(33,37,41,0) 18%)}
.film-top{background:radial-gradient(ellipse 58% 72% at 50% 44%,rgba(33,37,41,.96) 0%,rgba(33,37,41,.9) 56%,rgba(33,37,41,0) 86%);opacity:0}
.film.at-hero .film-scrim{opacity:0}
.film.at-hero .film-top{opacity:1}
.film.bare .film-scrim{opacity:0}
.film-stage + .film-step{margin-top:-100vh;margin-top:-100svh}

/* высота шага — по длине сцены (R9, правила шагов): начало шага = доля кадра начала сцены × прокрутка истории + 0,35 экрана */
.film-step{position:relative;z-index:2;display:block;padding:0 clamp(22px,5vw,72px);max-width:min(660px,44vw)}
#scene-1{min-height:880px;min-height:136svh}
#scene-2{min-height:650px;min-height:101svh}
#scene-3{min-height:650px;min-height:101svh}
#scene-4{min-height:980px;min-height:152svh}
#scene-5{min-height:1040px;min-height:161svh}
.film-step .story-copy{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s}
.film-step.on .story-copy{opacity:1;transform:none}
.film-count{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#6ea8fe;margin-bottom:18px}
@media (min-width:761px){
  .film-step{padding-top:max(110px,22svh)}
  .film-step .story-copy{position:sticky;top:max(110px,22svh);border-left:1px solid #373b3e;padding:4px 0 6px 28px}
  .film-hero{max-width:none;padding-top:max(92px,13svh)}
  .film-hero .story-copy{top:max(92px,13svh);border:0;padding:0;text-align:center;max-width:980px;margin:0 auto}
  .film-hero .hero-big{max-width:22ch;margin:0 auto}
  .film-step:last-of-type{padding-bottom:max(0px,calc(78svh - 16rem))}
}
.film-play{display:inline-flex;align-items:center;gap:11px;margin-top:22px;padding:10px 18px 10px 11px;border:1px solid #495057;border-radius:4px;
  background:rgba(33,37,41,.6);color:#dee2e6;font:11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,background .25s}
.film-play[hidden],.film-stop[hidden]{display:none}
.film-play i,.film-stop i{position:relative;flex:none;width:22px;height:22px;border-radius:2px;background:#0d6efd}
.film-play i::after{content:"";position:absolute;left:8.5px;top:6px;border:5px solid transparent;border-left:7px solid #212529;border-right:0}
@media (hover:hover){.film-play:hover,.film-stop:hover{border-color:#0d6efd;background:rgba(13,110,253,.1)}}
.film-stop{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:60;display:inline-flex;align-items:center;gap:11px;padding:9px 16px 9px 10px;
  border:1px solid #495057;border-radius:4px;background:rgba(33,37,41,.9);color:#dee2e6;font:11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-stop i::before,.film-stop i::after{content:"";position:absolute;top:6px;width:3px;height:10px;background:#212529}
.film-stop i::before{left:7px}.film-stop i::after{left:12px}
.film-playing .film-play{visibility:hidden}

/* телефон: кадр во всю ширину сверху, текст под ним; одна переменная на размер кадра (--sq) */
@media (max-width:760px){
  .film{--sq:min(100vw,46svh)}
  .film.at-hero{--sq:min(100vw,28svh)}
  .film-stage canvas,.film-poster{inset:auto;top:52px;left:0;width:100%;height:var(--sq);object-fit:cover;object-position:50% 50%;transition:height .45s}
  .film-scrim{background:linear-gradient(180deg,rgba(33,37,41,0) 30%,rgba(33,37,41,.0) 60%)}
  .film-top{display:none}
  .film-step{max-width:none;display:flex;flex-direction:column;justify-content:flex-start;padding:0 22px}
  .film-step .story-copy{position:sticky;top:calc(52px + var(--sq) + 18px);transition:opacity .15s,transform .6s,top .45s}
  .film-step.on .story-copy{transition:opacity .5s,transform .5s,top .45s}
  .film-count{margin-bottom:10px;font-size:10.5px}
  .film .story-copy .hero-big{font-size:min(36px,4.6svh,9.4vw);line-height:1.04}
  .film .story-copy h2{font-size:min(34px,4.8svh,9.6vw);line-height:1.06}
  .film .story-copy p{font-size:min(16px,2.4svh);margin-top:10px;line-height:1.5}
  .film-hero .lbl{margin-bottom:10px;font-size:10px}
  .film-hero .hero-sub{margin-top:10px}
  .film-hero .hero-cta{justify-content:flex-start;margin-top:14px;gap:12px 22px}
  .film-hero .hero-cta .btn{min-height:44px;padding:0 18px;font-size:12px}
  .film-hero .hero-free{margin-top:10px;font-size:11px;text-transform:none;letter-spacing:.02em}
  .film-hero .hero-sub{font-size:min(15px,2.25svh)}
  .film-play{margin-top:8px;padding:7px 13px 7px 8px;font-size:10px;gap:9px}
  .film-play i{width:18px;height:18px}.film-play i::after{left:6.5px;top:4.5px;border-width:4.5px;border-left-width:6px}
  .film-stop{left:16px;translate:none;bottom:16px;font-size:10px}
  .film-step:last-of-type{padding-bottom:max(0px,calc(100svh - var(--sq) - 70px - 15rem))}
  #scene-1{min-height:740px;min-height:136svh}
}
@media (max-width:760px) and (max-height:700px){
  .film .story-copy .hero-big{font-size:min(30px,4.6svh,9vw)}
  .film-hero .hero-free{display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  .film-stage canvas{display:none}
  .film-step .story-copy{opacity:1;transform:none}
  .film-play,.film-stop{display:none}
}

/* сцены разделов кадрами Blender: прокрутка ведёт кадр */
.scrub{position:relative;overflow:hidden;background:#212529}
.scrub img,.scrub canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
@media (prefers-reduced-motion:reduce){.scrub canvas{display:none}}


/* ── Плотный фильм (R9 «Правки 12.10.2026», решение Эльхана): кадр на весь экран, стеклянные карточки текста,
   телефон — вертикальный кадр 720×1280 на весь экран, карточка у нижнего края по своей высоте (--ch из film.js). ── */
.film-stage canvas,.film-poster{object-fit:cover}
.film-scrim{background:linear-gradient(90deg,rgba(33,37,41,.5) 0%,rgba(33,37,41,.2) 34%,rgba(33,37,41,0) 50%)}
.film .story-copy{background:rgba(33,37,41,.5);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(242,243,244,.12);border-radius:16px;padding:28px 30px 30px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
@media (max-width:760px){
  .film{--sq:100svh}
  .film-stage canvas,.film-poster{inset:0;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%}
  .film-scrim{background:linear-gradient(180deg,rgba(33,37,41,0) 55%,rgba(33,37,41,.5) 100%)}
  .film-step{padding:0 14px}
  .film .story-copy{max-width:none;top:max(64px,calc(100svh - var(--ch,20rem) - 78px),min(34svh,calc(100svh - var(--ch,20rem) - 14px)));padding:20px 20px 22px;border-radius:14px}
  .film .story-copy,.film .film-step .story-copy{transform:none!important}   /* без сдвига при появлении: карточка стоит ровно у нижнего края */
  .film-step:last-of-type{padding-bottom:max(0px,calc(100svh - var(--ch,20rem) - 94px))}
}