/* ============================================================ МРЄ · рух Поява блоків при скролі без жодного рядка JavaScript — через scroll-driven animations (animation-timeline: view()). Чому саме так. Заради цього ефекту зазвичай тягнуть Framer Motion разом з React. У сучасному CSS те саме робиться нативно, тобто без 40 КБ бібліотеки і без гідратації. Підтримка неповна, тому все всередині @supports: там, де властивості немає, блоки просто одразу видимі. Це коректна деградація, а не поламана сторінка. Рух вимикається двома способами: системним prefers-reduced- motion і атрибутом data-motion="off" на . ============================================================ */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ :root:not([data-motion="off"]) .reveal{ animation:reveal-in linear both; animation-timeline:view(); /* Старт, коли блок зайшов на 12% висоти вікна; кінець — коли пройшов 42%. */ animation-range:entry 12% cover 42%; } /* Числа з'їжджаються по черзі. Затримка робиться зсувом діапазону, а не delay: у scroll-timeline delay не працює. */ :root:not([data-motion="off"]) .reveal-stagger>*{ animation:reveal-in linear both; animation-timeline:view(); animation-range:entry 8% cover 38%; } :root:not([data-motion="off"]) .reveal-stagger>*:nth-child(2){animation-range:entry 12% cover 42%} :root:not([data-motion="off"]) .reveal-stagger>*:nth-child(3){animation-range:entry 16% cover 46%} :root:not([data-motion="off"]) .reveal-stagger>*:nth-child(4){animation-range:entry 20% cover 50%} /* Тонка лінія під заголовком розділу, що прокреслюється. */ :root:not([data-motion="off"]) .rule-draw{ animation:rule-draw linear both; animation-timeline:view(); animation-range:entry 10% cover 35%; transform-origin:left center; } } } @keyframes reveal-in{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } @keyframes rule-draw{ from{transform:scaleX(0)} to{transform:scaleX(1)} } /* Смуга прогресу читання. Теж на скрол-таймлайні документа. */ @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .progress{ position:fixed;left:0;top:0;height:2px;width:100%;z-index:60; transform-origin:left center;transform:scaleX(0); background:var(--accent); animation:progress linear both; animation-timeline:scroll(root block); } } } @keyframes progress{to{transform:scaleX(1)}} /* Без підтримки смуга не показується взагалі: порожня лінія гірша за її відсутність. */ @supports not (animation-timeline:scroll()){ .progress{display:none} } /* Плавна поява самої сторінки після завантаження шрифтів. */ @media (prefers-reduced-motion:no-preference){ .fade-up{animation:reveal-in var(--dur-3) var(--ease-out) both} .fade-up--2{animation-delay:60ms} .fade-up--3{animation-delay:120ms} }