/*
 * Infirise Technologies (infirise.com): animated infographics. About facts, SLA response-time bars and the
 * getting-started progress line. it-charts.js gives a [data-chart] block that starts below the fold .chart-armed
 * (start state), then .is-drawn once it scrolls into view, so these transitions play once. Without the script,
 * with reduced motion or when the block is already on screen at load, it is never armed and shows its final state.
 */

/* ---------- About: facts strip (motion.js counts the numbers up) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  margin-top: 8px;
  padding: 0;
  list-style: none;
}
.fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.fact::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--indigo), var(--azure-logo));
  transform-origin: left;
}
.fact-num {
  font: 800 clamp(34px, 3.2vw, 44px)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.fact-unit { color: var(--azure); }
.fact-unit-word { font-size: 0.55em; }
.fact-label { font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: balance; }

.chart-armed .fact::before { transform: scaleX(0); }
.chart-armed.is-drawn .fact::before {
  transform: none;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.12s + 0.2s);
}

@media (min-width: 640px) and (max-width: 959px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Support: remote response time by priority ---------- */

/* Bar lengths (--w) follow a log scale from 5 minutes to one 8-hour business day:
   15 minutes 0.24, 30 minutes 0.39, 2 business hours 0.70, 1 business day 1. */
.sla-top { display: grid; align-items: center; gap: 32px 56px; }
.sla-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rt { display: flex; flex-direction: column; gap: 18px; padding: 26px 28px; box-shadow: var(--shadow-card); }
.rt-title {
  font: 600 13px/1.4 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rt-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 18px 16px;
  padding: 0;
  list-style: none;
}
.rt-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.rt-name { font: 700 15px/1.3 var(--font-body); color: var(--p); }
.rt-track { height: 10px; border-radius: 999px; background: var(--line-soft); }
.rt-bar {
  display: block;
  width: calc(var(--w) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--p);
  background: linear-gradient(90deg, color-mix(in srgb, var(--p) 45%, #ffffff), var(--p));
  transform-origin: left;
}
.rt-value { font-size: 15px; line-height: 1.3; color: var(--ink); white-space: nowrap; }
.rt-scale { font-size: 13px; line-height: 1.4; color: var(--muted); }

.chart-armed .rt-bar { transform: scaleX(0); }
.chart-armed .rt-value { opacity: 0; transform: translateX(-8px); }
.chart-armed.is-drawn .rt-bar {
  transform: none;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.15s + 0.2s);
}
.chart-armed.is-drawn .rt-value {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--i) * 0.15s + 0.8s);
}

@media (min-width: 1160px) {
  .sla-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 559px) {
  .rt { padding: 22px 20px; }
  .rt-list { grid-template-columns: minmax(0, 1fr) max-content; gap: 20px 12px; }
  .rt-row { row-gap: 8px; }
  .rt-track { grid-column: 1 / -1; grid-row: 2; }
  .rt-value { justify-self: end; }
}

/* ---------- Getting started: progress line ---------- */

/* Each step but the last carries the segment from its dot to the next dot:
   down the dots on small screens, across them from 960px. */
.steps { display: grid; gap: 16px; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 16px; }
.step-dot { position: relative; z-index: 1; width: 44px; height: 44px; margin-top: 14px; }
.step-disc { stroke: var(--azure); stroke-width: 2px; }
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  left: 20.5px;
  width: 3px;
  height: calc(100% + 16px);
  border-radius: 3px;
  background: var(--line);
}
.step:not(:last-child)::after { background: var(--azure-logo); transform-origin: top; }

.chart-armed .step::after { transform: scaleY(0); }
.chart-armed .step-dot { transform: scale(0.8); }
.chart-armed .step-disc { fill: #ffffff; stroke: var(--line-strong); }
.chart-armed .step-num { fill: var(--muted); }
.chart-armed .step-ring { opacity: 0; }
.chart-armed.is-drawn .step::after {
  transform: none;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * 0.65s + 0.35s);
}
.chart-armed.is-drawn .step-dot {
  transform: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.65s + 0.25s);
}
.chart-armed.is-drawn .step-disc { fill: var(--azure); stroke: var(--azure); }
.chart-armed.is-drawn .step-num { fill: #ffffff; }
.chart-armed.is-drawn .step-ring { opacity: 1; }
.chart-armed.is-drawn :is(.step-disc, .step-num, .step-ring) {
  transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease;
  transition-delay: calc(var(--i) * 0.65s + 0.25s);
}

@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .step { display: flex; flex-direction: column; gap: 18px; }
  .step-dot { width: 52px; height: 52px; margin: 0 0 0 20px; }
  .step:not(:last-child)::before,
  .step:not(:last-child)::after { top: 24.5px; left: 46px; width: calc(100% + 20px); height: 3px; }
  .step:not(:last-child)::after { transform-origin: left; }
  .chart-armed .step::after { transform: scaleX(0); }
}