/* SilentCore — обложки кейсов (SVG из cases.js): типографика, слои и живые сценки.
   Файл общий для сайта и лендинга, копии держать одинаковыми (shasum).

   Как устроена анимация:
   - базовые стили ниже рисуют ФИНАЛЬНЫЙ кадр сценки — его видят без JS и при
     prefers-reduced-motion; в лендинге обложки тоже статичны;
   - сценка запускается, когда строка кейса проявилась (.js .work-row.is-visible);
   - --cv-d — общая пауза перед стартом, чтобы строка успела появиться;
   - бесконечные сценки сами гасят себя в хвосте цикла и начинаются с чистого кадра. */

.work-row__cover svg, .case-card__cover svg { width: 100%; height: auto; display: block; isolation: isolate; }
.work-row__cover { --cv-d: 0.45s; }

/* ─────────── типографика и слои ─────────── */

.cv-t { font-family: var(--font-body); font-size: 11px; }
.cv-n { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.cv-hd { font-size: 11.5px; font-weight: 600; fill: rgba(243, 244, 242, 0.92); }
.cv-fg { fill: rgba(243, 244, 242, 0.88); }
.cv-dim { fill: rgba(243, 244, 242, 0.42); }
.cv-ink { fill: #0b0d10; font-weight: 600; }
.cv-ink-dim { fill: rgba(11, 13, 16, 0.6); }
.cv-bar { fill: #ffffff; fill-opacity: 0.05; }
.cv-grid { stroke: #ffffff; stroke-opacity: 0.035; stroke-width: 1; }
.cv-hair { stroke: #ffffff; stroke-opacity: 0.09; stroke-width: 1; }
.cv-edge { stroke: #ffffff; stroke-opacity: 0.16; stroke-width: 1; }
.cv-dot { fill: #ffffff; fill-opacity: 0.18; }
.cv-chip { fill: url(#cvLit); }
.cv-card { fill: #ffffff; fill-opacity: 0.055; }
.cv-lit { fill: url(#cvLit); }
.cv-line { fill: #ffffff; fill-opacity: 0.14; }
.cv-bar-dim { fill: #ffffff; fill-opacity: 0.14; }
.cv-axis { stroke: #ffffff; stroke-opacity: 0.14; stroke-width: 1; }
.cv-plot { fill: none; stroke: #ffffff; stroke-opacity: 0.85; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cv-node { fill: #ffffff; fill-opacity: 0.5; }
.cv-node-lit { fill: #ffffff; }
.cv-star { fill: #0b0d10; fill-opacity: 0.75; }
.cv-star-off { fill-opacity: 0.22; }
.cv-input { fill: #ffffff; fill-opacity: 0.045; stroke: #ffffff; stroke-opacity: 0.08; }
.cv-send { fill: url(#cvLit); }
.cv-tile { fill: #ffffff; fill-opacity: 0.14; }
.cv-tile-ink { fill: #0b0d10; fill-opacity: 0.7; }
.cv-avatar { fill: #ffffff; fill-opacity: 0.12; stroke: #0c0f13; stroke-width: 2; }
.cv-av { font-size: 8.5px; font-weight: 600; fill: rgba(243, 244, 242, 0.85); }
.cv-send-ico { fill: none; stroke: #0b0d10; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────── финальный (статичный) кадр каждой сценки ─────────── */

/* доска: карточка стоит на месте назначения и горит белым; счётчики уже обновлены */
.cv-mover { transform: translate(152px, -66px); transform-box: fill-box; transform-origin: center; }
.cv-mover .cv-a-dim { opacity: 0; }
.cv-a-cnt-out { opacity: 0; }

/* записи: выделение стоит на четвёртой строке; белый прямоугольник инвертирует
   всё под собой, так текст на нём сам становится тёмным */
.cv-sel { fill: #ffffff; mix-blend-mode: difference; transform: translateY(138px); }
.cv-a-panel { opacity: 0; }
.cv-a-panel.is-first { opacity: 1; }

/* чат: все сообщения на месте */
.cv-a-chat2 { transform-box: fill-box; transform-origin: center; }

/* каталог: блик припаркован за кадром */
.cv-a-sheen { opacity: 0; transform: translate(-260px, 200px) rotate(24deg); }

/* дашборд: линия прочерчена, кольца скрыты */
.cv-a-draw { stroke-dasharray: 1000; stroke-dashoffset: 0; }
.cv-a-node { transform-box: fill-box; transform-origin: center; }
.cv-a-pulse { fill: none; stroke: #ffffff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ─────────── сценки ─────────── */

@media (prefers-reduced-motion: no-preference) {
  .js .work-row.is-visible .cv-a-in {
    animation: cvIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--cv-d) + var(--i, 0) * 70ms) both;
  }

  /* доска */
  .js .work-row.is-visible .cv-mover {
    animation: cvMove 8s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--cv-d) + 0.9s) infinite backwards;
  }
  .js .work-row.is-visible .cv-mover .cv-a-lit { animation: cvPick 8s ease calc(var(--cv-d) + 0.9s) infinite backwards; }
  .js .work-row.is-visible .cv-mover .cv-a-dim { animation: cvUnpick 8s ease calc(var(--cv-d) + 0.9s) infinite backwards; }
  .js .work-row.is-visible .cv-a-cnt-out { animation: cvCntOut 8s ease calc(var(--cv-d) + 0.9s) infinite backwards; }
  .js .work-row.is-visible .cv-a-cnt-in { animation: cvCntIn 8s ease calc(var(--cv-d) + 0.9s) infinite backwards; }

  /* записи */
  .js .work-row.is-visible .cv-sel { animation: cvSel 15s ease calc(var(--cv-d) + 0.6s) infinite; }
  .js .work-row.is-visible .cv-a-panel {
    animation: cvPanel 15s ease calc(var(--cv-d) + 0.6s + var(--i) * 2.5s) infinite backwards;
  }

  /* чат */
  .js .work-row.is-visible .cv-a-chat1 { animation: cvChatA 10s cubic-bezier(0.2, 0.7, 0.2, 1) var(--cv-d) infinite backwards; }
  .js .work-row.is-visible .cv-a-chat2 { animation: cvChatB 10s cubic-bezier(0.2, 0.7, 0.2, 1) var(--cv-d) infinite backwards; }
  .js .work-row.is-visible .cv-a-chat3 { animation: cvChatC 10s cubic-bezier(0.2, 0.7, 0.2, 1) var(--cv-d) infinite backwards; }
  .js .work-row.is-visible .cv-a-star { animation: cvStar 10s ease calc(var(--cv-d) + var(--i) * 0.3s) infinite backwards; }
  .js .work-row.is-visible .cv-a-avg { animation: cvAvg 10s ease var(--cv-d) infinite backwards; }

  /* каталог */
  .js .work-row.is-visible .cv-a-sheen { animation: cvSweep 7s cubic-bezier(0.4, 0, 0.3, 1) calc(var(--cv-d) + 1.6s) infinite; }

  /* дашборд */
  .js .work-row.is-visible .cv-a-draw { animation: cvDraw 1.6s linear calc(var(--cv-d) + 0.5s) both; }
  .js .work-row.is-visible .cv-a-area { animation: cvFade 0.8s ease calc(var(--cv-d) + 2.1s) both; }
  .js .work-row.is-visible .cv-a-node {
    animation: cvPop 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--cv-d) + 0.5s + var(--i) * 0.2s) both;
  }
  .js .work-row.is-visible .cv-a-pulse { animation: cvPulse 2.4s ease-out calc(var(--cv-d) + 2.3s) infinite; }
  .js .work-row.is-visible .cv-a-pulse--2 { animation-delay: calc(var(--cv-d) + 3.1s); }
}

/* появление элемента */
@keyframes cvIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes cvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvPop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: none; }
}

/* доска: пауза → подъём → переезд → посадка → пауза → растворение → снова в исходной колонке */
@keyframes cvMove {
  0%, 10% { transform: translate(0, 0) scale(1); opacity: 1; }
  14% { transform: translate(0, -6px) scale(1.04); }
  26% { transform: translate(152px, -72px) scale(1.04); }
  30%, 88% { transform: translate(152px, -66px) scale(1); opacity: 1; }
  93% { transform: translate(152px, -66px) scale(1); opacity: 0; }
  93.01% { transform: translate(0, 0) scale(1); opacity: 0; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes cvPick { 0%, 10% { opacity: 0; } 14%, 91% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes cvUnpick { 0%, 10% { opacity: 1; } 14%, 91% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes cvCntOut { 0%, 24% { opacity: 1; } 30%, 90% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes cvCntIn { 0%, 24% { opacity: 0; } 30%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* записи: обход строк 4 → 5 → 6 → 1 → 2 → 3, по 2.5 с на каждую */
@keyframes cvSel {
  0%, 14.7% { transform: translateY(138px); }
  16.7%, 31.4% { transform: translateY(184px); }
  33.3%, 48% { transform: translateY(230px); }
  50%, 64.7% { transform: translateY(0); }
  66.7%, 81.4% { transform: translateY(46px); }
  83.3%, 98% { transform: translateY(92px); }
  100% { transform: translateY(138px); }
}
@keyframes cvPanel { 0% { opacity: 0; } 2.5%, 14.2% { opacity: 1; } 16.7%, 100% { opacity: 0; } }

/* чат: три сообщения по очереди, в хвосте цикла всё гаснет */
@keyframes cvChatA {
  0%, 6% { opacity: 0; transform: translateY(8px); }
  12%, 86% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}
@keyframes cvChatB {
  0%, 22% { opacity: 0; transform: scale(0.96); }
  28%, 86% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}
@keyframes cvChatC {
  0%, 50% { opacity: 0; transform: translateY(8px); }
  56%, 86% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}
@keyframes cvStar { 0%, 30% { fill-opacity: 0.22; } 34%, 100% { fill-opacity: 0.75; } }
@keyframes cvAvg { 0%, 42% { opacity: 0; } 47%, 100% { opacity: 1; } }

/* каталог: блик проходит по плиткам слева направо */
@keyframes cvSweep {
  0% { opacity: 1; transform: translate(-260px, 200px) rotate(24deg); }
  26% { opacity: 1; transform: translate(900px, 200px) rotate(24deg); }
  26.1%, 100% { opacity: 0; transform: translate(900px, 200px) rotate(24deg); }
}

/* дашборд: линия прочерчивается; от живой точки расходятся кольца */
@keyframes cvDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes cvPulse {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.4); }
}