/* =========================================================== Hero scroll-scrubbing video Изолированный слой: видео-фон, проигрываемый по скроллу. Подключается ПОВЕРХ существующего hero (.main), не меняя глобальные стили сайта. =========================================================== */ /* Высокий контейнер задаёт «длину» скрабинга. --hero-scroll-vh — сколько viewport'ов прокрутки маппится на видео. */ .hero-scroll { --hero-scroll-vh: 350; position: relative; height: calc(var(--hero-scroll-vh) * 1vh); } /* Сцена пинится на весь экран, пока идёт скролл по контейнеру. */ .hero-scroll__stage { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* Видео — фон: абсолютное, cover, под контентом. --hero-zoom приближает кадр, обрезая тёмные края сцены вокруг стола (1 = без зума; больше = плотнее заполнение). translateY чуть смещает кадр вниз по композиции, чтобы срезать больше тёмного верха. */ .hero-scroll__video { --hero-zoom: 1.3; position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 0; pointer-events: none; background: #191919; -webkit-transform: scale(var(--hero-zoom)) translateY(-3%); transform: scale(var(--hero-zoom)) translateY(-3%); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Лёгкое затемнение для читаемости текста поверх видео. */ .hero-scroll__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; /* чистое видео в интро; затемнение появляется с текстом */ -webkit-transition: opacity 0.9s ease; transition: opacity 0.9s ease; background: -webkit-gradient(linear, left top, left bottom, from(rgba(13, 13, 15, 0.55)), color-stop(50%, rgba(13, 13, 15, 0.35)), to(rgba(13, 13, 15, 0.65))); background: linear-gradient(180deg, rgba(13, 13, 15, 0.55) 0%, rgba(13, 13, 15, 0.35) 50%, rgba(13, 13, 15, 0.65) 100%); } .is-hero-revealed .hero-scroll__overlay { opacity: 1; } /* Существующий hero-контент поверх видео. Внутреннюю разметку .main не трогаем — только поднимаем над фоном и центрируем в сцене. */ .hero-scroll .main { position: relative; z-index: 2; width: 100%; margin: 0; } /* Пока видео не готово — показываем плавную подложку. */ .hero-scroll__stage.is-loading .hero-scroll__video { opacity: 0; } .hero-scroll__video { -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } /* =========================================================== ИНТРО: сначала только видео. Хедер («Pogosov studio») и текст hero скрыты и появляются красиво в конце скрабинга (класс .is-hero-revealed на ). =========================================================== */ /* Видео-интро на весь экран от самого верха. Реальное значение margin-top (− padding у .page под фикс-хедер) выставляет hero-scroll.js, чтобы видео начиналось от y=0. */ .hero-scroll { margin-top: 0; } /* Хедер скрыт, пока видео не доскроллено до конца. */ .header.loaded { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease, padding 0.3s ease-out; transition: opacity 0.6s ease, transform 0.6s ease, padding 0.3s ease-out; pointer-events: none; } .is-hero-revealed .header.loaded { opacity: 1; -webkit-transform: none; transform: none; pointer-events: auto; } /* Текст hero скрыт; появляется со стаггером при reveal. */ .hero-scroll .main__title, .hero-scroll .main__text, .hero-scroll .main__btn { opacity: 0; -webkit-transform: translateY(48px); transform: translateY(48px); -webkit-transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .is-hero-revealed .hero-scroll .main__title { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .is-hero-revealed .hero-scroll .main__text { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .is-hero-revealed .hero-scroll .main__btn { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } /* --- Повторный визит: интро уже видели (класс intro-seen на ставит инлайн-скрипт в до первой отрисовки). Статичный тёмный hero без видео и без длинного скролла, заголовок и хедер видны сразу, бинарный дождь остаётся. --- */ .intro-seen .hero-scroll { height: auto; } .intro-seen .hero-scroll__stage { position: static; height: auto; min-height: 100vh; min-height: 100svh; background: #191919; } .intro-seen .hero-scroll__video, .intro-seen .hero-scroll__overlay { display: none; } /* --- Мобильные: без видео вообще. Статичный тёмный hero, текст виден сразу, из анимаций — прелоадер и бинарный дождь. --- */ @media (max-width: 991.98px) { .hero-scroll { position: relative; height: auto; } .hero-scroll__stage { position: static; height: auto; min-height: 100svh; padding: 7.5rem 0 3.5rem; background: #191919; } .hero-scroll__video { display: none; } .hero-scroll__overlay { display: none; } } /* --- Уважаем prefers-reduced-motion: без скрабинга, статичный кадр --- */ @media (prefers-reduced-motion: reduce) { .hero-scroll { height: auto; } .hero-scroll__stage { position: static; height: auto; min-height: 100svh; } }