/* One-shot animated icons for the Features Illustrations section
   (home page only). Pure CSS on INLINE SVG — SMIL in CSS
   background-image doesn't tick in Chrome so we drive everything
   with CSS transforms + transitions + stroke-dashoffset.

   Trigger: xalo-features-icons.js adds `body.xalo-features-in` once
   the section enters the viewport. That class gate-keeps the
   end-state styles below; the transitions handle the rest.

   Scoped to [data-framer-name="Features Illustrations"] so the
   AlreadyDeployed cards on /what-we-do (same .xr-fi__ classes)
   keep their own hand-drawn SVGs untouched.
*/

/* =================================================================
   Card 1 — descending bars
   Each bar starts scaled to zero height, pivoting from its bottom
   edge. transform-box:fill-box makes transform-origin % relative to
   the rect's own bounding box instead of the SVG viewBox.
   ================================================================= */
[data-framer-name="Features Illustrations"] .xr-fi__bar {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__bar {
  transform: scaleY(1);
}
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__bar--1 { transition-delay: 0.05s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__bar--2 { transition-delay: 0.20s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__bar--3 { transition-delay: 0.35s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__bar--4 { transition-delay: 0.50s; }

/* =================================================================
   Card 2 — clock hands sweep to rest
   Each hand sits inside a <g> whose transform-origin is the clock
   center (57, 57 in SVG coords). The hour hand starts rotated
   -120° from rest, the minute hand -270°. Both ease to 0°.
   transform-box:view-box means the origin is in SVG user units.
   ================================================================= */
[data-framer-name="Features Illustrations"] .xr-fi__clock-hand {
  transform-box: view-box;
  transform-origin: 57px 57px;
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-framer-name="Features Illustrations"] .xr-fi__clock-hand--hour {
  transform: rotate(-120deg);
}
[data-framer-name="Features Illustrations"] .xr-fi__clock-hand--min {
  transform: rotate(-270deg);
}
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__clock-hand {
  transform: rotate(0deg);
  transition-delay: 0.1s;
}

/* =================================================================
   Card 3 — network diagram
   Five lines draw in via stroke-dashoffset (pathLength=50 for the
   diagonals, 45 for the vertical stem). After the lines finish,
   the outer nodes and center hub pop in via transform: scale().
   ================================================================= */
[data-framer-name="Features Illustrations"] .xr-fi__net-line {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-framer-name="Features Illustrations"] .xr-fi__net-line--5 {
  /* Shorter vertical stem — 45 unit path */
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
}
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-line {
  stroke-dashoffset: 0;
}
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-line--1 { transition-delay: 0.05s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-line--2 { transition-delay: 0.18s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-line--3 { transition-delay: 0.31s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-line--4 { transition-delay: 0.44s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-line--5 { transition-delay: 0.57s; }

/* Nodes — start at scale(0) pivoting from their own center, then
   pop to full size. fill-box with transform-origin: 50% 50% keeps
   them centered on (cx, cy) regardless of the actual SVG coords. */
[data-framer-name="Features Illustrations"] .xr-fi__net-node,
[data-framer-name="Features Illustrations"] .xr-fi__net-hub {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
}
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-node,
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-hub {
  transform: scale(1);
}
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-node--1  { transition-delay: 0.30s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-node--2  { transition-delay: 0.45s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-node--3  { transition-delay: 0.60s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-node--4  { transition-delay: 0.75s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-node--top{ transition-delay: 0.90s; }
body.xalo-features-in [data-framer-name="Features Illustrations"] .xr-fi__net-hub      { transition-delay: 1.05s; transition-duration: 0.45s; }

/* ===== Reduced motion — snap to end state, no transitions ===== */
@media (prefers-reduced-motion: reduce) {
  [data-framer-name="Features Illustrations"] .xr-fi__bar,
  [data-framer-name="Features Illustrations"] .xr-fi__clock-hand,
  [data-framer-name="Features Illustrations"] .xr-fi__net-line,
  [data-framer-name="Features Illustrations"] .xr-fi__net-node,
  [data-framer-name="Features Illustrations"] .xr-fi__net-hub {
    transform: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
}