/* «Диктовка Deepgram» — история при прокрутке (R9, раздел 7). Светлый сайт: фон кадров = фон страницы #fafbfc.
   Устройство — по образцам 07 (пекарня) и 09 (архитектор): липкая сцена, шаги текста поверх, кадр = доля прокрутки,
   на телефоне кадр сверху во всю ширину, текст под ним (место считается от одной переменной --sq). */
.film{position:relative;background:var(--bg)}
.film-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg);pointer-events:none}
.film-stage picture{display:contents}
.film-stage canvas,.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
/* края кадра растворяются в поле страницы маской (R9 8.5: на светлом сайте — маска, не заливка) */
.film-stage canvas,.film-poster{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.film-stage + .film-step{margin-top:-100vh;margin-top:-100svh}
.film-step{position:relative;z-index:2;min-height:600px;padding:max(96px,20svh) var(--gutter) 0 max(var(--gutter),calc((100vw - var(--max)) / 2))}
.story-copy{position:sticky;top:max(96px,20svh);max-width:min(36vw,500px);opacity:0;transform:translateY(24px);transition:opacity .55s,transform .55s}
.film-step.on .story-copy{opacity:1;transform:none}
.story-copy h2{margin-bottom:18px}
.story-copy h2 .kbd{font-size:.62em;vertical-align:.18em}
.story-copy p{color:var(--text);font-size:1.08rem}
.story-copy .lead{color:var(--muted)}
.film-no{font:400 13px/1 var(--mono);letter-spacing:.04em;color:var(--accent);margin-bottom:16px}
/* первый экран: текст выше, целиком под шапкой */
.film-step--hero{padding-top:max(88px,13svh)}
.film-step--hero .story-copy{top:max(88px,13svh);max-width:min(46vw,640px)}
/* последняя сцена уходит вместе с кадром (R9, раздел 7): нижний отступ = экран − место текста − текст */
.film-step:last-of-type{padding-bottom:max(0px,calc(80svh - 15rem))}

/* живой свет поверх сцены вместо видео бликов воды у референса: два мягких холодных пятна медленно плывут (умножение) */
.film-glow{position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:multiply}
.film-glow i{position:absolute;width:62vw;height:62vw;border-radius:50%;background:radial-gradient(closest-side,rgba(178,206,255,.62),rgba(210,226,255,.26) 55%,transparent);
  animation:glowdrift 17s ease-in-out infinite alternate}
.film-glow i:first-child{left:-8vw;top:-18vw}
.film-glow i:last-child{right:-14vw;bottom:-26vw;animation-duration:21s;animation-delay:-7s}
@keyframes glowdrift{from{transform:translate(0,0) scale(1)}to{transform:translate(14vw,10vw) scale(1.22)}}

/* «Посмотреть весь сайт за минуту» (образец 09) */
.film-play{display:inline-flex;align-items:center;gap:11px;margin-top:26px;padding:9px 18px 9px 10px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.8);color:var(--text);font:400 12px/1 var(--mono);letter-spacing:.04em;cursor:pointer;pointer-events:auto;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:24px;height:24px;border-radius:50%;background:var(--accent)}
.film-play i::after{content:"";position:absolute;left:9.5px;top:7px;border:5px solid transparent;border-left:8px solid #fff;border-right:0}
.film-stop{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:60;display:inline-flex;align-items:center;gap:11px;padding:9px 18px 9px 10px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);color:var(--text);font:400 12px/1 var(--mono);cursor:pointer;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(41,44,61,.12)}
.film-stop i::before,.film-stop i::after{content:"";position:absolute;top:7px;width:3px;height:10px;background:#fff}
.film-stop i::before{left:8px}.film-stop i::after{left:13px}
@media (hover:hover){.film-play:hover,.film-stop:hover{border-color:var(--accent);background:#f1f6ff}}
.film-playing .film-play{visibility:hidden}

/* ── телефон и суженное окно: кадр сверху во всю ширину, текст под ним ── */
@media (max-width:760px){
  .film{--sq:min(100vw,46svh)}
  .film-stage canvas,.film-poster{inset:auto;top:58px;left:0;width:100%;height:var(--sq);object-fit:cover;object-position:50% 40%;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%)}
  .film-step{display:flex;flex-direction:column;justify-content:flex-start;padding:0 22px}
  .film-step--hero{padding-top:calc(58px + var(--sq) + 12px)}
  .story-copy,.film-step--hero .story-copy{max-width:none;top:calc(58px + var(--sq) + 12px)}
  .film .story-copy .hero-big{font-size:min(34px,4.8svh,8.6vw);line-height:1.08}
  .film .story-copy h2{font-size:min(32px,4.6svh,8.4vw);margin-bottom:10px}
  .film .story-copy p{font-size:min(16px,2.4svh)}
  .film .story-copy .mark{margin-bottom:10px;font-size:12px}
  .film .film-no{margin-bottom:10px}
  .film-step--hero .hero-sub,.film-step--hero .keyline{display:none}
  .film-step--hero .hero-actions{margin-top:14px;gap:16px}
  .film-step--hero .hero-actions .btn{height:46px;padding:0 20px;font-size:15px}
  .film-play{margin-top:12px;padding:7px 14px 7px 8px;font-size:11px}
  .film-play i{width:20px;height:20px}.film-play i::after{left:7.5px;top:5.5px;border-width:4.5px;border-left-width:7px}
  .film-stop{left:16px;translate:none;bottom:16px}   /* справа внизу стоит кнопка «Связаться» */
  .film-step .story-copy{transition:opacity .15s,transform .6s}
  .film-step.on .story-copy{transition:opacity .5s,transform .5s}
  .film-step:last-of-type{padding-bottom:max(0px,calc(100svh - var(--sq) - 70px - 13rem))}
}
@media (prefers-reduced-motion:reduce){
  .film-stage canvas{display:none}
  .story-copy{opacity:1;transform:none}
  .film-play,.film-stop{display:none}
}

/* ── линия страницы: звуковая дорожка становится строкой (voice-line.js) ── */
.vl-wrap{position:relative}
.vl{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:6}
.vl-caret{position:absolute;left:0;top:0;z-index:7;width:0;height:0;pointer-events:none;opacity:0;will-change:transform,opacity}
.vl-caret::before{content:"";position:absolute;left:-1.5px;top:-12px;width:3px;height:24px;border-radius:2px;background:var(--accent);box-shadow:0 0 12px rgba(66,136,255,.55)}
.vl-caret::after{content:"";position:absolute;left:-4px;top:-22px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px rgba(231,76,60,.6);animation:recdot 1.2s ease-in-out infinite}
@keyframes recdot{50%{opacity:.35}}
@media (max-width:760px){.vl-caret::before{top:-9px;height:18px}.vl-caret::after{top:-17px;width:7px;height:7px;left:-3.5px}}
@media (prefers-reduced-motion:reduce){.vl-caret{display:none}}

/* полоса прокрутки в цветах сайта */
html{scrollbar-color:#4288ff #f3f7fa}
@supports not (scrollbar-color:auto){::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#f3f7fa}::-webkit-scrollbar-thumb{background:#4288ff;border-radius:8px;border:3px solid #f3f7fa}}


/* ── Плотный фильм (R9 «Правки 12.10.2026», решение Эльхана): кадр на весь экран, стеклянные карточки текста,
   телефон — вертикальный кадр 720×1280 на весь экран, карточка у нижнего края по своей высоте (--ch из film.js). ── */
.film-stage canvas,.film-poster{object-fit:cover}
.film-scrim{background:linear-gradient(90deg,rgba(250,251,252,.5) 0%,rgba(250,251,252,.2) 34%,rgba(250,251,252,0) 50%)}
.film .story-copy{background:rgba(250,251,252,.62);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(40,24,20,.12);border-radius:16px;padding:28px 30px 30px;box-shadow:0 20px 50px rgba(60,30,20,.14)}
@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(250,251,252,0) 55%,rgba(250,251,252,.5) 100%)}
  .film-step{padding:0 14px}
  .film .story-copy{max-width:none;top:max(34svh,calc(100svh - var(--ch,20rem) - 78px));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))}
}

/* 12.10.2026: на низком экране компьютера (ноутбук 720) карточка первого экрана со стеклом не помещалась — подсказка со сменой слов скрыта, как на телефоне */
@media (min-width:761px) and (max-height:800px){.film-step--hero .keyline,.film-step--hero .trial-line{display:none}}