/* ============================================================ NoStress — Стиль-кит (OH-based) · motion.css Моушен-слой: начальные состояния + утилиты. Сама логика — в motion.js (движок Motion + Lenis). Подключать ПОСЛЕ tokens.css. Принцип: анимируем только transform + opacity (GPU). Выразительно, но сдержанно — премиум через спокойствие. ============================================================ */ /* ---- НАЧАЛЬНЫЕ СОСТОЯНИЯ (до JS-инициализации) ---- .js-motion ставится на скриптом. Без JS / при reduced-motion контент виден сразу — деградация безопасна. */ .js-motion [data-reveal]{opacity:0;transform:translateY(28px)} .js-motion [data-reveal="fade"]{transform:none} .js-motion [data-reveal="scale"]{transform:scale(.96)} /* masked reveal заголовка — слова выезжают снизу, остаются в строку */ .js-motion [data-split] .line{display:inline-block;overflow:hidden;vertical-align:top} .js-motion [data-split] .line__inner{display:inline-block;transform:translateY(110%);will-change:transform} /* clip-reveal изображения (штора снизу вверх + лёгкий зум рамки) */ .js-motion [data-clip]{clip-path:inset(0 0 100% 0);transform:scale(1.04);will-change:clip-path,transform} /* параллакс-контейнер: чуть выше рамки, чтобы было что сдвигать */ [data-parallax]{will-change:transform} /* ---- CUSTOM CURSOR ---- */ .cursor{ position:fixed;top:0;left:0;z-index:9999;pointer-events:none; width:10px;height:10px;border-radius:50%; background:var(--ink); transform:translate(-50%,-50%); mix-blend-mode:difference; /* читается на любом фоне */ transition:width .3s var(--ease),height .3s var(--ease),background-color .3s var(--ease); } .cursor--ring{ width:42px;height:42px;background:transparent; border:var(--bw) solid #fff;mix-blend-mode:difference; } .cursor.is-hover{width:56px;height:56px} .cursor.is-down{width:30px;height:30px} html.has-cursor,html.has-cursor *{cursor:none!important} /* magnetic-элементы держим на transform */ [data-magnetic]{will-change:transform} /* ---- ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ-РЯД ---- */ .hscroll{overflow:hidden} .hscroll__track{display:flex;gap:var(--grid-gap);will-change:transform} .hscroll__item{flex:0 0 clamp(220px,30vw,420px)} /* ---- MARQUEE (бегущая строка, CSS) ---- */ .marquee{overflow:hidden;white-space:nowrap} .marquee__inner{display:inline-flex;gap:1.2em;animation:marquee 28s linear infinite;will-change:transform} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---- ФОЛБЭК «РЕНДЕР → ФОТО» без JS: обычный блок со швом 50/50 вместо мёртвого пиннинга ---- */ html:not(.js-motion) .reveal-sec{height:auto!important} html:not(.js-motion) .rv__render{clip-path:inset(0 50% 0 0)} html:not(.js-motion) .rv__divider{left:50%} /* ---- ФОЛБЭК ГАЛЕРЕЙ: нативный горизонтальный скролл (нет Motion / reduced-motion) ---- */ html.hg-static .hgallery{height:auto!important} html.hg-static .hgallery__sticky{position:static;height:auto;overflow:visible} html.hg-static .hgallery__track{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:12px;transform:none!important} html.hg-static .hgallery__track>*{scroll-snap-align:start} /* ---- УТИЛИТЫ ---- */ [data-stagger]>*{will-change:transform,opacity} /* ---- СОГЛАСИЕ НА ОБРАБОТКУ ПД (152-ФЗ, чекбокс под формами) ---- */ .consent{display:flex;gap:10px;align-items:flex-start;flex:1 1 100%;margin-top:4px; font-size:13px;line-height:1.45;color:#6E6862;cursor:pointer;text-align:left} .consent input{margin:2px 0 0;width:15px;height:15px;flex:none;accent-color:#111;cursor:pointer} .consent a{color:inherit;text-decoration:underline;text-underline-offset:2px} .consent a:hover{color:#111} .consent--err{color:#9E3B33} .consent--err a{color:inherit} /* ---- REDUCED MOTION: убрать движение, оставить мягкие фейды (opacity ведёт motion.js) ---- */ @media (prefers-reduced-motion:reduce){ .js-motion [data-reveal], .js-motion [data-reveal="scale"]{transform:none!important} .js-motion [data-split] .line__inner{transform:none!important} .js-motion [data-clip]{clip-path:none!important;transform:none!important} .js-motion [data-clip] img{transform:none!important} .cursor{display:none!important} html.has-cursor,html.has-cursor *{cursor:auto!important} /* marquee ЖК не глушим: медленная декоративная строка, статичной выглядит сломанной */ } /* ---- СТРЕЛКИ КАРУСЕЛИ ИСТОРИИ ---- */ .hg-nav{display:flex;gap:10px;align-self:flex-end;margin-left:clamp(16px,2vw,32px)} .hg-nav__btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:transparent;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:border-color .5s var(--ease)} .hg-nav__btn:hover{border-color:var(--ink)} @media (max-width:900px){.hg-nav{display:none}}