/* ============================================================
   Поява розділів (appear.js): варіант «Б» з пробника design/anim.

   Класи вішає скрипт, затримку ставить inline. Поки анімація не почалась,
   елемент невидимий (fill-mode both) — тому нічого не блимає до старту.
   Після кінця клас знімається, і елемент живе як звичайно.
   ============================================================ */
:root{
  --ap-dist:18px;
  --ap-dur:560ms;
  --ap-ease:cubic-bezier(.16,1,.3,1);
}

.ap{animation:apRise var(--ap-dur) var(--ap-ease) both}
@keyframes apRise{
  from{opacity:0;transform:translateY(var(--ap-dist)) scale(.975)}
  to{opacity:1;transform:none}
}

/* плашки результату в клітинках календаря — «вискакують» */
.ap-pop{animation:apPop 380ms var(--ap-ease) both}
@keyframes apPop{
  from{opacity:0;transform:scale(.6)}
  to{opacity:1;transform:none}
}

/* смужки win rate і розрізів виростають від нуля вліво-направо */
.ap-bar{transform-origin:left center;animation:apBar 720ms var(--ap-ease) both}
@keyframes apBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* .rail.in теж анімує ширину смужки переходом — під час нашої анімації він зайвий */
.ovw .rail .bar .ln i.ap-bar{transition:none}

/* Лінія еквіті й заливка під нею відкриваються зліва направо.
   Не штрихом (stroke-dasharray + pathLength): графік розтягнутий по ширині
   (preserveAspectRatio=none) і штрих має non-scaling-stroke, тож довжина
   штриха рахувалась у пікселях екрана — лінія виходила рваною й не
   домальовувалась до кінця. Маска clip-path по власному прямокутнику
   елемента від цього не залежить; мінус по краях — щоб не зрізати
   товщину лінії й крапку. */
.ap-draw{animation:apDraw 1300ms var(--ap-ease) both}
@keyframes apDraw{from{clip-path:inset(-8px 100% -8px -8px)}to{clip-path:inset(-8px -8px -8px -8px)}}

/* заливка під лінією, крапка й підпис — проявляються, коли лінія дійшла */
.ap-fade{animation:apFade 600ms ease both}
@keyframes apFade{from{opacity:0}to{opacity:1}}

/* Стара плавність .rise (одночасна для всіх блоків) більше не потрібна:
   чергу веде appear.js. Лишаємо елементи видимими, щоб не подвоювати рух. */
.page .rise{opacity:1;transform:none;transition:none}

/* Стара поява сторінки (.page.enter > * — pageIn на 0.3 с для всіх дітей
   разом) била нашу чергу: селектор сильніший за .ap, тож верхні блоки
   грали pageIn без затримки, а коли він закінчувався — смикались. Одна
   анімація на елемент. */
.page.enter > *{animation:none}
.page.enter > .ap{animation:apRise var(--ap-dur) var(--ap-ease) both}

/* Картка «Результати» в аналітиці має свою анімацію підміни (.m-swap у
   motion.css) — вона потрібна, коли міняєш розріз без зміни розділу. Але
   при відкритті розділу грали обидві, і в кінці картку смикало. Поки
   йде черга — лише наша. Коли черга скінчилась, appear.js знімає з вузла
   і .ap, і .m-swap: інакше після зняття .ap mSwap стартував би заново —
   картка блимала й підскакувала на 6px (видно при F5 на аналітиці). */
.ap.m-swap{animation:apRise var(--ap-dur) var(--ap-ease) both}

/* на телефоні шлях коротший — сітка там щільніша */
@media (max-width:900px){
  :root{--ap-dist:12px}
}

@media (prefers-reduced-motion:reduce){
  .ap,.ap-pop,.ap-draw,.ap-fade,.ap-bar{animation:none!important;opacity:1!important;
    transform:none!important;clip-path:none!important}
}