/* animations.css — Scroll-triggered animations and the reduced-motion override.
   Load order matters: base → components → sections → responsive → animations. */

/* ---------- intelligence card animations ---------- */
/* Animations start when the card scrolls into view (.in-view is added by script.js). */
.js .intel-card:not(.in-view) .intel-visual *,
.js .intel-card:not(.in-view) .intel-visual *::before,
.js .intel-card:not(.in-view) .intel-visual *::after { animation-play-state: paused; }

/* card 1: PO is scanned, SKU gets mapped */
.mini-doc { position: relative; overflow: hidden; }
.mini-doc::after { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #4f6fc4, transparent); box-shadow: 0 0 10px 2px rgba(79, 111, 196, .45); opacity: 0; animation: scanBeam 4s ease-in-out infinite; }
.mini-doc i { transform-origin: left center; animation: lineRead 4s ease-in-out infinite; }
.mini-doc i:nth-of-type(2) { animation-delay: .25s; }
.mini-doc i:nth-of-type(3) { animation-delay: .5s; }
.mini-magic { position: relative; }
.mini-magic::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #4f6fc4; opacity: 0; animation: ripple 4s ease-out infinite; }
.mini-magic .ic { animation: twinkle 4s ease-in-out infinite; }
.mini-match { animation: matchGlow 4s ease-in-out infinite; }
.mini-match span { animation: mappedText 4s ease-in-out infinite; }
.mini-match i { animation: checkPop 4s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes scanBeam { 0% { top: 8px; opacity: 0; } 6% { opacity: 1; } 48% { top: calc(100% - 10px); opacity: 1; } 54%, 100% { top: calc(100% - 10px); opacity: 0; } }
@keyframes lineRead { 0% { transform: scaleX(.2); opacity: .4; } 32%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.2); opacity: .4; } }
@keyframes ripple { 0%, 48% { transform: scale(1); opacity: 0; } 52% { opacity: .65; } 80%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes twinkle { 0%, 44%, 80%, 100% { transform: scale(1); } 56% { transform: scale(1.35); } }
@keyframes matchGlow { 0%, 50%, 100% { border-color: var(--light-line); box-shadow: 0 0 0 0 rgba(74, 169, 127, 0); } 58%, 90% { border-color: #4aa97f; box-shadow: 0 0 0 4px rgba(74, 169, 127, .16); } }
@keyframes mappedText { 0%, 50%, 100% { opacity: .45; color: var(--light-soft); } 58%, 90% { opacity: 1; color: #2f8f67; } }
@keyframes checkPop { 0%, 50%, 100% { transform: scale(0); opacity: 0; } 58% { transform: scale(1.3); opacity: 1; } 64%, 90% { transform: scale(1); opacity: 1; } }

/* card 2: ring fills, radar sweep, pills float in */
.ring-value { animation: ringFill 1.8s cubic-bezier(.3, .7, .2, 1) .15s both; }
.signal-ring::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed rgba(79, 111, 196, .4); animation: spin 22s linear infinite; }
.signal-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(79, 111, 196, .5) 100%); -webkit-mask: radial-gradient(circle farthest-side, transparent 74%, #000 75%, #000 93%, transparent 94%); mask: radial-gradient(circle farthest-side, transparent 74%, #000 75%, #000 93%, transparent 94%); animation: spin 3.2s linear infinite; }
.signal-ring div { position: relative; z-index: 1; }
.signal-pill { animation: pillIn .7s cubic-bezier(.2, .8, .2, 1) both, floaty 4.2s ease-in-out infinite; }
.signal-pill:nth-child(1) { animation-delay: .6s, 1.4s; }
.signal-pill:nth-child(2) { animation-delay: .8s, 2.1s; }
.signal-pill:nth-child(3) { animation-delay: 1s, 2.8s; }
.signal-pill:nth-child(2) { color: #3a5ba8; }
.signal-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: dotPulse 1.8s ease-in-out infinite; }
.signal-pill:nth-child(2)::before { animation-delay: .4s; }
.signal-pill:nth-child(3)::before { animation-delay: .8s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ringFill { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 72 100; } }
@keyframes pillIn { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* card 3: bars grow with a shimmer, outlier callout pulses */
.insight-line .meter i { position: relative; overflow: hidden; animation: barGrow 1.5s cubic-bezier(.2, .8, .2, 1) both; }
.insight-line .meter i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-100%); animation: shimmer 3s ease-in-out infinite; }
.insight-line:nth-child(2) .meter i { animation-delay: .15s; } .insight-line:nth-child(2) .meter i::after { animation-delay: 1.6s; }
.insight-line:nth-child(3) .meter i { animation-delay: .35s; } .insight-line:nth-child(3) .meter i::after { animation-delay: 1.9s; }
.insight-line:nth-child(4) .meter i { animation-delay: .55s; } .insight-line:nth-child(4) .meter i::after { animation-delay: 2.2s; }
.insight-line b { font-variant-numeric: tabular-nums; }
.insight-header .ic { animation: nudge 2.2s ease-in-out infinite; }
.insight-callout { display: flex; align-items: center; gap: 9px; animation: calloutIn .7s cubic-bezier(.2, .8, .2, 1) 1s both, calloutGlow 2.6s ease-in-out 2s infinite; }
.insight-callout::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); flex: none; animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes barGrow { from { width: 0; } to { width: var(--w); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 2px -2px; } }
@keyframes calloutIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes calloutGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(241, 151, 87, 0); } 50% { box-shadow: 0 0 0 5px rgba(241, 151, 87, .16); } }

/* ---------- hero, platform and workflow animations ---------- */
/* Nothing runs until the section scrolls into view (.in-view is added by script.js). */
.js .hero-visual:not(.in-view) *, .js .hero-visual:not(.in-view) *::before, .js .hero-visual:not(.in-view) *::after,
.js .platform-layout:not(.in-view) *, .js .platform-layout:not(.in-view) *::before, .js .platform-layout:not(.in-view) *::after,
.js .workflow-detail:not(.in-view) *, .js .workflow-detail:not(.in-view) *::before, .js .workflow-detail:not(.in-view) *::after { animation-play-state: paused; }

@keyframes riseIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes slideIn { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fadeUp { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { opacity: 0; scale: .6; } 70% { scale: 1.1; } 100% { opacity: 1; scale: 1; } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growH { from { height: 0; } to { height: var(--h); } }
@keyframes growW { from { width: 0; } to { width: var(--w); } }
@keyframes meterGrow { from { width: 0; } to { width: var(--v); } }
@keyframes dashRun { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(143, 211, 176, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(143, 211, 176, 0); } }
@keyframes ringPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes orbitA { from { transform: rotate(-15deg); } to { transform: rotate(-8deg); } }
@keyframes orbitB { from { transform: rotate(28deg); } to { transform: rotate(35deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes nudgeX { 0%, 100% { translate: 0 0; } 50% { translate: 3px 0; } }
@keyframes pulseScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes activeGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 111, 196, 0); } 50% { box-shadow: 0 0 20px 2px rgba(79, 111, 196, .5); } }
@keyframes cardGlow { 0%, 100% { border-color: #d3dcf2; box-shadow: 0 0 0 0 rgba(79, 111, 196, 0); } 50% { border-color: #8ea7de; box-shadow: 0 0 0 4px rgba(79, 111, 196, .1); } }

/* shared: live dots, shimmering bars */
.live-dot, .status-pulse { animation: livePulse 2s ease-out infinite; }
.flow-detail .meter i, .match-card .meter i, .batch-gauge .meter i { position: relative; overflow: hidden; animation: meterGrow 1.4s cubic-bezier(.2, .8, .2, 1) .9s both; }
.flow-detail .meter i::after, .match-card .meter i::after, .batch-gauge .meter i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-100%); animation: shimmer 3s ease-in-out 2.4s infinite; }
.meter-thin { display: block; height: 4px; margin-top: 7px; }
.ui-kpis strong span, .metric-card strong span { font-size: inherit; color: inherit; }
.chip-icon .ic, .sparkle .ic, .match-icon .ic { animation: pulseScale 2.4s ease-in-out infinite; }

/* hero dashboard */
.visual-orbit.orbit-one { animation: orbitA 16s ease-in-out infinite alternate; }
.visual-orbit.orbit-two { animation: orbitB 20s ease-in-out infinite alternate; }
.dashboard-window { animation: floatY 8s ease-in-out infinite; }
.chip-left { animation: floatY 6s ease-in-out -2s infinite; }
.chip-right { animation: floatY 7s ease-in-out -4.5s infinite; }
.mock-heading { animation: fadeUp .6s cubic-bezier(.2, .8, .2, 1) .3s both; }
.metric-row .metric-card { animation: riseIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.metric-row .metric-card:nth-child(1) { animation-delay: .45s; }
.metric-row .metric-card:nth-child(2) { animation-delay: .6s; }
.metric-row .metric-card:nth-child(3) { animation-delay: .75s; }
.mock-grid .mock-card { animation: riseIn .7s cubic-bezier(.2, .8, .2, 1) .9s both; }
.mock-grid .mock-card:nth-child(2) { animation-delay: 1.05s; }
.flow-line .flow-node { animation: popIn .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.flow-line .flow-node:nth-child(1) { animation-delay: 1.1s; }
.flow-line .flow-node:nth-child(3) { animation-delay: 1.4s; }
.flow-line .flow-node:nth-child(5) { animation-delay: 1.7s; }
.flow-line .flow-node:nth-child(7) { animation-delay: 2s; }
.flow-connector { position: relative; overflow: hidden; transform-origin: left center; animation: growX .6s ease-out both; }
.flow-connector:nth-child(2) { animation-delay: 1.25s; }
.flow-connector:nth-child(4) { animation-delay: 1.55s; }
.flow-connector:nth-child(6) { animation-delay: 1.85s; }
.flow-connector.active::after, .path-line.active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #4f6fc4, transparent); background-size: 45% 100%; background-repeat: no-repeat; animation: dashRun 1.8s linear 2s infinite; }
.flow-node.active span, .quality-step.current span { position: relative; }
.flow-node.active span::after, .quality-step.current span::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid #4f6fc4; opacity: 0; animation: ringPulse 2s ease-out 1.8s infinite; }
.flow-detail em { font-variant-numeric: tabular-nums; }
.mock-grid .mock-card.signal-card { animation: riseIn .7s cubic-bezier(.2, .8, .2, 1) 1.05s both, cardGlow 3.2s ease-in-out 2.4s infinite; }
.signal-link .ic { animation: nudgeX 1.6s ease-in-out infinite; }

/* platform: control center */
.stage-ui .ui-title-row { animation: fadeUp .5s cubic-bezier(.2, .8, .2, 1) both; }
.ui-kpis > div { animation: riseIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.ui-kpis > div:nth-child(1) { animation-delay: .1s; }
.ui-kpis > div:nth-child(2) { animation-delay: .22s; }
.ui-kpis > div:nth-child(3) { animation-delay: .34s; }
.ui-lower .ui-card { animation: riseIn .6s cubic-bezier(.2, .8, .2, 1) .4s both; }
.ui-lower .ui-card:nth-child(2) { animation-delay: .55s; }
.bar-col i { animation: growH 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.bar-col:nth-child(1) i { animation-delay: .55s; } .bar-col:nth-child(2) i { animation-delay: .62s; }
.bar-col:nth-child(3) i { animation-delay: .69s; } .bar-col:nth-child(4) i { animation-delay: .76s; }
.bar-col:nth-child(5) i { animation-delay: .83s; } .bar-col:nth-child(6) i { animation-delay: .9s; }
.bar-col:nth-child(7) i { animation-delay: .97s; }
.bar-col.is-active i { animation: growH 1.1s cubic-bezier(.2, .8, .2, 1) .9s both, activeGlow 2.6s ease-in-out 2.2s infinite; }
.bar-col span { animation: fadeIn .5s ease-out .9s both; }
.queue-item { animation: slideIn .55s cubic-bezier(.2, .8, .2, 1) both; }
.queue-item:nth-child(2) { animation-delay: .7s; } .queue-item:nth-child(3) { animation-delay: .85s; } .queue-item:nth-child(4) { animation-delay: 1s; }
.dot { position: relative; }
.dot.amber::after, .dot.red::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ringPulse 2s ease-out 1.4s infinite; }
.ui-kpis strong, .queue-count { font-variant-numeric: tabular-nums; }

/* platform: quality trail */
.quality-step { animation: popIn .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.quality-step:nth-child(1) { animation-delay: .2s; } .quality-step:nth-child(3) { animation-delay: .55s; }
.quality-step:nth-child(5) { animation-delay: .9s; } .quality-step:nth-child(7) { animation-delay: 1.25s; }
.path-line { position: relative; overflow: hidden; transform-origin: left center; animation: growX .5s ease-out both; }
.path-line:nth-child(2) { animation-delay: .4s; } .path-line:nth-child(4) { animation-delay: .75s; } .path-line:nth-child(6) { animation-delay: 1.1s; }
.quality-detail > div { animation: riseIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.quality-detail > div:nth-child(1) { animation-delay: 1.2s; } .quality-detail > div:nth-child(2) { animation-delay: 1.35s; } .quality-detail > div:nth-child(3) { animation-delay: 1.5s; }

/* platform: dispatch board */
.dispatch-column { animation: riseIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.dispatch-column:nth-child(1) { animation-delay: .1s; --d: .4s; } .dispatch-column:nth-child(2) { animation-delay: .25s; --d: .55s; } .dispatch-column:nth-child(3) { animation-delay: .4s; --d: .7s; }
.dispatch-order { position: relative; overflow: hidden; animation: slideIn .55s cubic-bezier(.2, .8, .2, 1) var(--d, .4s) both; }
.dispatch-order:nth-child(3) { animation-delay: calc(var(--d, .4s) + .15s); }
.dispatch-order.transit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #4f6fc4, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: dashRun 2s linear infinite; }
.dispatch-order.ready em::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #4aa97f; animation: blink 1.6s ease-in-out infinite; }

/* copy swap when a tab changes (class toggled by script.js) */
.stage-copy.swap > *, .workflow-copy.swap > * { animation: fadeUp .5s cubic-bezier(.2, .8, .2, 1) both; }
.stage-copy.swap > :nth-child(2), .workflow-copy.swap > :nth-child(3) { animation-delay: .06s; }
.stage-copy.swap > :nth-child(3), .workflow-copy.swap > :nth-child(4) { animation-delay: .12s; }
.stage-copy.swap > :nth-child(4), .workflow-copy.swap > :nth-child(5) { animation-delay: .18s; }
.stage-copy.swap > :nth-child(5) { animation-delay: .24s; }
.workflow-copy.swap .workflow-number { animation: popIn .6s cubic-bezier(.3, 1.4, .5, 1) both; }

/* workflow step line fills up to the active step */
.track-line::after { content: ""; position: absolute; left: 0; top: -.5px; height: 2px; width: var(--fill, 0px); background: linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow: 0 0 10px rgba(198, 215, 255, .5); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.workflow-step.active .step-dot { animation: ringGlow 2.4s ease-in-out infinite; }
@keyframes ringGlow { 0%, 100% { box-shadow: 0 0 0 6px rgba(198, 215, 255, .14); } 50% { box-shadow: 0 0 0 10px rgba(198, 215, 255, .04); } }

/* workflow visuals */
.workflow-visual > div { animation: riseIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.workflow-visual > div:nth-child(2) { animation-delay: .25s; }
.doc-card { position: relative; overflow: hidden; }
.doc-card::after { content: ""; position: absolute; left: 18px; right: 18px; top: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #4f6fc4, transparent); box-shadow: 0 0 10px 2px rgba(79, 111, 196, .45); opacity: 0; animation: scanBeam 4s ease-in-out .6s infinite; }
.doc-lines span { transform-origin: left center; animation: lineRead 4s ease-in-out .6s infinite; }
.doc-lines span:nth-child(2) { animation-delay: .8s; } .doc-lines span:nth-child(3) { animation-delay: 1s; } .doc-lines span:nth-child(4) { animation-delay: 1.2s; }
.doc-check { animation: popIn .5s cubic-bezier(.3, 1.4, .5, 1) 1s both; }
.doc-footer strong, .recipe-rows b, .batch-gauge > span { font-variant-numeric: tabular-nums; }
.split-bar { display: flex; gap: 3px; height: 10px; margin: 2px 0 14px; border-radius: 99px; overflow: hidden; }
.split-bar i { display: block; height: 100%; width: var(--w); background: #4f6fc4; animation: growW .6s cubic-bezier(.2, .8, .2, 1) .5s both; }
.split-bar i:nth-child(2) { background: var(--warm); animation-delay: 1s; }
.split-bar i:nth-child(3) { background: #8ea7de; animation-delay: 1.5s; }
.recipe-rows span { animation: slideIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.recipe-rows span:nth-child(1) { animation-delay: .6s; } .recipe-rows span:nth-child(2) { animation-delay: .75s; } .recipe-rows span:nth-child(3) { animation-delay: .9s; }
.recipe-rows i { animation: popIn .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.recipe-rows span:nth-child(1) i { animation-delay: .7s; } .recipe-rows span:nth-child(2) i { animation-delay: .85s; } .recipe-rows span:nth-child(3) i { animation-delay: 1s; }
.recipe-foot strong .ic { animation: nudgeX 1.6s ease-in-out infinite; }
.trace-node { animation: popIn .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.trace-node:nth-child(1) { animation-delay: .3s; } .trace-node:nth-child(3) { animation-delay: .8s; } .trace-node:nth-child(5) { animation-delay: 1.3s; }
.trace-arrow { animation: fadeIn .4s ease-out both, nudgeX 1.4s ease-in-out infinite; }
.trace-chain > .trace-arrow:nth-child(2) { animation-delay: .6s, 1s; } .trace-chain > .trace-arrow:nth-child(4) { animation-delay: 1.1s, 1.5s; }
.trace-node:nth-child(5) i { animation: activeGlow 2.2s ease-in-out 1.8s infinite; }
.trace-live { animation: blink 1.6s ease-in-out infinite; }
.trace-note { animation: fadeUp .6s cubic-bezier(.2, .8, .2, 1) 1.7s both; }
.move-row { animation: slideIn .55s cubic-bezier(.2, .8, .2, 1) both; }
.move-row:nth-child(2) { animation-delay: .3s; } .move-row:nth-child(3) { animation-delay: .45s; } .move-row:nth-child(4) { animation-delay: .6s; }
.status { position: relative; }
.status::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ringPulse 2s ease-out 1s infinite; }
.move-row:nth-child(3) .status::after { animation-delay: 1.4s; } .move-row:nth-child(4) .status::after { animation-delay: 1.8s; }
.move-row > strong { animation: fadeIn .5s ease-out both; }
.move-row:nth-child(2) > strong { animation-delay: .6s; } .move-row:nth-child(3) > strong { animation-delay: .75s; } .move-row:nth-child(4) > strong { animation-delay: .9s; }

/* hero intro on page load: the headline fades in and rises slightly as one block,
   then the text and buttons follow. Start states only apply under .js (set before first paint). */
@keyframes heroFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js .hero-intro > .eyebrow { animation: heroFade .6s cubic-bezier(.2, .8, .2, 1) both; }
.js .hero-intro > .hero-title { animation: heroFade .7s cubic-bezier(.2, .8, .2, 1) .08s both; }
.js .hero-intro > .hero-lede { animation: heroFade .7s cubic-bezier(.2, .8, .2, 1) .28s both; }
.js .hero-intro > .hero-actions { animation: heroFade .7s cubic-bezier(.2, .8, .2, 1) .38s both; }
.js .hero-intro > .hero-proof { animation: heroFade .7s cubic-bezier(.2, .8, .2, 1) .48s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-intro > * { animation: none !important; }
  .intel-visual *, .intel-visual *::before, .intel-visual *::after,
  .hero-visual *, .hero-visual *::before, .hero-visual *::after,
  .stage-ui *, .stage-ui *::before, .stage-ui *::after,
  .workflow-visual-wrap *, .workflow-visual-wrap *::before, .workflow-visual-wrap *::after,
  .workflow-step .step-dot, .stage-copy > *, .workflow-copy > *, .workflow-copy .workflow-number { animation: none !important; }
  .track-line::after { transition: none; }
  .doc-card::after { display: none; }
  .mini-doc::after { display: none; }
  .mini-match i { transform: none; opacity: 1; }
  .signal-ring::after { display: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button, .card, .text-link span { transition: none; }
}