/* InFaktory motion — k-chevron signature (Assemble, Process, Engage) and Scan (generic loading). Plain CSS, no dependencies. */

.ifk-chevron { transform-box: fill-box; }

/* 1. Assemble: brand reveal, plays once. 1500ms.
   0–300ms chevron offset +5 units (clear of the stem), hidden · 300ms appears · 300–1200ms aligns into place · hold. */
.ifk-assemble .ifk-chevron { animation: ifk-assemble 1500ms var(--q-ease, cubic-bezier(0.2,0,0,1)) both; }
@keyframes ifk-assemble {
  0%, 19% { transform: translateX(5px); opacity: 0; }
  20%     { transform: translateX(5px); opacity: 1; }
  80%, 100% { transform: translateX(0); opacity: 1; }
}

/* 2. Process: AI working / loading, loops (replaces the former q-tally dot sequence). 1500ms cycle.
   0–600ms separates by half a stem · 600–1200ms aligns back · 300ms hold, aligned. */
.ifk-process .ifk-chevron { animation: ifk-process 1500ms var(--q-ease, cubic-bezier(0.2,0,0,1)) infinite; }
@keyframes ifk-process {
  0%        { transform: translateX(0); }
  40%       { transform: translateX(6.5px); }
  80%, 100% { transform: translateX(0); }
}

/* 3. Engage: hover / press on primary actions. 120ms. */
.ifk-engage .ifk-chevron { transition: transform var(--q-duration-fast, 120ms) var(--q-ease, cubic-bezier(0.2,0,0,1)); }
.ifk-engage:hover .ifk-chevron { transform: translateX(3px); }
.ifk-engage:active .ifk-chevron { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .ifk-chevron { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Process indicator markup (replaces .q-tally):
   <svg class="ifk-process ifk-mark" viewBox="0 0 32 32" role="status" aria-label="Processing"><path class="ifk-stem" d="M7 5h6v22H7z"/><polygon class="ifk-chevron" points="21,12 28,12 21.2,19.5 28,27 21,27 16,21.5 16,17.5"/></svg>
   In the 32-unit mark the separation is 3 units (half the 6-unit stem). */
.ifk-mark { width: 16px; height: 16px; vertical-align: middle; overflow: visible; }
.ifk-mark--lg { width: 28px; height: 28px; }
.ifk-mark .ifk-stem { fill: var(--q-ai-unit-on, #0E1111); }
.ifk-mark .ifk-chevron { fill: var(--q-ai-unit-final, #0E7C6B); }
.ifk-mark.ifk-process .ifk-chevron { animation-name: ifk-process-mark; }
@keyframes ifk-process-mark { 0% { transform: translateX(0); } 40% { transform: translateX(3px); } 80%, 100% { transform: translateX(0); } }

/* ---------- Scan (generic loading) ----------
   <span class="q-scan" role="progressbar" aria-label="Loading"><i></i></span> */
.q-scan { position: relative; display: inline-block; width: 48px; height: var(--q-unit-sm, 6px); background: var(--q-ai-unit-off, #D6DCDA); }
.q-scan i { position: absolute; inset: 0 auto 0 0; width: var(--q-unit-sm, 6px); background: var(--q-ai-unit-on, #0E1111); animation: q-scan 1200ms steps(7, jump-none) infinite; }
@keyframes q-scan { to { transform: translateX(42px); } }

@media (prefers-reduced-motion: reduce) {
  .q-scan i { animation: none; width: 100%; opacity: .35; }
}