/* Живая схема на странице кейса. Рисуется кодом, без видео и без библиотек.
   Анимация идёт только когда сцена на экране: класс on вешает case-anim.js.
   При включённом «уменьшить движение» показывается финальный кадр. */

.case-anim{margin-top:26px}
.ca-stage{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:26px 18px;overflow:hidden}
.ca-svg{display:block;width:100%;height:auto}

/* Две раскладки одной схемы: широкая для монитора, столбиком для телефона.
   На узком экране горизонтальная сжимается в нечитаемую полоску. */
.ca-v{display:none}
@media (max-width:760px){
  .ca-h{display:none}
  .ca-v{display:block;max-width:360px;margin:0 auto}
}

/* подписи шагов под сценой */
.ca-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(5,1fr);counter-reset:ca}
.ca-steps li{counter-increment:ca;position:relative;padding-top:30px;
  font-size:var(--t-sm);color:var(--ink-soft);line-height:1.45}
.ca-steps li::before{content:counter(ca);position:absolute;top:0;left:0;
  width:22px;height:22px;border-radius:50%;background:var(--plate-bg,#fff);
  border:1px solid var(--line);color:var(--gold-ink);font-size:11px;font-weight:600;
  display:grid;place-items:center}
.ca-steps li b{display:block;color:var(--ink);font-size:var(--t-md);margin-bottom:3px}
.ca-steps li.is-on::before{background:var(--gold);border-color:var(--gold);color:#141820}
.ca-steps li.is-on b{color:var(--gold-ink)}

/* ── сама анимация ────────────────────────────────────────────────────── */
/* Всё держится на одном цикле в 9 секунд: узлы зажигаются по очереди,
   карточка вопроса едет по дорожке, в документе загорается пункт. */
.case-anim .ca-node{opacity:.45;transition:opacity .5s}
.case-anim .ca-flow{stroke-dasharray:920;stroke-dashoffset:920}
.case-anim .ca-dot{opacity:0}

.case-anim.on .ca-flow{animation:caFlow 9s linear infinite}
.case-anim.on .ca-dot{animation:caDot 9s linear infinite}
/* вертикальная раскладка: та же логика, но дорожка и бегунок идут сверху вниз */
.case-anim .ca-flow-v{stroke-dasharray:530;stroke-dashoffset:530}
.case-anim.on .ca-flow-v{animation:caFlowV 9s linear infinite}
.case-anim.on .ca-dot-v{animation:caDotV 9s linear infinite}
.case-anim.on .ca-n1{animation:caOn 9s linear infinite}
.case-anim.on .ca-n2{animation:caOn 9s linear infinite .9s}
.case-anim.on .ca-n3{animation:caOn 9s linear infinite 2.2s}
.case-anim.on .ca-n4{animation:caOn 9s linear infinite 4.2s}
.case-anim.on .ca-n5{animation:caOn 9s linear infinite 5.4s}
.case-anim.on .ca-pulse{animation:caPulse 9s ease-out infinite}
.case-anim.on .ca-scan-a{animation:caScan 9s ease-in-out infinite 1s}
.case-anim.on .ca-scan-b{animation:caScan 9s ease-in-out infinite 1.25s}
.case-anim.on .ca-hit-bg{animation:caHitBg 9s ease-out infinite 2.4s}
.case-anim.on .ca-hit,
.case-anim.on .ca-hit2{animation:caHit 9s ease-out infinite 2.4s}
.case-anim.on .ca-ribbon{animation:caRibbon 9s ease-out infinite 2.6s}
.case-anim.on .ca-ribbon-v{animation:caRibbonV 9s ease-out infinite 2.6s}
.case-anim.on .ca-check{animation:caCheck 9s ease-out infinite 4.3s}
.case-anim.on .ca-cite{animation:caCite 9s ease-out infinite 5.8s}

@keyframes caFlow{0%{stroke-dashoffset:920}55%{stroke-dashoffset:0}92%{stroke-dashoffset:0}100%{stroke-dashoffset:920}}
@keyframes caDot{
  0%{opacity:0;transform:translateX(120px)}
  4%{opacity:1}
  8%{transform:translateX(120px)}
  22%{transform:translateX(320px)}
  38%{transform:translateX(560px)}
  52%{transform:translateX(790px)}
  64%{transform:translateX(990px);opacity:1}
  70%{opacity:0;transform:translateX(990px)}
  100%{opacity:0;transform:translateX(990px)}
}
@keyframes caFlowV{0%{stroke-dashoffset:530}55%{stroke-dashoffset:0}92%{stroke-dashoffset:0}100%{stroke-dashoffset:530}}
@keyframes caDotV{
  0%{opacity:0;transform:translateY(70px)}
  4%{opacity:1}
  8%{transform:translateY(70px)}
  22%{transform:translateY(176px)}
  38%{transform:translateY(340px)}
  52%{transform:translateY(470px)}
  64%{transform:translateY(586px);opacity:1}
  70%{opacity:0;transform:translateY(586px)}
  100%{opacity:0;transform:translateY(586px)}
}
@keyframes caOn{0%,4%{opacity:.45}10%,72%{opacity:1}86%,100%{opacity:.45}}
@keyframes caPulse{0%,2%{opacity:0;r:34}10%{opacity:.5}22%{opacity:0;r:64}100%{opacity:0;r:34}}
@keyframes caScan{0%,8%{width:0}26%{width:170px}60%{width:170px}72%,100%{width:0}}
@keyframes caHitBg{0%,2%{opacity:0}14%{opacity:.14}62%{opacity:.14}74%,100%{opacity:0}}
@keyframes caHit{0%,2%{fill:#E2E5EA}14%,62%{fill:#8A6718}74%,100%{fill:#E2E5EA}}
@keyframes caRibbon{0%,2%{height:0}16%{height:64px}62%{height:64px}74%,100%{height:0}}
@keyframes caRibbonV{0%,2%{height:0}16%{height:52px}62%{height:52px}74%,100%{height:0}}
@keyframes caCheck{0%,2%{stroke-dashoffset:52}16%,66%{stroke-dashoffset:0}78%,100%{stroke-dashoffset:52}}
@keyframes caCite{0%,2%{opacity:0;transform:translateY(6px)}14%,68%{opacity:1;transform:translateY(0)}80%,100%{opacity:0;transform:translateY(6px)}}

/* планшет и телефон: подписи в две колонки и одну, сцена остаётся читаемой */
@media (max-width:900px){
  .ca-steps{grid-template-columns:repeat(2,1fr);gap:16px}
  .ca-stage{padding:18px 12px;border-radius:18px}
}
@media (max-width:560px){
  .ca-steps{grid-template-columns:1fr}
}

/* Тем, кто просил меньше движения, отдаём статичный финальный кадр:
   всё найдено, пункт подсвечен, ссылка на месте. */
@media (prefers-reduced-motion:reduce){
  .case-anim.on *{animation:none !important}
  .case-anim .ca-node{opacity:1}
  .case-anim .ca-flow{stroke-dashoffset:0}
  .case-anim .ca-scan-a,.case-anim .ca-scan-b{width:170px}
  .case-anim .ca-hit-bg{opacity:.14}
  .case-anim .ca-hit,.case-anim .ca-hit2{fill:#8A6718}
  .case-anim .ca-ribbon{height:64px}
  .case-anim .ca-ribbon-v{height:52px}
  .case-anim .ca-flow-v{stroke-dashoffset:0}
  .case-anim .ca-check{stroke-dashoffset:0}
  .case-anim .ca-cite{opacity:1}
  .case-anim .ca-dot{opacity:0}
}