/* Лайнер — движение: появление секций, первый экран, микровзаимодействия. Подключать ПОСЛЕ components.css. Договор безопасности: всё, что прячет контент, живёт под классом .motion на . Класс ставит инлайновый скрипт в , он же снимается сторожевым таймером, если motion.js не доехал. Без JS и при сбое загрузки страница видна целиком. */ :root{ --mo-dur:.66s; --mo-ease:cubic-bezier(.22,.68,.28,1); /* быстрый старт, длинное затухание */ --mo-step:70ms; /* шаг лесенки внутри группы */ --mo-rise:14px; /* насколько блок поднимается: мало = дорого */ } @keyframes mo-rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}} @keyframes mo-fade{from{opacity:0}to{opacity:1}} @keyframes mo-pop{from{opacity:0;transform:translate3d(0,10px,0) scale(.985)}to{opacity:1;transform:none}} /* ================= появление секций ================= */ /* Одиночный блок: class="reveal". Группа с лесенкой: data-rv на контейнере, индекс --rv-i расставляет motion.js по визуальным рядам. */ .motion .reveal{ opacity:0; transform:translate3d(0,var(--mo-rise),0); transition:opacity var(--mo-dur) var(--mo-ease),transform var(--mo-dur) var(--mo-ease); transition-delay:calc(var(--rv-i,0) * var(--mo-step)); } .motion .reveal.is-in{opacity:1;transform:none} /* только прозрачность: для крупных фотографий, где сдвиг читается как «поехало» */ .motion .reveal[data-rv-from="none"]{transform:none} /* Прыжок по якорю: html.scroll-behavior:smooth пролетает половину страницы и зажигает все секции подряд. Гасим лесенку, чтобы это не выглядело автоматом. */ .motion.is-jump .reveal{transition-delay:0s} /* ================= первый экран ================= */ /* Чистый CSS, без участия motion.js: класс .motion приходит из , поэтому заголовок не может «зависнуть невидимым», пока грузится скрипт. */ .motion .hero__lockup{animation:mo-rise .70s var(--mo-ease) .04s both} .motion .hero h1 {animation:mo-rise .78s var(--mo-ease) .12s both} .motion .hero__sub {animation:mo-rise .72s var(--mo-ease) .22s both} .motion .hero__cta {animation:mo-rise .72s var(--mo-ease) .30s both} .motion .hero__facts {animation:mo-fade .80s var(--mo-ease) .38s both} /* линия сверху */ .motion .hero__facts>*{animation:mo-rise .62s var(--mo-ease) calc(.42s + var(--rv-i,0) * 45ms) both} .motion .hero__facts>*:nth-child(2){--rv-i:1} .motion .hero__facts>*:nth-child(3){--rv-i:2} .motion .hero__facts>*:nth-child(4){--rv-i:3} .motion .hero__facts>*:nth-child(5){--rv-i:4} /* Фоновый рендер. Запас по высоте вместо scale: картинку не приходится растягивать, кадрирование остаётся честным. Двигает только motion.js. */ @media (min-width:900px) and (pointer:fine){ .motion .hero__bg img{height:calc(100% + 80px);margin-top:-40px} } /* ================= сезонность: столбцы ================= */ /* scaleY, а не height: высота пересчитала бы раскладку 12 раз за кадр, и подпись с ценой над столбцом ездила бы вверх-вниз. Трансформ её не трогает. */ .motion .season__bar i{ transform:scaleY(0); transform-origin:50% 100%; transition:transform .70s var(--mo-ease); transition-delay:calc(var(--rv-i,0) * 42ms); } .motion .season__chart.is-in .season__bar i{transform:none} .motion .season__bar b, .motion .season__bar span{ opacity:0; transition:opacity .45s ease; transition-delay:calc(var(--rv-i,0) * 42ms + 240ms); } .motion .season__chart.is-in .season__bar b, .motion .season__chart.is-in .season__bar span{opacity:1} /* ================= микровзаимодействия ================= */ /* Планировки: чертёж не трогаем — масштабировать техническую графику незачем. Работают только тень, рамка и лупа. */ .plan{transition:box-shadow .3s var(--mo-ease),transform .3s var(--mo-ease),border-color .3s ease} .plan:hover{border-color:rgba(26,90,118,.28)} .plan__zoom{transform:scale(.86);transition:opacity .22s ease,transform .22s var(--mo-ease)} .plan__img:hover .plan__zoom, .plan__img:focus-visible .plan__zoom{opacity:1;transform:none} /* с клавиатуры лупа тоже должна быть видна: у .plan__img есть tabindex */ .plan__img:focus-visible{outline:2px solid var(--sea);outline-offset:-2px} /* Главная кнопка чуть приподнимается, остальные остаются плоскими */ .btn--gold:hover{transform:translateY(-1px)} /* Интерьеры и фото инфраструктуры получают тот же наезд, что уже есть в галерее */ .rooms figure img, .infra-photos figure img{transition:transform .7s var(--mo-ease)} .rooms figure:hover img, .infra-photos figure:hover img{transform:scale(1.04)} /* Модалка и просмотрщик появляются, а не возникают */ .modal.is-open .modal__back{animation:mo-fade .28s ease both} .modal.is-open .modal__box{animation:mo-pop .34s var(--mo-ease) both} .viewer.is-open{animation:mo-fade .22s ease both} /* FAQ: плавное раскрытие там, где браузер это умеет. Остальные просто раскрывают мгновенно, как сейчас. */ @supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords} .faq details::details-content{ block-size:0;overflow:hidden; transition:block-size .34s var(--mo-ease),content-visibility .34s allow-discrete; } .faq details[open]::details-content{block-size:auto} } /* ================= уважение к настройке системы ================= */ /* tokens.css уже обнуляет длительности. Здесь снимаем стартовые состояния, иначе контент остался бы спрятанным, и убираем задержки, чтобы не было ступенчатых вспышек. */ @media (prefers-reduced-motion:reduce){ .motion *,.motion *::before,.motion *::after{animation-delay:0s!important;transition-delay:0s!important} .motion .reveal{opacity:1;transform:none} .motion .season__bar i{transform:none} .motion .season__bar b,.motion .season__bar span{opacity:1} .motion .hero__bg img{transform:none!important} .btn--gold:hover{transform:none} .rooms figure:hover img,.infra-photos figure:hover img{transform:none} }