/* 99 — сборка: слои, вход, пин hero-текста. Поверх секционных стилей. */ /* слои: канвас 0 < hero-текст 1 < контент 5 < хедер 100 (у агента) */ #heroFix{position:fixed; top:0; left:0; right:0; z-index:1} #page{position:relative; z-index:5} .hero-spacer{position:relative; z-index:auto} /* hero живёт в fixed-слое: паддинг-верх задаёт JS (центр+24 от планеты) */ #heroFix .hero{padding-bottom:0} /* ---------- хореография появления ---------- Обёртка `.mask-inner` стоит прямо в разметке hero, а не навешивается скриптом. Это важно: пока её ставил scene.js, браузер успевал показать готовую строку, скрипт приходил и прятал её под маску, и заголовок мигал перед собственным появлением. Со статической обёрткой первая же отрисовка верная в любом режиме. Режим входа выбирает привратник в начале body и пишет его одним атрибутом `data-intro` на — до первой отрисовки: full — первый чистый заход сверху за сессию: повествование целиком; short — повторный приход на главную: страница уже собрана, играет только планета (её дорожка в js/scene.js — она в WebGL); none — открыли не сверху или по якорю: всё сразу в конечном состоянии. Смещения существуют только у `full`, поэтому гасить их потом не нужно. */ .mask{overflow:clip} .mask > .mask-inner{display:block} @media not (prefers-reduced-motion: reduce){ :root[data-intro="full"] .hdr{transform:translateY(calc(-100% - 40px)); animation:hdrDown .7s cubic-bezier(.22,.61,.36,1) 3.1s forwards} :root[data-intro="full"] .mask > .mask-inner{transform:translateY(112%); animation:lineUp .7s cubic-bezier(.22,.61,.36,1) forwards} :root[data-intro="full"] .mask--1 > .mask-inner{animation-delay:2.1s} :root[data-intro="full"] .mask--2 > .mask-inner{animation-delay:2.22s} :root[data-intro="full"] .hero-sub{opacity:0; animation:riseIn .7s cubic-bezier(.22,.61,.36,1) 2.5s forwards} :root[data-intro="full"] #page .se-card{opacity:0; transform:translateY(120px); animation:cardIn 1s cubic-bezier(.22,.61,.36,1) 3.1s forwards} } @keyframes hdrDown{to{transform:translateY(0)}} @keyframes lineUp{to{transform:translateY(0)}} @keyframes riseIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}} @keyframes cardIn{from{opacity:0; transform:translateY(120px)} to{opacity:1; transform:translateY(0)}} /* ---------- Свечения живут в WebGL-фоне (правка Alexa: фиолетовый со звёздами, растекается между блоками, не клипится секциями) ---------- */ .emp-glow-img{display:none !important} .sol-glow{display:none !important} .emp{background:transparent !important} .sol{background:transparent !important} .prc-section{background:transparent !important} /* ---------- Solutions: тикер (как на живом Framer-сайте) ---------- */ .sol-scroller{overflow:hidden !important} .sol-row{width:max-content; will-change:transform} /* Типографика hero целиком живёт в 02-hero.css по кадрам Framer. Здесь её переопределять нельзя: у свойства один хозяин. */