/* ============================================================================ premium.css — переиспользуемые «дорогие» микровзаимодействия (Lusion-grade) Подключай вместе с premium.js. Работает на ванильном CSS, без сборки. Всё уважает prefers-reduced-motion и отключается на тач-устройствах. ============================================================================ */ /* --- переменные (переопредели под палитру клиента) --- */ :root { --pr-cursor: #111; /* цвет кастомного курсора */ --pr-cursor-mix: 0.85; /* непрозрачность кольца */ --pr-ease: cubic-bezier(0.16, 1, 0.3, 1); /* «дорогой» out-expo */ --pr-reveal-dur: 0.9s; --pr-reveal-y: 28px; } /* ============================================================================ 1. КАСТОМНЫЙ КУРСОР (premium.js создаёт .pr-cursor / .pr-ring сам) Скрываем системный курсор только когда библиотека активна (класс на ). ============================================================================ */ html.pr-cursor-on, html.pr-cursor-on a, html.pr-cursor-on button, html.pr-cursor-on [data-cursor], html.pr-cursor-on [data-magnetic] { cursor: none; } .pr-cursor, .pr-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; transform: translate3d(-50%, -50%, 0); border-radius: 999px; will-change: transform, width, height; } .pr-cursor { /* точка-сердцевина (мгновенная) */ width: 6px; height: 6px; background: var(--pr-cursor); } .pr-ring { /* кольцо (догоняет с инерцией) */ width: 34px; height: 34px; border: 1.5px solid var(--pr-cursor); opacity: var(--pr-cursor-mix); transition: width .35s var(--pr-ease), height .35s var(--pr-ease), opacity .35s var(--pr-ease), background-color .35s var(--pr-ease); } /* активное состояние — над ссылкой/кнопкой кольцо растёт */ .pr-ring.is-active { width: 64px; height: 64px; opacity: 1; } /* состояние с лейблом — над [data-cursor="Смотреть"] */ .pr-ring.is-label { width: 88px; height: 88px; background: var(--pr-cursor); border-color: var(--pr-cursor); } .pr-ring__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #fff; opacity: 0; transition: opacity .25s var(--pr-ease); text-align: center; line-height: 1.1; padding: 0 6px; } .pr-ring.is-label .pr-ring__label { opacity: 1; } /* ============================================================================ 2. МАГНИТНЫЕ ЭЛЕМЕНТЫ ([data-magnetic]) — JS двигает transform inline. Тут только плавный возврат и под-слой для «магнитной» дочки [data-magnetic-inner]. ============================================================================ */ [data-magnetic] { transition: transform .4s var(--pr-ease); display: inline-flex; } [data-magnetic].is-pulling { transition: none; } [data-magnetic-inner] { transition: transform .4s var(--pr-ease); } /* ============================================================================ 3. REVEAL НА СКРОЛЛЕ ([data-reveal]) ============================================================================ */ [data-reveal] { opacity: 0; transform: translate3d(0, var(--pr-reveal-y), 0); transition: opacity var(--pr-reveal-dur) var(--pr-ease), transform var(--pr-reveal-dur) var(--pr-ease); transition-delay: var(--pr-delay, 0s); } [data-reveal].is-in { opacity: 1; transform: none; } /* mask-wipe вариант: контент выезжает из-под маски (кинематографично) */ [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path var(--pr-reveal-dur) var(--pr-ease); transition-delay: var(--pr-delay, 0s); } [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); } /* line-by-line: premium.js оборачивает строки в .pr-line > span */ .pr-line { overflow: hidden; } .pr-line > span { display: inline-block; transform: translateY(110%); transition: transform var(--pr-reveal-dur) var(--pr-ease); transition-delay: var(--pr-line-delay, 0s); } [data-reveal="lines"].is-in .pr-line > span { transform: translateY(0); } /* ============================================================================ 4. ЗЕРНО / GRAIN-ОВЕРЛЕЙ (premium.js вставляет .pr-grain в ) Тонкая шумовая текстура поверх всего — убивает «пластиковость». ============================================================================ */ .pr-grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9998; opacity: .045; /* держи 0.03–0.06, выше = грязно */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: pr-grain-shift 8s steps(6) infinite; } @keyframes pr-grain-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 4%); } 40% { transform: translate(6%, -6%); } 60% { transform: translate(-4%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); } } /* ============================================================================ 5. HOVER-КАРТОЧКА С МЕДИА (.pr-media) — чисто CSS, без JS. Картинка мягко зумится внутри маски, подпись приподнимается. ============================================================================ */ .pr-media { position: relative; overflow: hidden; border-radius: 14px; display: block; isolation: isolate; } .pr-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--pr-ease), filter 1s var(--pr-ease); will-change: transform; } .pr-media:hover img { transform: scale(1.06); filter: saturate(1.05); } .pr-media__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.4rem; color: #fff; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); transform: translateY(8px); opacity: .85; transition: transform .5s var(--pr-ease), opacity .5s var(--pr-ease); } .pr-media:hover .pr-media__cap { transform: translateY(0); opacity: 1; } /* ============================================================================ ДОСТУПНОСТЬ: всё гасим при reduced-motion и на тач (нет hover-курсора) ============================================================================ */ @media (prefers-reduced-motion: reduce) { .pr-cursor, .pr-ring, .pr-grain { display: none !important; } html.pr-cursor-on, html.pr-cursor-on * { cursor: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .pr-line > span { transform: none !important; } .pr-media img { transition: none; } [data-magnetic], [data-magnetic-inner] { transform: none !important; } } @media (hover: none), (pointer: coarse) { .pr-cursor, .pr-ring { display: none !important; } html.pr-cursor-on, html.pr-cursor-on * { cursor: auto !important; } }