/* Хʼюстон — анімаційний шар. Правило номер один: без JS сторінка виглядає нормально. Ховаємо блоки лише тоді, коли має клас hx-on — його ставить крихітний інлайн-скрипт, і лише якщо система не просить менше руху. Тому у людини з вимкненим JS чи з prefers-reduced-motion усе видно одразу, а не залишається порожнім екраном. */ html.hx-on .hx-rv{ opacity:0; transform:translateY(16px); transition:opacity .58s cubic-bezier(.22,.61,.36,1), transform .58s cubic-bezier(.22,.61,.36,1); } html.hx-on .hx-rv.hx-in{opacity:1;transform:none} /* картки й кнопки: легкий підйом на курсорі, відгук на дотик */ .hx-lift{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} @media(hover:hover){ .hx-lift:hover{transform:translateY(-3px)} } @media(hover:none){ .hx-lift:active{transform:scale(.985)} } /* розкриття «Докладніше» і FAQ — мʼяка поява вмісту */ html.hx-on details[open]>*:not(summary){animation:hx-fade .3s ease both} @keyframes hx-fade{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} } /* цифри під час рахунку не мають смикати ширину рядка */ .hx-num{font-variant-numeric:tabular-nums} /* Системна вимога «менше руху» перекриває все. */ @media(prefers-reduced-motion:reduce){ html.hx-on .hx-rv{opacity:1 !important;transform:none !important;transition:none} html.hx-on details[open]>*:not(summary){animation:none} .hx-lift{transition:none} .hx-lift:hover{transform:none} }