/* ============================================================
   combo-ai.css — собственный набор пиксельных иконок и анимаций
   для страницы «ИИ-агенты и боты».
   Глифы и движение НЕ повторяют наборы «Аудит и стратегия» (ci--*,
   service.css) и «Автоматизация процессов» (ax--*, combo-auto.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}

/* — состояния покоя вспомогательных пикселей — */
.ai--ask .m{transform-origin:center;opacity:.5}
.ai--drain .up,.ai--drain .dn{transform-origin:center}
.ai--drain .drop{transform-origin:center}
.ai--seek .sw{opacity:.45}
.ai--seek .tg{opacity:.3}
.ai--bot .dot{opacity:.4}
.ai--bot .snd{opacity:.25;transform-origin:center}
.ai--extract .ex{opacity:.5;transform-origin:center}
.ai--lookup .kbk{transform-origin:center}
.ai--lookup .ans{transform-origin:center;opacity:.2}
.ai--lookup .q{transform-origin:center}
.ai--wave .pk{transform-origin:center bottom;opacity:.55}
.ai--forge .sp{transform-origin:center}
.ai--forge .core{transform-origin:center;opacity:.6}
.ai--db .bd{transform-origin:center}
.ai--db .out{transform-origin:center;opacity:.35}
.ai--spark .rt{transform-origin:center;opacity:.4}
.ai--spark .ris{transform-origin:center}
.ai--spark .spk{transform-origin:center;opacity:.25}
.ai--tune .br{transform-origin:center}
.ai--tune .tg{opacity:.4;transform-origin:center}
.ai--key .sk{transform-origin:center bottom}
.ai--key .kh{opacity:.45;transform-origin:center}
.ai--evolve .new{opacity:.5;transform-origin:center bottom}
.ai--pile .sh{transform-origin:center}

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

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

  /* 01 — клиенты спрашивают одно и то же: одинаковые реплики-
     пузыри одна за другой въезжают по диагонали — поток повторов */
  .cc:hover .ai--ask .m{animation:ai-ask 2s ease-in-out infinite; animation-delay:calc(var(--i,0)*.28s)}
  @keyframes ai-ask{0%{opacity:0;transform:translateX(-95%)}22%,84%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(24%)}}

  /* 02 — часы на разбор документов: верхний лист медленно
     снимается со стопки снова и снова */
  .cc:hover .ai--pile .sh{animation:ai-lift 2.1s ease-in-out infinite; animation-delay:calc(var(--i,0)*.1s)}
  @keyframes ai-lift{0%{transform:translateY(0);opacity:1}38%{transform:translateY(-150%);opacity:0}39%{transform:translateY(70%);opacity:0}78%,100%{transform:translateY(0);opacity:1}}

  /* 03 — рутинные тексты съедают время: песочные часы,
     песок пересыпается сверху вниз — время утекает */
  .cc:hover .ai--drain .up{animation:ai-empty 2.3s ease-in-out infinite; animation-delay:calc(var(--i,0)*.18s)}
  @keyframes ai-empty{0%,18%{opacity:1}68%,100%{opacity:.12}}
  .cc:hover .ai--drain .dn{animation:ai-fill2 2.3s ease-in-out infinite; animation-delay:calc(var(--i,0)*.18s)}
  @keyframes ai-fill2{0%,28%{opacity:.12}78%,100%{opacity:1}}
  .cc:hover .ai--drain .drop{animation:ai-drop .55s ease-in infinite}
  @keyframes ai-drop{0%{opacity:0;transform:translateY(-45%)}45%{opacity:1}100%{opacity:0;transform:translateY(70%)}}

  /* 04 — нужное не найти быстро: луч-столбец сканирует поле,
     а цель лишь изредка попадает под него */
  .cc:hover .ai--seek .sw{animation:ai-sweep 2s ease-in-out infinite}
  @keyframes ai-sweep{0%{transform:translateX(0);opacity:.5}50%{opacity:.85}100%{transform:translateX(440%);opacity:.5}}
  .cc:hover .ai--seek .tg{animation:ai-elude 2s ease-in-out infinite}
  @keyframes ai-elude{0%,60%{opacity:.25}73%{opacity:1}86%,100%{opacity:.25}}

  /* 05 — готовые сервисы вас не понимают: блок не входит
     в паз и отскакивает назад с дёрганьем */
  .cc:hover .ai--reject .pc{animation:ai-reject 1.7s ease-in-out infinite}
  @keyframes ai-reject{0%{transform:translateX(0)}38%{transform:translateX(78%)}46%{transform:translateX(56%)}54%{transform:translateX(82%)}66%{transform:translateX(-12%)}74%{transform:translateX(4%)}100%{transform:translateX(0)}}

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

  /* 01 — чат-боты: три точки «печатают», затем вылетает ответ */
  .cc:hover .ai--bot .dot{animation:ai-typedot 1.5s ease-in-out infinite; animation-delay:calc(var(--i,0)*.17s)}
  @keyframes ai-typedot{0%,78%{opacity:.4;transform:translateY(0)}28%{opacity:1;transform:translateY(-22%)}}
  .cc:hover .ai--bot .snd{animation:ai-send 1.5s ease-in-out infinite}
  @keyframes ai-send{0%,58%{opacity:.2;transform:scale(.5)}74%{opacity:1;transform:scale(1.35)}100%{opacity:.2;transform:scale(.5)}}

  /* 02 — разбор документов: поля данных вытягиваются из листа вправо */
  .cc:hover .ai--extract .ex{animation:ai-pull 1.9s ease-in-out infinite; animation-delay:calc(var(--i,0)*.22s)}
  @keyframes ai-pull{0%,12%{opacity:.15;transform:translateX(-120%) scale(.5)}40%,84%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:.15;transform:translateX(35%) scale(.5)}}

  /* 03 — помощник по базе знаний: вопрос входит в стопку
     документов, оттуда выходит подсвеченный ответ */
  .cc:hover .ai--lookup .q{animation:ai-qin 1.9s ease-in-out infinite}
  @keyframes ai-qin{0%,72%{opacity:.4;transform:translateX(0)}22%{opacity:1;transform:translateX(50%)}}
  .cc:hover .ai--lookup .kbk{animation:ai-flip2 1.9s ease-in-out infinite; animation-delay:calc(var(--i,0)*.1s)}
  @keyframes ai-flip2{0%,58%{opacity:.55;background:currentColor}32%{opacity:1;background:var(--yellow)}}
  .cc:hover .ai--lookup .ans{animation:ai-ansout 1.9s ease-in-out infinite}
  @keyframes ai-ansout{0%,56%{opacity:0;transform:scale(.4)}74%{opacity:1;transform:scale(1.35)}100%{opacity:.25;transform:scale(.85)}}

  /* 04 — расшифровка и сводки: эквалайзер «слышит» речь,
     столбцы прыгают по уровням */
  .cc:hover .ai--wave .pk{animation:ai-eq 1.1s ease-in-out infinite; animation-delay:calc(var(--i,0)*.13s)}
  @keyframes ai-eq{0%,100%{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}

  /* 05 — AI под вашу задачу: частицы стягиваются к центру,
     собирая ядро помощника, ядро разгорается */
  .cc:hover .ai--forge .sp{animation:ai-converge 1.9s ease-in infinite; animation-delay:calc(var(--i,0)*.1s)}
  @keyframes ai-converge{0%{opacity:1;transform:scale(1)}58%{opacity:0;transform:scale(.25)}100%{opacity:0;transform:scale(.25)}}
  .cc:hover .ai--forge .core{animation:ai-core 1.9s ease-in-out infinite}
  @keyframes ai-core{0%,38%{opacity:.5;transform:scale(.6)}66%{opacity:1;transform:scale(1.55)}100%{opacity:.8;transform:scale(1)}}

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

  /* 01 — работает по вашим данным: цилиндр базы данных,
     импульс чтения проходит снизу вверх к результату */
  .cc:hover .ai--db .bd{animation:ai-read 1.9s ease-in-out infinite; animation-delay:calc(var(--i,0)*.14s)}
  @keyframes ai-read{0%,72%{opacity:.45;background:currentColor}28%{opacity:1;background:var(--yellow)}}
  .cc:hover .ai--db .out{animation:ai-out 1.9s ease-in-out infinite; animation-delay:.62s}
  @keyframes ai-out{0%,55%{opacity:.3;transform:scale(.8)}72%{opacity:1;transform:scale(1.3)}100%{opacity:.5;transform:scale(1)}}

  /* 02 — автоматизируем не только рутину: внизу мерно
     «крутится» рутина, а вверх поднимается искра и вспыхивает
     звездой — ИИ делает больше, чем повторяющиеся задачи */
  .cc:hover .ai--spark .rt{animation:ai-grind 1.8s ease-in-out infinite; animation-delay:calc(var(--i,0)*.11s)}
  @keyframes ai-grind{0%,70%{opacity:.4;transform:scale(1)}32%{opacity:.85;transform:scale(.82)}}
  .cc:hover .ai--spark .ris{animation:ai-rise2 1.8s ease-in infinite}
  @keyframes ai-rise2{0%,8%{opacity:0;transform:translateY(45%)}26%{opacity:1;transform:translateY(0)}52%{opacity:0;transform:translateY(-130%)}100%{opacity:0;transform:translateY(-130%)}}
  .cc:hover .ai--spark .spk{animation:ai-burst 1.8s ease-in-out infinite; animation-delay:calc(.5s + var(--i,0)*.06s)}
  @keyframes ai-burst{0%,30%{opacity:.2;transform:scale(.3)}50%{opacity:1;transform:scale(1.45)}70%{opacity:.95;transform:scale(1)}100%{opacity:.4;transform:scale(.8)}}

  /* 03 — не просто нейросеть: рамка-прицел сводится к центру
     и «захватывает» цель */
  .cc:hover .ai--tune .btl{animation:ai-tl 1.7s ease-in-out infinite}
  .cc:hover .ai--tune .btr{animation:ai-tr 1.7s ease-in-out infinite}
  .cc:hover .ai--tune .bbl{animation:ai-bl 1.7s ease-in-out infinite}
  .cc:hover .ai--tune .bbr{animation:ai-br 1.7s ease-in-out infinite}
  @keyframes ai-tl{0%,100%{transform:translate(0,0)}46%,64%{transform:translate(48%,48%)}}
  @keyframes ai-tr{0%,100%{transform:translate(0,0)}46%,64%{transform:translate(-48%,48%)}}
  @keyframes ai-bl{0%,100%{transform:translate(0,0)}46%,64%{transform:translate(48%,-48%)}}
  @keyframes ai-br{0%,100%{transform:translate(0,0)}46%,64%{transform:translate(-48%,-48%)}}
  .cc:hover .ai--tune .tg{animation:ai-lock 1.7s ease-in-out infinite}
  @keyframes ai-lock{0%,32%{opacity:.3;transform:scale(.55)}52%,66%{opacity:1;transform:scale(1.25)}100%{opacity:.5;transform:scale(.9)}}

  /* 04 — решение полностью ваше: дужка замка защёлкивается,
     личинка загорается — «ключ у вас» */
  .cc:hover .ai--key .sk{animation:ai-shackle 1.9s ease-in-out infinite}
  @keyframes ai-shackle{0%,100%{transform:translateY(-22%)}44%,82%{transform:translateY(0)}}
  .cc:hover .ai--key .kh{animation:ai-keyhole 1.9s ease-in-out infinite}
  @keyframes ai-keyhole{0%,42%{opacity:.3;transform:scale(.6) rotate(0deg)}58%,82%{opacity:1;transform:scale(1.1) rotate(35deg)}100%{opacity:.3;transform:scale(.6) rotate(0deg)}}

  /* 05 — сопровождаем и развиваем: лестница роста подрастает,
     сверху прибавляется новая ступень-сценарий */
  .cc:hover .ai--evolve .st{animation:ai-step 1.8s ease-in-out infinite; animation-delay:calc(var(--i,0)*.09s)}
  @keyframes ai-step{0%,100%{transform:translateY(0);opacity:.7}42%{transform:translateY(-14%);opacity:1}}
  .cc:hover .ai--evolve .new{animation:ai-new 1.8s ease-in-out infinite}
  @keyframes ai-new{0%,48%{opacity:0;transform:scale(.3) translateY(60%)}68%{opacity:1;transform:scale(1.25) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}

}