/* ============================================================
   combo-dev.css — собственный набор пиксельных иконок и анимаций
   для страницы «Разработка под задачу».
   Глифы и движение НЕ повторяют наборы «Аудит и стратегия» (ci--*,
   service.css), «Автоматизация процессов» (ax--*, combo-auto.css)
   и «ИИ-агенты и боты» (ai--*, combo-ai.css).
   Базовая сетка .ci / .y берётся из service.css.
   Анимации идут на :hover ячейки — и на маленькой иконке,
   и на крупном фоновом глифе .cc-ghost.
   ============================================================ */

/* — фоновый глиф: тусклый целиком, пиксели «полные» — */
.cc-ghost.ci{opacity:.14}
.cc-ghost.ci i{opacity:1}
.cc-ghost.ci i.y{opacity:1}

/* — иконка пустой чёрной ячейки: центрируем без transform — */
.cc.is-empty .cc-empty-ico.ci{left:auto;top:auto;inset:0;margin:auto;transform:none}

/* — состояния покоя вспомогательных пикселей — */
.dx--gap .lf,.dx--gap .rt{transform-origin:center}
.dx--gap .gp{transform-origin:center;opacity:.4}
.dx--subs .coin{transform-origin:center}
.dx--void .fr{opacity:.5}
.dx--void .miss{transform-origin:center;opacity:0}
.dx--extend .fl{transform-origin:center bottom;opacity:.25}
.dx--extend .nw{transform-origin:center bottom;opacity:0}
.dx--idea .seed{transform-origin:center}
.dx--idea .ray{opacity:.25;transform-origin:center}
.dx--hub .as{transform-origin:center}
.dx--hub .hcore{transform-origin:center}
.dx--card .ln{opacity:.22;transform-origin:left center}
.dx--card .av{transform-origin:center}
.dx--miniapp .bub{opacity:.5}
.dx--miniapp .tile{transform-origin:center;opacity:.3}
.dx--addfn .add{transform-origin:center}
.dx--scratch .sd{transform-origin:center}
.dx--scratch .r1,.dx--scratch .r2{transform-origin:center;opacity:.2}
.dx--fitme .lj,.dx--fitme .rj{transform-origin:center}
.dx--fitme .co{opacity:.6}
.dx--trim .ex{transform-origin:center;opacity:.5}
.dx--trim .cr{transform-origin:center}
.dx--code .ln{opacity:.15;transform-origin:left center}
.dx--own{transform-origin:center}
.dx--own .tag{transform-origin:center}
.dx--grow2 .nd{transform-origin:center}
.dx--grow2 .nn{transform-origin:center;opacity:.3}

@media (prefers-reduced-motion: no-preference){

  /* ===== Стадия 1 — «Вы здесь, если…» ===== */

  /* 01 — готовое ПО не закрывает задачу: две стенки сходятся,
     но между ними остаётся незакрытый зазор — он мигает */
  .cc:hover .dx--gap .lf{animation:dx-gapL 2s var(--ease) infinite}
  .cc:hover .dx--gap .rt{animation:dx-gapR 2s var(--ease) infinite}
  .cc:hover .dx--gap .gp{animation:dx-gapBlink 2s var(--ease) infinite}
  @keyframes dx-gapL{0%,100%{transform:translateX(-32%)}46%,62%{transform:translateX(6%)}}
  @keyframes dx-gapR{0%,100%{transform:translateX(32%)}46%,62%{transform:translateX(-6%)}}
  @keyframes dx-gapBlink{0%,40%{opacity:.2;transform:scale(.65)}55%,76%{opacity:1;transform:scale(1.15)}100%{opacity:.2;transform:scale(.65)}}

  /* 02 — переплачиваете за подписки: монеты раз за разом
     срываются с полки и утекают вниз — регулярный расход */
  .cc:hover .dx--subs .coin{animation:dx-pay 1.9s var(--ease) infinite;animation-delay:calc(var(--i,0)*.4s)}
  @keyframes dx-pay{0%,8%{opacity:1;transform:translateY(0)}55%{opacity:1;transform:translateY(165%)}72%,100%{opacity:0;transform:translateY(210%)}}

  /* 03 — нужного инструмента нет: пустая ячейка-слот, в центре
     то вспыхивает, то гаснет «отсутствующий» жёлтый пиксель */
  .cc:hover .dx--void .miss{animation:dx-seek2 1.8s var(--ease) infinite}
  .cc:hover .dx--void .fr{animation:dx-flk 1.8s steps(2,end) infinite;animation-delay:calc(var(--i,0)*.09s)}
  @keyframes dx-seek2{0%,32%{opacity:0;transform:scale(.4)}48%{opacity:1;transform:scale(1.2)}64%{opacity:0;transform:scale(.4)}100%{opacity:0;transform:scale(.4)}}
  @keyframes dx-flk{0%,100%{opacity:.5}50%{opacity:.18}}

  /* 04 — есть система, но её надо доработать: на готовом
     основании надстраиваются новые этажи, верхний — жёлтый */
  .cc:hover .dx--extend .fl{animation:dx-floor 2.2s var(--ease) infinite;animation-delay:calc(var(--i,0)*.32s)}
  .cc:hover .dx--extend .nw{animation:dx-cap 2.2s var(--ease) infinite}
  @keyframes dx-floor{0%,10%{opacity:.2;transform:scaleY(.12)}40%,100%{opacity:1;transform:scaleY(1)}}
  @keyframes dx-cap{0%,55%{opacity:0;transform:scaleY(.12) translateY(45%)}72%{opacity:1;transform:scaleY(1) translateY(0)}100%{opacity:1;transform:scaleY(1) translateY(0)}}

  /* 05 — хотите запустить продукт: дремлющее «зерно идеи»
     пульсирует, вокруг изредка вспыхивают лучи */
  .cc:hover .dx--idea .seed{animation:dx-pulse 1.4s var(--ease) infinite}
  .cc:hover .dx--idea .ray{animation:dx-ray 1.4s var(--ease) infinite;animation-delay:calc(var(--i,0)*.12s)}
  @keyframes dx-pulse{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.3);opacity:1}}
  @keyframes dx-ray{0%,100%{opacity:.12;transform:scale(.5)}50%{opacity:.7;transform:scale(1)}}

  /* ===== Стадия 2 — «Что входит» ===== */

  /* 01 — внутренние системы: разрозненные пиксели стягиваются
     из углов в собранное ядро — всё в одном месте */
  .cc:hover .dx--hub .as{animation:dx-gather 2s var(--ease) infinite;animation-delay:calc(var(--i,0)*.07s)}
  .cc:hover .dx--hub .hcore{animation:dx-corepulse 2s var(--ease) infinite}
  @keyframes dx-gather{0%{transform:translate(var(--ox,0),var(--oy,0));opacity:0}28%{opacity:1}55%,92%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--ox,0),var(--oy,0));opacity:0}}
  @keyframes dx-corepulse{0%,45%{transform:scale(.7);opacity:.6}70%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:.9}}

  /* 02 — личные кабинеты клиентов: карточка профиля,
     строки данных заполняются слева направо */
  .cc:hover .dx--card .ln{animation:dx-fillrow 2.2s var(--ease) infinite;animation-delay:calc(var(--i,0)*.11s)}
  .cc:hover .dx--card .av{animation:dx-avp 2.2s var(--ease) infinite}
  @keyframes dx-fillrow{0%,14%{opacity:.18;transform:scaleX(.3)}40%,82%{opacity:1;transform:scaleX(1)}100%{opacity:.18;transform:scaleX(.3)}}
  @keyframes dx-avp{0%,100%{transform:scale(.82)}50%{transform:scale(1.1)}}

  /* 03 — Telegram-приложения: внутри окна-пузыря Telegram
     по очереди загораются плитки мини-приложения */
  .cc:hover .dx--miniapp .tile{animation:dx-app 1.8s var(--ease) infinite;animation-delay:calc(var(--i,0)*.16s)}
  .cc:hover .dx--miniapp .bub{animation:dx-bubp 1.8s var(--ease) infinite}
  @keyframes dx-app{0%,100%{opacity:.3;transform:scale(.7);background:currentColor}42%,60%{opacity:1;transform:scale(1.1);background:var(--yellow)}}
  @keyframes dx-bubp{0%,100%{opacity:.45}50%{opacity:.7}}

  /* 04 — доработка систем: к готовому блоку вдвигается
     новый жёлтый модуль и встаёт на место */
  .cc:hover .dx--addfn .add{animation:dx-attach 2s var(--ease) infinite}
  @keyframes dx-attach{0%{opacity:0;transform:translateX(210%)}34%{opacity:1;transform:translateX(0)}48%{transform:translateX(-12%)}60%{transform:translateX(0)}88%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(210%)}}

  /* 05 — свой продукт с нуля: из одного зерна продукт
     разрастается кольцами наружу — построен с нуля */
  .cc:hover .dx--scratch .sd{animation:dx-seed2 2s var(--ease) infinite}
  .cc:hover .dx--scratch .r1{animation:dx-spread 2s var(--ease) infinite;animation-delay:.32s}
  .cc:hover .dx--scratch .r2{animation:dx-spread 2s var(--ease) infinite;animation-delay:.62s}
  @keyframes dx-seed2{0%{transform:scale(.3);opacity:.4}24%,100%{transform:scale(1);opacity:1}}
  @keyframes dx-spread{0%,14%{opacity:0;transform:scale(.2)}44%,100%{opacity:1;transform:scale(1)}}

  /* ===== Стадия 3 — «Почему подходит именно вам» ===== */

  /* 01 — разрабатываем индивидуально под вас: губки кронциркуля
     сходятся и точно обхватывают ваш объект — решение по мерке */
  .cc:hover .dx--fitme .lj{animation:dx-jawL 2s var(--ease) infinite}
  .cc:hover .dx--fitme .rj{animation:dx-jawR 2s var(--ease) infinite}
  .cc:hover .dx--fitme .co{animation:dx-snug 2s var(--ease) infinite}
  @keyframes dx-jawL{0%,100%{transform:translateX(0)}46%,70%{transform:translateX(105%)}}
  @keyframes dx-jawR{0%,100%{transform:translateX(0)}46%,70%{transform:translateX(-105%)}}
  @keyframes dx-snug{0%,42%{opacity:.55;background:currentColor;transform:scaleX(1)}58%,72%{opacity:1;background:var(--yellow);transform:scaleX(1.15)}100%{opacity:.55;background:currentColor;transform:scaleX(1)}}

  /* 02 — не делаем ненужные решения: лишние угловые пиксели
     срезаются, остаётся чистое ядро */
  .cc:hover .dx--trim .ex{animation:dx-cut 1.9s var(--ease) infinite;animation-delay:calc(var(--i,0)*.13s)}
  .cc:hover .dx--trim .cr{animation:dx-corepulse 1.9s var(--ease) infinite}
  @keyframes dx-cut{0%,16%{opacity:.5;transform:scale(1)}46%,80%{opacity:0;transform:scale(.2)}100%{opacity:.5;transform:scale(1)}}

  /* 03 — за кодом опытные инженеры: между скобками < >
     строка кода «печатается» по символу — пишут люди */
  .cc:hover .dx--code .ln{animation:dx-type2 1.9s steps(1,end) infinite;animation-delay:calc(var(--i,0)*.22s)}
  @keyframes dx-type2{0%,12%{opacity:.15;transform:scale(.4)}30%,72%{opacity:1;transform:scale(1)}90%,100%{opacity:.15;transform:scale(.4)}}

  /* 04 — решение полностью ваше: «посылка» с жёлтой биркой
     делает лёгкий жест передачи, бирка вспыхивает */
  .cc:hover .dx--own{animation:dx-hand 1.8s var(--ease) infinite}
  .cc:hover .dx--own .tag{animation:dx-tag 1.8s var(--ease) infinite}
  @keyframes dx-hand{0%,100%{transform:translateY(0)}45%{transform:translateY(9%)}}
  @keyframes dx-tag{0%,40%{opacity:.4;transform:scale(.7)}55%,76%{opacity:1;transform:scale(1.2)}100%{opacity:.4;transform:scale(.7)}}

  /* 05 — сопровождаем и развиваем: импульс бежит по узлам
     пути роста, сверху прибавляется новый жёлтый узел */
  .cc:hover .dx--grow2 .nd{animation:dx-travel 1.8s var(--ease) infinite;animation-delay:calc(var(--i,0)*.18s)}
  .cc:hover .dx--grow2 .nn{animation:dx-newnode 1.8s var(--ease) infinite}
  @keyframes dx-travel{0%,100%{background:currentColor;transform:scale(1)}40%{background:var(--yellow);transform:scale(1.3)}62%{background:currentColor;transform:scale(1)}}
  @keyframes dx-newnode{0%,55%{opacity:.2;transform:scale(.3)}72%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}

}