/* ==========================================================================
   ZAMOK — Страница «О компании»
   Главный элемент — «плёнка»: залипающая сцена, которую пользователь
   прокручивает как видео. Все кадры двигаются от переменных, которые
   about-scene.js пересчитывает на каждый кадр скролла (--a1-op, --a2-z и т.д.).
   ========================================================================== */

.about-page {
    --ink: #0B0F14;
    --ink-soft: #475569;
    --ink-muted: #94A3B8;
    --line: #E5E7EB;
    --surface-2: #F7F8FA;
    --radius-card: 18px;
    --radius-pill: 999px;
    --grad-dark: linear-gradient(135deg, #0B0F14 0%, #16202B 60%, #1E2A38 100%);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --pad-y: clamp(48px, 6vw, 88px);
    color: var(--ink);
}

/* ───────── Шапка страницы ───────── */

/* Шапка страницы и плёнка лежат на одном листе: одна сетка, один фон,
   никаких карточек и рамок — иначе на стыке виден шов */
.about-top {
    position: relative;
    border-top: 1px solid rgba(11, 15, 20, .1);
    background: #EEF1F5;
    background-image:
        linear-gradient(rgba(11, 15, 20, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 15, 20, .07) 1px, transparent 1px),
        linear-gradient(rgba(11, 15, 20, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 15, 20, .12) 1px, transparent 1px);
    background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
}

/* Поля листа: две вертикальные линии по границам контента — они проходят
   через шапку и всю сцену, поэтому верхний блок не «висит в воздухе» */
.about-top::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100% - 48px, 1392px);
    transform: translateX(-50%);
    border-left: 1px solid rgba(11, 15, 20, .16);
    border-right: 1px solid rgba(11, 15, 20, .16);
    pointer-events: none;
    z-index: 0;
}

.about-top > .container,
.about-top > .film {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   ПЛЁНКА
   ========================================================================== */

.film {
    --acts: 4;
    --vh: calc(100vh - var(--header-height, 120px));
    position: relative;
}

@supports (height: 100svh) {
    .film { --vh: calc(100svh - var(--header-height, 120px)); }
}

.film__track {
    height: calc(var(--acts) * 100vh);
}

.film__viewport {
    position: sticky;
    top: calc(var(--header-height, 120px) + var(--front-admin-bar-offset, 0px));
    height: var(--vh);
    overflow: hidden;
    isolation: isolate;
}

/* Фон: светлая «конструкторская» уходит в тёмный цех по мере прокрутки */
.film__bg,
.film__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.film__bg {
    background: var(--grad-dark);
    opacity: var(--dark, 0);
}

/* Мягкое красное свечение за деталью */
.film__glow {
    background:
        radial-gradient(52% 52% at 62% 46%, rgba(225, 30, 40, .18), transparent 70%),
        radial-gradient(40% 40% at 20% 80%, rgba(225, 30, 40, .08), transparent 70%);
    opacity: calc(0.35 + 0.65 * var(--dark, 0));
}

/* Сканирующая линия на стыке первого и второго кадра */
.film__scan {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--scan, 0) * 100%);
    height: 2px;
    opacity: var(--scan-op, 0);
    background: linear-gradient(90deg, transparent, #E11E28 18%, #fff 50%, #E11E28 82%, transparent);
    box-shadow: 0 0 24px 4px rgba(225, 30, 40, .55);
    pointer-events: none;
    z-index: 6;
}

/* ───────── Кадр ───────── */

.film-act {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(300px, 36%) 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    --pad-x: max(24px, calc((100% - var(--container-max, 1440px)) / 2 + 24px));
    /* снизу оставляем место под шкалу этапов, иначе она ложится на текст */
    padding: clamp(24px, 4vh, 56px) var(--pad-x) clamp(74px, 11vh, 116px);
    opacity: var(--op, 0);
    will-change: opacity;
}

.film-act--1 { --op: var(--a1-op, 0); z-index: 1; }
.film-act--2 { --op: var(--a2-op, 0); z-index: 2; }
.film-act--3 { --op: var(--a3-op, 0); z-index: 3; }
.film-act--4 { --op: var(--a4-op, 0); z-index: 4; }

.film-act__visual {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.film-art {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    will-change: transform;
}

/* Кадр 1 — общий вид: камера подъезжает и в конце проходит «сквозь» деталь */
.film-art--assembly {
    max-height: calc(var(--vh) * 0.6);
    max-width: 100%;
    transform:
        translate3d(calc(var(--a1-x, 0) * 1px), calc(var(--a1-y, 0) * 1px), 0)
        scale(var(--a1-z, 1))
        rotate(calc(var(--a1-rot, 0) * 1deg));
    filter:
        drop-shadow(0 20px 40px rgba(11, 15, 20, .22))
        blur(calc(var(--a1-blur, 0) * 1px));
}

/* Чертёж вместо рендера: линии тонкие, поэтому drop-shadow снимаем и оставляем только расфокус входа */
.film-art--scheme {
    filter: blur(calc(var(--a1-blur, 0) * 1px));
}

/* Кадр 2 — под сканирующей линией проявляется весь кадр: и деталь, и текст.
   Клип висит на самом кадре (он ростом с экран), поэтому проценты считаются от
   высоты экрана и обе половины открываются строго по линии, а не каждая по-своему. */
.film-act--2 {
    clip-path: inset(0 0 calc((1 - var(--a2-clip, 1)) * 100%) 0);
}

/* Выноски живут внутри этой обёртки — она размером ровно с картинку,
   поэтому проценты в координатах точек всегда попадают в нужное место детали. */
.film-art-wrap {
    position: relative;
    display: flex;
    /* запас на увеличение при входе в кадр — иначе деталь упирается в края экрана */
    max-width: 86%;
    max-height: calc(var(--vh) * 0.68);
    transform:
        translate3d(0, calc(var(--a2-y, 0) * 1px), 0)
        scale(var(--a2-z, 1));
    will-change: transform;
}

.film-art--detail {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 48px rgba(11, 15, 20, .24));
}

/* Кадры 3–4 — фотографии: подаются как кадры плёнки, в рамке */
.film-frame {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, .32);
    max-height: 100%;
    will-change: transform;
}

.film-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Снимок изделия вырезан из фона, поэтому «кадром плёнки» его подавать не нужно:
   скругление и тень рисовали вокруг прозрачного PNG заметный прямоугольник. */
.film-frame--box {
    max-width: min(620px, 100%);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform:
        perspective(1400px)
        translate3d(0, calc(var(--a3-y, 0) * 1px), 0)
        rotateX(calc(var(--a3-rx, 0) * 1deg))
        scale(var(--a3-z, 1));
}

.film-frame--box img {
    height: auto;
    object-fit: contain;
}

.film-frame--handover {
    width: 100%;
    height: clamp(180px, 34vh, 330px);
    border-radius: calc(var(--a4-r, 20) * 1px);
    transform:
        translate3d(0, calc(var(--a4-y, 0) * 1px), 0)
        scale(var(--a4-z, 1));
}

/* Финал: снимок раскрывается во всю ширину сцены, текст стоит над ним —
   так в кадре не остаётся пустого поля */
.film-act--4 {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
}

.film-act--4 .film-act__text { max-width: 640px; }

.film-act--4 .film-act__visual {
    height: auto;
    margin-inline: calc(-1 * var(--pad-x));
}

/* ───────── Текст кадра ───────── */

.film-act__text {
    position: relative;
    z-index: 2;
    max-width: 460px;
    opacity: var(--t-op, 1);
    transform: translate3d(0, calc(var(--t-y, 0) * 1px), 0);
}

.film-act--1 .film-act__text { --t-y: var(--t1-y, 0); --t-op: var(--t1-op, 1); }
.film-act--2 .film-act__text { --t-y: var(--t2-y, 0); --t-op: var(--t2-op, 1); }
.film-act--3 .film-act__text { --t-y: var(--t3-y, 0); --t-op: var(--t3-op, 1); }
.film-act--4 .film-act__text { --t-y: var(--t4-y, 0); --t-op: var(--t4-op, 1); }

.film-act__num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C41920;
    margin-bottom: 16px;
}

/* На тёмной половине тот же красный не проходит по контрасту — светлее тон */
.film-act--3 .film-act__num,
.film-act--4 .film-act__num { color: #FF6B72; }

.film-act__num::before {
    content: "";
    width: 24px;
    height: 2px;
    background: currentColor;
}

.film-act__title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.film-act__desc {
    margin: 16px 0 0;
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.62;
    color: var(--ink-soft);
}

/* ───────── Вводный первый кадр ─────────
   Первый кадр сцены он же титульный: слева заголовок страницы, вводный текст
   и факты, справа — чертёж. Отдельный блок над сценой рвал первый экран надвое. */
.film-act__text--hero {
    max-width: 640px;
}

/* Первый кадр вводный, текста в нём больше — колонке нужна доля пошире,
   иначе заголовок рассыпается на четыре строки. */
.film-act--1 {
    grid-template-columns: minmax(320px, 46%) 1fr;
}

.about-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C41920;
}

.about-intro__eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: currentColor;
}

.about-intro__title {
    margin: 14px 0 0;
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--ink);
}

.about-intro__title em {
    font-style: normal;
    color: #C41920;
}

.about-intro__lead {
    margin: 16px 0 0;
    max-width: 760px;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.6;
    color: var(--ink-soft);
}

.about-intro__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.about-intro__hint::after {
    content: "↓";
    font-size: 13px;
}

@media (max-width: 600px) {
    .about-intro__facts { gap: 12px 22px; }
}
.film-act__title--hero {
    text-transform: uppercase;
    font-size: clamp(24px, 2.9vw, 40px);
    line-height: 1.06;
}

.film-act__title--hero em {
    font-style: normal;
    color: #C41920;
}

/* Строка этапа под вводным текстом: номер, заголовок и описание в одном абзаце */
.film-act__desc--step {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(11, 15, 20, .12);
    max-width: 100%;
}

.film-act__step-num {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C41920;
}

.film-act__step-title {
    color: var(--ink);
    font-weight: 800;
}

.film-act__step-title::after {
    content: " — ";
    font-weight: 400;
    color: var(--ink-muted);
}

.film-act--1 .about-intro__hint {
    margin-top: 16px;
}

@media (max-height: 940px) and (min-width: 769px) {
    .film-act--1 .about-intro__hint { display: none; }
    .film-act__desc--lead { margin-top: 10px; }
}

/* Тёмная половина плёнки */
.film-act--3 .film-act__title,
.film-act--4 .film-act__title { color: #fff; }

.film-act--3 .film-act__desc,
.film-act--4 .film-act__desc { color: rgba(255, 255, 255, .72); }

/* ───────── Выноски на крупном плане ───────── */

.film-callout {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    align-items: center;
    gap: 0;
    opacity: clamp(0, calc((var(--a2-call, 0) - var(--delay, 0)) * 5), 1);
    white-space: nowrap;
    pointer-events: none;
}

.film-callout--left {
    flex-direction: row-reverse;
    transform: translateX(-100%);
}

/* Плашки декоративные и кликов не ловят — иначе они перехватывали бы мышь у кадра.
   Но в режиме редактирования подпись правится прямо на сайте, поэтому там события
   возвращаем: без этого визуальный редактор до плашки не дотягивался. */
body.admin-edit-mode .film-callout,
body.admin-edit-mode .film-callout__label {
    pointer-events: auto;
}

body.admin-edit-mode .film-callout__label {
    cursor: text;
}

.film-callout__dot {
    position: relative;
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--color-primary, #E11E28);
    box-shadow: 0 0 0 4px rgba(225, 30, 40, .18);
}

.film-callout__dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgba(225, 30, 40, .55);
    animation: film-ping 2.4s var(--ease-out) infinite;
}

@keyframes film-ping {
    0%   { transform: scale(.6); opacity: .9; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

.film-callout__line {
    width: clamp(28px, 4vw, 64px);
    height: 1px;
    background: var(--color-primary, #E11E28);
    transform: scaleX(clamp(0, calc((var(--a2-call, 0) - var(--delay, 0)) * 4), 1));
    transform-origin: left center;
}

.film-callout--left .film-callout__line { transform-origin: right center; }

.film-callout__label {
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(11, 15, 20, .18);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* ───────── Счётчики третьего кадра ───────── */

.film-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 24px);
    margin-top: 24px;
}

.film-stat__value {
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

/* тот же светлый красный, что и у номеров кадров на тёмной половине */
.film-stat__value span { color: #FF6B72; }

/* приписка вроде «млн» хранится отдельным полем — отбиваем её от числа */
.film-stat__value span + span { margin-left: 0.22em; }

.film-stat__label {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    /* мелкий текст читается лучше с чуть более широким трекингом */
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, .6);
}

/* ───────── Кнопки финала ───────── */

.film-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.film-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 44×44 — минимальный размер зоны нажатия */
    min-height: 44px;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out);
}

.film-cta__btn--primary {
    background: var(--color-primary, #E11E28);
    color: #fff;
}

.film-cta__btn--ghost {
    color: #fff;
    /* контур несёт смысл границы кнопки — держим 3:1 к фону */
    border: 1px solid rgba(255, 255, 255, .4);
}

.film-cta__btn:hover {
    transform: translateY(-2px);
    background: var(--color-primary-hover, #C41920);
}

.film-cta__btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .7);
}

/* Видимый фокус: на странице нет глобального focus-visible, а сцена почти
   целиком состоит из ссылок-кнопок */
.about-page a:focus-visible,
.about-page button:focus-visible {
    outline: 3px solid #C41920;
    outline-offset: 3px;
}

.film-act--3 a:focus-visible,
.film-act--4 a:focus-visible {
    outline-color: #fff;
}

/* ───────── Шкала этапов ───────── */

.film__steps {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1.4vw, 22px);
    margin: 0;
    padding: 0 max(24px, calc((100% - var(--container-max, 1440px)) / 2 + 24px)) clamp(16px, 3vh, 30px);
    list-style: none;
    pointer-events: none;
}

.film__step {
    position: relative;
    padding-top: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    transition: color .2s var(--ease-out);
}

.film__step::before,
.film__step::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
}

.film__step::before {
    right: 0;
    background: rgba(11, 15, 20, .14);
}

/* Заполнение сегмента идёт ровно по прогрессу внутри своего этапа */
.film__step::after {
    width: calc(var(--fill, 0) * 100%);
    right: auto;
    background: var(--color-primary, #E11E28);
    box-shadow: 0 0 12px rgba(225, 30, 40, .5);
}

.film__step:nth-child(1) { --fill: var(--f1, 0); }
.film__step:nth-child(2) { --fill: var(--f2, 0); }
.film__step:nth-child(3) { --fill: var(--f3, 0); }
.film__step:nth-child(4) { --fill: var(--f4, 0); }

.film__step--active { color: var(--ink); }

/* На тёмной половине шкала светлеет */
.film--dark .film__step { color: rgba(255, 255, 255, .62); }
.film--dark .film__step--active { color: #fff; }
.film--dark .film__step::before { background: rgba(255, 255, 255, .18); }

/* ==========================================================================
   Секции под плёнкой
   ========================================================================== */

.about-story {
    padding: var(--pad-y) 0;
    background: var(--surface-2);
}

.about-story__head { margin-bottom: clamp(24px, 3vw, 40px); }

.about-story__title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 900px;
}

/* без градиентной заливки текста — просто акцентный цвет */
.about-story__title em {
    font-style: normal;
    color: #C41920;
}

.about-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
}

.about-story__text p {
    margin: 0 0 16px;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.66;
    color: var(--ink-soft);
    max-width: 62ch;
}

.about-story__text p:last-child { margin-bottom: 0; }
.about-story__text strong { color: var(--ink); }

/* Паспорт компании: строки спецификации, а не карточки */
.about-spec {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);
}

.about-spec__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.about-spec__label {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.about-spec__value {
    margin: 0;
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

.about-cta-section {
    padding: 0 0 var(--pad-y);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 1024px) {
    .film-act {
        grid-template-columns: 1fr;
        align-content: center;
        gap: clamp(16px, 3vh, 32px);
    }

    .film-act__text {
        max-width: none;
        order: 1;
    }

    .film-act__visual {
        order: 2;
        height: auto;
        min-height: 0;
        flex: 1;
    }

    .film-art--assembly { max-height: 40vh; }
    .film-art-wrap { max-height: 44vh; }
    .film-frame--box { max-width: min(360px, 78%); }

    .about-story__grid { grid-template-columns: 1fr; }
    .about-spec__value { font-size: 16px; }
}

@media (max-width: 768px) {


    .film { --acts: 3.4; }

    .film-act {
        padding: clamp(14px, 2.5vh, 24px) 20px clamp(52px, 8vh, 70px);
        gap: clamp(10px, 2vh, 20px);
    }

    .film-act__title { font-size: clamp(23px, 6.4vw, 30px); }
    .film-act__desc { font-size: 14px; }

    .film-callout__label { font-size: 11px; padding: 5px 10px; }
    .film-callout__line { width: 22px; }
    /* На узком экране оставляем только две выноски — иначе они наезжают друг на друга */
    .film-callout--secondary { display: none; }

    /* Подписи разворачиваем внутрь кадра, но только у точек в правой половине
       детали: иначе левая выноска уезжает за левый край экрана */
    .film-callout--flip {
        flex-direction: row-reverse;
        transform: translateX(-100%);
    }

    .film-callout--flip .film-callout__line { transform-origin: right center; }

    .film-stats { gap: 16px; margin-top: 18px; }

    /* Кадр передачи заказа снят широкой панорамой: на телефоне режем его
       по центру, иначе от снимка остаётся тонкая полоска в пустом экране. */
    .film-frame--handover img { object-fit: cover; }
    .film-stat__label { font-size: 11px; max-width: 104px; }

    .film__steps { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .film__step { font-size: 0; padding-top: 8px; }

    .film-cta { margin-top: 16px; gap: 8px; }
    .film-cta__btn { padding: 11px 20px; font-size: 14px; }

    /* Кадр 4 самый насыщенный: заголовок, абзац, две кнопки и фото.
       На телефоне ужимаем снимок, чтобы блок целиком помещался в экран. */
    .film-frame--box img {
    height: auto;
    object-fit: contain;
}

.film-frame--handover { height: 168px; }
    .film-act--4 .film-act__desc { font-size: 13px; line-height: 1.5; }
}

@media (max-height: 720px) and (min-width: 769px) {
    .film-art--assembly { max-height: calc(var(--vh) * 0.56); }
    .film-art-wrap { max-height: calc(var(--vh) * 0.66); }
    .film-stats { margin-top: 18px; }
    .film-cta { margin-top: 18px; }
}

/* Меньше движения — плёнка разворачивается в обычную ленту кадров */
@media (prefers-reduced-motion: reduce) {
    .film__track { height: auto; }

    .film__viewport {
        position: static;
        height: auto;
        padding: 40px 0;
        background: #fff;
    }

    .film__bg,
    .film__glow,
    .film__scan,
    .film__steps { display: none; }

    .film-act {
        position: relative;
        inset: auto;
        opacity: 1;
        min-height: 0;
        padding: 32px max(24px, calc((100% - var(--container-max, 1440px)) / 2 + 24px));
    }

    .film-act--3,
    .film-act--4 { background: var(--grad-dark); }

    .film-art,
    .film-art-wrap,
    .film-frame { transform: none !important; filter: none; }

    .film-act--2 { clip-path: none; }

    .film-callout { opacity: 1; }
    .film-callout__line { transform: none; }
    .film-callout__dot::after { animation: none; }
}

/* Режим редактирования страницы: плёнка разворачивается в обычную ленту, чтобы все
   четыре кадра были на виду и по ним можно было кликать (в собранной сцене кадр живёт
   только в своей фазе прокрутки). Набор правил тот же, что и при prefers-reduced-motion;
   класс ставит about-scene.js — он следит за кнопкой «Редактировать страницу». */
body.film-flat .film__track { height: auto; }

body.film-flat .film__viewport {
    position: static;
    height: auto;
    padding: 40px 0;
    background: #fff;
}

body.film-flat .film__bg,
body.film-flat .film__glow,
body.film-flat .film__scan,
body.film-flat .film__steps { display: none; }

body.film-flat .film-act {
    position: relative;
    inset: auto;
    opacity: 1;
    min-height: 0;
    padding: 32px max(24px, calc((100% - var(--container-max, 1440px)) / 2 + 24px));
}

body.film-flat .film-act--3,
body.film-flat .film-act--4 { background: var(--grad-dark); }

body.film-flat .film-art,
body.film-flat .film-art-wrap,
body.film-flat .film-frame { transform: none !important; filter: none; }

body.film-flat .film-act--2 { clip-path: none; }

/* Текст кадра в ленте всегда на виду: иначе прозрачность, оставшаяся от
   собранной сцены, прятала бы то, что администратор пришёл править. */
body.film-flat .film-act__text {
    opacity: 1;
    transform: none;
}

body.film-flat .film-callout { opacity: 1; }
body.film-flat .film-callout__line { transform: none; }
body.film-flat .film-callout__dot::after { animation: none; }