/* ═══════════════════════════════════════════════════════════════
   Рух.
   Правило одне: анімуємо лише transform і opacity, бо їх рахує
   відеокарта без перерахунку розкладки. Нічого, що змінює висоту
   чи ширину елемента, інакше поїде вся сторінка й зросте CLS.

   Усе, що ховає контент, лежить у prefers-reduced-motion:no-preference,
   а класи навішує JS. Тому без скриптів і за вимкненої анімації
   сторінка просто статична, а не порожня.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:no-preference){

  /* ── поява блоків при скролі ── */
  .rv{
    opacity:0;transform:translate3d(0,18px,0);
    transition:opacity .55s cubic-bezier(.22,.7,.3,1) var(--d,0ms),
               transform .55s cubic-bezier(.22,.7,.3,1) var(--d,0ms);
    will-change:opacity,transform;
  }
  .rv.is-in{opacity:1;transform:none;will-change:auto}

  /* ── шапка ── */
  .hbar img{transition:transform .25s ease;transform-origin:left center}
  header.is-stuck{box-shadow:0 8px 28px -22px #1f1c1a80}
  header.is-stuck .hbar img{transform:scale(.84)}

  /* ── калькулятор: варіанти виїжджають по черзі ── */
  .qo.q-in{animation:q-in .34s cubic-bezier(.22,.7,.3,1) both}
  @keyframes q-in{
    from{opacity:0;transform:translate3d(0,10px,0)}
    to{opacity:1;transform:none}
  }

  /* ── відповідь у питаннях ── */
  .faq details[open] .ans{animation:faq-in .28s ease-out both}
  @keyframes faq-in{
    from{opacity:0;transform:translate3d(0,-6px,0)}
    to{opacity:1;transform:none}
  }
}

/* ── проявлення фото ──────────────────────────────────────────
   Клас навішує JS і він же знімає, тому без скриптів усе видно. */
.im{opacity:0;transform:scale(1.015);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.7,.3,1)}
.im.is-loaded{opacity:1;transform:none}

/* ── смуга прогресу читання ───────────────────────────────── */
.pp-prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  pointer-events:none;
}
@media (max-width:820px){.pp-prog{display:none}}

/* ── індикатор у підменю розділу ──────────────────────────────
   Поки JS не втрутився, працює звичайне підкреслення активного
   пункту з main.css. Щойно зʼявляється рухомий індикатор,
   статичне підкреслення прибираємо. */
.subwrap{position:relative}
.subwrap.has-ind a.is-on{border-bottom-color:transparent}
.sub-ind{
  position:absolute;bottom:0;left:0;height:3px;background:var(--accent);
  border-radius:2px;transform-origin:left center;pointer-events:none;
  transition:transform .32s cubic-bezier(.22,.7,.3,1);
}

/* ── ховери: без JS і без prefers, бо нічого не ховають ───────── */

/* фото в картці матеріалу трохи наближається */
.mcard .ph{overflow:hidden}
.mcard .ph img{transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.mcard:hover .ph img{transform:scale(1.06)}

/* чіпи й швидкі посилання підводяться */
.chip{transition:transform .18s ease,background .18s ease,color .18s ease}
.chip:hover{transform:translateY(-2px)}

/* кнопки натискаються */
.btn{will-change:auto}
.btn:active{transform:scale(.97)}
.chip:active{transform:translateY(0) scale(.98)}

/* смуга прогресу квізу рухається м'якше, ніж типові .3s лінійно */
.qbar i{transition:width .45s cubic-bezier(.22,.7,.3,1)}

/* шапка липне тільки на великих екранах: на телефоні знизу вже є
   панель із кнопками, і другий закріплений блок з'їдав би пів екрана */
@media (min-width:821px){
  header{position:sticky;top:0;z-index:60;background:var(--bg);
         transition:box-shadow .25s ease}
}

@media (prefers-reduced-motion:reduce){
  .mcard:hover .ph img,.chip:hover,.btn:active{transform:none}
}