/* ========================================================================== ANIMATIONS Рух тут скромний навмисно: сторінкою користуються люди у стресовій ситуації, і анімація не має заважати читати. Глобальне вимкнення для prefers-reduced-motion лежить у base.css; тут — додатковий запобіжник для самих keyframes. ========================================================================== */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------------------------------------------------- ПОЯВА ПРИ ПРОКРУТЦІ Клас is-visible вішає JS через IntersectionObserver. Початковий стан задається тільки тоді, коли JS уже підтвердив свою присутність класом js-enabled на — без цього блоки лишилися б назавжди прозорими у разі помилки скрипта. --------------------------------------------------------------------------- */ .js-enabled [data-reveal] { opacity: 0; } .js-enabled [data-reveal].is-visible { animation: fade-in-up var(--duration-slow) var(--ease-out) forwards; } /* Крок квіза з'являється м'яко, щоб перехід не був різким стрибком */ .quiz__step:not([hidden]) { animation: fade-in var(--duration-base) var(--ease-out); } /* --------------------------------------------------------------------------- ЗМЕНШЕНИЙ РУХ --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js-enabled [data-reveal] { opacity: 1; animation: none; } .quiz__step:not([hidden]) { animation: none; } /* Спінер лишається — але як статичне кільце, без обертання */ .btn.is-loading::after { animation: none; border-top-color: currentColor; opacity: 0.6; } }