/* cases.css — блок «Кейсы»: карусель с анимированными сценами. После styles.css (его токены
   и классы .section, .container, .eyebrow, .link-arrow, .icon, .reveal, .cases__invite).
   Лента прилипает к центру; слайд — точка прилипания, его не трансформируем (лента встанет
   мимо центра), «впереди / позади» получает вложенная карточка. Скрипт ставит .is-ready
   на .cases, .is-current текущему слайду, data-pos соседям.
   Сцена: база каждого элемента = конечный кадр; анимации (transform/opacity + stroke-dashoffset)
   включаются у текущей карточки на экране (.cases.is-on .is-current), раз в цикл скрипт
   перезапускает их классом .is-reset. Без скрипта и при «уменьшить движение» — конечные кадры. */

.cases-wrap { overflow-x: clip; }

.cases {
  --cases-w: 540px;        /* ширина слайда */
  --cases-gap: 20px;
  --cases-ok: #8fd39a;     /* зелёный «успех» */
  --cases-screen: #101215; /* экран сцены */
  position: relative;
}

/* ---------- лента: боковые поля = половина свободного места (крайние слайды тоже по центру),
   вертикальные — место под свечение текущей карточки ---------- */
.cases__track {
  position: relative;
  display: flex;
  gap: var(--cases-gap);
  padding: 24px calc(50% - var(--cases-w) / 2);
  margin-block: -24px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cases__track::-webkit-scrollbar { display: none; }
.cases__track:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -18px; border-radius: var(--radius-lg); }

/* ---------- слайд и карточка ---------- */
.cases__slide { position: relative; display: flex; flex: 0 0 var(--cases-w); scroll-snap-align: center; -webkit-tap-highlight-color: transparent; }
.cases__card {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.55rem; padding: 12px 12px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(242, 239, 233, 0.035), transparent 60%), var(--bg-card);
}
/* латунная кромка и свечение текущей — слоем, через opacity */
.cases__card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.85), 0 0 44px -6px rgba(201, 169, 97, 0.22);
}
.cases.is-ready .cases__card { transition: transform 0.45s var(--ease), opacity 0.45s var(--ease); }
.cases.is-ready .cases__card::after { transition: opacity 0.45s var(--ease); }
.cases.is-ready .is-current .cases__card { z-index: 2; }
.cases.is-ready .is-current .cases__card::after { opacity: 1; }
/* соседи: уменьшены, полупрозрачны, подвинуты к центру — позади текущей */
.cases.is-ready .cases__slide:not(.is-current) .cases__card { opacity: 0.45; cursor: pointer; }
.cases.is-ready [data-pos="-1"] .cases__card, .cases.is-ready [data-pos="-2"] .cases__card { transform: translate(8%, 10px) scale(0.88); }
.cases.is-ready [data-pos="1"] .cases__card, .cases.is-ready [data-pos="2"] .cases__card { transform: translate(-8%, 10px) scale(0.88); }
.cases.is-ready [data-pos="-2"] .cases__card, .cases.is-ready [data-pos="2"] .cases__card { opacity: 0.25; }
.cases.is-ready .cases__slide:not(.is-current) .cases__card:hover { opacity: 0.65; }

.cases__label { margin-top: 0.45rem; padding-inline: 8px; font-family: var(--font-head); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.cases__title { padding-inline: 8px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.02em; }
.cases__text { padding-inline: 8px; font-size: 0.95rem; color: var(--ink-soft); }
.cases__tags { margin-top: auto; padding: 0.5rem 8px 0; font-family: var(--font-head); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- стрелки и точки (видны при .is-ready) ---------- */
.cases__controls { display: none; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.cases.is-ready .cases__controls { display: flex; }
.cases__arrow {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--accent-line); border-radius: 50%; background: rgba(242, 239, 233, 0.04); color: var(--accent);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s, transform 0.3s var(--ease);
}
.cases__arrow .icon { width: 20px; height: 20px; }
.cases__arrow--prev .icon { transform: scaleX(-1); }
.cases__arrow--next .icon { transform: none; }
.cases__arrow:hover { border-color: var(--accent-light); color: var(--accent-light); background: rgba(201, 169, 97, 0.1); transform: translateY(-1px); }
.cases__dots { display: flex; align-items: center; gap: 2px; }
.cases__dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cases__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.28; transition: transform 0.3s var(--ease), opacity 0.3s; }
.cases__dot:hover::before { opacity: 0.6; }
.cases__dot.is-active::before { background: var(--accent); opacity: 1; transform: scale(1.4); }

/* ---------- сцена: тёмный экран с рамкой; .cases__stage ровно по пропорции рисунка (420×230),
   чтобы HTML-надписи поверх вставали по тем же координатам, что и SVG ---------- */
.cases__scene {
  position: relative;
  overflow: hidden;
  aspect-ratio: 42 / 23;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--cases-screen);
  animation-duration: 11s;          /* цикл = длительность − 1 с (читает cases.js) */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.cases__scene--salon { animation-duration: 10s; }
.cases__scene--snacks, .cases__scene--cafe { animation-duration: 11s; }
.cases__scene--agents { animation-duration: 12s; }
.cases__stage { position: absolute; inset: 0; height: 100%; aspect-ratio: 42 / 23; margin-inline: auto; container-type: inline-size; }
.cases__svg { display: block; width: 100%; height: 100%; }

/* HTML-надписи поверх сцены: размер в долях ширины сцены (cqw) */
.cases__cap { position: absolute; translate: 0 -50%; font-family: var(--font-head); font-size: 2.4cqw; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--accent); }
.cases__cap--crm{left:15.2%;top:17%}.cases__cap--chat{left:61.4%;top:17%}.cases__cap--stats{left:48.6%;top:20%}
.cases__cap--rec{left:13.8%;top:18.3%}.cases__cap--report{left:57.1%;top:17%}
.cases__cap--table{left:40.5%;top:21.7%}.cases__cap--live{left:74.8%;top:21.7%}
.cases__num { position: absolute; left: 34.76%; top: 15.65%; translate: -50% -50%; font-family: var(--font-head); font-size: 2.3cqw; font-weight: 800; line-height: 1; color: var(--on-accent); }
.cases__pill {
  position: absolute; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 0.85em; translate: -50% -50%;
  border: 1px solid var(--cases-ok); border-radius: 999px; background: var(--bg-card); font-family: var(--font-head);
  font-size: 2.5cqw; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
.cases__pill::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--cases-ok); }
.cases__pill--score { left: 74%; top: 79.5%; }
.cases__pill--tip { left: 82%; top: 77%; }

/* ---------- примитивы сцен (SVG) ---------- */
.cases-win { fill: var(--bg-card); stroke: var(--line-strong); stroke-width: 1; }
.cases-scr { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.cases-blk { fill: rgba(242, 239, 233, 0.05); stroke: var(--line); stroke-width: 1; }
.cases-stone { fill: rgba(242, 239, 233, 0.1); }
.cases-brass { fill: var(--accent-soft); stroke: rgba(201, 169, 97, 0.6); stroke-width: 1; }
.cases-rule { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.cases-ln { fill: none; stroke: var(--ink-faint); stroke-width: 3; stroke-linecap: round; opacity: 0.5; }
.cases-ln--dim { opacity: 0.3; }
.cases-ln--ink { stroke: var(--ink); opacity: 0.55; }
.cases-ln--acc { stroke: var(--accent-light); opacity: 0.75; }
.cases-acc { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cases-accf { fill: var(--accent); }
.cases-acc-hi { fill: var(--accent-light); }
.cases-glow { fill: var(--accent-light); opacity: 0.18; }
.cases-bar { fill: var(--accent); opacity: 0.45; }
.cases-on { fill: none; stroke: var(--on-accent); stroke-width: 1.6; stroke-linecap: round; }
.cases-ok { fill: none; stroke: var(--cases-ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cases-okf { fill: var(--cases-ok); }
.cases-okbg { fill: rgba(143, 211, 154, 0.12); stroke: var(--cases-ok); stroke-width: 1; }
.cases-dash { stroke-dasharray: 3 4; }
.cases-dot { fill: var(--ink-faint); opacity: 0.45; }
.cases-dot-ink { fill: var(--ink-soft); }
.cases-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.5; }
.cases-tilt { transform-box: fill-box; transform-origin: center; transform: rotate(-4deg); }

/* ---------- анимируемые элементы: база = конечный кадр; имя анимации лежит в --cases-an
   и применяется только у текущей карточки на экране; задержки .cases-d1…d26 по 0,3 с ---------- */
.cases-a { transform-box: fill-box; transform-origin: center; animation-duration: 0.5s; animation-timing-function: var(--ease); animation-fill-mode: both; }
.cases.is-on .is-current .cases__scene:not(.is-reset) .cases-a { animation-name: var(--cases-an); }
.cases.is-on .is-current .cases__scene:not(.is-reset) { animation-name: cases-kf-scene; }

/* постоянные: появляются и остаются */
.cases-rise { --cases-an: cases-kf-in; --cases-from: translateY(8px); }
.cases-pop { --cases-an: cases-kf-in; --cases-from: scale(0.5); }
.cases-slide { --cases-an: cases-kf-in; --cases-from: translateX(14px); }
.cases-slide--l { --cases-from: translateX(-20px); }
.cases-grow { --cases-an: cases-kf-in; --cases-from: scaleY(0); transform-origin: 50% 100%; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
.cases-draw { --cases-an: cases-kf-draw; stroke-dasharray: var(--cases-len); animation-duration: 1s; animation-timing-function: ease-out; }
.cases-draw--trend { --cases-len: 182; }
.cases-draw--rt { --cases-len: 80; }
/* временные: в конечном кадре их нет */
.cases-show, .cases-fly, .cases-scan, .cases-sync { opacity: 0; }
.cases-show { --cases-an: cases-kf-show; animation-duration: 0.9s; }
.cases-show--long { animation-duration: 1.8s; }
.cases-fly { --cases-an: cases-kf-fly; animation-duration: 0.7s; animation-timing-function: ease-in; }
.cases-fly--a { --cases-to: translate(58px, -52px) scale(0.3); }
.cases-fly--b { --cases-to: translate(8px, -52px) scale(0.3); }
.cases-fly--c { --cases-to: translate(58px, -104px) scale(0.3); }
.cases-scan { --cases-an: cases-kf-scan; animation-duration: 1.6s; animation-timing-function: ease-in-out; }
.cases-sync { --cases-an: cases-kf-sync; animation-duration: 1s; animation-timing-function: ease-in-out; }
.cases-press { --cases-an: cases-kf-press; animation-duration: 0.35s; }
/* непрерывные */
.cases-pulse { --cases-an: cases-kf-pulse; animation-duration: 1.8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cases-ripple { --cases-an: cases-kf-ring; animation-duration: 1.8s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
.cases-blink { --cases-an: cases-kf-blink; animation-duration: 0.9s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cases-blink:nth-of-type(2) { animation-delay: 0.15s; }
.cases-blink:nth-of-type(3) { animation-delay: 0.3s; }
.cases-flow { --cases-an: cases-kf-flow; animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: linear; }
.cases-wave { --cases-an: cases-kf-wave; fill: var(--accent); animation-duration: 0.9s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.cases-wave:nth-child(3n+2) { animation-delay: -0.3s; }
.cases-wave:nth-child(3n) { animation-delay: -0.6s; }
.cases-wave:nth-child(4n+1) { animation-duration: 1.15s; }

.cases-d1{animation-delay:.3s}.cases-d2{animation-delay:.6s}.cases-d3{animation-delay:.9s}.cases-d4{animation-delay:1.2s}
.cases-d5{animation-delay:1.5s}.cases-d6{animation-delay:1.8s}.cases-d7{animation-delay:2.1s}.cases-d8{animation-delay:2.4s}
.cases-d9{animation-delay:2.7s}.cases-d10{animation-delay:3s}.cases-d11{animation-delay:3.3s}.cases-d12{animation-delay:3.6s}
.cases-d13{animation-delay:3.9s}.cases-d14{animation-delay:4.2s}.cases-d15{animation-delay:4.5s}.cases-d16{animation-delay:4.8s}
.cases-d17{animation-delay:5.1s}.cases-d18{animation-delay:5.4s}.cases-d19{animation-delay:5.7s}.cases-d20{animation-delay:6s}
.cases-d21{animation-delay:6.3s}.cases-d22{animation-delay:6.6s}.cases-d23{animation-delay:6.9s}.cases-d24{animation-delay:7.2s}
.cases-d25{animation-delay:7.5s}.cases-d26{animation-delay:7.8s}

/* ---------- keyframes ---------- */
@keyframes cases-kf-scene{0%{opacity:0}3%,84%{opacity:1}89%,100%{opacity:0}}
@keyframes cases-kf-in{from{opacity:0;transform:var(--cases-from)}}
@keyframes cases-kf-draw{from{stroke-dashoffset:var(--cases-len)}}
@keyframes cases-kf-show{0%{opacity:0;transform:scale(.6)}15%,85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes cases-kf-fly{0%{opacity:0;transform:none}20%{opacity:1}100%{opacity:0;transform:var(--cases-to)}}
@keyframes cases-kf-scan{0%{opacity:0;transform:none}12%,88%{opacity:1}100%{opacity:0;transform:translateY(134px)}}
@keyframes cases-kf-sync{0%{opacity:0;transform:none}15%,85%{opacity:1}100%{opacity:0;transform:translateX(-40px)}}
@keyframes cases-kf-press{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}
@keyframes cases-kf-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes cases-kf-ring{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(2)}}
@keyframes cases-kf-blink{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-2px)}}
@keyframes cases-kf-flow{0%{opacity:0;transform:none}15%,80%{opacity:1}100%{opacity:0;transform:translateX(48px)}}
@keyframes cases-kf-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- адаптив: телефон — лента во всю ширину экрана, у соседей видны края ---------- */
@media (max-width: 599px) {
  .cases { --cases-gap: 12px; }
  .cases__track { margin-inline: calc(clamp(1rem, 4.5vw, 2.5rem) * -1); padding-inline: 28px; }
  .cases__slide { flex-basis: 100%; scroll-snap-stop: always; }
  .cases.is-ready .cases__slide:not(.is-current) .cases__card { transform: scale(0.94); }
  .cases__controls { margin-top: 1.25rem; }
}
/* планшет: слайд поуже, по бокам видны половинки соседей */
@media (min-width: 600px) and (max-width: 899px) {
  .cases { --cases-w: clamp(340px, 50vw, 440px); --cases-gap: 16px; }
  .cases.is-ready [data-pos="-1"] .cases__card, .cases.is-ready [data-pos="-2"] .cases__card { transform: translate(5%, 8px) scale(0.9); }
  .cases.is-ready [data-pos="1"] .cases__card, .cases.is-ready [data-pos="2"] .cases__card { transform: translate(-5%, 8px) scale(0.9); }
}
/* широкий: текущий крупный по центру, сцена фиксированной высоты */
@media (min-width: 900px) {
  .cases__scene { aspect-ratio: auto; height: 230px; }
  .cases__card { padding: 14px 14px 22px; }
  .cases__title { font-size: 1.35rem; }
  .cases__text { font-size: 1rem; }
}

/* ---------- «уменьшить движение»: конечные кадры, переключение без плавности */
@media (prefers-reduced-motion: reduce) {
  .cases__track { scroll-behavior: auto; }
  .cases.is-ready .cases__card, .cases.is-ready .cases__card::after, .cases__arrow, .cases__dot::before { transition: none; }
  .cases__arrow:hover { transform: none; }
  .cases__scene, .cases-a { animation: none !important; }
}