/* =========================================================
   Component · animated line icons inside cards (run on hover, or once in view on touch screens).
   ========================================================= */

/* icon parts */
.ico__teeth { fill: none; stroke: var(--ink); stroke-width: 6; stroke-dasharray: 1 1; }
.ico__ink { fill: var(--ink); }
.ico__ink2 { fill: var(--ink-2); }
.ico__accent { fill: var(--accent); }
.ico__hole { fill: var(--surface); }
.ico__ring { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.ico__wedge { fill: var(--accent); opacity: .9; }
.ico__blip { fill: var(--accent); }
.ico__gear { transform-origin: 28px 28px; }
.ico__horn { transform-origin: 21px 24px; transform: rotate(-55deg); }
.ico__sweep { transform-origin: 28px 28px; }
.ico__blip { transform-box: fill-box; transform-origin: center; }
.ico__stroke { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ico__stroke--2 { stroke: var(--ink-2); stroke-width: 2.5; }
.ico__core { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.ico__layer { fill: var(--accent); opacity: .55; }
.ico__wave { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.ico__blade { fill: var(--steel); transform-box: fill-box; transform-origin: center; }
.ico__arm { transform-origin: 22px 41px; }

@media (hover: hover) {
  .card:hover .ico__gear { animation: spin 3s steps(30) infinite; }
  .card:hover .ico__horn { animation: sweep 2.4s var(--mech) infinite; }
  .card:hover .ico__sweep { animation: spin 2.2s linear infinite; }
  .card:hover .ico__blip { animation: blip 2.2s infinite; }
  .card:hover .ico__arm { animation: arm-nod 2.4s var(--mech) infinite; }
  .card:hover .ico__core { animation: core 1.1s ease-in-out infinite; }
  .card:hover .ico__blade { animation: spin .28s linear infinite; }
  .card:hover .ico__nozzle { animation: nozzle 1.6s ease-in-out infinite; }
  .card:hover .ico__layer { animation: blink .8s steps(1) infinite; }
  .card:hover .ico__wave { animation: blink 1s steps(1) infinite; }
  .card:hover .ico__wave--2 { animation-delay: .5s; }
}
@media (hover: none) {
  .card.is-in .ico__gear { animation: spin 3s steps(30) infinite; }
  .card.is-in .ico__horn { animation: sweep 2.4s var(--mech) infinite; }
  .card.is-in .ico__sweep { animation: spin 2.2s linear infinite; }
  .card.is-in .ico__blip { animation: blip 2.2s infinite; }
  .card.is-in .ico__arm { animation: arm-nod 2.4s var(--mech) infinite; }
  .card.is-in .ico__core { animation: core 1.1s ease-in-out infinite; }
  .card.is-in .ico__blade { animation: spin .28s linear infinite; }
  .card.is-in .ico__nozzle { animation: nozzle 1.6s ease-in-out infinite; }
  .card.is-in .ico__layer { animation: blink .8s steps(1) infinite; }
  .card.is-in .ico__wave { animation: blink 1s steps(1) infinite; }
  .card.is-in .ico__wave--2 { animation-delay: .5s; }
}