/* ============================================================
   HOW I WORK ICONS
   Drawn in tools/icons.py and inlined, so they take currentColor (ink at
   rest, blue on hover, both themes) and each part moves on its own.

   An icon plays once, all the way through, when .is-play is added: on hover
   where a pointer can hover, or as it scrolls into view on touch screens
   (js/icons.js). Moving away does not cut it short. Every animation lasts
   exactly .8s and ends where it started. Reduced motion: still.
   ============================================================ */

.ic{display:block;width:100%;height:100%;overflow:visible;}
.ic .ic-solid{fill:currentColor;stroke:none;}
.ic .ic-line{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:butt;}
.ic .ic-frame{fill:none;stroke:none;}
.ic [class*="ic-"]{transform-box:fill-box;transform-origin:center;}

/* a lined part's solid fill, empty: a wedge of no width (it sweeps open in
   play, like a pie chart; the keyframes below) */
.ic .ic-fill.is-empty{clip-path:polygon(50% 100%,-25% 100%,-25% 100%,-25% 100%,-25% 100%);}

@media (prefers-reduced-motion:no-preference){

  /* fills sweep like a pie chart: a wedge from the centre, clockwise */
  /* pie:start */
  /* generated by tools/pie_keyframes.py */
  @keyframes ic-pie-fill{
    0%{clip-path:polygon(50% 100%,-25% 100%,-25% 100%,-25% 100%,-25% 100%);}
    3.75%{clip-path:polygon(50% 100%,-25% 100%,-25% 99.64%,-25% 99.27%,-25% 98.91%);}
    7.5%{clip-path:polygon(50% 100%,-25% 100%,-24.99% 97.09%,-24.94% 94.18%,-24.87% 91.28%);}
    11.25%{clip-path:polygon(50% 100%,-25% 100%,-24.84% 90.19%,-24.36% 80.42%,-23.56% 70.74%);}
    15%{clip-path:polygon(50% 100%,-25% 100%,-24.1% 76.82%,-21.42% 54.2%,-17.02% 32.68%);}
    18.75%{clip-path:polygon(50% 100%,-25% 100%,-21.58% 55.24%,-11.64% 14.56%,3.91% -18.34%);}
    22.5%{clip-path:polygon(50% 100%,-25% 100%,-14.95% 25%,12.5% -29.9%,50% -50%);}
    26.25%{clip-path:polygon(50% 100%,-25% 100%,-5.17% -1.61%,43.83% -49.49%,96.09% -18.34%);}
    30%{clip-path:polygon(50% 100%,-25% 100%,2.91% -16.75%,65.88% -46.6%,117.02% 32.68%);}
    33.75%{clip-path:polygon(50% 100%,-25% 100%,8.33% -24.72%,78.7% -38.58%,123.56% 70.74%);}
    37.5%{clip-path:polygon(50% 100%,-25% 100%,11.25% -28.43%,84.95% -32.71%,124.87% 91.28%);}
    41.25%{clip-path:polygon(50% 100%,-25% 100%,12.34% -29.72%,87.18% -30.27%,125% 98.91%);}
    45%{clip-path:polygon(50% 100%,-25% 100%,12.5% -29.9%,87.5% -29.9%,125% 100%);}
    55%{clip-path:polygon(50% 100%,-25% 100%,12.5% -29.9%,87.5% -29.9%,125% 100%);}
    58.75%{clip-path:polygon(50% 100%,-25% 98.91%,12.82% -30.27%,87.66% -29.72%,125% 100%);}
    62.5%{clip-path:polygon(50% 100%,-24.87% 91.28%,15.05% -32.71%,88.75% -28.43%,125% 100%);}
    66.25%{clip-path:polygon(50% 100%,-23.56% 70.74%,21.3% -38.58%,91.67% -24.72%,125% 100%);}
    70%{clip-path:polygon(50% 100%,-17.02% 32.68%,34.12% -46.6%,97.09% -16.75%,125% 100%);}
    73.75%{clip-path:polygon(50% 100%,3.91% -18.34%,56.17% -49.49%,105.17% -1.61%,125% 100%);}
    77.5%{clip-path:polygon(50% 100%,50% -50%,87.5% -29.9%,114.95% 25%,125% 100%);}
    81.25%{clip-path:polygon(50% 100%,96.09% -18.34%,111.64% 14.56%,121.58% 55.24%,125% 100%);}
    85%{clip-path:polygon(50% 100%,117.02% 32.68%,121.42% 54.2%,124.1% 76.82%,125% 100%);}
    88.75%{clip-path:polygon(50% 100%,123.56% 70.74%,124.36% 80.42%,124.84% 90.19%,125% 100%);}
    92.5%{clip-path:polygon(50% 100%,124.87% 91.28%,124.94% 94.18%,124.99% 97.09%,125% 100%);}
    96.25%{clip-path:polygon(50% 100%,125% 98.91%,125% 99.27%,125% 99.64%,125% 100%);}
    100%{clip-path:polygon(50% 100%,125% 100%,125% 100%,125% 100%,125% 100%);}
  }
  @keyframes ic-pie-drain{
    0%{clip-path:polygon(50% 100%,-25% 100%,12.5% -29.9%,87.5% -29.9%,125% 100%);}
    3.75%{clip-path:polygon(50% 100%,-25% 98.91%,12.82% -30.27%,87.66% -29.72%,125% 100%);}
    7.5%{clip-path:polygon(50% 100%,-24.87% 91.28%,15.05% -32.71%,88.75% -28.43%,125% 100%);}
    11.25%{clip-path:polygon(50% 100%,-23.56% 70.74%,21.3% -38.58%,91.67% -24.72%,125% 100%);}
    15%{clip-path:polygon(50% 100%,-17.02% 32.68%,34.12% -46.6%,97.09% -16.75%,125% 100%);}
    18.75%{clip-path:polygon(50% 100%,3.91% -18.34%,56.17% -49.49%,105.17% -1.61%,125% 100%);}
    22.5%{clip-path:polygon(50% 100%,50% -50%,87.5% -29.9%,114.95% 25%,125% 100%);}
    26.25%{clip-path:polygon(50% 100%,96.09% -18.34%,111.64% 14.56%,121.58% 55.24%,125% 100%);}
    30%{clip-path:polygon(50% 100%,117.02% 32.68%,121.42% 54.2%,124.1% 76.82%,125% 100%);}
    33.75%{clip-path:polygon(50% 100%,123.56% 70.74%,124.36% 80.42%,124.84% 90.19%,125% 100%);}
    37.5%{clip-path:polygon(50% 100%,124.87% 91.28%,124.94% 94.18%,124.99% 97.09%,125% 100%);}
    41.25%{clip-path:polygon(50% 100%,125% 98.91%,125% 99.27%,125% 99.64%,125% 100%);}
    45%{clip-path:polygon(50% 100%,125% 100%,125% 100%,125% 100%,125% 100%);}
    55%{clip-path:polygon(50% 100%,-25% 100%,-25% 100%,-25% 100%,-25% 100%);}
    58.75%{clip-path:polygon(50% 100%,-25% 100%,-25% 99.64%,-25% 99.27%,-25% 98.91%);}
    62.5%{clip-path:polygon(50% 100%,-25% 100%,-24.99% 97.09%,-24.94% 94.18%,-24.87% 91.28%);}
    66.25%{clip-path:polygon(50% 100%,-25% 100%,-24.84% 90.19%,-24.36% 80.42%,-23.56% 70.74%);}
    70%{clip-path:polygon(50% 100%,-25% 100%,-24.1% 76.82%,-21.42% 54.2%,-17.02% 32.68%);}
    73.75%{clip-path:polygon(50% 100%,-25% 100%,-21.58% 55.24%,-11.64% 14.56%,3.91% -18.34%);}
    77.5%{clip-path:polygon(50% 100%,-25% 100%,-14.95% 25%,12.5% -29.9%,50% -50%);}
    81.25%{clip-path:polygon(50% 100%,-25% 100%,-5.17% -1.61%,43.83% -49.49%,96.09% -18.34%);}
    85%{clip-path:polygon(50% 100%,-25% 100%,2.91% -16.75%,65.88% -46.6%,117.02% 32.68%);}
    88.75%{clip-path:polygon(50% 100%,-25% 100%,8.33% -24.72%,78.7% -38.58%,123.56% 70.74%);}
    92.5%{clip-path:polygon(50% 100%,-25% 100%,11.25% -28.43%,84.95% -32.71%,124.87% 91.28%);}
    96.25%{clip-path:polygon(50% 100%,-25% 100%,12.34% -29.72%,87.18% -30.27%,125% 98.91%);}
    100%{clip-path:polygon(50% 100%,-25% 100%,12.5% -29.9%,87.5% -29.9%,125% 100%);}
  }
  @keyframes ic-pie-in{
    0%{clip-path:polygon(50% 100%,-25% 100%,-25% 100%,-25% 100%,-25% 100%);}
    8.33%{clip-path:polygon(50% 100%,-25% 100%,-25% 99.64%,-25% 99.27%,-25% 98.91%);}
    16.67%{clip-path:polygon(50% 100%,-25% 100%,-24.99% 97.09%,-24.94% 94.18%,-24.87% 91.28%);}
    25%{clip-path:polygon(50% 100%,-25% 100%,-24.84% 90.19%,-24.36% 80.42%,-23.56% 70.74%);}
    33.33%{clip-path:polygon(50% 100%,-25% 100%,-24.1% 76.82%,-21.42% 54.2%,-17.02% 32.68%);}
    41.67%{clip-path:polygon(50% 100%,-25% 100%,-21.58% 55.24%,-11.64% 14.56%,3.91% -18.34%);}
    50%{clip-path:polygon(50% 100%,-25% 100%,-14.95% 25%,12.5% -29.9%,50% -50%);}
    58.33%{clip-path:polygon(50% 100%,-25% 100%,-5.17% -1.61%,43.83% -49.49%,96.09% -18.34%);}
    66.67%{clip-path:polygon(50% 100%,-25% 100%,2.91% -16.75%,65.88% -46.6%,117.02% 32.68%);}
    75%{clip-path:polygon(50% 100%,-25% 100%,8.33% -24.72%,78.7% -38.58%,123.56% 70.74%);}
    83.33%{clip-path:polygon(50% 100%,-25% 100%,11.25% -28.43%,84.95% -32.71%,124.87% 91.28%);}
    91.67%{clip-path:polygon(50% 100%,-25% 100%,12.34% -29.72%,87.18% -30.27%,125% 98.91%);}
    100%{clip-path:polygon(50% 100%,-25% 100%,12.5% -29.9%,87.5% -29.9%,125% 100%);}
  }
  @keyframes ic-pie-in-q{
    0%{clip-path:polygon(0% 100%,0% -50%,0% -50%,0% -50%,0% -50%);}
    8.33%{clip-path:polygon(0% 100%,0% -50%,0.18% -50%,0.36% -50%,0.55% -50%);}
    16.67%{clip-path:polygon(0% 100%,0% -50%,1.45% -49.99%,2.91% -49.97%,4.36% -49.94%);}
    25%{clip-path:polygon(0% 100%,0% -50%,4.91% -49.92%,9.81% -49.68%,14.7% -49.28%);}
    33.33%{clip-path:polygon(0% 100%,0% -50%,11.62% -49.55%,23.18% -48.2%,34.59% -45.96%);}
    41.67%{clip-path:polygon(0% 100%,0% -50%,22.64% -48.28%,44.76% -43.17%,65.85% -34.77%);}
    50%{clip-path:polygon(0% 100%,0% -50%,38.82% -44.89%,75% -29.9%,106.07% -6.07%);}
    58.33%{clip-path:polygon(0% 100%,0% -50%,54.54% -39.74%,101.61% -10.35%,134.77% 34.15%);}
    66.67%{clip-path:polygon(0% 100%,0% -50%,64.71% -35.33%,116.75% 5.83%,145.96% 65.41%);}
    75%{clip-path:polygon(0% 100%,0% -50%,70.71% -32.29%,124.72% 16.66%,149.28% 85.3%);}
    83.33%{clip-path:polygon(0% 100%,0% -50%,73.74% -30.62%,128.43% 22.5%,149.94% 95.64%);}
    91.67%{clip-path:polygon(0% 100%,0% -50%,74.84% -29.99%,129.72% 24.69%,150% 99.45%);}
    100%{clip-path:polygon(0% 100%,0% -50%,75% -29.9%,129.9% 25%,150% 100%);}
  }
  /* pie:end */

  /* ---- design systems A: a wave steps each part down a fill and back:
     solid sweeps off to show its lines, lines sweep off to leave the outline */
  .ic-systems-align.is-play .is-solid .ic-fill,
  .ic-systems-align.is-play .is-lined .ic-lines{animation:ic-pie-drain .592s linear calc(var(--i) * 52ms) both;}   /* .592 + 4 x .052 = .8s */

  /* ---- design systems B: the source pulses, the wires carry the change,
     and each component takes it as its wire arrives ---- */
  .ic-systems-propagate.is-play .ic-src{animation:ic-pulse .288s cubic-bezier(.3,0,.3,1) both;}
  .ic-systems-propagate.is-play .ic-wire{stroke-dasharray:1.03 2;animation:ic-draw .304s cubic-bezier(.45,0,.55,1) calc(.112s + var(--i) * 72ms) both;}
  .ic-systems-propagate.is-play .ic-fill{animation:ic-pie-drain .336s linear calc(.32s + var(--i) * 72ms) both;}   /* ends at .8s */
  @keyframes ic-pulse{0%,100%{transform:scale(1);}45%{transform:scale(.78);}}

  /* ---- design systems C: the rules draw, then the parts fill in on them ---- */
  .ic-systems-grid.is-play .ic-rule{stroke-dasharray:1.03 2;animation:ic-draw .336s cubic-bezier(.45,0,.2,1) calc(var(--i) * 48ms) both;}
  .ic-systems-grid.is-play .ic-grow-1{animation:ic-pie-in .336s linear .32s both;}
  .ic-systems-grid.is-play .ic-dot{animation:ic-pop .24s cubic-bezier(.34,1.56,.64,1) .448s both;}
  .ic-systems-grid.is-play .ic-grow-2{animation:ic-pie-in-q .272s linear .528s both;}   /* ends at .8s */

  /* ---- AI A: lines grow up from the horizon; the dot nods ---- */
  .ic-ai-horizon .ic-ray{transform-origin:50% 100%;}
  .ic-ai-horizon.is-play .ic-ray{animation:ic-grow .4464s cubic-bezier(.2,.7,.3,1) calc(var(--i) * 27.2ms) both;}   /* 13 x .0272 + .4464 = .8s */
  .ic-ai-horizon.is-play .ic-dot{animation:ic-nod .496s cubic-bezier(.3,0,.3,1) .304s both;}
  @keyframes ic-grow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
  @keyframes ic-nod{
    0%{transform:translateY(0);}
    45%{transform:translateY(3px) scale(1.12,.86);}
    70%{transform:translateY(-1.5px);}
    100%{transform:translateY(0);}
  }

  /* ---- AI B: ripples spread out to the boundary ---- */
  .ic-ai-bounded .ic-ripple{transform-origin:50% 100%;}
  .ic-ai-bounded.is-play .ic-src{animation:ic-pop .24s cubic-bezier(.34,1.56,.64,1) both;}
  .ic-ai-bounded.is-play .ic-ripple{animation:ic-spread .4s cubic-bezier(.2,.7,.3,1) calc(.096s + var(--i) * 152ms) both;}
  .ic-ai-bounded.is-play .ic-bound{animation:ic-hold .16s ease .64s both;}
  @keyframes ic-spread{from{transform:scale(.2);opacity:0;}to{transform:scale(1);opacity:1;}}
  @keyframes ic-hold{0%{transform:scale(1);}50%{transform:scale(1.03);}100%{transform:scale(1);}}

  /* ---- AI C: steps narrow from the top, the result lands ---- */
  .ic-ai-narrowing.is-play .ic-step{animation:ic-widen .256s cubic-bezier(.2,.7,.3,1) calc(var(--i) * 48ms) both;}
  .ic-ai-narrowing.is-play .ic-dot{animation:ic-land .32s cubic-bezier(.34,1.4,.64,1) .48s both;}
  @keyframes ic-widen{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  @keyframes ic-land{from{transform:translateY(-8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

  /* ---- complex products: the lines set off, each dot appears just before
     they reach it, and they bend round it. The draw is linear, so time maps
     to distance: the first bend starts 24% of the way along (.17s), the
     second 55% (.39s). */
  .ic-products-steer.is-play .ic-path{stroke-dasharray:1.03 2;animation:ic-draw .704s linear calc(var(--i) * 24ms) both;}   /* .704 + 4 x .024 = .8s */
  .ic-products-steer.is-play .ic-dot-1{animation:ic-pop .208s cubic-bezier(.34,1.56,.64,1) .096s both;}
  .ic-products-steer.is-play .ic-dot-2{animation:ic-pop .208s cubic-bezier(.34,1.56,.64,1) .304s both;}

  /* shared */
  @keyframes ic-draw{from{stroke-dashoffset:1.03;}to{stroke-dashoffset:0;}}
  @keyframes ic-pop{from{transform:scale(0);}to{transform:scale(1);}}
}