/* ============================================================
   service-visuals.css — bespoke animated SVG visuals for the
   Services section. Each animates in when its row is hovered.
   Palette: terracotta #c4886a, tan #e8c9a0, burned-bean #1a1815,
   cream #f2ede6. Loaded after services.css.
   ============================================================ */

.fd-viz {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ---- Unified stroke system (site-wide line rule) ----
   Every illustration line/outline renders at a true 2px — the single
   site-wide stroke width (matching Webflow's 2px borders/dividers) —
   regardless of each SVG's viewBox scale, via non-scaling-stroke.
   The dashboard donut is drawn as a thicker filled-style ring (4px) so
   it reads as a data element, but stays close to the system weight. */
.fd-viz [stroke],
.fd-loop [stroke],
.fd-dash [stroke] {
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

/* Exception: elements drawn with stroke-dasharray (the donuts) CANNOT use
   non-scaling-stroke (it fragments the dashes). They scale normally; widths
   tuned to read as a ~4px data ring. The line + checkmark no longer use
   dasharray (clip-path / opacity reveal) so they keep the true 2px above. */
.fd-dash .dash-donut,
.fd-dash .dash-donut-bg,
.fd-viz--crm .donut-fg,
.fd-viz--crm .donut-bg {
  vector-effect: none;
  stroke-width: 1.6;
}
/* Smooth, springy easing on every animated part; per-part delays below */
.fd-viz * {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease,
              clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 01 Web: content lines wipe in, block pops ---------- */
.fd-viz--web .ln  { transform: scaleX(0); transform-origin: left center; transform-box: fill-box; }
.fd-viz--web .blk { transform: scale(0);  transform-origin: center;      transform-box: fill-box; }
.fd-service:hover .fd-viz--web .ln1 { transform: scaleX(1); }
.fd-service:hover .fd-viz--web .ln2 { transform: scaleX(1); transition-delay: 0.08s; }
.fd-service:hover .fd-viz--web .ln3 { transform: scaleX(1); transition-delay: 0.16s; }
.fd-service:hover .fd-viz--web .blk { transform: scale(1);  transition-delay: 0.22s; }

/* ---------- 02 Brand: swatches spread, "Aa" fades in ---------- */
.fd-viz--brand .sw1,
.fd-viz--brand .sw3,
.fd-viz--brand .aa { transform-box: fill-box; transform-origin: center; }
.fd-viz--brand .aa { opacity: 0; }
.fd-service:hover .fd-viz--brand .sw1 { transform: translateX(-25px); }
.fd-service:hover .fd-viz--brand .sw3 { transform: translateX(25px); }
.fd-service:hover .fd-viz--brand .aa  { opacity: 1; transition-delay: 0.18s; }

/* ---------- 03 Print: sheets fan out ---------- */
.fd-viz--print .sh { transform-box: fill-box; transform-origin: bottom center; }
.fd-service:hover .fd-viz--print .sh2 { transform: rotate(-7deg)  translateX(-3px); }
.fd-service:hover .fd-viz--print .sh3 { transform: rotate(-14deg) translateX(-7px); transition-delay: 0.05s; }

/* ---------- 04 CRM: bars grow, donut is a static arc that fades in ---------- */
.fd-viz--crm .cb       { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; }
.fd-viz--crm .donut-fg { stroke-dasharray: 72 28; transform: rotate(-90deg);
                         transform-origin: center; transform-box: fill-box; opacity: 0; }
.fd-service:hover .fd-viz--crm .cb1 { transform: scaleY(1); }
.fd-service:hover .fd-viz--crm .cb2 { transform: scaleY(1); transition-delay: 0.08s; }
.fd-service:hover .fd-viz--crm .cb3 { transform: scaleY(1); transition-delay: 0.16s; }
.fd-service:hover .fd-viz--crm .donut-fg { opacity: 1; transition-delay: 0.22s; }

/* ---------- 05 Maintenance: shield + checkmark wipes in, pulse ring ---------- */
.fd-viz--maint .check { clip-path: inset(-50% 100% -50% -10%); }
.fd-viz--maint .pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.fd-service:hover .fd-viz--maint .check { clip-path: inset(-50% -10% -50% -10%); transition-delay: 0.18s; }
.fd-service:hover .fd-viz--maint .pulse { animation: fd-pulse 1.7s ease-out 0.2s infinite; }

@keyframes fd-pulse {
  0%   { opacity: 0.4; transform: scale(0.55); }
  70%  { opacity: 0;   transform: scale(1.3); }
  100% { opacity: 0;   transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .fd-viz * { transition: none; }
  .fd-service:hover .fd-viz--maint .pulse { animation: none; }
}