/* Ecommerce — integrations and automation figure Paste into a Slater CSS file. No <style> tags. Layout and type already live as Webflow classes; this file only covers what Webflow cannot express: keyframes, stagger, motion. */ @keyframes ndDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes ndFade { from { opacity: 0; } to { opacity: 1; } } @keyframes ndPulse { 0% { stroke-dashoffset: 0; opacity: 0; } 12% { opacity: 0.2; } 70% { opacity: 0.2; } 100% { stroke-dashoffset: -100; opacity: 0; } } /* Typography niceties Webflow has no field for */ .auto-heading { text-wrap: balance; } .auto-body, .auto-pull { text-wrap: pretty; } .auto-link { transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1); } .auto-link:hover { border-bottom-color: #FAFAFA; } /* Resting state. Default is fully drawn and visible, so if JS never runs the figure still reads correctly. The .is-armed class is added by JS before the observer fires, which is what hides it ready to animate. */ [data-auto-diagram] .auto-pulses path { stroke-dasharray: 5 95; opacity: 0; } [data-auto-diagram].is-armed .auto-lines path { stroke-dasharray: 100; stroke-dashoffset: 100; } [data-auto-diagram].is-armed .auto-labels { opacity: 0; } /* Triggered state */ [data-auto-diagram].is-visible .auto-lines path { animation: ndDraw 760ms ease-out forwards; } [data-auto-diagram].is-visible .auto-labels { animation: ndFade 500ms ease-out 700ms forwards; } [data-auto-diagram].is-visible .auto-pulses path { animation: ndPulse 4000ms linear infinite; } /* Line draw stagger. Same 8 paths in both figure variants. */ [data-auto-diagram].is-visible .auto-lines path:nth-child(1) { animation-delay: 0ms; } [data-auto-diagram].is-visible .auto-lines path:nth-child(2) { animation-delay: 120ms; } [data-auto-diagram].is-visible .auto-lines path:nth-child(3) { animation-delay: 240ms; } [data-auto-diagram].is-visible .auto-lines path:nth-child(4) { animation-delay: 360ms; } [data-auto-diagram].is-visible .auto-lines path:nth-child(5) { animation-delay: 480ms; } [data-auto-diagram].is-visible .auto-lines path:nth-child(6) { animation-delay: 600ms; } [data-auto-diagram].is-visible .auto-lines path:nth-child(7) { animation-delay: 720ms; } [data-auto-diagram].is-visible .auto-lines path:nth-child(8) { animation-delay: 840ms; } /* Pulse timing, desaturated across left and right branches so the two sides never fire in lockstep */ .auto-fig-wide .auto-pulses path:nth-child(1) { animation-delay: 1400ms; } .auto-fig-wide .auto-pulses path:nth-child(2) { animation-delay: 1900ms; } .auto-fig-wide .auto-pulses path:nth-child(3) { animation-delay: 2400ms; } .auto-fig-wide .auto-pulses path:nth-child(4) { animation-delay: 2900ms; } .auto-fig-wide .auto-pulses path:nth-child(5) { animation-delay: 1650ms; } .auto-fig-wide .auto-pulses path:nth-child(6) { animation-delay: 2150ms; } .auto-fig-wide .auto-pulses path:nth-child(7) { animation-delay: 2650ms; } .auto-fig-wide .auto-pulses path:nth-child(8) { animation-delay: 3150ms; } .auto-fig-narrow .auto-pulses path:nth-child(1) { animation-delay: 1400ms; } .auto-fig-narrow .auto-pulses path:nth-child(2) { animation-delay: 2100ms; } .auto-fig-narrow .auto-pulses path:nth-child(3) { animation-delay: 2800ms; } .auto-fig-narrow .auto-pulses path:nth-child(4) { animation-delay: 3500ms; } @media (prefers-reduced-motion: reduce) { [data-auto-diagram] .auto-lines path, [data-auto-diagram] .auto-labels { animation: none !important; } [data-auto-diagram] .auto-pulses { display: none; } }