/* design-motion.css — реалізація services/portal/design-system/motion-spec.md.
   Окремо від design-system.css (еталонний styles.css лишається незайманим
   1:1 — readme.md §"Основа"). Прод-браузер НЕ має обмеження "годинник
   анімацій стоїть" (motion-spec §0) — цю мову руху пишемо ми на базі
   класів, які дизайнер вже заклав у референс-компонентах (ss-lift, ss-draw,
   ss-fade, ss-bar, ss-beam-seg, ss-toc-mark), але правил для яких не було.

   Закон №1 (foundations/laws.html): видимість НЕ залежить від руху. Кожен
   клас нижче лише ДОДАЄ ефект поверх уже видимого базового стану — жоден
   селектор тут не ставить opacity:0/visibility:hidden БЕЗ супутнього
   :not(.in) чи еквіваленту, і .ss-enter-init ставиться ВИКЛЮЧНО скриптом
   (design-motion.js), ніколи як base CSS-стан елемента. */

/* ---------- 1. Реактивні (--react) ---------- */
.ss-lift { transition: transform var(--react), box-shadow var(--react); }
.ss-lift:hover, .ss-lift:focus-within { transform: translateY(-2px); box-shadow: var(--glass-shadow-hover); }

/* ---------- 2. Вхідні (один раз, IntersectionObserver, design-motion.js) ----------
   .ss-enter-init — проміжний "перед появою" стан, ставиться ЛИШЕ JS-ом і
   ЛИШЕ елементам нижче першого екрана (hero завжди видимий, LCP). */
.ss-enter-init { opacity: .001; transform: translateY(14px); }
.ss-enter.in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--in), transform var(--in);
}

/* Лінія графіка (PriceChart.jsx) — stroke-dasharray/dashoffset draw-in.
   --len проставляється у JS (реальна довжина шляху, SVGGeometryElement). */
.ss-draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.ss-draw.in { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease); }

/* Заливка під лінією (PriceChart.jsx) — проявляється слідом за лінією.
   Ревью-фікс §4б: :not(.in) замість безумовного opacity:0 — той самий
   принцип, що .ss-enter-init: якщо .in ЧОМУСЬ не додався (JS-збій, race),
   :not(.in) — це все ще "клас .ss-fade без .in", не "будь-який .ss-fade" —
   семантично ідентично, але явно документує залежність від пари класів
   і симетрично з .ss-bar нижче (легше знайти обидва при аудиті). */
.ss-fade:not(.in) { opacity: 0; }
.ss-fade.in { opacity: 1; transition: opacity var(--in) .35s; }

/* Свічки (CandleChart.jsx) — виростають з нуля, stagger через --i (вже
   проставляється компонентом, cap 400ms per motion-spec). */
.ss-bar { transform-origin: bottom; }
.ss-bar:not(.in) { transform: scaleY(0); }
.ss-bar.in {
  transform: scaleY(1);
  transition: transform .4s var(--ease);
  transition-delay: min(calc(var(--i, 0) * 8ms), 400ms);
}

/* Промінь R:R (RRBeam.jsx) — flex-basis 50% → ціль, live=true-патерн. */
.ss-beam-seg { flex-basis: 50%; transition: flex-basis var(--in); }

/* Позначка активного пункту змісту (TocRail.jsx) — ковзає за читанням. */
.ss-toc { position: relative; }
.ss-toc-mark {
  /* top:0 анкорить mark у padding-box top навбара, щоб translateY(link.offsetTop)
     збігався з лінком. Без цього (top:auto) mark стояв на content-top (після
     padding), і glass-padding .ss-toc подвоювався → mark з'їжджав на пункт нижче. */
  position: absolute; inset-inline-start: 0; top: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(123, 232, 245, .9), rgba(63, 211, 232, .3));
  box-shadow: 0 0 14px 1px rgba(63, 211, 232, .35); pointer-events: none;
  transition: transform var(--react), height var(--react);
}

/* ---------- 3. prefers-reduced-motion: reduce вимикає ВСЕ (мотор.-spec §0.5) ----------
   Ревью-фікс §4б: усі ТРИ вхідні (draw/fade/bar) повертаються до видимого
   стану БЕЗ УМОВИ на .in — раніше .ss-fade не повертався (opacity:0 лишався
   назавжди без руху, бо reduce-блок його не чіпав), знайдено рев'ю. */
@media (prefers-reduced-motion: reduce) {
  .ss-lift { transition: none; }
  .ss-lift:hover, .ss-lift:focus-within { transform: none; box-shadow: var(--glass-shadow-quiet); }
  .ss-enter-init { opacity: 1; transform: none; }
  .ss-enter.in { transition: none; }
  .ss-draw, .ss-draw.in { stroke-dashoffset: 0; transition: none; }
  .ss-fade:not(.in), .ss-fade.in { opacity: 1; transition: none; }
  .ss-bar:not(.in), .ss-bar.in { transform: scaleY(1); transition: none; }
  .ss-beam-seg { transition: none; }
  .ss-toc-mark { transition: none; }
}