/* ═══ ЕФЕКТИ — флагманський шар поверх руху й глибини ═══════════════════════ Преміальні прийоми, зняті з еталонів (Linear/CIP/Brookfield, розвідка 10.08.2026): шаровий фон із зерном, градієнтні межі, 4-шарова тінь, spotlight-hover, scroll-reveal подвійним шляхом, завжди-темна секція. Порядок підключення (НЕ довільний): movy/<мова>.css → yadro.css → komponenty-*.css → rukh.css → prostir.css → efekty.css → свої стилі Чому саме тут: файл читає --ampl/--krok-stagger/криві з rukh.css, а його профіль-оверрайди `.zjava` мають ту саму вагу (0,2,1), що IO-гілка, і виграють лише ПОРЯДКОМ — переставиш вище, оверрайд програє (Г29). Жодного кольору-літерала: все з токенів мови або color-mix від них (Г18). ЖОДНОГО transform: збірка --t-* лишається за rukh.css/prostir.css (Г33); reveal тут їде ОКРЕМОЮ властивістю translate, і кінцевий кадр її НЕ декларує (Г32 неможливий за побудовою). ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. ШАРОВИЙ ФОН ───────────────────────────────────────────────────────── radial-підсвітка від акценту + зерно (noise) + сітка. Зерно ламає банди градієнта й дає «плівкову» тактильність — саме воно відрізняє преміум від плаского CSS-градієнта. Статичний: не слухає --ampl, бо не рухається. Контракт: клас займає ::before — не поєднувати з іншим власником ::before на тому самому елементі (.prozhektor, .pulsuye — на ДІТЕЙ, не сюди). */ :root{ /* моно-чорне зерно; сила — окремим токеном, бо в data-URI токен не вставиш */ --noise-uri: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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --noise-syla:.018; /* dark-тема зазвичай ставить ≈.028 */ --sitka-krok:64px; --sitka-liniya:color-mix(in oklch, var(--mezha-m, #e6e2da) 55%, transparent); --tlo-aktsent:color-mix(in oklch, var(--akcent, #0f7568) 6%, transparent); } .tlo-sharove{position:relative; background: radial-gradient(120% 80% at 50% 0%, var(--tlo-aktsent), transparent 60%), var(--tlo, #fff)} .tlo-sharove::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--noise-uri), linear-gradient(var(--sitka-liniya) 1px, transparent 1px), linear-gradient(90deg, var(--sitka-liniya) 1px, transparent 1px); background-size:auto, var(--sitka-krok) var(--sitka-krok), var(--sitka-krok) var(--sitka-krok); opacity:var(--noise-syla)} /* вміст — над декорацією */ .tlo-sharove > *{position:relative} @media print{.tlo-sharove::before{display:none}} /* ── 2. ГРАДІЄНТНА МЕЖА ───────────────────────────────────────────────────── Роздільник секцій, що «дихає» замість жорсткої лінії. Семантика:
. */ .mezha-hradient{border:0; block-size:1px; margin:0; background:linear-gradient(90deg, transparent, var(--mezha, #d8d4cb), transparent)} /* ── 3. ГЕРОЙСЬКА ТІНЬ ────────────────────────────────────────────────────── 4-шарова: кіль-межа + ближня + середня + далека-мʼяка. Сам склад — у МОВІ (токен --tin-hero, бо тінь — колірна річ); фолбек — найглибша з наявних. НЕ анімується: тінь перемикається, рухається transform (канон). */ .tin-hero{box-shadow:var(--tin-hero, var(--tin-3, 0 8px 30px rgba(0,0,0,.12)))} /* ── 4. ПРОЖЕКТОР (spotlight-hover) ───────────────────────────────────────── Радіальне світло за курсором. Володіє ЛИШЕ ::before/opacity — жодної спільної властивості з .pidiym (transform+box-shadow), тож `.prozhektor.pidiym` складаються без бійки (Г33 знято розведенням). Глушіння: множник clamp(0,var(--ampl),1) стоїть У ПРАВИЛІ — навіть якщо проєкт переозначив --prozhektor-syla літералом, вимикач діє (Г28); clamp≤1 — амплітуда профілю povnyi (2) не подвоює люмени: амплітуда про геометрію, не про світло. Без JS координат — статичний центральний відблиск (фолбек 50%/50% — деградація, не дірка). */ :root{--prozhektor-r:300px; --prozhektor-syla:.10} .prozhektor{position:relative} .prozhektor::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(circle var(--prozhektor-r) at var(--mx, 50%) var(--my, 50%), color-mix(in oklch, var(--akcent, #0f7568) 22%, transparent), transparent 70%); opacity:0; transition:opacity var(--d-blyzko, 140ms) var(--e-zmina, ease)} .prozhektor:hover::before, .prozhektor:focus-within::before{ opacity:calc(var(--prozhektor-syla) * clamp(0, var(--ampl, 1), 1))} /* ── 5. ЗʼЯВА (scroll-reveal) ─────────────────────────────────────────────── Подвійний шлях, обидва — ВСЕРЕДИНІ prefers-reduced-motion:no-preference: у reduce не існує ані анімації, ані прихованого стану (WCAG 2.3.3). Гілка view(): чергу задає сама геометрія прокрутки — stagger не потрібен. Reveal їде властивістю `translate` (композиторна, ПОЗА збіркою --t-*), кінцевий кадр декларує ЛИШЕ opacity — after-фазі нема чого тримати (Г32 неможливий за побудовою; гейт-7 з 10.08.2026 це ще й міряє: zamorozheni_skrol). IO-гілка (без view()): прихований стан існує ЛИШЕ під :root.je-rh — клас ставить ПЕРШИЙ рядок rukh.js; без JS контент видимий (не «труна»). RH.zjava додає .je-vydno через IntersectionObserver. */ @keyframes zjava-vhid{ from{opacity:0; translate:0 calc(12px * var(--ampl, 1))} to{opacity:1} } @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .zjava{animation:zjava-vhid linear backwards; animation-timeline:view(); animation-range:entry 0% entry 40%} } @supports not (animation-timeline: view()){ :root.je-rh .zjava{opacity:0; translate:0 calc(12px * var(--ampl, 1)); transition:opacity var(--d-panel, 360ms) var(--e-vhid, ease-out), translate var(--d-panel, 360ms) var(--e-vhid, ease-out); transition-delay:min(calc(var(--i, 0) * var(--krok-stagger, 28ms)), var(--stagger-styelya, 220ms))} :root.je-rh .zjava.je-vydno{opacity:1; translate:none} } } /* Профіль-оверрайд — ПІСЛЯ обох гілок: вага (0,2,1) дорівнює вазі IO-гілки, виграє ПОРЯДКОМ. Переставиш вище — min/tryvymir перестануть глушити (Г29). tryvymir: «час 0, простір 1.5» — амплітуда 0 не означає «миттєво», тому зняти треба саму анімацію, а не сподіватись на токени. */ :root[data-ruh=min] .zjava, :root[data-ruh=tryvymir] .zjava{ animation:none; transition:none; opacity:1; translate:none} /* ── 6. ЗАВЖДИ-ТЕМНА СЕКЦІЯ ───────────────────────────────────────────────── Хід Brookfield: великі числа на темному — цифра стає графікою. Секція темна В ОБОХ темах (у глобальній dark ритм тримається сусідами на --tlo-2). ЧОМУ ТУТ ПЕРЕДЕКЛАРОВАНІ ПОХІДНІ (--ch-*, --akcent-tlo, --pidsvitka…): кастом-властивість ОБЧИСЛЮЄТЬСЯ там, де оголошена: `--ch-ink:var(--tilo)` з :root уже «запеклась» у світле значення і успадковується готовою — переозначення --tilo всередині секції її НЕ змінить. Передекларація тим самим текстом У СКОУПІ змушує переобчислення від локальних токенів — саме тому чарти, легенди, бейджі й факт-мітки перемикаються разом зі секцією. Значення base-токенів = dark-блок мови b-hostiova (зріз 10.08.2026); мова з іншим смаком темного може перекрити клас у своєму файлі. */ .sektsiya-temna{ --tlo:oklch(.215 0 0); --tlo-2:oklch(.190 0 0); --poverhnya:oklch(.285 0 0); --poverhnya-2:oklch(.330 0 0); --sklo:oklch(.285 .010 80 / .82); --tilo:oklch(.970 0 0); --prygl:oklch(.840 0 0); --mezha:oklch(.380 0 0); --mezha-m:oklch(.330 0 0); --mezha-svitla:oklch(1 0 0 / .08); --akcent:oklch(.84 .11 182); --akcent-tekst:oklch(.84 .11 182); --akcent-2:oklch(.84 .12 72); --uvaha:oklch(.84 .12 72); --dobre:oklch(.85 .13 150); --krytych:oklch(.87 .14 25); --na-akcenti:oklch(.20 .02 182); --tin-1:0 0 0 1px oklch(1 0 0 / .06), 0 1px 2px oklch(0 0 0 / .35); --tin-2:0 0 0 1px oklch(1 0 0 / .07), 0 2px 6px oklch(0 0 0 / .33), 0 8px 24px -8px oklch(0 0 0 / .50); --tin-3:0 0 0 1px oklch(1 0 0 / .08), 0 4px 12px oklch(0 0 0 / .38), 0 20px 48px -12px oklch(0 0 0 / .58); --tin-hero:0 0 0 1px oklch(1 0 0 / .09), 0 2px 6px oklch(0 0 0 / .35), 0 12px 28px -8px oklch(0 0 0 / .45), 0 32px 80px -28px oklch(0 0 0 / .60); /* похідні — передекларовані, щоб переобчислились від локальних токенів */ --akcent-tlo:color-mix(in oklch, var(--akcent) 14%, transparent); --pidsvitka:0 0 0 1px color-mix(in oklch, var(--akcent) 35%, transparent); --sitka-liniya:color-mix(in oklch, var(--mezha-m) 55%, transparent); --tlo-aktsent:color-mix(in oklch, var(--akcent) 6%, transparent); --noise-syla:.028; --ch-ink:var(--tilo); --ch-muted:var(--prygl); --ch-grid:var(--mezha-m); --ch-axis:var(--mezha); --ch-bar:var(--prygl); --ch-accent:var(--akcent); --ch-ok:var(--dobre); --ch-ok-m:color-mix(in oklab, var(--dobre) 55%, var(--tlo)); --ch-neg:var(--krytych); --ch-neg-m:color-mix(in oklab, var(--krytych) 55%, var(--tlo)); --ch-bench:var(--uvaha); --ch-paper:var(--na-akcenti); --ch-area1:color-mix(in oklab, var(--akcent) 12%, var(--tlo)); --ch-area2:color-mix(in oklab, var(--akcent) 26%, var(--tlo)); --ch-area3:color-mix(in oklab, var(--akcent) 45%, var(--tlo)); background:var(--tlo); color:var(--tilo); color-scheme:dark; } /* ── 7. MESH-ПОЛОТНО (v6.1 «люкс») ────────────────────────────────────────── Дві мʼякі плями акценту, що ПОВІЛЬНО пливуть у відповідь на прокрутку — НЕ вічний цикл (канон prostir-rukh забороняє декоративні цикли): без дії людини полотно нерухоме. Позиції — типізовані @property, тож браузер інтерполює координати градієнта плавно (без сходинок). Що пояснює: «сторінка жива і йде разом з тобою». Фолбек без scroll-driven (Firefox): статичні плями, нуль руху. */ @property --mesh-a{syntax:"";inherits:false;initial-value:18%} @property --mesh-b{syntax:"";inherits:false;initial-value:78%} .tlo-mesh{position:relative} .tlo-mesh::after{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(52% 42% at var(--mesh-a) 12%, color-mix(in oklab, var(--akcent, #0f7568) 9%, transparent), transparent 70%), radial-gradient(46% 38% at var(--mesh-b) 88%, color-mix(in oklab, var(--akcent-2, var(--akcent, #0f7568)) 7%, transparent), transparent 70%)} @supports (animation-timeline: scroll()) { .tlo-mesh::after{ animation:efekt-mesh linear both; animation-timeline:scroll(); } @keyframes efekt-mesh{ from{--mesh-a:18%;--mesh-b:78%} to{--mesh-a:64%;--mesh-b:30%} } } :root[data-ruh=min] .tlo-mesh::after, :root[data-ruh=tryvymir] .tlo-mesh::after{animation:none} @media (prefers-reduced-motion:reduce){.tlo-mesh::after{animation:none}} @media print{.tlo-mesh::after{display:none}} /* ── 8. ПРОГРЕС ЧИТАННЯ (v6.1) ────────────────────────────────────────────── 1px-лінія вгорі: скільки довгого документа вже прочитано. Функція, не декорація — DFI-сторінки довгі. Рухається ЛИШЕ разом із прокруткою (scroll-driven), сама не грає. Без підтримки — просто відсутня. */ .prohres-liniya{position:fixed;inset:0 0 auto 0;height:2px;z-index:60; background:var(--akcent, #0f7568);pointer-events:none;display:none; /* НЕ transform: скрол-прив'язана анімація з fill на transform читається гейтом-7 як Г32-міна; clip-path дає той самий малюнок без transform */ clip-path:inset(0 100% 0 0)} @supports (animation-timeline: scroll()) { .prohres-liniya{display:block; animation:efekt-prohres linear both; animation-timeline:scroll()} @keyframes efekt-prohres{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}} } :root[data-ruh=min] .prohres-liniya{display:none} @media (prefers-reduced-motion:reduce){.prohres-liniya{display:none}} @media print{.prohres-liniya{display:none}} /* ── 9. ВІДБЛИСК (glare, v6.1) ────────────────────────────────────────────── Партнер `.nahyl`: разом із нахилом карткою ковзає світловий відблиск — картка стає фізичним обʼєктом зі склом. Координати --mx/--my пише RH.nahyl (px відносно картки). Займає ::after — не поєднувати з іншим власником ::after на тому ж елементі (.tlo-mesh — на ІНШИЙ елемент). Г28-стійкість: сила через clamp(0, --ampl, 1) У ПРАВИЛІ — вимикач амплітуди глушить відблиск навіть без класових оверрайдів. */ .vidblysk{position:relative} .vidblysk::after{content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit;opacity:0; background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--na-akcenti, #fff) 14%, transparent), transparent 65%); transition:opacity var(--t-fast, 180ms) var(--ease, ease)} .vidblysk:hover::after{opacity:clamp(0, var(--ampl, 1), 1)} @media (hover:none){.vidblysk::after{display:none}} :root[data-ruh=min] .vidblysk::after, :root[data-ruh=tryvymir] .vidblysk::after{display:none} @media (prefers-reduced-motion:reduce){.vidblysk::after{display:none}} /* ── 10. ПЕРЕХОДИ МІЖ СТОРІНКАМИ (MPA view transitions, v6.1) ─────────────── Портал з кількох сторінок поводиться як один простір: same-origin навігація зшивається браузером (Chromium 126+; інші — звичайний перехід, деградація нульова). Тривалості/криві переходу — у rukh.css (::view-transition-old/new(root)); глушіння min/tryvymir там само. Іменовані елементи (шапка) оголошує проєктний шар через view-transition-name — тут лише вмикач. */ @view-transition{navigation:auto} @media (prefers-reduced-motion:reduce){ ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*){animation:none!important} } /* ── 11. ЛЮКС-ПОВЕРХНІ (v7, за бенчмарком еталонів benchmark-v7.md) ───────── Багатошарова поверхня головної дії: мікро-градієнт (світліший верх) + внутрішній хайлайт 1px + кіль + зовнішня тінь. Шари з виміру Stripe/Linear. Живе ПІСЛЯ komponenty-base — перекриває базову пласку заливку порядком. */ .k-btn.holovna{ background-color:var(--akcent, #0f7568); background-image:linear-gradient(180deg, color-mix(in oklab, var(--akcent, #0f7568) 88%, white), var(--akcent, #0f7568) 55%, color-mix(in oklab, var(--akcent, #0f7568) 94%, black)); box-shadow: inset 0 1px 0 color-mix(in oklab, white 22%, transparent), 0 0 0 1px color-mix(in oklab, var(--akcent, #0f7568) 82%, black), var(--tin-1, 0 1px 3px rgba(0,0,0,.1)); } .k-btn.holovna:hover{ background-color:color-mix(in oklab, var(--akcent, #0f7568) 88%, white); background-image:linear-gradient(180deg, color-mix(in oklab, var(--akcent, #0f7568) 78%, white), color-mix(in oklab, var(--akcent, #0f7568) 96%, white) 55%, var(--akcent, #0f7568)); box-shadow: inset 0 1px 0 color-mix(in oklab, white 28%, transparent), 0 0 0 1px color-mix(in oklab, var(--akcent, #0f7568) 82%, black), var(--tin-2, 0 3px 8px rgba(0,0,0,.14)); } .k-btn.holovna:active{ background-color:var(--akcent, #0f7568); background-image:linear-gradient(0deg, color-mix(in oklab, var(--akcent, #0f7568) 88%, white), color-mix(in oklab, var(--akcent, #0f7568) 92%, black)); box-shadow: inset 0 2px 4px color-mix(in oklab, black 25%, transparent), 0 0 0 1px color-mix(in oklab, var(--akcent, #0f7568) 82%, black); } /* стрілка напряму дії (Stripe/CIP/Linear: рух У кнопці) — опт-ін клас */ .k-btn-strilka::after{content:"→";display:inline-block;margin-inline-start:.45em; transition:translate var(--t-fast, 180ms) var(--ease, ease)} .k-btn-strilka:hover::after{translate:3px 0} :root[data-ruh=min] .k-btn-strilka::after{transition:none;translate:none} @media (prefers-reduced-motion:reduce){.k-btn-strilka::after{transition:none;translate:none}} /* Картки: ледь помітний вертикальний градієнт поверхні + inset-хайлайт верхнього ребра (візитівка Stripe/Linear-глибини; 1.5% люмінансу) */ .kartka{ background-color:var(--poverhnya, #fff); background-image:linear-gradient(180deg, color-mix(in oklab, var(--poverhnya, #fff) 98.5%, white), var(--poverhnya, #fff) 42%); box-shadow:inset 0 1px 0 var(--mezha-svitla, rgba(255,255,255,.06)), var(--tin-1, 0 1px 3px rgba(0,0,0,.08)); } /* ── 12. ФОТО-ПОЛОТНО HERO (v7) ───────────────────────────────────────────── Канон грейду з benchmark-v7.md (CIP-схема, 4 шари, всі токен-керовані): 1 фото · 2 верхній градієнт під навігацію · 3 тонування у бренд · 4 точка світла за текстом. Текст завжди на --tilo-інверсії (світлий), тому секція оголошує локальні токени як .sektsiya-temna робить. Фото ставить проєктний шар через --hero-foto: url(...). */ .hero-foto{position:relative;isolation:isolate; /* РЕАЛЬНИЙ фоновий колір на елементі: (а) фолбек, коли фото не завантажилось — світлий текст лишається читабельним; (б) чесний computed-фон для контраст-гейта, який не бачить псевдоелементи */ background:oklch(.215 0 0)} .hero-foto::before{content:"";position:absolute;inset:0;z-index:0; background-image:var(--hero-foto);background-size:cover; background-position:var(--hero-fokus, 50% 55%)} .hero-foto::after{content:"";position:absolute;inset:0;z-index:0; background: linear-gradient(180deg, oklch(.14 0 0 / .78), oklch(.14 0 0 / .30) 26%, transparent 55%), radial-gradient(58% 46% at 30% 58%, color-mix(in oklab, var(--akcent, #0f7568) 16%, transparent), transparent 72%), linear-gradient(180deg, transparent 62%, color-mix(in oklab, oklch(.14 0 0) 55%, transparent) 88%, var(--tlo, #111) 100%), oklch(.14 0 0 / .38)} .hero-foto > *{position:relative;z-index:1} @media print{.hero-foto::before,.hero-foto::after{display:none}} /* .hero-foto — самодостатня темна зона: повна передекларація токенів (той самий прийом, що .sektsiya-temna; background НЕ ставимо — фото живе в ::before). Контракт псевдоелементів: hero-foto займає ОБИДВА ::before/::after — не поєднувати з .tlo-sharove/.tlo-mesh на тому ж вузлі. */ .hero-foto{ --tlo:oklch(.215 0 0); --tlo-2:oklch(.190 0 0); --poverhnya:oklch(.285 0 0); --poverhnya-2:oklch(.330 0 0); --sklo:oklch(.285 .010 80 / .82); --tilo:oklch(.985 0 0); --prygl:oklch(.87 0 0); --mezha:oklch(.45 0 0 / .6); --mezha-m:oklch(.40 0 0 / .5); --mezha-svitla:oklch(1 0 0 / .10); --akcent:oklch(.84 .11 182); --akcent-tekst:oklch(.84 .11 182); --akcent-2:oklch(.84 .12 72); --uvaha:oklch(.84 .12 72); --dobre:oklch(.85 .13 150); --krytych:oklch(.87 .14 25); --na-akcenti:oklch(.20 .02 182); --akcent-tlo:color-mix(in oklch, var(--akcent) 14%, transparent); --pidsvitka:0 0 0 1px color-mix(in oklch, var(--akcent) 35%, transparent); --tin-1:0 0 0 1px oklch(1 0 0 / .08), 0 1px 2px oklch(0 0 0 / .40); --tin-2:0 0 0 1px oklch(1 0 0 / .09), 0 2px 6px oklch(0 0 0 / .38), 0 8px 24px -8px oklch(0 0 0 / .55); --tin-3:0 0 0 1px oklch(1 0 0 / .10), 0 4px 12px oklch(0 0 0 / .42), 0 20px 48px -12px oklch(0 0 0 / .62); --tin-hero:0 0 0 1px oklch(1 0 0 / .11), 0 2px 6px oklch(0 0 0 / .40), 0 12px 28px -8px oklch(0 0 0 / .50), 0 32px 80px -28px oklch(0 0 0 / .65); color:var(--tilo); color-scheme:dark; } /* мітка чесності на фото (плашка-панель, прийом European Energy) */ .foto-mitka{position:absolute;right:12px;bottom:10px;z-index:1;margin:0; font-size:10.5px;letter-spacing:.04em;color:oklch(1 0 0 / .82); background:oklch(.14 0 0 / .55);padding:4px 8px; border-radius:var(--r-full,999px);backdrop-filter:blur(4px)}