/* Ефекти при прокрутці (13.10, js/motion.js). Окремий файл — щоб легко вимкнути: прибрати <link> і <script>.
   Лише transform/opacity (ДЗ-07); «менше анімацій» у телефоні — усе одразу на місці. */

/* Напрямок появи: картки виїжджають зліва / справа, деякі — «виростають». */
.js .reveal.from-l:not(.in) { transform: translateX(-40px); }
.js .reveal.from-r:not(.in) { transform: translateX(40px); }
.js .reveal.pop:not(.in) { transform: scale(.94); }

/* Як я працюю: пунктир «прокладається» згори вниз, номери кроків «спалахують». */
.js .steps::before { transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(.3, .7, .2, 1); }
.js .steps.drawn::before { transform: none; }
.js .steps .num { transform: scale(.5); opacity: 0; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1) .25s, opacity .4s ease .25s; }
.js .steps li.in .num { transform: none; opacity: 1; }

/* Цифри коротко: великі числа рахуються від нуля, коли блок з'являється. */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.fact { padding: 22px 24px; }
.fact .big { display: flex; align-items: baseline; gap: 4px; font: 800 clamp(52px, 6vw, 72px)/1 var(--head); color: var(--title); text-shadow: var(--title-glow); }
.fact .big b { font-weight: 800; font-variant-numeric: tabular-nums; }
.fact .big span { font: italic 600 .5em var(--accent); color: #E9CDA6; }
.fact p { margin-top: 10px; font-size: 15px; }

/* Картки злегка нахиляються за мишею (лише ПК з мишею). */
@media (hover: hover) and (pointer: fine) {
  .js .card.in.tilt { transition: transform .15s ease-out;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
}

@media (max-width: 767px) {
  .facts { grid-template-columns: 1fr; gap: 12px; }
  .fact { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 18px 20px; }
  .fact .big { font-size: 48px; min-width: 2.6ch; }
  .fact p { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal.from-l, .js .reveal.from-r, .js .reveal.pop, .js .steps::before, .js .steps .num { transform: none; opacity: 1; transition: none; }
}