/* ============================================================
   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}

/* — точечные правки фоновых глифов — */
/* 05 «Регулярные отчёты»: фон опущен ещё на один ряд ниже */
.cc-ghost.ax--sched{transform:translateY(20%)}
/* 06 «Внутренние процессы»: уменьшенный фоновый глиф */
.cc-ghost.ax--cycle{width:min(42%,184px)}

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

/* — состояния покоя вспомогательных пикселей — */
.ax--dup .d{opacity:.32}
.ax--paper .ln{opacity:.18}
.ax--intake .in{opacity:.28}
.ax--docscan i{opacity:.32}
.ax--link .b{opacity:.32}
.ax--toggle .tr{opacity:.24}
.ax--sched i{opacity:.26}
.ax--cycle i{opacity:.3}
.ax--verify .ck{opacity:.2}
.ax--cap i{transform-origin:center bottom}

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

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

  /* 01 — заявки теряются и дублируются */
  .cc:hover .ax--dup .d{animation:ax-dup 1.5s ease-in-out infinite}
  .cc:hover .ax--dup .y{animation:ax-stray 1.5s ease-in-out infinite}
  @keyframes ax-dup{0%{opacity:0;transform:translate(-32%,-32%)}40%{opacity:.6;transform:none}80%{opacity:.6}100%{opacity:0;transform:translate(24%,24%)}}
  @keyframes ax-stray{0%,55%{opacity:0;transform:scale(.4)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(45%) scale(.4)}}

  /* 02 — данные разбросаны */
  .cc:hover .ax--scatter{animation:ax-wobble 1.9s ease-in-out infinite}
  .cc:hover .ax--scatter i{animation:ax-twinkle 1.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*.11s)}
  @keyframes ax-wobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
  @keyframes ax-twinkle{0%,100%{opacity:.35}50%{opacity:1}}

  /* 03 — отчёты руками: строки «дописываются» */
  .cc:hover .ax--paper .ln{animation:ax-write 1.9s steps(1,end) infinite;animation-delay:calc(var(--i,0)*.3s)}
  @keyframes ax-write{0%,12%{opacity:.18}26%,90%{opacity:1}100%{opacity:.18}}

  /* 04 — спрашивают одно и то же: «эхо» расходится кольцами */
  .cc:hover .ax--echo{animation:ax-echo-scale 1.4s ease-out infinite}
  .cc:hover .ax--echo i{animation:ax-echo-fade 1.4s ease-out infinite}
  @keyframes ax-echo-scale{0%{transform:scale(.82)}100%{transform:scale(1.42)}}
  @keyframes ax-echo-fade{0%{opacity:1}70%{opacity:.2}100%{opacity:0}}

  /* 05 — рост упирается в потолок */
  .cc:hover .ax--cap i:not(.cap){animation:ax-push 1.15s ease-in-out infinite;animation-delay:calc(var(--i,0)*.05s)}
  .cc:hover .ax--cap .cap{animation:ax-capflash 1.15s ease-in-out infinite}
  @keyframes ax-push{0%,100%{transform:translateY(0)}45%{transform:translateY(-24%)}62%{transform:translateY(-9%)}}
  @keyframes ax-capflash{0%,38%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}72%,100%{opacity:.45;transform:scale(1)}}

  /* ===== Стадия 2 — «Что делаем» ===== */

  /* 01 — приём заявок: лучи сходятся к центру */
  .cc:hover .ax--intake .in{animation:ax-incoming 1.5s ease-in-out infinite;animation-delay:calc((2 - var(--i,0))*.18s)}
  .cc:hover .ax--intake .y{animation:ax-receive 1.5s ease-in-out infinite}
  @keyframes ax-incoming{0%,72%{opacity:.28}22%{opacity:1}}
  @keyframes ax-receive{0%,100%{transform:scale(1)}82%{transform:scale(1.45)}}

  /* 02 — обработка документов: строка-сканер бежит вниз */
  .cc:hover .ax--docscan i{animation:ax-scanline 1.8s linear infinite;animation-delay:calc(var(--r,0)*.14s)}
  @keyframes ax-scanline{0%,22%,100%{opacity:.32;background:currentColor}9%{opacity:1;background:var(--yellow)}}

  /* 03 — интеграции: импульс по мосту между узлами */
  .cc:hover .ax--link .b{animation:ax-pulse 1.35s ease-in-out infinite;animation-delay:calc(var(--i,0)*.18s)}
  @keyframes ax-pulse{0%,62%,100%{opacity:.32;transform:scale(1)}30%{opacity:1;transform:scale(1.32)}}

  /* 04 — настройка CRM: ползунки скользят */
  .cc:hover .ax--toggle .kn{animation:ax-slide 1.7s ease-in-out infinite;animation-delay:calc(var(--i,0)*.2s)}
  @keyframes ax-slide{0%,100%{transform:translateX(-62%)}50%{transform:translateX(62%)}}

  /* 05 — регулярные отчёты: ячейки заполняются по расписанию */
  .cc:hover .ax--sched i{animation:ax-fillcell 2.3s steps(1,end) infinite;animation-delay:calc(var(--i,0)*.12s)}
  @keyframes ax-fillcell{0%{opacity:.26}30%,92%{opacity:1}100%{opacity:.26}}

  /* 06 — внутренние процессы: огонёк бежит по кольцу */
  .cc:hover .ax--cycle i{animation:ax-chase 1.45s linear infinite;animation-delay:calc(var(--i,0)*-0.12s)}
  @keyframes ax-chase{0%,76%{opacity:.3;transform:scale(1)}10%{opacity:1;transform:scale(1.28)}}

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

  /* 01 — не ради автоматизации: лупа «исследует», блик в линзе */
  .cc:hover .ax--search{animation:ax-search 2s ease-in-out infinite}
  .cc:hover .ax--search .y{animation:ax-glint 2s ease-in-out infinite}
  @keyframes ax-search{0%,100%{transform:translate(0,0)}25%{transform:translate(10%,-7%)}50%{transform:translate(-7%,5%)}75%{transform:translate(5%,9%)}}
  @keyframes ax-glint{0%,100%{opacity:.55;transform:scale(1)}45%{opacity:1;transform:scale(1.4)}}

  /* 02 — решение под вас: блоки падают и собираются снизу вверх */
  .cc:hover .ax--stack i{animation:ax-drop 1.9s ease-in-out infinite;animation-delay:calc(var(--i,0)*.22s)}
  @keyframes ax-drop{0%{opacity:0;transform:translateY(-180%)}18%{opacity:1;transform:translateY(0)}88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-40%)}}

  /* 03 — опытные инженеры: приглашение в терминале, мигает курсор */
  .cc:hover .ax--term .pr{animation:ax-slidein 1.8s ease-out infinite;animation-delay:calc(var(--i,0)*.1s)}
  .cc:hover .ax--term .cur{animation:ax-blinkc .85s steps(1,end) infinite}
  @keyframes ax-slidein{0%{opacity:0;transform:translateX(-55%)}25%{opacity:1;transform:none}92%{opacity:1}100%{opacity:0}}
  @keyframes ax-blinkc{0%,49%{opacity:1}50%,100%{opacity:.15}}

  /* 04 — решение ваше: галочка прорисовывается в рамке актива */
  .cc:hover .ax--verify .ck{animation:ax-checkdraw 1.9s ease-out infinite;animation-delay:calc(var(--i,0)*.2s)}
  @keyframes ax-checkdraw{0%,8%{opacity:.2;transform:scale(.5)}28%,88%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(.5)}}

  /* 05 — сопровождаем и развиваем: сигнал расходится волнами — «на связи» */
  .cc:hover .ax--signal .a1{animation:ax-radiate 1.6s ease-out infinite}
  .cc:hover .ax--signal .a2{animation:ax-radiate 1.6s ease-out infinite;animation-delay:.18s}
  .cc:hover .ax--signal .a3{animation:ax-radiate 1.6s ease-out infinite;animation-delay:.36s}
  @keyframes ax-radiate{0%{opacity:.25;transform:scale(.85)}40%{opacity:1}100%{opacity:.25;transform:scale(1)}}

}