/* ========================================================================== Интро-сцена: три первых экрана главной страницы. Единственный источник правды для мобильной раскладки сцены. Принципы, которые нельзя нарушать при доработках: 1. Ни один предок .intro-sequence-stage не должен иметь overflow: hidden|auto|scroll. Такой предок становится скролл-контейнером, и position: sticky перестаёт закреплять сцену (именно это ломало анимацию на iOS). Для обрезки по горизонтали используем overflow-x: clip — он не создаёт скролл-контейнер. 2. Высота сцены задаётся в svh, а не в px из window.innerHeight. На iOS innerHeight меняется при сворачивании адресной строки, из-за чего высота секции пересчитывалась прямо во время скролла и прогресс прыгал. 3. Покадрово меняются только opacity и transform. Никаких top/bottom/filter из JS — это вызывает пересчёт лейаута на каждом кадре. ========================================================================== */ /* Инвариант: у предков закреплённой сцены не должно быть НИКАКОГО overflow, отличного от visible — ни hidden, ни clip. WebKit при overflow на делает его скролл-контейнером, и sticky молча перестаёт работать. Горизонтальную обрезку держим только на : корневое значение уходит во вьюпорт и на потомков не влияет. Исключение — body.is-menu-open: там блокировка скролла нужна, но сцена в этот момент не анимируется. */ /* Горизонтальную обрезку держим ТОЛЬКО на корне. Значение корневого элемента уходит во вьюпорт, а вьюпорт и так является скроллпортом для sticky — поэтому закрепление не страдает ни в одном движке. */ html { overflow-x: clip; } /* Safari до 16 не знает overflow: clip — там корень обрезаем через hidden. На корне это тоже безопасно, в отличие от body. */ @supports not (overflow: clip) { html { overflow-x: hidden; } } /* А вот у body, main и самой секции overflow быть не должно вообще. WebKit при любом non-visible overflow на этих элементах делает их скролл-контейнерами, и position: sticky внутри перестаёт закреплять сцену. Именно поэтому на iOS и в Safari второй и третий экраны уезжали в пустоту. */ body, main#top, .intro-sequence { overflow: visible; } @media (max-width: 575.98px) { /* --- 1. Контейнеры: путь скролла должен остаться нативным ---------------- */ .intro-sequence { height: 300svh; min-height: 0; max-height: none; overflow: visible; } .intro-sequence-stage { position: sticky; top: 0; left: 0; width: 100%; height: 100svh; min-height: 0; max-height: 100svh; overflow: hidden; transform: none; z-index: 1; } /* --- 2. Слои сцены ------------------------------------------------------ */ .intro-sequence-words { z-index: 9; overflow: hidden; } .intro-sequence[data-intro-active="1"] .intro-sequence-words, .intro-sequence[data-intro-active="2"] .intro-sequence-words { z-index: 2; } .intro-sequence-visuals { width: 100%; z-index: 8; } .intro-sequence[data-intro-active="1"] .intro-sequence-visuals, .intro-sequence[data-intro-active="2"] .intro-sequence-visuals { z-index: 7; } /* !important здесь вынужденный: глобальное правило общей подложки 11LAB задаёт height: auto !important и иначе перебивает мобильную геометрию. */ .intro-sequence-word { top: clamp(58px, 8.2svh, 78px) !important; left: 0 !important; width: 100vw !important; height: clamp(88px, 14.6svh, 128px) !important; object-fit: contain !important; object-position: center; transition: none; } .intro-sequence-word--outline { z-index: 1; } /* Текстовый блок и кнопка позиционируются один раз, а вертикальный сдвиг между состояниями отдаёт transform (переменные считает JS). */ .intro-sequence-copy { top: var(--intro-copy-base, clamp(360px, 52svh, 620px)); left: clamp(20px, 5vw, 32px); right: clamp(20px, 5vw, 32px); bottom: auto; width: auto; min-height: clamp(104px, 17svh, 132px); z-index: 14; transform: translate3d(0, var(--intro-copy-shift, 0px), 0); transition: none; } .intro-sequence-text h1, .intro-sequence-text h2 { max-width: 88vw; font-size: clamp(1.64rem, 8.7vw, 2.55rem); line-height: 0.92; } .intro-sequence-text p, .intro-sequence-text .hero-title-typed { max-width: 88vw; margin-top: clamp(7px, 1.2svh, 11px); font-size: clamp(0.98rem, 5.9vw, 1.68rem); line-height: 0.96; } /* Правка 19.08.2026 — отступ от кнопки до следующего блока сокращён вдвое. Значение в var() — запасное, до первого пересчёта в JS. */ .intro-sequence-actions { left: clamp(20px, 5vw, 32px); bottom: var(--intro-actions-base, clamp(52px, 7.5svh, 84px)); transform: translate3d(0, var(--intro-actions-shift, 0px), 0); transition: none; } .intro-sequence-cta.hero-cta { min-height: 44px; padding-inline: 18px; } /* --- 3. Персонажи ------------------------------------------------------- */ .intro-sequence-visual--girl { top: clamp(92px, 14.8svh, 134px); right: -22vw; left: auto; width: 118vw; height: auto; max-height: 58svh; object-fit: contain; object-position: center bottom; } .intro-sequence-visual--man { top: clamp(104px, 16.8svh, 148px); right: -13vw; left: auto; width: 78vw; height: auto; max-height: 54svh; object-fit: contain; object-position: center bottom; z-index: 5; } /* --- 4. Видео-орб первого экрана ---------------------------------------- */ .intro-sequence-visual--video.hero-video-orb { --first-orb-height: clamp(265px, 46svh, 380px); --first-orb-width: clamp(520px, 128vw, 680px); position: absolute; left: clamp(82px, 23vw, 132px); right: auto; top: clamp(288px, 35svh, 344px); width: var(--first-orb-width); height: var(--first-orb-height); margin: 0; aspect-ratio: auto; border-radius: 999px 0 0 999px; border-color: rgba(7, 7, 7, 0.12); background: #050104; box-shadow: none; overflow: hidden; z-index: 8; transition: none; } /* Ширину орба задают более специфичные правила с [data-intro-active] — повторяем ту же специфичность, чтобы не тащить !important в каждое свойство. */ .intro-sequence[data-intro-active="0"] .intro-sequence-visual--video.hero-video-orb, .intro-sequence[data-intro-active="1"] .intro-sequence-visual--video.hero-video-orb, .intro-sequence[data-intro-active="2"] .intro-sequence-visual--video.hero-video-orb, .intro-sequence:not([data-intro-active]) .intro-sequence-visual--video.hero-video-orb { left: clamp(82px, 23vw, 132px); right: auto; top: clamp(288px, 35svh, 344px); width: var(--first-orb-width) !important; height: var(--first-orb-height); } .intro-sequence-visual--video.hero-video-orb video { transform: scale(1.02); } .intro-sequence-visual--video.hero-video-orb .hero-video-label { position: absolute; left: calc((100vw - clamp(82px, 23vw, 132px)) / 2); top: 50%; transform: translate3d(-50%, -50%, 0); } .intro-sequence[data-intro-active="1"] .intro-sequence-visual--video.hero-video-orb, .intro-sequence[data-intro-active="2"] .intro-sequence-visual--video.hero-video-orb { pointer-events: none; } /* --- 5. Мобильная производительность ------------------------------------ */ /* blur и drop-shadow на весь экран — самый дорогой эффект для мобильного GPU. */ .intro-sequence-word, .intro-sequence-text, .intro-sequence-visual, .intro-sequence-shadow, .intro-sequence-extra { filter: none; } } /* -------------------------------------------------------------------------- Запасной режим закрепления. Включается только если JS обнаружил, что sticky фактически не сработал. При нормальной работе браузера этот блок неактивен. -------------------------------------------------------------------------- */ .intro-sequence.is-pin-fallback .intro-sequence-stage { position: absolute; top: 0; left: 0; right: 0; width: 100%; } .intro-sequence.is-pin-fallback[data-pin-state="pinned"] .intro-sequence-stage { position: fixed; top: 0; } .intro-sequence.is-pin-fallback[data-pin-state="after"] .intro-sequence-stage { position: absolute; top: auto; bottom: 0; } /* will-change держим включённым только пока сцена в зоне видимости, иначе браузер бесконечно хранит композитные слои под каждый элемент. */ .intro-sequence-word, .intro-sequence-text, .intro-sequence-visual, .intro-sequence-shadow { will-change: auto; } .intro-sequence.is-in-view .intro-sequence-word, .intro-sequence.is-in-view .intro-sequence-text, .intro-sequence.is-in-view .intro-sequence-visual, .intro-sequence.is-in-view .intro-sequence-shadow { will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .intro-sequence-stage::before { transform: none; } .intro-sequence-word, .intro-sequence-text, .intro-sequence-visual, .intro-sequence-shadow { will-change: auto; filter: none; } }