/* ═══════════════════════════════════════════════════════════ ПОГРУЖЕНИЕ ВНУТРЬ: первый экран → второй ГЛАВНОЕ ПРАВИЛО ЭТОГО ФАЙЛА: анимируются только transform и opacity. Ничего больше. Эти два свойства браузер отдаёт видеокарте и не перерисовывает слой. Всё остальное — filter: blur(), box-shadow, mix-blend-mode, mask на движущемся слое — считается процессором на каждом кадре прокрутки и кладёт вкладку. Здесь их нет и быть не должно. Как устроен проход. Кадр разрезан по световому шву на два полотна. Герой залипает, полотна расходятся, между ними открывается свет, текст уходит вперёд. Высоту сцены задаёт skin.js: высота героя + 90vh прохода, ровно столько же длятся анимации — герой отлипает в тот момент, когда проход закончен, мёртвой прокрутки не остаётся. ═══════════════════════════════════════════════════════════ */ /* ── ВЫКЛЮЧАТЕЛЬ ────────────────────────────────────────── Если поставить на атрибут data-motion="off", проход первого экрана и волны выключаются целиком, а страница остаётся полностью рабочей: герой становится обычной секцией, всё остальное живёт как жило. Одна правка в одном месте, без сборки и без вырезания кода. ───────────────────────────────────────────────────────── */ html[data-motion="off"] .hero-x{position:static} html[data-motion="off"] .hero-x__half--l, html[data-motion="off"] .hero-x__half--r, html[data-motion="off"] .hero-x__content, html[data-motion="off"] .hero-x__vig, html[data-motion="off"] .waves__g, html[data-motion="off"] .orb{animation:none!important;transform:none!important} html[data-motion="off"] .reveal-x, html[data-motion="off"] .reveal-x__shot{display:none} html[data-motion="off"] .scene-x{height:auto!important} html:not([data-motion="off"]) .scene-x{position:relative} /* Липкий герой имеет смысл только там, где есть чем занять прокрутку. В Safari и Firefox scroll-таймлайнов нет: герой залипал, анимаций не было, и между первым и вторым экраном оставалось 760px пустоты — тот самый пустой экран на телефоне. Теперь sticky включается вместе с анимациями. */ @supports (animation-timeline:scroll()){ html:not([data-motion="off"]) .hero-x{position:sticky;top:0} } @supports (animation-timeline:scroll()){ .hero-x__half--l,.hero-x__half--r, .reveal-x,.reveal-x__shot,.hero-x__content,.hero-x__vig{ animation-timeline:scroll(root block); animation-timing-function:linear; animation-fill-mode:both} .hero-x__half--l{animation-name:xSplitL;animation-range:0 88vh} .hero-x__half--r{animation-name:xSplitR;animation-range:0 88vh} .reveal-x {animation-name:xRevealGo;animation-range:0 84vh} /* кадр держится в кадре дольше света: свет вспыхивает и гаснет, кровля остаётся видимой до самого ухода героя */ .reveal-x__shot {animation-name:xShotGo;animation-range:0 92vh} .hero-x__content{animation-name:xContentGo;animation-range:0 54vh} .hero-x__vig {animation-name:xVigGo;animation-range:0 66vh} } @keyframes xSplitL{ from{transform:translate3d(0,0,0) scale(1)} to {transform:translate3d(-24%,0,0) scale(1.18)} } @keyframes xSplitR{ from{transform:translate3d(0,0,0) scale(1)} to {transform:translate3d(24%,0,0) scale(1.18)} } @keyframes xRevealGo{ 0% {opacity:0} 42% {opacity:1} 100%{opacity:0} } /* Кровля выходит из-за расходящихся половин: сперва крупнее кадра, к концу встаёт в натуральный масштаб — так она «наезжает», а не просто проявляется. */ @keyframes xShotGo{ 0% {opacity:0;transform:scale(1.16)} 30% {opacity:1;transform:scale(1.09)} 82% {opacity:1;transform:scale(1)} 100%{opacity:.72;transform:scale(1)} } /* без blur: он и был причиной тормозов */ @keyframes xContentGo{ 0% {opacity:1;transform:translate3d(0,0,0) scale(1)} 100%{opacity:0;transform:translate3d(0,-6%,0) scale(1.14)} } @keyframes xVigGo{ 0% {opacity:1} 100%{opacity:0} } /* will-change здесь намеренно нет. На пяти полноэкранных слоях он держит пять постоянных текстур в памяти видеокарты — на встроенной графике это и приводило к вылету вкладки. Анимации transform/opacity композитятся и без подсказки. */ @media (prefers-reduced-motion:reduce){ .hero-x{position:static} .hero-x__half--l,.hero-x__half--r,.hero-x__content,.hero-x__vig{ animation:none!important;transform:none!important;opacity:1!important} .reveal-x{animation:none!important;opacity:0!important} .reveal-x__shot{animation:none!important;opacity:0!important} } /* ═══════════════════════════════════════════════════════════ ПОДЛОЖКИ ПОД ТЕКСТ Виньетка гасит середину кадра, а правая колонка стоит правее центра — на светлой части рендера ей не хватало опоры. Даём каждой колонке своё поле, растворяющееся по краям. Слои статичные, в анимации не участвуют. ═══════════════════════════════════════════════════════════ */ @media (min-width:901px){ .hx-left,.hx-right{position:relative;isolation:isolate} /* отступы в пикселях, а не в процентах: у высокой колонки 7% — это десятки пикселей, и подложка заезжала краем на вордмарк */ .hx-left::before,.hx-right::before{content:'';position:absolute; inset:-6px -26px -22px -20px;z-index:-1;pointer-events:none} /* поле шире своего блока и гаснет задолго до края — иначе радиальный градиент обрезается рамкой и читается прямоугольной плашкой под текстом */ .hx-left::before,.hx-right::before{inset:-40px -70px -60px -60px} .hx-left::before{ background:radial-gradient(68% 62% at 34% 50%, rgba(7,7,21,.72) 0%, rgba(7,7,21,.42) 44%, rgba(7,7,21,.14) 70%, transparent 92%)} .hx-right::before{ background:radial-gradient(70% 62% at 40% 48%, rgba(7,7,21,.7) 0%, rgba(7,7,21,.4) 46%, rgba(7,7,21,.12) 72%, transparent 92%)} .sig-x__in,.fin__in{position:relative} .sig-x__in::before,.fin__in::before{content:'';position:absolute; inset:-8% -10% -10% -8%;z-index:-1;pointer-events:none; background:radial-gradient(104% 94% at 24% 50%, rgba(7,7,21,.72) 0%, rgba(7,7,21,.46) 52%, rgba(7,7,21,.16) 80%, transparent 100%)} } /* ═══════════════════════════════════════════════════════════ ПРАВЫЙ КРАЙ ТЕКСТОВОГО БЛОКА Колонки уходили к краю экрана, а вордмарк заканчивался заметно раньше — волосяные линии тайминга тянулись в пустоту. Равняем правый край по последней букве «ПУЛЬС». ═══════════════════════════════════════════════════════════ */ @media (min-width:901px){ .hero-x__content{ padding-right:max(clamp(20px,4vw,64px), calc(100% - var(--x-col) - var(--x-mark-w, 60%)))} /* лид не должен ужиматься в узкий столбик */ .lead-x{max-width:none} } /* ═══════════════════════════════════════════════════════════ «МАКСИМУМ ПОЛЬЗЫ»: собственная анимация Из комментариев: этому блоку нужна не только вёрстка, но и движение. Шесть ячеек приходят волной слева направо и сверху вниз, каждая — со своей точкой входа. Только opacity и transform, как и всё в этом файле. ═══════════════════════════════════════════════════════════ */ @supports (animation-timeline:view()){ #forwhom .gx>*{animation-name:xCellIn!important; animation-timeline:view()!important;animation-fill-mode:both!important} #forwhom .gx>*:nth-child(1){animation-range:entry 2% cover 16%!important} #forwhom .gx>*:nth-child(2){animation-range:entry 2% cover 21%!important} #forwhom .gx>*:nth-child(3){animation-range:entry 2% cover 26%!important} #forwhom .gx>*:nth-child(4){animation-range:entry 2% cover 24%!important} #forwhom .gx>*:nth-child(5){animation-range:entry 2% cover 29%!important} #forwhom .gx>*:nth-child(6){animation-range:entry 2% cover 34%!important} } @keyframes xCellIn{ from{opacity:0;transform:translate3d(-14px,18px,0)} to {opacity:1;transform:translate3d(0,0,0)} } /* ячейка отзывается на курсор: плоскость чуть выступает вперёд */ #forwhom .gx>*{transition:background .45s var(--x-ease),transform .45s var(--x-ease)} #forwhom .gx>*:hover{background:rgba(238,244,250,.045); transform:translate3d(0,-3px,0)} @media (prefers-reduced-motion:reduce){ #forwhom .gx>*{animation:none!important;transform:none!important;opacity:1!important} } /* ═══════════════════════════════════════════════════════════ ПОДСКАЗКА ПРОКРУТКИ Взята из версии Kimi: слово вразрядку и тонкая линия, уходящая в красный. Покачивается на том же такте, что и весь пульс страницы, и исчезает, как только человек тронул колесо — дальше она не нужна. ═══════════════════════════════════════════════════════════ */ .cue{position:absolute;left:50%;bottom:clamp(18px,3vh,32px);z-index:6; display:flex;flex-direction:column;align-items:center;gap:9px; pointer-events:none; font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:600; color:rgba(238,244,250,.55); animation:cueBob 2.4s ease-in-out infinite} .cue::after{content:'';width:1px;height:clamp(30px,5vh,46px); background:linear-gradient(180deg,var(--x-red),transparent)} @keyframes cueBob{ 0%,100%{transform:translate3d(-50%,0,0);opacity:.85} 50% {transform:translate3d(-50%,8px,0);opacity:.5} } @supports (animation-timeline:scroll()){ .cue{animation:cueBob 2.4s ease-in-out infinite, cueOut linear both; animation-timeline:auto, scroll(root block); animation-range:normal, 0 22vh} } @keyframes cueOut{to{opacity:0}} @media (prefers-reduced-motion:reduce){.cue{animation:none;transform:translateX(-50%)}} /* ═══════════════════════════════════════════════════════════ БЕГУЩАЯ СТРОКА КЛИЕНТОВ Тоже из Kimi. Полоса во всю ширину секции, края растворены маской, при наведении останавливается. Дорожка продублирована в разметке, поэтому сдвиг на половину даёт бесшовную петлю. Маска здесь статичная — слой не перерисовывается. ═══════════════════════════════════════════════════════════ */ .mq{overflow:hidden;margin:0 calc(-1 * clamp(20px,4vw,64px)) 0 calc(-1 * var(--x-col)); padding:clamp(16px,2.4vh,24px) 0; border-top:1px solid rgba(238,244,250,.1); border-bottom:1px solid rgba(238,244,250,.1); -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .mq__track{display:flex;width:max-content;gap:clamp(38px,4.4vw,64px); animation:mqRun 34s linear infinite} .mq:hover .mq__track{animation-play-state:paused} @keyframes mqRun{to{transform:translate3d(-50%,0,0)}} .mq span{display:flex;align-items:center;gap:clamp(38px,4.4vw,64px); font-size:var(--t-s);font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:rgba(238,244,250,.44);white-space:nowrap} /* разделитель — плоскость знака, а не круглая точка */ .mq span::after{content:'';width:7px;height:7px;flex:none; background:var(--x-red);opacity:.75; clip-path:polygon(28% 0, 100% 0, 72% 100%, 0 100%)} @media (prefers-reduced-motion:reduce){.mq__track{animation:none}}