/*
 * Infirise AI homepage: animated infographics, in page order.
 * The stat charts are SVG draw-ins that motion.js runs. The agent pipeline and the 30-day timeline ([data-flow])
 * show their finished, still picture by default (reduced motion, no script); ai-charts.js adds .is-armed to hide
 * the moving parts, .is-live to play them once in view and .is-paused while they are off screen.
 */

/* ---------- Shared flow states ---------- */

/* Off screen everything holds still; !important beats the more specific animation shorthands below. */
[data-flow].is-paused *,
[data-flow].is-paused *::before,
[data-flow].is-paused *::after { animation-play-state: paused !important; }

/* Cards keep their place on hover so the connectors stay joined; the hover shadow still lifts them. */
@media (hover: hover) {
  [data-flow] > .card:hover { transform: none; }
}

@keyframes flow-draw {
  to { scale: 1; }
}

/* ---------- Agent pipeline: Answer, Qualify, Book, Automate (vertical below 1024px) ---------- */

.grid-does { --gap: 20px; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.does-card { position: relative; z-index: calc(4 - var(--i)); }
.grid-does .icon-tile { position: relative; z-index: 0; }
.grid-does .icon-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: linear-gradient(135deg, var(--indigo), var(--azure-logo));
  box-shadow: 0 0 0 6px rgba(108, 184, 240, 0.22), 0 10px 22px rgba(43, 114, 175, 0.3);
}

/* Each link runs from its card's icon to the next card's icon; earlier cards stack above later ones. */
.does-link {
  position: absolute; left: calc(var(--inset) + 23px); top: calc(var(--inset) + 56px);
  width: 2px; height: calc(100% + var(--gap) - 62px);
  border-radius: 2px; background: #D6E7F7;
}
.does-link::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 0;
  background: linear-gradient(180deg, var(--indigo), var(--azure-logo));
}
.does-link::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--azure-logo); opacity: 0;
  box-shadow: 0 0 0 4px rgba(108, 184, 240, 0.3), 0 0 14px rgba(108, 184, 240, 0.9);
}

.grid-does.is-armed .does-link::before { scale: 1 0; }
.grid-does.is-live .does-link::before { animation: flow-draw 1s ease-in-out calc(var(--i) * 1s) both; }
.grid-does.is-live .does-link::after { animation: does-run-y 5s linear calc(var(--i) * 1s) infinite; }
.grid-does.is-live .icon-tile { animation: does-ink 5s linear calc(var(--i) * 1s) infinite; }
.grid-does.is-live .icon-tile::before { animation: does-glow 5s linear calc(var(--i) * 1s) infinite; }

@media (max-width: 1023px) {
  .does-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; align-content: start; gap: 6px 18px; }
  .does-card .card-body { grid-column: 2; }
}

@media (max-width: 480px) {
  .does-card { --inset: 20px; column-gap: 14px; }
}

@media (min-width: 1024px) {
  .grid-does { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .does-link { left: calc(var(--inset) + 56px); top: calc(var(--inset) + 23px); width: calc(100% + var(--gap) - 62px); height: 2px; }
  .does-link::before { background: linear-gradient(90deg, var(--indigo), var(--azure-logo)); }
  .does-link::after { left: 0; top: 50%; }
  .grid-does.is-armed .does-link::before { scale: 0 1; }
  .grid-does.is-live .does-link::after { animation-name: does-run-x; }
}

/* One 5 s cycle: the pulse takes 1 s per hop and each icon lights as the pulse reaches it. */
@keyframes does-run-x {
  0% { left: 0; opacity: 0; animation-timing-function: ease-in-out; }
  4%, 16% { opacity: 1; }
  20%, 100% { left: 100%; opacity: 0; }
}

@keyframes does-run-y {
  0% { top: 0; opacity: 0; animation-timing-function: ease-in-out; }
  4%, 16% { opacity: 1; }
  20%, 100% { top: 100%; opacity: 0; }
}

@keyframes does-ink {
  0%, 34%, 100% { color: #235D91; }
  6%, 22% { color: #ffffff; }
}

@keyframes does-glow {
  0%, 34%, 100% { opacity: 0; scale: 0.85; }
  6% { opacity: 1; scale: 1.08; }
  12%, 22% { opacity: 1; scale: 1; }
}

/* ---------- Why speed matters: stat charts ---------- */

.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stat-chart { flex: none; display: block; }
.stat-chart text { font: 600 12px/1 var(--body); fill: var(--muted); text-anchor: middle; }

/* ---------- 30-day timeline: track on the left below 1024px, above the cards from 1024px ---------- */

.steps { --gap: 18px; grid-template-columns: minmax(0, 1fr); gap: var(--gap); padding-left: 36px; }
.step { position: relative; }
.step-track {
  position: absolute; left: -20px; top: 30px; width: 4px; height: calc(100% + var(--gap));
  border-radius: 2px; background: #D6E7F7;
}
.step-loop .step-track { height: calc(100% - 30px); }
.step-track::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 0;
  background: linear-gradient(180deg, var(--indigo), var(--azure-logo), var(--sky)) 0 calc(var(--i) * 100% / 3) / 100% 400%;
}
.step-node {
  position: absolute; left: 50%; top: 0; translate: -50% -50%;
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 3px solid #ffffff; border-radius: 50%; background: var(--azure); color: #ffffff;
  box-shadow: 0 0 0 2px rgba(43, 114, 175, 0.3);
}
.step-loop .step-node { width: 30px; height: 30px; border-width: 0; }
.step-node svg { display: block; }

.steps.is-armed .step-track::before { scale: 1 0; }
.steps.is-armed .step-node { background: #D6E7F7; color: #235D91; box-shadow: none; }
.steps.is-live .step-node { animation: step-node-on 0.45s ease-out calc(var(--i) * 0.8s) both; }
.steps.is-live .step-track::before { animation: flow-draw 0.8s ease-in-out calc(var(--i) * 0.8s) both; }
.steps.is-live .step-loop .step-track::before { animation: step-repeat 3s ease-in-out 2.4s infinite both; }
.steps.is-live .step-loop .step-node svg { animation: step-turn 3s ease-in-out 2.4s infinite both; }

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 40px 0 0; }
  .step-track { left: 33px; top: -26px; width: calc(100% + var(--gap)); height: 4px; }
  .step-loop .step-track { width: calc(100% - 33px); height: 4px; }
  .step-track::before {
    background: linear-gradient(90deg, var(--indigo), var(--azure-logo), var(--sky)) calc(var(--i) * 100% / 3) 0 / 400% 100%;
  }
  .step-node { left: 0; top: 50%; }
  .steps.is-armed .step-track::before { scale: 0 1; }
}

@keyframes step-node-on {
  60% { scale: 1.25; }
  to { scale: 1; background-color: #2B72AF; color: #ffffff; box-shadow: 0 0 0 2px rgba(43, 114, 175, 0.3); }
}

/* "Every month" keeps going: its track refills and the loop arrows turn once every 3 s. */
@keyframes step-repeat {
  40%, 80% { scale: 1; opacity: 1; }
  to { scale: 1; opacity: 0; }
}

@keyframes step-turn {
  40%, 100% { rotate: 360deg; }
}