/* ══════════════════════════════════════════════════════════════════════════════ STRAX public site — story stylesheet. Every animated "story" (hero and section visuals: estate diagram, connector wall/footprint, marketplace install/review/sell, home hero, integration-engine hero, connect/disconnect) lives here, one block per prefix, loaded only on pages that render one (ViewData["Stories"]). Tokens and every shared component stay in site.css. Never stagger looped items with animation-delay — give each item its own keyframes so the loop resets together. ══════════════════════════════════════════════════════════════════════════════ */ /* Live integration-estate diagram (features/integration-engine) */ /* Break out of the prose column: centred, always --gutter from the viewport edge, no transform (so no horizontal scroll). */ figure.shot.est-figure { width: min(1040px, calc(100vw - 2 * var(--gutter))); margin-left: calc(50% - min(520px, calc(50vw - var(--gutter)))); } .est-frame { background: var(--surface); } .est-bar { display: flex; align-items: center; gap: var(--s-4); padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-muted); flex-wrap: wrap; } .est-title { color: var(--text); font-weight: 500; } .est-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .est-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-left: 8px; } .est-legend i.in { background: var(--orange); } .est-legend i.out { background: var(--info); } .est-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-right: 4px; animation: est-blink 1.6s ease-in-out infinite; } .est-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); } .est-rail { stroke: #B9C0C8; stroke-width: 1.5; stroke-dasharray: 3 7; } .est-flow { stroke-width: 2.5; stroke-dasharray: 12 72; opacity: .9; } .est-flow.in { stroke: var(--orange); animation: est-in 5.5s linear infinite; } .est-flow.out { stroke: var(--info); animation: est-out 7s linear infinite; } @keyframes est-in { to { stroke-dashoffset: -84; } } @keyframes est-out { to { stroke-dashoffset: 84; } } .est-label rect { fill: var(--surface); stroke: var(--border); } .est-label text { font-size: 10.5px; fill: var(--text-muted); text-anchor: middle; font-weight: 500; } .est-hub rect { fill: var(--surface); stroke: #32C787; stroke-width: 1.5; } .est-hub .est-hub-top { fill: #32C787; stroke: none; } .est-hub-title { font-size: 15px; font-weight: 600; fill: var(--text); } .est-hub-sub { font-size: 10.5px; fill: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; } .est-hub-foot { font-size: 11px; fill: var(--text-2); } .est-ring { fill: none; stroke: #32C787; stroke-width: 1; opacity: 0; transform-origin: 95px 62px; transform-box: fill-box; animation: est-ring 3.6s ease-out infinite; } @keyframes est-ring { 0% { transform: scale(.7); opacity: .35; } 70% { opacity: .06; } 100% { transform: scale(1.6); opacity: 0; } } .est-node .est-card { fill: var(--surface); stroke: var(--c); stroke-width: 1.5; filter: drop-shadow(0 4px 10px rgba(17,20,24,.08)); } .est-node .est-head { fill: var(--c); opacity: .12; } .est-node .est-head-fix { fill: var(--c); opacity: .12; } .est-node .est-icon { fill: var(--c); } .est-name { font-size: 12.5px; font-weight: 600; fill: var(--text); } .est-owner { font-size: 11.5px; fill: var(--text-2); } .est-foot { font-size: 10.5px; fill: var(--text-muted); } .est-dot { fill: var(--success); animation: est-blink 2.4s ease-in-out infinite; } @keyframes est-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .band-dark .est-rail { stroke: #4A535E; } @media (prefers-reduced-motion: reduce) { .est-flow, .est-dot, .est-live { animation: none; } .est-flow { opacity: .45; } .est-ring { animation: none; opacity: .15; transform: none; } } /* Connector wall (features/connectors): engines on top, SaaS marks fading away below */ .wall-figure { margin: 0; } .wall-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); } .wall-engine { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-card); } .wall-engine .wall-mark { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); } .wall-engine .wall-mark svg { width: 24px; height: 24px; fill: currentColor; } .wall-engine .wall-mark.logo img { width: 30px; height: 30px; object-fit: contain; } .wall-engine .wall-mark.glyph svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .wall-engine strong { font-size: 15px; line-height: 1.3; } .wall-engine > span:last-child { font-size: 12.5px; color: var(--text-muted); line-height: 1.3; } .wall-saas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; max-height: 470px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 30%, rgba(0,0,0,.55) 62%, transparent 100%); mask-image: linear-gradient(#000 30%, rgba(0,0,0,.55) 62%, transparent 100%); } .wall-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 11.5px; color: var(--text-muted); text-align: center; line-height: 1.2; min-width: 0; } .wall-tile img { width: 32px; height: 32px; object-fit: contain; } .wall-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.js .wall-tile { opacity: 0; transform: translateY(6px); animation: wall-in .7s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 22ms); } @keyframes wall-in { to { opacity: 1; transform: none; } } .wall-figure figcaption { margin-top: var(--s-3); } /* Growing-footprint columns (connectors page) */ .fp-list { list-style: none; margin-top: var(--s-4); display: grid; gap: 7px; font-size: 14px; color: var(--text-2); } .fp-list li { padding-left: 22px; position: relative; } .fp-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--tint-200); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--orange); } .fp-foot { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--border); display: flex; gap: var(--s-5); align-items: center; justify-content: space-between; flex-wrap: wrap; color: var(--text-2); } .fp-foot p { max-width: 64ch; margin: 0; } @media (prefers-reduced-motion: reduce) { html.js .wall-tile { animation: none; opacity: 1; transform: none; } } /* Marketplace install animation (features/marketplace) — one 8 s loop */ figure.shot.mk-figure { width: min(1040px, calc(100vw - 2 * var(--gutter))); margin-left: calc(50% - min(520px, calc(50vw - var(--gutter)))); } .mk-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); } .mk-panel { fill: var(--bg); stroke: var(--border); } .mk-panel-title { font-size: 16px; font-weight: 600; fill: var(--text); } .mk-panel-sub { font-size: 12px; fill: var(--text-muted); } .mk-card { fill: var(--surface); stroke: var(--border); filter: drop-shadow(0 4px 10px rgba(17,20,24,.08)); } .mk-icon-bg { fill: var(--tint-100); } .mk-icon { color: var(--amber-900); } .mk-card-title { font-size: 14px; font-weight: 600; fill: var(--text); } .mk-card-sub { font-size: 12px; fill: var(--text-muted); } .mk-chips rect { fill: var(--surface-2); } .mk-chips text { font-size: 11px; font-weight: 500; fill: var(--text-2); text-anchor: middle; } .mk-ok { font-size: 11.5px; fill: var(--success-text); font-weight: 500; } .mk-btn rect { fill: var(--orange); } .mk-btn text { font-size: 13px; font-weight: 600; fill: var(--carbon); } .mk-btn { transform-box: fill-box; transform-origin: center; animation: mk-press 8s ease-out infinite; } .mk-ring { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: mk-ring 8s ease-out infinite; } .mk-others rect { fill: var(--surface); stroke: var(--border); } .mk-others text { font-size: 12px; fill: var(--text-2); } .mk-others .mk-dim { fill: var(--text-muted); font-size: 11px; } .mk-rail { fill: none; stroke: #B9C0C8; stroke-width: 1.5; stroke-dasharray: 3 7; } .mk-pkg-bg { fill: var(--orange); filter: drop-shadow(0 6px 12px rgba(255,176,0,.45)); } .mk-pkg-icon { color: var(--carbon); } .mk-target-bg { fill: var(--surface); stroke: var(--border); stroke-dasharray: 4 4; } .mk-target-icon { color: var(--text-muted); } .mk-target-title { font-size: 13px; font-weight: 600; fill: var(--text); } .mk-target-sub { font-size: 10.5px; fill: var(--text-muted); } .mk-target { opacity: .38; animation: 8s ease-out infinite; } .mk-check circle { fill: var(--success); } .mk-check path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .mk-check { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 8s cubic-bezier(.22,1,.36,1) infinite; } .mk-track { fill: var(--surface-2); } .mk-fill { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: mk-fill 8s linear infinite; } .mk-status { font-size: 12.5px; fill: var(--text-2); opacity: 0; animation: 8s linear infinite; } .mk-status-idle { animation-name: mk-idle; } .mk-status-busy { animation-name: mk-busy; } .mk-status-done { animation-name: mk-done; font-weight: 500; fill: var(--success-text); } .mk-next rect { fill: var(--surface); stroke: var(--border); } .mk-next text { font-size: 12px; fill: var(--text-2); font-weight: 500; } .mk-next { opacity: 0; animation: mk-done 8s linear infinite; } @keyframes mk-press { 0%, 9% { transform: scale(1); } 11% { transform: scale(.94); } 14%, 100% { transform: scale(1); } } @keyframes mk-ring { 0%, 8% { transform: scale(1); opacity: 0; } 10% { opacity: .6; } 18%, 100% { transform: scale(2.6); opacity: 0; } } .mk-target-0 { animation-name: mk-on-0; } .mk-target-0 .mk-check { animation-name: mk-pop-0; } .mk-target-1 { animation-name: mk-on-1; } .mk-target-1 .mk-check { animation-name: mk-pop-1; } .mk-target-2 { animation-name: mk-on-2; } .mk-target-2 .mk-check { animation-name: mk-pop-2; } .mk-target-3 { animation-name: mk-on-3; } .mk-target-3 .mk-check { animation-name: mk-pop-3; } .mk-target-4 { animation-name: mk-on-4; } .mk-target-4 .mk-check { animation-name: mk-pop-4; } @keyframes mk-on-0 { 0%, 31% { opacity: .38; } 36%, 100% { opacity: 1; } } @keyframes mk-pop-0 { 0%, 31% { transform: scale(0); } 35% { transform: scale(1.2); } 38%, 100% { transform: scale(1); } } @keyframes mk-on-1 { 0%, 36% { opacity: .38; } 41%, 100% { opacity: 1; } } @keyframes mk-pop-1 { 0%, 36% { transform: scale(0); } 40% { transform: scale(1.2); } 43%, 100% { transform: scale(1); } } @keyframes mk-on-2 { 0%, 41% { opacity: .38; } 46%, 100% { opacity: 1; } } @keyframes mk-pop-2 { 0%, 41% { transform: scale(0); } 45% { transform: scale(1.2); } 48%, 100% { transform: scale(1); } } @keyframes mk-on-3 { 0%, 46% { opacity: .38; } 51%, 100% { opacity: 1; } } @keyframes mk-pop-3 { 0%, 46% { transform: scale(0); } 50% { transform: scale(1.2); } 53%, 100% { transform: scale(1); } } @keyframes mk-on-4 { 0%, 51% { opacity: .38; } 56%, 100% { opacity: 1; } } @keyframes mk-pop-4 { 0%, 51% { transform: scale(0); } 55% { transform: scale(1.2); } 58%, 100% { transform: scale(1); } } @keyframes mk-fill { 0%, 29% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } } @keyframes mk-idle { 0%, 10% { opacity: 1; } 13%, 100% { opacity: 0; } } @keyframes mk-busy { 0%, 13% { opacity: 0; } 16%, 58% { opacity: 1; } 61%, 100% { opacity: 0; } } @keyframes mk-done { 0%, 60% { opacity: 0; } 64%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mk-pkg { display: none; } .mk-btn, .mk-ring, .mk-target, .mk-check, .mk-fill, .mk-status, .mk-next { animation: none; } .mk-target, .mk-next, .mk-status-done { opacity: 1; } .mk-check { transform: none; } .mk-fill { transform: none; } .mk-status-idle, .mk-status-busy { opacity: 0; } .mk-target-bg { stroke-dasharray: none; } } /* Marketplace review → listing → distribution animation (features/marketplace) — one 12 s loop */ figure.shot.mr-figure { width: min(1040px, calc(100vw - 2 * var(--gutter))); margin-left: calc(50% - min(520px, calc(50vw - var(--gutter)))); } .mr-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); } .mr-panel { fill: var(--bg); stroke: var(--border); } .mr-panel-title { font-size: 16px; font-weight: 600; fill: var(--text); } .mr-panel-sub { font-size: 12px; fill: var(--text-muted); } .mr-rails use { fill: none; stroke: #B9C0C8; stroke-width: 1.5; stroke-dasharray: 3 7; } .mr-pkg-bg { fill: var(--orange); filter: drop-shadow(0 6px 12px rgba(255,176,0,.45)); } .mr-pkg-icon { color: var(--carbon); } .mr-card > rect, .mr-listing > rect { fill: var(--surface); stroke: var(--border); filter: drop-shadow(0 4px 10px rgba(17,20,24,.08)); } .mr-icon-bg { fill: var(--tint-100); } .mr-icon { color: var(--amber-900); } .mr-card-title { font-size: 14px; font-weight: 600; fill: var(--text); } .mr-card-sub { font-size: 12px; fill: var(--text-muted); } .mr-chips rect, .mr-pills rect { fill: var(--surface-2); } .mr-chips text, .mr-pills text { font-size: 11px; font-weight: 500; fill: var(--text-2); text-anchor: middle; } .mr-pills .ok rect { fill: var(--success-tint); } .mr-pills .ok text { fill: var(--success-text); } .mr-others rect { fill: var(--surface); stroke: var(--border); opacity: .6; } .mr-others text { font-size: 12px; fill: var(--text-muted); } .mr-row text { font-size: 13px; fill: var(--text-2); } .mr-row-ring { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 4 3; animation: mr-spin 1.2s linear infinite; transform-box: fill-box; transform-origin: center; } .mr-check circle, .mr-tick circle { fill: var(--success); } .mr-check path, .mr-tick path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mr-check { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 12s cubic-bezier(.22,1,.36,1) infinite; } .mr-stamp rect { fill: var(--carbon); stroke: var(--orange); stroke-width: 2.5; filter: drop-shadow(0 10px 22px rgba(255,176,0,.35)); } .mr-stamp-t1 { font-size: 16px; font-weight: 700; letter-spacing: .08em; fill: var(--orange); } .mr-stamp-t2 { font-size: 11.5px; fill: #DDE2E7; } .mr-stamp { transform-box: fill-box; transform-origin: center; transform: scale(1.35); opacity: 0; animation: mr-stamp 12s cubic-bezier(.22,1,.36,1) infinite; } .mr-card { animation: mr-fade 12s ease-out infinite; } .mr-listing { opacity: 0; animation: mr-listing 12s ease-out infinite; } .mr-tile { opacity: .38; animation: 12s ease-out infinite; } .mr-tile-bg { fill: var(--surface); stroke: var(--border); stroke-dasharray: 4 4; } .mr-tile-title { font-size: 13px; font-weight: 600; fill: var(--text); } .mr-tile-sub { font-size: 11px; fill: var(--amber-text); font-weight: 500; } .mr-tick { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 12s cubic-bezier(.22,1,.36,1) infinite; } .mr-status { font-size: 12.5px; fill: var(--text-2); opacity: 0; animation: 12s linear infinite; } .mr-status-idle { animation-name: mr-idle; } .mr-status-busy { animation-name: mr-busy; } .mr-status-done { animation-name: mr-done; font-weight: 500; fill: var(--success-text); } @keyframes mr-spin { to { transform: rotate(360deg); } } @keyframes mr-fade { 0% { opacity: 0; } 4%, 100% { opacity: 1; } } .mr-row-0 .mr-check { animation-name: mr-pop-0; } .mr-row-1 .mr-check { animation-name: mr-pop-1; } .mr-row-2 .mr-check { animation-name: mr-pop-2; } .mr-row-3 .mr-check { animation-name: mr-pop-3; } @keyframes mr-pop-0 { 0%, 5% { transform: scale(0); } 8% { transform: scale(1.2); } 10%, 100% { transform: scale(1); } } @keyframes mr-pop-1 { 0%, 9% { transform: scale(0); } 12% { transform: scale(1.2); } 14%, 100% { transform: scale(1); } } @keyframes mr-pop-2 { 0%, 13% { transform: scale(0); } 16% { transform: scale(1.2); } 18%, 100% { transform: scale(1); } } @keyframes mr-pop-3 { 0%, 17% { transform: scale(0); } 20% { transform: scale(1.2); } 22%, 100% { transform: scale(1); } } @keyframes mr-stamp { 0%, 22% { transform: scale(1.35); opacity: 0; } 24.5% { transform: scale(.96); opacity: 1; } 26%, 100% { transform: scale(1); opacity: 1; } } @keyframes mr-listing { 0%, 31% { opacity: 0; transform: translateY(10px); } 35%, 100% { opacity: 1; transform: none; } } .mr-tile-0 { animation-name: mr-on-0; } .mr-tile-0 .mr-tick { animation-name: mr-tick-0; } .mr-tile-1 { animation-name: mr-on-1; } .mr-tile-1 .mr-tick { animation-name: mr-tick-1; } .mr-tile-2 { animation-name: mr-on-2; } .mr-tile-2 .mr-tick { animation-name: mr-tick-2; } .mr-tile-3 { animation-name: mr-on-3; } .mr-tile-3 .mr-tick { animation-name: mr-tick-3; } .mr-tile-4 { animation-name: mr-on-4; } .mr-tile-4 .mr-tick { animation-name: mr-tick-4; } .mr-tile-5 { animation-name: mr-on-5; } .mr-tile-5 .mr-tick { animation-name: mr-tick-5; } @keyframes mr-on-0 { 0%, 49% { opacity: .38; } 52%, 100% { opacity: 1; } } @keyframes mr-tick-0 { 0%, 49% { transform: scale(0); } 52% { transform: scale(1.2); } 54%, 100% { transform: scale(1); } } @keyframes mr-on-1 { 0%, 53% { opacity: .38; } 56%, 100% { opacity: 1; } } @keyframes mr-tick-1 { 0%, 53% { transform: scale(0); } 56% { transform: scale(1.2); } 58%, 100% { transform: scale(1); } } @keyframes mr-on-2 { 0%, 57% { opacity: .38; } 60%, 100% { opacity: 1; } } @keyframes mr-tick-2 { 0%, 57% { transform: scale(0); } 60% { transform: scale(1.2); } 62%, 100% { transform: scale(1); } } @keyframes mr-on-3 { 0%, 61% { opacity: .38; } 64%, 100% { opacity: 1; } } @keyframes mr-tick-3 { 0%, 61% { transform: scale(0); } 64% { transform: scale(1.2); } 66%, 100% { transform: scale(1); } } @keyframes mr-on-4 { 0%, 65% { opacity: .38; } 68%, 100% { opacity: 1; } } @keyframes mr-tick-4 { 0%, 65% { transform: scale(0); } 68% { transform: scale(1.2); } 70%, 100% { transform: scale(1); } } @keyframes mr-on-5 { 0%, 69% { opacity: .38; } 72%, 100% { opacity: 1; } } @keyframes mr-tick-5 { 0%, 69% { transform: scale(0); } 72% { transform: scale(1.2); } 74%, 100% { transform: scale(1); } } @keyframes mr-idle { 0%, 39% { opacity: 1; } 42%, 100% { opacity: 0; } } @keyframes mr-busy { 0%, 41% { opacity: 0; } 44%, 71% { opacity: 1; } 74%, 100% { opacity: 0; } } @keyframes mr-done { 0%, 73% { opacity: 0; } 76%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mr-pkg { display: none; } .mr-row-ring, .mr-check, .mr-stamp, .mr-card, .mr-listing, .mr-tile, .mr-tick, .mr-status { animation: none; } .mr-row-ring { opacity: 0; } .mr-check, .mr-tick { transform: none; } .mr-stamp { transform: none; opacity: 1; } .mr-listing, .mr-tile, .mr-status-done { opacity: 1; } .mr-status-idle, .mr-status-busy { opacity: 0; } .mr-tile-bg { stroke-dasharray: none; } } /* Marketplace package → list → sell → share animation (features/marketplace) — one 12 s loop */ figure.shot.ms-figure { width: min(1040px, calc(100vw - 2 * var(--gutter))); margin-left: calc(50% - min(520px, calc(50vw - var(--gutter)))); } .ms-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); } .ms-panel { fill: var(--bg); stroke: var(--border); } .ms-panel-title { font-size: 16px; font-weight: 600; fill: var(--text); } .ms-panel-sub { font-size: 12px; fill: var(--text-muted); } .ms-rails use { fill: none; stroke: #B9C0C8; stroke-width: 1.5; stroke-dasharray: 3 7; } .ms-pkg-bg { fill: var(--orange); filter: drop-shadow(0 6px 12px rgba(255,176,0,.45)); } .ms-pkg-icon { color: var(--carbon); } .ms-coin-bg { fill: var(--orange); stroke: var(--amber-900); stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(255,176,0,.45)); } .ms-coin-icon { color: var(--carbon); } .ms-item-bg { fill: var(--surface); stroke: var(--border); } .ms-icon-bg { fill: var(--tint-100); } .ms-icon { color: var(--amber-900); } .ms-item-title { font-size: 13px; font-weight: 600; fill: var(--text); } .ms-item-sub { font-size: 11px; fill: var(--text-muted); } .ms-item { transform-box: fill-box; transform-origin: center; animation: 12s cubic-bezier(.4,0,.2,1) infinite; } .ms-sel circle, .ms-tick circle, .ms-paytick circle { fill: var(--success); } .ms-sel path, .ms-tick path, .ms-paytick path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ms-sel { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 12s cubic-bezier(.22,1,.36,1) infinite; } .ms-card, .ms-listing > rect { fill: var(--surface); stroke: var(--border); filter: drop-shadow(0 4px 10px rgba(17,20,24,.08)); } .ms-card-title { font-size: 14px; font-weight: 600; fill: var(--text); } .ms-card-sub { font-size: 12px; fill: var(--text-muted); } .ms-track { fill: var(--surface-2); } .ms-fill { fill: var(--success); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: ms-fill 12s ease-out infinite; } .ms-step { font-size: 12px; fill: var(--text-2); opacity: 0; animation: 12s linear infinite; } .ms-step-1 { animation-name: ms-s1; } .ms-step-2 { animation-name: ms-s2; } .ms-step-3 { animation-name: ms-s3; fill: var(--success-text); font-weight: 500; } .ms-others rect { fill: var(--surface); stroke: var(--border); opacity: .6; } .ms-others text { font-size: 12px; fill: var(--text-muted); } .ms-listing { opacity: 0; animation: ms-listing 12s ease-out infinite; } .ms-pills rect { fill: var(--surface-2); } .ms-pills text { font-size: 11px; font-weight: 500; fill: var(--text-2); text-anchor: middle; } .ms-pills .ok rect { fill: var(--success-tint); } .ms-pills .ok text { fill: var(--success-text); } .ms-pills .prem rect { fill: var(--tint-100); } .ms-pills .prem text { fill: var(--amber-900); } .ms-tile-bg { fill: var(--surface); stroke: var(--border); stroke-dasharray: 4 4; } .ms-tile-title { font-size: 11.5px; font-weight: 600; fill: var(--text); } .ms-tile-sub { font-size: 11px; fill: var(--amber-text); font-weight: 500; } .ms-buyer { opacity: .38; animation: 12s ease-out infinite; } .ms-tick { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 12s cubic-bezier(.22,1,.36,1) infinite; } .ms-ledger { fill: var(--carbon); } .ms-ledger-title { font-size: 12px; font-weight: 600; fill: var(--light); } .ms-ledger-n { font-size: 11px; fill: #DDE2E7; opacity: 0; animation: 12s linear infinite; } .ms-l0 { animation-name: ms-l0; } .ms-l1 { animation-name: ms-l1; } .ms-l2 { animation-name: ms-l2; } .ms-l3 { animation-name: ms-l3; fill: var(--orange); font-weight: 600; } .ms-pay { opacity: .38; animation: ms-pay 12s ease-out infinite; } .ms-paytick { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: ms-paytick 12s cubic-bezier(.22,1,.36,1) infinite; } .ms-status { font-size: 12.5px; fill: var(--text-2); opacity: 0; animation: 12s linear infinite; } .ms-status-idle { animation-name: ms-idle; } .ms-status-busy { animation-name: ms-busy; } .ms-status-done { animation-name: ms-done; font-weight: 500; fill: var(--success-text); } .ms-item-0 { animation-name: ms-item-0; } .ms-item-0 .ms-sel { animation-name: ms-sel-0; } .ms-item-1 { animation-name: ms-item-1; } .ms-item-1 .ms-sel { animation-name: ms-sel-1; } .ms-item-2 { animation-name: ms-item-2; } .ms-item-2 .ms-sel { animation-name: ms-sel-2; } .ms-item-3 { animation-name: ms-item-3; } .ms-item-3 .ms-sel { animation-name: ms-sel-3; } .ms-item-4 { animation-name: ms-item-4; } .ms-item-4 .ms-sel { animation-name: ms-sel-4; } .ms-item-5 { animation-name: ms-item-5; } .ms-item-5 .ms-sel { animation-name: ms-sel-5; } @keyframes ms-item-0 { 0%, 22% { transform: none; opacity: 1; } 27% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.12); opacity: 0; } 27.5% { transform: none; opacity: 0; } 31%, 100% { transform: none; opacity: .35; } } @keyframes ms-sel-0 { 0%, 4% { transform: scale(0); } 6% { transform: scale(1.2); } 7.5%, 100% { transform: scale(1); } } @keyframes ms-item-1 { 0%, 23% { transform: none; opacity: 1; } 28% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.12); opacity: 0; } 28.5% { transform: none; opacity: 0; } 32%, 100% { transform: none; opacity: .35; } } @keyframes ms-sel-1 { 0%, 7% { transform: scale(0); } 9% { transform: scale(1.2); } 10.5%, 100% { transform: scale(1); } } @keyframes ms-item-2 { 0%, 24% { transform: none; opacity: 1; } 29% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.12); opacity: 0; } 29.5% { transform: none; opacity: 0; } 33%, 100% { transform: none; opacity: .35; } } @keyframes ms-sel-2 { 0%, 10% { transform: scale(0); } 12% { transform: scale(1.2); } 13.5%, 100% { transform: scale(1); } } @keyframes ms-item-3 { 0%, 25% { transform: none; opacity: 1; } 30% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.12); opacity: 0; } 30.5% { transform: none; opacity: 0; } 34%, 100% { transform: none; opacity: .35; } } @keyframes ms-sel-3 { 0%, 13% { transform: scale(0); } 15% { transform: scale(1.2); } 16.5%, 100% { transform: scale(1); } } @keyframes ms-item-4 { 0%, 26% { transform: none; opacity: 1; } 31% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.12); opacity: 0; } 31.5% { transform: none; opacity: 0; } 35%, 100% { transform: none; opacity: .35; } } @keyframes ms-sel-4 { 0%, 16% { transform: scale(0); } 18% { transform: scale(1.2); } 19.5%, 100% { transform: scale(1); } } @keyframes ms-item-5 { 0%, 27% { transform: none; opacity: 1; } 32% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.12); opacity: 0; } 32.5% { transform: none; opacity: 0; } 36%, 100% { transform: none; opacity: .35; } } @keyframes ms-sel-5 { 0%, 19% { transform: scale(0); } 21% { transform: scale(1.2); } 22.5%, 100% { transform: scale(1); } } @keyframes ms-fill { 0%, 22% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } } @keyframes ms-s1 { 0%, 20% { opacity: 1; } 22%, 100% { opacity: 0; } } @keyframes ms-s2 { 0%, 21% { opacity: 0; } 23%, 29% { opacity: 1; } 31%, 100% { opacity: 0; } } @keyframes ms-s3 { 0%, 30% { opacity: 0; } 32%, 100% { opacity: 1; } } @keyframes ms-listing { 0%, 35% { opacity: 0; transform: translateY(10px); } 39%, 100% { opacity: 1; transform: none; } } .ms-buyer-0 { animation-name: ms-buyer-0; } .ms-buyer-0 .ms-tick { animation-name: ms-tick-0; } .ms-buyer-1 { animation-name: ms-buyer-1; } .ms-buyer-1 .ms-tick { animation-name: ms-tick-1; } .ms-buyer-2 { animation-name: ms-buyer-2; } .ms-buyer-2 .ms-tick { animation-name: ms-tick-2; } @keyframes ms-buyer-0 { 0%, 45% { opacity: .38; } 48%, 100% { opacity: 1; } } @keyframes ms-tick-0 { 0%, 45% { transform: scale(0); } 48% { transform: scale(1.2); } 50%, 100% { transform: scale(1); } } @keyframes ms-buyer-1 { 0%, 51% { opacity: .38; } 54%, 100% { opacity: 1; } } @keyframes ms-tick-1 { 0%, 51% { transform: scale(0); } 54% { transform: scale(1.2); } 56%, 100% { transform: scale(1); } } @keyframes ms-buyer-2 { 0%, 57% { opacity: .38; } 60%, 100% { opacity: 1; } } @keyframes ms-tick-2 { 0%, 57% { transform: scale(0); } 60% { transform: scale(1.2); } 62%, 100% { transform: scale(1); } } @keyframes ms-l0 { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes ms-l1 { 0%, 50% { opacity: 0; } 51%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } } @keyframes ms-l2 { 0%, 56% { opacity: 0; } 57%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } } @keyframes ms-l3 { 0%, 62% { opacity: 0; } 63%, 100% { opacity: 1; } } @keyframes ms-pay { 0%, 55% { opacity: .38; } 58%, 100% { opacity: 1; } } @keyframes ms-paytick { 0%, 55% { transform: scale(0); } 58% { transform: scale(1.2); } 60%, 100% { transform: scale(1); } } @keyframes ms-idle { 0%, 35% { opacity: 1; } 38%, 100% { opacity: 0; } } @keyframes ms-busy { 0%, 37% { opacity: 0; } 40%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } } @keyframes ms-done { 0%, 72% { opacity: 0; } 75%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ms-pkg, .ms-coin { display: none; } .ms-item, .ms-sel, .ms-fill, .ms-step, .ms-listing, .ms-buyer, .ms-tick, .ms-ledger-n, .ms-pay, .ms-paytick, .ms-status { animation: none; } .ms-item { transform: none; opacity: .35; } .ms-sel, .ms-tick, .ms-paytick, .ms-fill { transform: none; } .ms-step-3, .ms-listing, .ms-buyer, .ms-pay, .ms-l3, .ms-status-done { opacity: 1; } .ms-step-1, .ms-step-2, .ms-l0, .ms-l1, .ms-l2, .ms-status-idle, .ms-status-busy { opacity: 0; } .ms-tile-bg { stroke-dasharray: none; } } /* Home hero: strategy → processes → mapping → gaps → proposal → built (one 16 s loop, six stages) */ .ss-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .ss-rail { stroke: var(--border); stroke-width: 2; stroke-dasharray: 3 5; } .ss-dot { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.5; } .ss-num { font-size: 12px; font-weight: 600; fill: var(--text-muted); text-anchor: middle; } .ss-label { font-size: 14.5px; font-weight: 500; fill: var(--text); } .ss-step { opacity: .45; animation: 16s ease-out infinite; } .ss-step .ss-dot { animation: 16s ease-out infinite; } .ss-step .ss-num { animation: 16s ease-out infinite; } .ss-stage-bg { fill: var(--bg); stroke: var(--border); } .ss-stage { opacity: 0; animation: 16s ease-in-out infinite; } .ss-card { fill: var(--surface-2); stroke: var(--border); } .ss-pill { fill: rgba(255,176,0,.16); } .ss-pill-t { font-size: 11px; font-weight: 600; fill: var(--orange); text-anchor: middle; } .ss-h { font-size: 19px; font-weight: 600; fill: var(--text); letter-spacing: -.01em; } .ss-small-h { font-size: 12.5px; font-weight: 600; fill: var(--text); } .ss-cap { font-size: 11.5px; fill: var(--text-muted); } .ss-big { font-size: 26px; font-weight: 600; fill: var(--text); letter-spacing: -.02em; } .ss-warn { fill: var(--warning); } .ss-good { fill: var(--success); } .ss-lines rect { fill: var(--border); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: ss-write 16s ease-out infinite; } .ss-ico { color: var(--orange); } .ss-link { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 4; } .ss-ev { fill: none; stroke: var(--text-muted); stroke-width: 2; } .ss-ev-end { stroke-width: 3.5; } .ss-flow { stroke: var(--text-muted); stroke-width: 1.5; } .ss-task { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; } .ss-task-t { font-size: 10.5px; font-weight: 600; fill: var(--text); text-anchor: middle; } .ss-lane { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--text-muted); } .ss-chips rect { fill: var(--surface-2); stroke: var(--border); } .ss-chips text { font-size: 10.5px; font-weight: 500; fill: var(--text); text-anchor: middle; } .ss-maplines path { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 400; stroke-dashoffset: 400; animation: ss-draw 16s ease-out infinite; opacity: .8; } .ss-gap-ring { fill: rgba(255,122,48,.14); stroke: var(--warning); stroke-width: 2; } .ss-ok-ring { fill: rgba(50,199,135,.14); stroke: var(--success); stroke-width: 2; } .ss-badge rect { fill: var(--warning); } .ss-badge text { font-size: 10.5px; font-weight: 700; fill: var(--carbon); text-anchor: middle; } .ss-badge.ss-ok rect { fill: var(--success); } .ss-badge { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 16s cubic-bezier(.22,1,.36,1) infinite; } .ss-badge-1 { animation-name: ss-pop-1; } .ss-badge-2 { animation-name: ss-pop-2; } .ss-badge.ss-ok { animation-name: ss-pop-ok; } .ss-prop rect { fill: var(--surface); stroke: var(--border); } .ss-btn rect { fill: var(--orange); } .ss-btn text { font-size: 13px; font-weight: 600; fill: var(--carbon); text-anchor: middle; } .ss-btn { transform-box: fill-box; transform-origin: center; animation: ss-press 16s ease-in-out infinite; } .ss-btn-ghost { fill: none; stroke: var(--border-strong); } .ss-btn-ghost-t { font-size: 13px; font-weight: 600; fill: var(--text); text-anchor: middle; } .ss-accepted { opacity: 0; animation: ss-accepted 16s linear infinite; } .ss-accepted-t { fill: var(--success); font-weight: 500; } .ss-cap-s { font-size: 10.5px; } .ss-tick { fill: var(--success); } .ss-tick-p { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ss-guide { stroke: var(--orange); } .ss-built { opacity: 0; animation: 16s ease-out infinite; } .ss-built-1 { animation-name: ss-built-1; } .ss-built-2 { animation-name: ss-built-2; } .ss-built-3 { animation-name: ss-built-3; } /* stage windows: 1 0–15 · 2 15–31 · 3 31–47 · 4 47–62 · 5 62–79 · 6 79–100 */ .ss-s1 { animation-name: ss-s1; } .ss-s2 { animation-name: ss-s2; } .ss-s3 { animation-name: ss-s3; } .ss-s4 { animation-name: ss-s4; } .ss-s5 { animation-name: ss-s5; } .ss-s6 { animation-name: ss-s6; } @keyframes ss-s1 { 0%, 1% { opacity: 0; } 3%, 13% { opacity: 1; } 15%, 100% { opacity: 0; } } @keyframes ss-s2 { 0%, 15% { opacity: 0; } 17%, 29% { opacity: 1; } 31%, 100% { opacity: 0; } } @keyframes ss-s3 { 0%, 31% { opacity: 0; } 33%, 45% { opacity: 1; } 47%, 100% { opacity: 0; } } @keyframes ss-s4 { 0%, 47% { opacity: 0; } 49%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } } @keyframes ss-s5 { 0%, 62% { opacity: 0; } 64%, 77% { opacity: 1; } 79%, 100% { opacity: 0; } } @keyframes ss-s6 { 0%, 79% { opacity: 0; } 81%, 98% { opacity: 1; } 100% { opacity: 0; } } .ss-step-1 { animation-name: ss-st-1; } .ss-step-1 .ss-dot { animation-name: ss-dot-1; } .ss-step-1 .ss-num { animation-name: ss-num-1; } .ss-step-2 { animation-name: ss-st-2; } .ss-step-2 .ss-dot { animation-name: ss-dot-2; } .ss-step-2 .ss-num { animation-name: ss-num-2; } .ss-step-3 { animation-name: ss-st-3; } .ss-step-3 .ss-dot { animation-name: ss-dot-3; } .ss-step-3 .ss-num { animation-name: ss-num-3; } .ss-step-4 { animation-name: ss-st-4; } .ss-step-4 .ss-dot { animation-name: ss-dot-4; } .ss-step-4 .ss-num { animation-name: ss-num-4; } .ss-step-5 { animation-name: ss-st-5; } .ss-step-5 .ss-dot { animation-name: ss-dot-5; } .ss-step-5 .ss-num { animation-name: ss-num-5; } .ss-step-6 { animation-name: ss-st-6; } .ss-step-6 .ss-dot { animation-name: ss-dot-6; } .ss-step-6 .ss-num { animation-name: ss-num-6; } @keyframes ss-st-1 { 0%, 1% { opacity: .45; } 3%, 14% { opacity: 1; } 16%, 100% { opacity: .7; } } @keyframes ss-st-2 { 0%, 15% { opacity: .45; } 17%, 30% { opacity: 1; } 32%, 100% { opacity: .7; } } @keyframes ss-st-3 { 0%, 31% { opacity: .45; } 33%, 46% { opacity: 1; } 48%, 100% { opacity: .7; } } @keyframes ss-st-4 { 0%, 47% { opacity: .45; } 49%, 61% { opacity: 1; } 63%, 100% { opacity: .7; } } @keyframes ss-st-5 { 0%, 62% { opacity: .45; } 64%, 78% { opacity: 1; } 80%, 100% { opacity: .7; } } @keyframes ss-st-6 { 0%, 79% { opacity: .45; } 81%, 100% { opacity: 1; } } @keyframes ss-dot-1 { 0%, 1% { fill: var(--surface-2); } 3%, 14% { fill: var(--orange); } 16%, 100% { fill: var(--success); } } @keyframes ss-dot-2 { 0%, 15% { fill: var(--surface-2); } 17%, 30% { fill: var(--orange); } 32%, 100% { fill: var(--success); } } @keyframes ss-dot-3 { 0%, 31% { fill: var(--surface-2); } 33%, 46% { fill: var(--orange); } 48%, 100% { fill: var(--success); } } @keyframes ss-dot-4 { 0%, 47% { fill: var(--surface-2); } 49%, 61% { fill: var(--orange); } 63%, 100% { fill: var(--success); } } @keyframes ss-dot-5 { 0%, 62% { fill: var(--surface-2); } 64%, 78% { fill: var(--orange); } 80%, 100% { fill: var(--success); } } @keyframes ss-dot-6 { 0%, 79% { fill: var(--surface-2); } 81%, 100% { fill: var(--orange); } } @keyframes ss-num-1 { 0%, 1% { fill: var(--text-muted); } 3%, 100% { fill: var(--carbon); } } @keyframes ss-num-2 { 0%, 15% { fill: var(--text-muted); } 17%, 100% { fill: var(--carbon); } } @keyframes ss-num-3 { 0%, 31% { fill: var(--text-muted); } 33%, 100% { fill: var(--carbon); } } @keyframes ss-num-4 { 0%, 47% { fill: var(--text-muted); } 49%, 100% { fill: var(--carbon); } } @keyframes ss-num-5 { 0%, 62% { fill: var(--text-muted); } 64%, 100% { fill: var(--carbon); } } @keyframes ss-num-6 { 0%, 79% { fill: var(--text-muted); } 81%, 100% { fill: var(--carbon); } } @keyframes ss-write { 0%, 3% { transform: scaleX(0); } 9%, 100% { transform: scaleX(1); } } @keyframes ss-draw { 0%, 33% { stroke-dashoffset: 400; } 42%, 100% { stroke-dashoffset: 0; } } @keyframes ss-pop-1 { 0%, 51% { transform: scale(0); } 53% { transform: scale(1.15); } 54.5%, 100% { transform: scale(1); } } @keyframes ss-pop-2 { 0%, 54% { transform: scale(0); } 56% { transform: scale(1.15); } 57.5%, 100% { transform: scale(1); } } @keyframes ss-pop-ok { 0%, 81% { transform: scale(0); } 83% { transform: scale(1.15); } 84.5%, 100% { transform: scale(1); } } @keyframes ss-press { 0%, 71% { transform: scale(1); } 72% { transform: scale(.94); } 73%, 100% { transform: scale(1); } } @keyframes ss-accepted { 0%, 73% { opacity: 0; } 75%, 100% { opacity: 1; } } @keyframes ss-built-1 { 0%, 82% { opacity: 0; } 85%, 100% { opacity: 1; } } @keyframes ss-built-2 { 0%, 85% { opacity: 0; } 88%, 100% { opacity: 1; } } @keyframes ss-built-3 { 0%, 88% { opacity: 0; } 91%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ss-step, .ss-step .ss-dot, .ss-step .ss-num, .ss-stage, .ss-lines rect, .ss-maplines path, .ss-badge, .ss-btn, .ss-accepted, .ss-built { animation: none; } .ss-step { opacity: .7; } .ss-step-6 { opacity: 1; } .ss-step .ss-dot { fill: var(--success); } .ss-step-6 .ss-dot { fill: var(--orange); } .ss-step .ss-num { fill: var(--carbon); } .ss-s6, .ss-built, .ss-accepted { opacity: 1; } .ss-badge { transform: none; } .ss-lines rect { transform: none; } .ss-maplines path { stroke-dashoffset: 0; } } /* Integration-engine hero: one edit in one application, everywhere else by itself (12 s loop) */ .sy-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .sy-rails use { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; } .sy-win-bg { fill: var(--surface-2); stroke: var(--border); } .sy-bar { fill: var(--bg); } .sy-dot { fill: var(--border-strong); } .sy-bar-t { font-size: 11.5px; font-weight: 600; fill: var(--text-muted); } .sy-name { font-size: 15px; font-weight: 600; fill: var(--text); } .sy-sub { font-size: 10.5px; fill: var(--text-muted); } .sy-label { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-muted); } .sy-field { fill: var(--bg); stroke: var(--border); } .sy-val { font-size: 12px; fill: var(--text); } .sy-focus { fill: none; stroke: var(--orange); stroke-width: 1.5; opacity: 0; animation: 12s linear infinite; } .sy-focus-l { animation-name: sy-focus-l; } .sy-focus-r { animation-name: sy-focus-r; } .sy-flash { fill: var(--orange); opacity: 0; animation: 12s ease-out infinite; } .sy-flash-r { animation-name: sy-flash-r; } .sy-flash-s { animation-name: sy-flash-s; } .sy-flash-l { animation-name: sy-flash-l; } .sy-caret { fill: var(--orange); opacity: 0; animation: sy-caret 12s linear infinite; } .sy-l-addr-old { animation: sy-l-old 12s linear infinite; } .sy-l-addr-new { clip-path: inset(0 100% 0 0); animation: sy-type 12s linear infinite; } .sy-r-addr-old, .sy-s-old, .sy-r-plan-old, .sy-l-plan-old { animation: 12s linear infinite; } .sy-r-addr-new, .sy-s-new, .sy-r-plan-new, .sy-l-plan-new { opacity: 0; animation: 12s linear infinite; } .sy-r-addr-old { animation-name: sy-r-old; } .sy-r-addr-new { animation-name: sy-r-new; } .sy-s-old { animation-name: sy-s-old; } .sy-s-new { animation-name: sy-s-new; } .sy-r-plan-old { animation-name: sy-rp-old; } .sy-r-plan-new { animation-name: sy-rp-new; } .sy-l-plan-old { animation-name: sy-lp-old; } .sy-l-plan-new { animation-name: sy-lp-new; } .sy-pill rect { fill: rgba(50,199,135,.18); } .sy-pill text { font-size: 8.5px; font-weight: 600; fill: var(--success); text-anchor: middle; } .sy-pill { opacity: 0; animation: 12s ease-out infinite; } .sy-pill-r { animation-name: sy-pill-r; } .sy-pill-s { animation-name: sy-pill-s; } .sy-pill-l { animation-name: sy-pill-l; } .sy-save rect { fill: var(--orange); } .sy-save text { font-size: 11.5px; font-weight: 600; fill: var(--carbon); text-anchor: middle; } .sy-save { transform-box: fill-box; transform-origin: center; animation: 12s ease-in-out infinite; } .sy-save-l { animation-name: sy-press-l; } .sy-save-r { animation-name: sy-press-r; } .sy-save-done { opacity: 0; } .sy-save-l .sy-save-idle { animation: sy-idle-l 12s linear infinite; } .sy-save-l .sy-save-done { animation: sy-done-l 12s linear infinite; } .sy-save-r .sy-save-idle { animation: sy-idle-r 12s linear infinite; } .sy-save-r .sy-save-done { animation: sy-done-r 12s linear infinite; } .sy-dd { opacity: 0; animation: sy-dd 12s linear infinite; } .sy-dd > rect { fill: var(--surface-2); stroke: var(--border-strong); filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); } .sy-dd-t { font-size: 11px; fill: var(--text); } .sy-dd-hl { fill: rgba(255,176,0,.2); stroke: none; } .sy-hub { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1.5; } .sy-hub-glow { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 8px rgba(255,176,0,.6)); animation: sy-glow 12s ease-out infinite; } .sy-timer { font-size: 12px; font-weight: 600; fill: var(--text); text-anchor: middle; opacity: 0; animation: 12s linear infinite; } .sy-t1 { animation-name: sy-t1; } .sy-t2 { animation-name: sy-t2; } .sy-t3 { animation-name: sy-t3; } .sy-t4 { animation-name: sy-t4; } .sy-pkt circle { fill: var(--orange); filter: drop-shadow(0 0 6px rgba(255,176,0,.7)); } .sy-banner { opacity: 0; animation: sy-banner 12s ease-out infinite; } .sy-banner rect { fill: var(--bg); stroke: var(--orange); } .sy-banner text { font-size: 12px; font-weight: 500; fill: var(--text); text-anchor: middle; } .sy-cursor path { fill: #fff; stroke: var(--carbon); stroke-width: 1.2; stroke-linejoin: round; } .sy-cursor { opacity: 0; animation: sy-cursor 12s cubic-bezier(.4,0,.2,1) infinite; } @keyframes sy-cursor { 0%, 5% { transform: translate(170px, 250px) scale(1); opacity: 0; } 6% { opacity: 1; } 11% { transform: translate(140px, 137px) scale(1); } 12% { transform: translate(140px, 137px) scale(.8); } 13%, 27% { transform: translate(140px, 137px) scale(1); } 32% { transform: translate(236px, 275px) scale(1); } 36% { transform: translate(236px, 275px) scale(.8); } 37%, 55% { transform: translate(236px, 275px) scale(1); } 62% { transform: translate(480px, 205px) scale(1); } 66% { transform: translate(480px, 205px) scale(.8); } 67% { transform: translate(480px, 205px) scale(1); } 69% { transform: translate(470px, 258px) scale(1); } 70% { transform: translate(470px, 258px) scale(.8); } 71% { transform: translate(470px, 258px) scale(1); } 74% { transform: translate(574px, 275px) scale(1); } 76% { transform: translate(574px, 275px) scale(.8); } 77%, 84% { transform: translate(574px, 275px) scale(1); opacity: 1; } 87%, 100% { transform: translate(574px, 275px) scale(1); opacity: 0; } } @keyframes sy-focus-l { 0%, 11% { opacity: 0; } 12%, 28% { opacity: 1; } 29%, 100% { opacity: 0; } } @keyframes sy-focus-r { 0%, 65% { opacity: 0; } 66%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } } @keyframes sy-l-old { 0%, 15% { opacity: 1; } 16%, 100% { opacity: 0; } } @keyframes sy-type { 0%, 16% { clip-path: inset(0 100% 0 0); } 26%, 100% { clip-path: inset(0 0 0 0); } } @keyframes sy-caret { 0%, 12% { opacity: 0; transform: translateX(0); } 13%, 16% { opacity: 1; transform: translateX(0); } 26%, 27% { opacity: 1; transform: translateX(126px); } 28%, 100% { opacity: 0; transform: translateX(126px); } } @keyframes sy-press-l { 0%, 35% { transform: scale(1); } 36% { transform: scale(.92); } 37%, 100% { transform: scale(1); } } @keyframes sy-press-r { 0%, 75% { transform: scale(1); } 76% { transform: scale(.92); } 77%, 100% { transform: scale(1); } } @keyframes sy-idle-l { 0%, 36% { opacity: 1; } 37%, 100% { opacity: 0; } } @keyframes sy-done-l { 0%, 36% { opacity: 0; } 37%, 100% { opacity: 1; } } @keyframes sy-idle-r { 0%, 76% { opacity: 1; } 77%, 100% { opacity: 0; } } @keyframes sy-done-r { 0%, 76% { opacity: 0; } 77%, 100% { opacity: 1; } } @keyframes sy-glow { 0%, 39% { opacity: 0; } 41%, 46% { opacity: 1; } 49%, 77% { opacity: 0; } 79%, 84% { opacity: 1; } 87%, 100% { opacity: 0; } } @keyframes sy-t1 { 0%, 39% { opacity: 0; } 40%, 42% { opacity: 1; } 43%, 100% { opacity: 0; } } @keyframes sy-t2 { 0%, 43% { opacity: 0; } 44%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } } @keyframes sy-t3 { 0%, 47% { opacity: 0; } 48%, 62% { opacity: 1; } 64%, 100% { opacity: 0; } } @keyframes sy-t4 { 0%, 84% { opacity: 0; } 85%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } } @keyframes sy-r-old { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes sy-r-new { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes sy-flash-r { 0%, 49% { opacity: 0; } 50% { opacity: .35; } 55%, 100% { opacity: 0; } } @keyframes sy-pill-r { 0%, 51% { opacity: 0; } 53%, 100% { opacity: 1; } } @keyframes sy-s-old { 0%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } } @keyframes sy-s-new { 0%, 56% { opacity: 0; } 57%, 100% { opacity: 1; } } @keyframes sy-flash-s { 0%, 56% { opacity: 0; } 57% { opacity: .35; } 62%, 100% { opacity: 0; } } @keyframes sy-pill-s { 0%, 58% { opacity: 0; } 60%, 100% { opacity: 1; } } @keyframes sy-dd { 0%, 66% { opacity: 0; } 67%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } } @keyframes sy-rp-old { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } } @keyframes sy-rp-new { 0%, 70% { opacity: 0; } 71%, 100% { opacity: 1; } } @keyframes sy-lp-old { 0%, 85% { opacity: 1; } 86%, 100% { opacity: 0; } } @keyframes sy-lp-new { 0%, 85% { opacity: 0; } 86%, 100% { opacity: 1; } } @keyframes sy-flash-l { 0%, 85% { opacity: 0; } 86% { opacity: .35; } 91%, 100% { opacity: 0; } } @keyframes sy-pill-l { 0%, 87% { opacity: 0; } 89%, 100% { opacity: 1; } } @keyframes sy-banner { 0%, 88% { opacity: 0; } 90%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sy-cursor, .sy-pkt, .sy-caret, .sy-dd, .sy-focus, .sy-flash, .sy-hub-glow { display: none; } .sy-l-addr-old, .sy-l-addr-new, .sy-r-addr-old, .sy-r-addr-new, .sy-s-old, .sy-s-new, .sy-r-plan-old, .sy-r-plan-new, .sy-l-plan-old, .sy-l-plan-new, .sy-pill, .sy-save, .sy-save text, .sy-timer, .sy-banner { animation: none; } .sy-l-addr-old, .sy-r-addr-old, .sy-s-old, .sy-r-plan-old, .sy-l-plan-old, .sy-save-idle, .sy-t1, .sy-t2, .sy-t4 { opacity: 0; } .sy-l-addr-new { clip-path: none; } .sy-r-addr-new, .sy-s-new, .sy-r-plan-new, .sy-l-plan-new, .sy-pill, .sy-save-done, .sy-t3, .sy-banner { opacity: 1; } } /* Connect / disconnect animation (features/connectors) — one 16 s loop */ figure.shot.cd-figure { width: min(1040px, calc(100vw - 2 * var(--gutter))); margin-left: calc(50% - min(520px, calc(50vw - var(--gutter)))); } .cd-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); } .cd-tl { stroke: var(--border); stroke-width: 2; stroke-dasharray: 4 6; } .cd-chip-bg { fill: var(--surface); stroke: var(--border); } .cd-chip-on { fill: rgba(255,176,0,.14); stroke: var(--orange); stroke-width: 2; opacity: 0; animation: 16s ease-out infinite; } .cd-chip-1 { animation-name: cd-chip-1; } .cd-chip-2 { animation-name: cd-chip-2; } .cd-chip-3 { animation-name: cd-chip-3; } .cd-chip-4 { animation-name: cd-chip-4; } .cd-chip-t { font-size: 13px; font-weight: 600; fill: var(--text); text-anchor: middle; } .cd-rail { stroke: var(--orange); stroke-width: 1.5; opacity: .55; } .cd-card-bg { fill: var(--surface); stroke: var(--border); filter: drop-shadow(0 4px 10px rgba(17,20,24,.08)); } .cd-dot { fill: var(--success); } .cd-kind-connect .cd-dot, .cd-kind-new .cd-dot { fill: var(--orange); animation: 16s linear infinite; } .cd-name { font-size: 12.5px; font-weight: 600; fill: var(--text); } .cd-status { font-size: 11px; fill: var(--text-muted); } .cd-st-a { fill: var(--amber-text); font-weight: 500; opacity: 0; animation: 16s linear infinite; } .cd-st-c { fill: var(--critical-text); font-weight: 500; opacity: 0; animation: 16s linear infinite; } .cd-kind-connect .cd-st-b, .cd-kind-new .cd-st-b { opacity: 0; animation: 16s linear infinite; } .cd-kind-leave .cd-st-b, .cd-kind-old .cd-st-b { animation: 16s linear infinite; } .cd-track { fill: var(--surface-2); } .cd-prog { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: 16s ease-out infinite; } .cd-bar { animation: 16s linear infinite; } .cd-kind-connect, .cd-kind-new { opacity: 0; animation: 16s cubic-bezier(.22,1,.36,1) infinite; } .cd-kind-leave, .cd-kind-old { animation: 16s ease-out infinite; } .cd-hub { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; filter: drop-shadow(0 8px 20px rgba(255,176,0,.25)); } .cd-hub-t { font-size: 12px; font-weight: 600; fill: var(--text-muted); text-anchor: middle; } .cd-count-l { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-muted); } .cd-count { font-size: 44px; font-weight: 600; letter-spacing: -.03em; fill: var(--text); opacity: 0; animation: 16s linear infinite; } .cd-n5 { animation-name: cd-n5; } .cd-n6 { animation-name: cd-n6; } .cd-n7a { animation-name: cd-n7a; } .cd-n8a { animation-name: cd-n8a; } .cd-n7b { animation-name: cd-n7b; } .cd-n8b { animation-name: cd-n8b; } .cd-n7c { animation-name: cd-n7c; } .cd-cap { font-size: 12.5px; font-weight: 500; fill: var(--success-text); text-anchor: end; opacity: 0; animation: cd-cap 16s linear infinite; } /* per-card timings — D 12–21 · H 15–25 · F 34–43 · N (new billing) 60–68 · G (old billing) out 52–60 · A (legacy CRM) out 78–80 */ .cd-card-D { animation-name: cd-in-D; } .cd-card-D .cd-bar { animation-name: cd-bar-D; } .cd-card-D .cd-prog { animation-name: cd-prog-D; } .cd-card-D .cd-st-a { animation-name: cd-sta-D; } .cd-card-D .cd-st-b { animation-name: cd-stb-D; } .cd-card-D .cd-dot { animation-name: cd-dot-D; } .cd-card-H { animation-name: cd-in-H; } .cd-card-H .cd-bar { animation-name: cd-bar-H; } .cd-card-H .cd-prog { animation-name: cd-prog-H; } .cd-card-H .cd-st-a { animation-name: cd-sta-H; } .cd-card-H .cd-st-b { animation-name: cd-stb-H; } .cd-card-H .cd-dot { animation-name: cd-dot-H; } .cd-card-F { animation-name: cd-in-F; } .cd-card-F .cd-bar { animation-name: cd-bar-F; } .cd-card-F .cd-prog { animation-name: cd-prog-F; } .cd-card-F .cd-st-a { animation-name: cd-sta-F; } .cd-card-F .cd-st-b { animation-name: cd-stb-F; } .cd-card-F .cd-dot { animation-name: cd-dot-F; } .cd-card-N { animation-name: cd-in-N; } .cd-card-N .cd-bar { animation-name: cd-bar-N; } .cd-card-N .cd-prog { animation-name: cd-prog-N; } .cd-card-N .cd-st-a { animation-name: cd-sta-N; } .cd-card-N .cd-st-b { animation-name: cd-stb-N; } .cd-card-N .cd-dot { animation-name: cd-dot-N; } .cd-card-G { animation-name: cd-out-G; } .cd-card-G .cd-st-b { animation-name: cd-stb-G; } .cd-card-G .cd-st-c { animation-name: cd-stc-G; } .cd-card-A { animation-name: cd-out-A; } .cd-card-A .cd-st-b { animation-name: cd-stb-A; } .cd-card-A .cd-st-c { animation-name: cd-stc-A; } @keyframes cd-chip-1 { 0%, 9% { opacity: 0; } 10%, 28% { opacity: 1; } 30%, 100% { opacity: .35; } } @keyframes cd-chip-2 { 0%, 31% { opacity: 0; } 32%, 46% { opacity: 1; } 48%, 100% { opacity: .35; } } @keyframes cd-chip-3 { 0%, 49% { opacity: 0; } 50%, 70% { opacity: 1; } 72%, 100% { opacity: .35; } } @keyframes cd-chip-4 { 0%, 75% { opacity: 0; } 76%, 90% { opacity: 1; } 92%, 100% { opacity: .35; } } @keyframes cd-in-D { 0%, 12% { opacity: 0; transform: scale(.9); } 13%, 100% { opacity: 1; transform: none; } } @keyframes cd-bar-D { 0%, 20% { opacity: 1; } 21%, 100% { opacity: 0; } } @keyframes cd-prog-D { 0%, 13% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } } @keyframes cd-sta-D { 0%, 12% { opacity: 0; } 13%, 20% { opacity: 1; } 21%, 100% { opacity: 0; } } @keyframes cd-stb-D { 0%, 20% { opacity: 0; } 21%, 100% { opacity: 1; } } @keyframes cd-dot-D { 0%, 20% { fill: var(--orange); } 21%, 100% { fill: var(--success); } } @keyframes cd-in-H { 0%, 15% { opacity: 0; transform: scale(.9); } 16%, 100% { opacity: 1; transform: none; } } @keyframes cd-bar-H { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes cd-prog-H { 0%, 16% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } } @keyframes cd-sta-H { 0%, 15% { opacity: 0; } 16%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes cd-stb-H { 0%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } } @keyframes cd-dot-H { 0%, 24% { fill: var(--orange); } 25%, 100% { fill: var(--success); } } @keyframes cd-in-F { 0%, 34% { opacity: 0; transform: scale(.9); } 35%, 100% { opacity: 1; transform: none; } } @keyframes cd-bar-F { 0%, 42% { opacity: 1; } 43%, 100% { opacity: 0; } } @keyframes cd-prog-F { 0%, 35% { transform: scaleX(0); } 42%, 100% { transform: scaleX(1); } } @keyframes cd-sta-F { 0%, 34% { opacity: 0; } 35%, 42% { opacity: 1; } 43%, 100% { opacity: 0; } } @keyframes cd-stb-F { 0%, 42% { opacity: 0; } 43%, 100% { opacity: 1; } } @keyframes cd-dot-F { 0%, 42% { fill: var(--orange); } 43%, 100% { fill: var(--success); } } @keyframes cd-in-N { 0%, 60% { opacity: 0; transform: scale(.9); } 61%, 100% { opacity: 1; transform: none; } } @keyframes cd-bar-N { 0%, 67% { opacity: 1; } 68%, 100% { opacity: 0; } } @keyframes cd-prog-N { 0%, 61% { transform: scaleX(0); } 67%, 100% { transform: scaleX(1); } } @keyframes cd-sta-N { 0%, 60% { opacity: 0; } 61%, 67% { opacity: 1; } 68%, 100% { opacity: 0; } } @keyframes cd-stb-N { 0%, 67% { opacity: 0; } 68%, 100% { opacity: 1; } } @keyframes cd-dot-N { 0%, 67% { fill: var(--orange); } 68%, 100% { fill: var(--success); } } @keyframes cd-out-G { 0%, 51% { opacity: 1; } 54%, 58% { opacity: .35; } 60%, 100% { opacity: 0; } } @keyframes cd-stb-G { 0%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } } @keyframes cd-stc-G { 0%, 52% { opacity: 0; } 53%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } } @keyframes cd-out-A { 0%, 77% { opacity: 1; } 80%, 100% { opacity: .35; } } @keyframes cd-stb-A { 0%, 77% { opacity: 1; } 78%, 100% { opacity: 0; } } @keyframes cd-stc-A { 0%, 78% { opacity: 0; } 79%, 100% { opacity: 1; } } @keyframes cd-n5 { 0%, 20.8% { opacity: 1; } 21%, 100% { opacity: 0; } } @keyframes cd-n6 { 0%, 20.8% { opacity: 0; } 21%, 24.8% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes cd-n7a { 0%, 24.8% { opacity: 0; } 25%, 42.8% { opacity: 1; } 43%, 100% { opacity: 0; } } @keyframes cd-n8a { 0%, 42.8% { opacity: 0; } 43%, 53.8% { opacity: 1; } 54%, 100% { opacity: 0; } } @keyframes cd-n7b { 0%, 53.8% { opacity: 0; } 54%, 67.8% { opacity: 1; } 68%, 100% { opacity: 0; } } @keyframes cd-n8b { 0%, 67.8% { opacity: 0; } 68%, 83.8% { opacity: 1; } 84%, 100% { opacity: 0; } } @keyframes cd-n7c { 0%, 83.8% { opacity: 0; } 84%, 100% { opacity: 1; } } @keyframes cd-cap { 0%, 87% { opacity: 0; } 89%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cd-chip-on, .cd-card, .cd-bar, .cd-prog, .cd-st-a, .cd-st-b, .cd-st-c, .cd-dot, .cd-count, .cd-cap { animation: none; } .cd-chip-on { opacity: .35; } .cd-kind-connect, .cd-kind-new { opacity: 1; } .cd-kind-old { opacity: 0; } .cd-kind-leave { opacity: .35; } .cd-bar, .cd-st-a { opacity: 0; } .cd-kind-connect .cd-st-b, .cd-kind-new .cd-st-b { opacity: 1; } .cd-kind-leave .cd-st-b { opacity: 0; } .cd-kind-leave .cd-st-c { opacity: 1; } .cd-kind-connect .cd-dot, .cd-kind-new .cd-dot { fill: var(--success); } .cd-n7c, .cd-cap { opacity: 1; } } /* Workflows hero: relay → processing → complex integration (14 s loop; beats A 0–28 · B 28–56 · C 56–86 · banner 86–100) */ .wf-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .wf-cap { font-size: 12.5px; font-weight: 500; fill: var(--text-muted); opacity: 0; animation: 14s linear infinite; } .wf-cap-a { animation-name: wf-cap-a; } .wf-cap-b { animation-name: wf-cap-b; } .wf-cap-c { animation-name: wf-cap-c; } .wf-rails-a use, .wf-rails-b use, .wf-rails-b line, .wf-rails-c line { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; } .wf-rails-a, .wf-rails-b, .wf-rails-c { opacity: 0; animation: 14s ease-out infinite; } .wf-rails-a { animation-name: wf-in-a; } .wf-rails-b { animation-name: wf-in-b; } .wf-rails-c { animation-name: wf-in-c; } .wf-edge { font-size: 10px; fill: var(--text-muted); } .wf-node rect { fill: var(--surface-2); stroke: var(--border); } .wf-node .wf-trig { fill: rgba(255,176,0,.14); stroke: var(--orange); } .wf-node .wf-idle { opacity: .55; } .wf-gate { fill: var(--surface-2); stroke: var(--border-strong); } .wf-gt { font-size: 14px; font-weight: 700; fill: var(--orange); text-anchor: middle; } .wf-nt { font-size: 12px; font-weight: 600; fill: var(--text); } .wf-ns { font-size: 10px; fill: var(--text-muted); } .wf-center { text-anchor: middle; } .wf-node { opacity: 0; animation: 14s cubic-bezier(.22,1,.36,1) infinite; } .wf-n-t, .wf-n-1 { animation-name: wf-in-a; } .wf-n-2, .wf-n-g, .wf-n-3, .wf-n-4 { animation-name: wf-in-b; } .wf-n-5 { animation-name: wf-in-b5; } .wf-n-6, .wf-n-7, .wf-n-8 { animation-name: wf-in-c; } .wf-dot { fill: var(--border-strong); animation: 14s linear infinite; } .wf-dot-1 { animation-name: wf-dot-1; } .wf-dot-2 { animation-name: wf-dot-2; } .wf-dot-3 { animation-name: wf-dot-3; } .wf-dot-5 { animation-name: wf-dot-5; } .wf-dot-6 { animation-name: wf-dot-6; } .wf-dot-7 { animation-name: wf-dot-7; } .wf-dot-8 { animation-name: wf-dot-8; } .wf-pill rect { fill: rgba(255,176,0,.18); } .wf-pill text { font-size: 9.5px; font-weight: 600; fill: var(--orange); text-anchor: middle; } .wf-pill-ok rect { fill: rgba(50,199,135,.18); } .wf-pill-ok text { fill: var(--success); } .wf-pill-ran rect { fill: rgba(50,199,135,.18); } .wf-pill-ran text { fill: var(--success); } .wf-pill-retry rect { fill: rgba(255,122,48,.18); } .wf-pill-retry text { fill: var(--warning); } .wf-pill { opacity: 0; animation: 14s ease-out infinite; } .wf-pill-ran { animation-name: wf-pill-ran; } .wf-pill-retry { animation-name: wf-pill-retry; } .wf-pill-appr { animation-name: wf-pill-appr; } .wf-pill-deploy { animation-name: wf-pill-deploy; } .wf-out rect { fill: var(--surface-2); stroke: var(--border); } .wf-via rect { fill: rgba(50,199,135,.18); } .wf-via text { font-size: 9px; font-weight: 600; fill: var(--success); text-anchor: middle; } .wf-out { opacity: 0; animation: 14s cubic-bezier(.22,1,.36,1) infinite; } .wf-out-1 { animation-name: wf-out-1; } .wf-out-2 { animation-name: wf-out-2; } .wf-out-3 { animation-name: wf-out-3; } .wf-count { font-size: 12.5px; font-weight: 600; fill: var(--text); opacity: 0; animation: wf-count 14s linear infinite; } .wf-banner { opacity: 0; animation: wf-banner 14s ease-out infinite; } .wf-banner rect { fill: var(--bg); stroke: var(--orange); } .wf-banner text { font-size: 12px; font-weight: 500; fill: var(--text); text-anchor: middle; } .wf-pkt circle { fill: var(--orange); filter: drop-shadow(0 0 6px rgba(255,176,0,.7)); } @keyframes wf-cap-a { 0%, 3% { opacity: 0; } 5%, 26% { opacity: 1; } 28%, 100% { opacity: 0; } } @keyframes wf-cap-b { 0%, 29% { opacity: 0; } 31%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } } @keyframes wf-cap-c { 0%, 57% { opacity: 0; } 59%, 84% { opacity: 1; } 86%, 100% { opacity: 0; } } @keyframes wf-in-a { 0%, 1% { opacity: 0; } 3%, 100% { opacity: 1; } } @keyframes wf-in-b { 0%, 28% { opacity: 0; } 30%, 100% { opacity: 1; } } @keyframes wf-in-b5 { 0%, 41% { opacity: 0; } 43%, 100% { opacity: 1; } } @keyframes wf-in-c { 0%, 56% { opacity: 0; } 58%, 100% { opacity: 1; } } @keyframes wf-dot-1 { 0%, 11% { fill: var(--border-strong); } 12%, 100% { fill: var(--success); } } @keyframes wf-dot-2 { 0%, 33% { fill: var(--border-strong); } 34%, 100% { fill: var(--success); } } @keyframes wf-dot-3 { 0%, 39% { fill: var(--border-strong); } 40%, 43% { fill: var(--warning); } 44%, 100% { fill: var(--success); } } @keyframes wf-dot-5 { 0%, 47% { fill: var(--border-strong); } 48%, 100% { fill: var(--success); } } @keyframes wf-dot-6 { 0%, 62% { fill: var(--border-strong); } 63%, 100% { fill: var(--success); } } @keyframes wf-dot-7 { 0%, 65% { fill: var(--border-strong); } 66%, 100% { fill: var(--success); } } @keyframes wf-dot-8 { 0%, 69% { fill: var(--border-strong); } 70%, 100% { fill: var(--success); } } @keyframes wf-pill-ran { 0%, 12% { opacity: 0; } 13%, 26% { opacity: 1; } 28%, 100% { opacity: 0; } } @keyframes wf-pill-retry { 0%, 39% { opacity: 0; } 40%, 43% { opacity: 1; } 44%, 100% { opacity: 0; } } @keyframes wf-pill-appr { 0%, 47% { opacity: 0; } 48%, 100% { opacity: 1; } } @keyframes wf-pill-deploy { 0%, 81% { opacity: 0; } 82%, 100% { opacity: 1; } } @keyframes wf-out-1 { 0%, 71% { opacity: 0; } 72%, 100% { opacity: 1; } } @keyframes wf-out-2 { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } } @keyframes wf-out-3 { 0%, 77% { opacity: 0; } 78%, 100% { opacity: 1; } } @keyframes wf-count { 0%, 79% { opacity: 0; } 80%, 100% { opacity: 1; } } @keyframes wf-banner { 0%, 86% { opacity: 0; } 88%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wf-pkt { display: none; } .wf-cap, .wf-rails-a, .wf-rails-b, .wf-rails-c, .wf-node, .wf-dot, .wf-pill, .wf-out, .wf-count, .wf-banner { animation: none; } .wf-cap-c, .wf-rails-a, .wf-rails-b, .wf-rails-c, .wf-node, .wf-pill-appr, .wf-pill-deploy, .wf-out, .wf-count, .wf-banner { opacity: 1; } .wf-dot { fill: var(--success); } } /* Sites hero: describe → build → live from the hub → secure → publish (14 s loop; beats 1 0–13 · 2 13–33 · 3 33–51 · 4 51–73 · 5 73–88 · banner 88–100) */ .st-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .st-gap rect { fill: rgba(255,122,48,.16); } .st-gap text { font-size: 11px; font-weight: 600; fill: var(--warning); text-anchor: middle; } .st-gap-closed rect { fill: rgba(50,199,135,.18); } .st-gap-closed text { fill: var(--success); } .st-gap-open { animation: st-gap-open 14s linear infinite; } .st-gap-closed { opacity: 0; animation: st-gap-closed 14s linear infinite; } .st-prompt { fill: var(--bg); stroke: var(--border-strong); } .st-prompt-t { font-size: 12px; fill: var(--text); clip-path: inset(0 100% 0 0); animation: st-type 14s linear infinite; } .st-caret { fill: var(--orange); opacity: 0; animation: st-caret 14s linear infinite; } .st-build rect { fill: var(--orange); } .st-build text { font-size: 12px; font-weight: 600; fill: var(--carbon); text-anchor: middle; } .st-build { transform-box: fill-box; transform-origin: center; animation: st-press 14s ease-in-out infinite; } .st-win { opacity: 0; animation: st-win 14s ease-out infinite; } .st-win-bg { fill: var(--surface-2); stroke: var(--border); } .st-bar { fill: var(--bg); } .st-dot { fill: var(--border-strong); } .st-bar-t { font-size: 11px; font-weight: 600; fill: var(--text-muted); } .st-card { fill: var(--bg); stroke: var(--border); } .st-rule { stroke: var(--border); } .st-h { font-size: 12px; font-weight: 600; fill: var(--text); } .st-lbl { font-size: 10.5px; fill: var(--text-muted); } .st-big { font-size: 16px; font-weight: 600; fill: var(--text); } .st-cell { font-size: 10.5px; fill: var(--text); } .st-ok { fill: var(--success); font-weight: 500; } .st-center { text-anchor: middle; } .st-input { fill: var(--surface-2); stroke: var(--border); } .st-ph { font-size: 10px; fill: var(--text-muted); } .st-send { fill: var(--orange); } .st-send-t { font-size: 10.5px; font-weight: 600; fill: var(--carbon); text-anchor: middle; } .st-block { opacity: 0; transform-box: fill-box; transform-origin: center; animation: 14s cubic-bezier(.22,1,.36,1) infinite; } .st-b-grid { animation-name: st-b-grid; } .st-b-tile1 { animation-name: st-b-tile1; } .st-b-tile2 { animation-name: st-b-tile2; } .st-b-form { animation-name: st-b-form; } .st-row { opacity: 0; animation: 14s linear infinite; } .st-row-1 { animation-name: st-row-1; } .st-row-2 { animation-name: st-row-2; } .st-row-3 { animation-name: st-row-3; } .st-row1-a { animation: st-row1-a 14s linear infinite; } .st-row1-b { opacity: 0; animation: st-row1-b 14s linear infinite; } .st-pill rect { fill: rgba(50,199,135,.18); } .st-pill text { font-size: 9.5px; font-weight: 600; fill: var(--success); text-anchor: middle; } .st-pill { opacity: 0; animation: 14s ease-out infinite; } .st-pill-live { animation-name: st-pill-live; } .st-pill-pub { animation-name: st-pill-pub; } .st-pill-time { animation-name: st-pill-time; } .st-pill-time rect { fill: rgba(255,176,0,.18); } .st-pill-time text { fill: var(--orange); } .st-hub { opacity: 0; animation: st-hub 14s ease-out infinite; } .st-hub-bg { fill: var(--bg); stroke: var(--border-strong); } .st-rails use { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; } .st-rails { opacity: 0; animation: st-hub 14s ease-out infinite; } .st-sec { opacity: 0; animation: st-sec 14s ease-out infinite; } .st-track { fill: var(--border-strong); animation: 14s linear infinite; } .st-knob circle { fill: #fff; } .st-knob { animation: 14s cubic-bezier(.22,1,.36,1) infinite; } .st-t1 { animation-name: st-t1; } .st-t2 { animation-name: st-t2; } .st-t3 { animation-name: st-t3; } .st-t4 { animation-name: st-t4; } .st-t5 { animation-name: st-t5; } .st-t6 { animation-name: st-t6; } .st-k1 { animation-name: st-k1; } .st-k2 { animation-name: st-k2; } .st-k3 { animation-name: st-k3; } .st-k4 { animation-name: st-k4; } .st-k5 { animation-name: st-k5; } .st-k6 { animation-name: st-k6; } .st-phone { opacity: 0; animation: st-phone 14s ease-out infinite; } .st-phone-bg { fill: var(--bg); stroke: var(--border-strong); } .st-phone-scr { fill: var(--surface-2); } .st-notch { fill: var(--border-strong); } .st-cap { font-size: 12px; font-weight: 500; fill: var(--text-muted); opacity: 0; animation: 14s linear infinite; } .st-cap-a { animation-name: st-cap-a; } .st-cap-b { animation-name: st-cap-b; } .st-cap-c { animation-name: st-cap-c; } .st-banner { opacity: 0; animation: st-banner 14s ease-out infinite; } .st-banner rect { fill: var(--bg); stroke: var(--orange); } .st-banner text { font-size: 12px; font-weight: 500; fill: var(--text); text-anchor: middle; } .st-pkt circle { fill: var(--orange); filter: drop-shadow(0 0 6px rgba(255,176,0,.7)); } @keyframes st-gap-open { 0%, 85% { opacity: 1; } 86%, 100% { opacity: 0; } } @keyframes st-gap-closed { 0%, 85% { opacity: 0; } 86%, 100% { opacity: 1; } } @keyframes st-type { 0%, 3% { clip-path: inset(0 100% 0 0); } 11%, 100% { clip-path: inset(0 0 0 0); } } @keyframes st-caret { 0%, 2% { opacity: 0; transform: translateX(0); } 3% { opacity: 1; transform: translateX(0); } 11%, 12% { opacity: 1; transform: translateX(268px); } 13%, 100% { opacity: 0; transform: translateX(268px); } } @keyframes st-press { 0%, 12% { transform: scale(1); } 13% { transform: scale(.92); } 14%, 100% { transform: scale(1); } } @keyframes st-win { 0%, 13% { opacity: 0; } 15%, 100% { opacity: 1; } } @keyframes st-b-grid { 0%, 15% { opacity: 0; transform: scale(.94); } 17%, 100% { opacity: 1; transform: none; } } @keyframes st-b-tile1 { 0%, 19% { opacity: 0; transform: scale(.94); } 21%, 100% { opacity: 1; transform: none; } } @keyframes st-b-tile2 { 0%, 22% { opacity: 0; transform: scale(.94); } 24%, 100% { opacity: 1; transform: none; } } @keyframes st-b-form { 0%, 26% { opacity: 0; transform: scale(.94); } 28%, 100% { opacity: 1; transform: none; } } @keyframes st-hub { 0%, 33% { opacity: 0; } 35%, 100% { opacity: 1; } } @keyframes st-row-1 { 0%, 38% { opacity: 0; } 39%, 100% { opacity: 1; } } @keyframes st-row-2 { 0%, 42% { opacity: 0; } 43%, 100% { opacity: 1; } } @keyframes st-row-3 { 0%, 46% { opacity: 0; } 47%, 100% { opacity: 1; } } @keyframes st-row1-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes st-row1-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes st-pill-live { 0%, 49% { opacity: 0; } 51%, 100% { opacity: 1; } } @keyframes st-sec { 0%, 51% { opacity: 0; } 53%, 71% { opacity: 1; } 73%, 100% { opacity: 0; } } @keyframes st-t1 { 0%, 54% { fill: var(--border-strong); } 55%, 100% { fill: var(--success); } } @keyframes st-k1 { 0%, 54% { transform: translateX(0); } 55%, 100% { transform: translateX(14px); } } @keyframes st-t2 { 0%, 57% { fill: var(--border-strong); } 58%, 100% { fill: var(--success); } } @keyframes st-k2 { 0%, 57% { transform: translateX(0); } 58%, 100% { transform: translateX(14px); } } @keyframes st-t3 { 0%, 60% { fill: var(--border-strong); } 61%, 100% { fill: var(--success); } } @keyframes st-k3 { 0%, 60% { transform: translateX(0); } 61%, 100% { transform: translateX(14px); } } @keyframes st-t4 { 0%, 63% { fill: var(--border-strong); } 64%, 100% { fill: var(--success); } } @keyframes st-k4 { 0%, 63% { transform: translateX(0); } 64%, 100% { transform: translateX(14px); } } @keyframes st-t5 { 0%, 66% { fill: var(--border-strong); } 67%, 100% { fill: var(--success); } } @keyframes st-k5 { 0%, 66% { transform: translateX(0); } 67%, 100% { transform: translateX(14px); } } @keyframes st-t6 { 0%, 69% { fill: var(--border-strong); } 70%, 100% { fill: var(--success); } } @keyframes st-k6 { 0%, 69% { transform: translateX(0); } 70%, 100% { transform: translateX(14px); } } @keyframes st-phone { 0%, 73% { opacity: 0; } 75%, 100% { opacity: 1; } } @keyframes st-pill-pub { 0%, 75% { opacity: 0; } 77%, 100% { opacity: 1; } } @keyframes st-pill-time { 0%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } } @keyframes st-cap-a { 0%, 15% { opacity: 0; } 17%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes st-cap-b { 0%, 35% { opacity: 0; } 37%, 49% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes st-cap-c { 0%, 53% { opacity: 0; } 55%, 71% { opacity: 1; } 73%, 100% { opacity: 0; } } @keyframes st-banner { 0%, 88% { opacity: 0; } 90%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .st-pkt, .st-caret, .st-sec { display: none; } .st-gap, .st-prompt-t, .st-build, .st-win, .st-block, .st-row, .st-row1-a, .st-row1-b, .st-pill, .st-hub, .st-rails, .st-track, .st-knob, .st-phone, .st-cap, .st-banner { animation: none; } .st-gap-open, .st-row1-a, .st-cap { opacity: 0; } .st-gap-closed, .st-win, .st-block, .st-row, .st-row1-b, .st-pill, .st-hub, .st-rails, .st-phone, .st-banner { opacity: 1; } .st-prompt-t { clip-path: none; } .st-block { transform: none; } } /* Reports & queries hero: inside the flow → query → report + AI insight → test/production → live + sent (14 s loop; beats 1 0–12 · 2 12–30 · 3 30–55 · 4 55–72 · 5 72–88 · banner 88–100) */ .qr-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .qr-sys rect { fill: var(--surface-2); stroke: var(--border); } .qr-sys text { font-size: 11.5px; font-weight: 600; fill: var(--text); text-anchor: middle; } .qr-rail { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; } .qr-hub { fill: var(--bg); stroke: var(--orange); stroke-width: 1.5; filter: drop-shadow(0 0 10px rgba(255,176,0,.35)); } .qr-lbl { font-size: 10.5px; fill: var(--text-muted); } .qr-center { text-anchor: middle; } .qr-extract rect { fill: var(--surface-2); stroke: var(--border); } .qr-strike { stroke: var(--critical); stroke-width: 2; opacity: 0; animation: qr-strike 14s linear infinite; } .qr-extract { opacity: .7; animation: qr-extract 14s linear infinite; } .qr-card { fill: var(--surface-2); stroke: var(--border); } .qr-tile { fill: var(--bg); stroke: var(--border); } .qr-h { font-size: 12px; font-weight: 600; fill: var(--text); } .qr-cell { font-size: 11px; fill: var(--text); } .qr-num { font-weight: 600; } .qr-big { font-size: 15px; font-weight: 600; fill: var(--text); } .qr-query { opacity: 0; animation: qr-query 14s ease-out infinite; } .qr-qrow { opacity: 0; animation: 14s linear infinite; } .qr-qrow-1 { animation-name: qr-qrow-1; } .qr-qrow-2 { animation-name: qr-qrow-2; } .qr-qrow-3 { animation-name: qr-qrow-3; } .qr-pill rect { fill: rgba(50,199,135,.18); } .qr-pill text { font-size: 9.5px; font-weight: 600; fill: var(--success); text-anchor: middle; } .qr-pill { opacity: 0; animation: 14s ease-out infinite; } .qr-pill-same { animation-name: qr-pill-same; } .qr-pill-upd { animation-name: qr-pill-upd; } .qr-pill-from { animation-name: qr-pill-from; } .qr-pill-time { animation-name: qr-pill-time; } .qr-pill-time rect { fill: rgba(255,176,0,.18); } .qr-pill-time text { fill: var(--orange); } .qr-report { opacity: 0; animation: qr-report 14s ease-out infinite; } .qr-tiles { opacity: 0; animation: qr-tiles 14s ease-out infinite; } .qr-kpi-a { animation: qr-kpi-a 14s linear infinite; } .qr-kpi-b { opacity: 0; animation: qr-kpi-b 14s linear infinite; } .qr-bars { opacity: 0; animation: qr-bars 14s ease-out infinite; } .qr-track { fill: var(--bg); } .qr-bar { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: 14s ease-out infinite; } .qr-bar-1 { animation-name: qr-bar-1; } .qr-bar-2 { animation-name: qr-bar-2; } .qr-bar-3 { animation-name: qr-bar-3; } .qr-insight { opacity: 0; animation: qr-insight 14s ease-out infinite; } .qr-ins-bg { fill: var(--bg); stroke: var(--orange); stroke-dasharray: 4 3; } .qr-ins-pill { fill: rgba(255,176,0,.18); } .qr-ins-t { font-size: 9.5px; font-weight: 600; fill: var(--orange); text-anchor: middle; } .qr-type { clip-path: inset(0 100% 0 0); animation: 14s linear infinite; } .qr-type-1 { animation-name: qr-type-1; } .qr-type-2 { animation-name: qr-type-2; } .qr-type-3 { animation-name: qr-type-3; } .qr-strip { opacity: 0; animation: qr-strip 14s ease-out infinite; } .qr-step rect { fill: var(--surface-2); stroke: var(--border); animation: 14s linear infinite; } .qr-step text { font-size: 10.5px; font-weight: 600; fill: var(--text); text-anchor: middle; } .qr-step-1 rect { animation-name: qr-step-1; } .qr-step-2 rect { animation-name: qr-step-2; } .qr-step-3 rect { animation-name: qr-step-3; } .qr-step-4 rect { animation-name: qr-step-4; } .qr-sched rect, .qr-sent rect { fill: var(--surface-2); stroke: var(--border); } .qr-sched text, .qr-sent text { font-size: 10.5px; font-weight: 500; fill: var(--text); text-anchor: middle; } .qr-sched { opacity: 0; animation: qr-sched 14s ease-out infinite; } .qr-sent { opacity: 0; animation: qr-sent 14s ease-out infinite; } .qr-cap { font-size: 12px; font-weight: 500; fill: var(--text-muted); opacity: 0; animation: 14s linear infinite; } .qr-cap-a { animation-name: qr-cap-a; } .qr-cap-b { animation-name: qr-cap-b; } .qr-cap-c { animation-name: qr-cap-c; } .qr-banner { opacity: 0; animation: qr-banner 14s ease-out infinite; } .qr-banner rect { fill: var(--bg); stroke: var(--orange); } .qr-banner text { font-size: 12px; font-weight: 500; fill: var(--text); text-anchor: middle; } .qr-pkt circle { fill: var(--orange); filter: drop-shadow(0 0 6px rgba(255,176,0,.7)); } @keyframes qr-extract { 0%, 6% { opacity: .7; } 12%, 100% { opacity: 0; } } @keyframes qr-strike { 0%, 5% { opacity: 0; } 6%, 10% { opacity: 1; } 12%, 100% { opacity: 0; } } @keyframes qr-query { 0%, 12% { opacity: 0; } 14%, 100% { opacity: 1; } } @keyframes qr-qrow-1 { 0%, 15% { opacity: 0; } 16%, 100% { opacity: 1; } } @keyframes qr-qrow-2 { 0%, 18% { opacity: 0; } 19%, 100% { opacity: 1; } } @keyframes qr-qrow-3 { 0%, 21% { opacity: 0; } 22%, 100% { opacity: 1; } } @keyframes qr-pill-same { 0%, 23% { opacity: 0; } 25%, 100% { opacity: 1; } } @keyframes qr-report { 0%, 30% { opacity: 0; } 32%, 100% { opacity: 1; } } @keyframes qr-tiles { 0%, 32% { opacity: 0; } 34%, 100% { opacity: 1; } } @keyframes qr-bars { 0%, 34% { opacity: 0; } 36%, 100% { opacity: 1; } } @keyframes qr-bar-1 { 0%, 36% { transform: scaleX(0); } 41%, 100% { transform: scaleX(1); } } @keyframes qr-bar-2 { 0%, 37% { transform: scaleX(0); } 42%, 100% { transform: scaleX(1); } } @keyframes qr-bar-3 { 0%, 38% { transform: scaleX(0); } 43%, 100% { transform: scaleX(1); } } @keyframes qr-insight { 0%, 42% { opacity: 0; } 44%, 100% { opacity: 1; } } @keyframes qr-type-1 { 0%, 45% { clip-path: inset(0 100% 0 0); } 48%, 100% { clip-path: inset(0 0 0 0); } } @keyframes qr-type-2 { 0%, 48% { clip-path: inset(0 100% 0 0); } 51%, 100% { clip-path: inset(0 0 0 0); } } @keyframes qr-type-3 { 0%, 51% { clip-path: inset(0 100% 0 0); } 53%, 100% { clip-path: inset(0 0 0 0); } } @keyframes qr-pill-from { 0%, 53% { opacity: 0; } 55%, 100% { opacity: 1; } } @keyframes qr-strip { 0%, 56% { opacity: 0; } 58%, 100% { opacity: 1; } } @keyframes qr-step-1 { 0%, 58% { fill: var(--surface-2); } 59%, 100% { fill: rgba(50,199,135,.25); } } @keyframes qr-step-2 { 0%, 61% { fill: var(--surface-2); } 62%, 100% { fill: rgba(50,199,135,.25); } } @keyframes qr-step-3 { 0%, 64% { fill: var(--surface-2); } 65%, 100% { fill: rgba(50,199,135,.25); } } @keyframes qr-step-4 { 0%, 67% { fill: var(--surface-2); } 68%, 100% { fill: rgba(255,176,0,.25); } } @keyframes qr-pill-time { 0%, 69% { opacity: 0; } 70%, 100% { opacity: 1; } } @keyframes qr-kpi-a { 0%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } } @keyframes qr-kpi-b { 0%, 75% { opacity: 0; } 76%, 100% { opacity: 1; } } @keyframes qr-pill-upd { 0%, 76% { opacity: 0; } 77%, 100% { opacity: 1; } } @keyframes qr-sched { 0%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } } @keyframes qr-sent { 0%, 82% { opacity: 0; } 84%, 100% { opacity: 1; } } @keyframes qr-cap-a { 0%, 3% { opacity: 0; } 5%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } } @keyframes qr-cap-b { 0%, 31% { opacity: 0; } 33%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } } @keyframes qr-cap-c { 0%, 57% { opacity: 0; } 59%, 86% { opacity: 1; } 88%, 100% { opacity: 0; } } @keyframes qr-banner { 0%, 88% { opacity: 0; } 90%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .qr-pkt { display: none; } .qr-extract, .qr-strike, .qr-query, .qr-qrow, .qr-pill, .qr-report, .qr-tiles, .qr-kpi-a, .qr-kpi-b, .qr-bars, .qr-bar, .qr-insight, .qr-type, .qr-strip, .qr-step rect, .qr-sched, .qr-sent, .qr-cap, .qr-banner { animation: none; } .qr-extract, .qr-kpi-a, .qr-cap { opacity: 0; } .qr-query, .qr-qrow, .qr-pill, .qr-report, .qr-tiles, .qr-kpi-b, .qr-bars, .qr-insight, .qr-strip, .qr-sched, .qr-sent, .qr-banner { opacity: 1; } .qr-bar { transform: none; } .qr-type { clip-path: none; } .qr-step rect { fill: rgba(50,199,135,.25); } .qr-step-4 rect { fill: rgba(255,176,0,.25); } } /* Business-processes hero: mined → drawn → validated → compared → by design (16 s loop; beats 1 0–14 · 2 14–34 · 3 34–52 · 4 52–72 · 5 72–90 · banner 90–100) */ .bp-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .bp-src rect { fill: var(--surface-2); stroke: var(--border); } .bp-src text { font-size: 11.5px; font-weight: 600; fill: var(--text); text-anchor: middle; } .bp-src { opacity: 0; animation: bp-src 16s ease-out infinite; } .bp-rails use { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; } .bp-rails { opacity: 0; animation: bp-src 16s ease-out infinite; } .bp-lbl { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-muted); } .bp-count { font-size: 15px; font-weight: 600; fill: var(--text); opacity: 0; animation: 16s linear infinite; } .bp-count-a { animation-name: bp-count-a; } .bp-count-b { animation-name: bp-count-b; } .bp-good { fill: var(--success); } .bp-start { fill: none; stroke: var(--text-muted); stroke-width: 2; opacity: 0; animation: bp-start 16s linear infinite; } .bp-flow { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0; animation: 16s linear infinite; } .bp-f0 { animation-name: bp-f0; } .bp-f1 { animation-name: bp-f1; } .bp-f2 { animation-name: bp-f2; } .bp-f3 { animation-name: bp-f3; } .bp-f4 { animation-name: bp-f4; } .bp-task rect { fill: var(--surface-2); fill-opacity: 0; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 210; stroke-dashoffset: 210; animation: 16s ease-out infinite; } .bp-task text { font-size: 10.5px; font-weight: 600; fill: var(--text); text-anchor: middle; opacity: 0; animation: 16s linear infinite; } .bp-t1 rect { animation-name: bp-draw-1; } .bp-t1 text { animation-name: bp-txt-1; } .bp-t2 rect { animation-name: bp-draw-2; } .bp-t2 text { animation-name: bp-txt-2; } .bp-t3 rect { animation-name: bp-draw-3; } .bp-t3 text { animation-name: bp-txt-3; } .bp-t4 rect { animation-name: bp-draw-4; } .bp-t4 text { animation-name: bp-txt-4; } .bp-t5 rect { animation-name: bp-draw-5; } .bp-t5 text { animation-name: bp-txt-5; } .bp-pill text, .bp-badge text { font-size: 9.5px; font-weight: 600; text-anchor: middle; } .bp-ok rect { fill: rgba(50,199,135,.18); } .bp-ok text { fill: var(--success); } .bp-warn rect { fill: rgba(255,122,48,.18); } .bp-warn text { fill: var(--warning); } .bp-pill, .bp-badge { opacity: 0; animation: 16s ease-out infinite; } .bp-p1 { animation-name: bp-p1; } .bp-p2a { animation-name: bp-p2a; } .bp-p2b { animation-name: bp-p2b; } .bp-p3 { animation-name: bp-p3; } .bp-p4 { animation-name: bp-p4; } .bp-p5a { animation-name: bp-p5a; } .bp-p5b { animation-name: bp-p5b; } .bp-cmp { opacity: 0; animation: bp-cmp 16s ease-out infinite; } .bp-card { fill: var(--surface-2); stroke: var(--border); } .bp-h { font-size: 10.5px; font-weight: 600; fill: var(--text-muted); } .bp-chip rect { fill: var(--bg); stroke: var(--border); } .bp-chip text { font-size: 10px; font-weight: 500; fill: var(--text); text-anchor: middle; } .bp-row { opacity: 0; animation: 16s linear infinite; } .bp-row-1 { animation-name: bp-row-1; } .bp-row-2 { animation-name: bp-row-2; } .bp-mv { animation: 16s cubic-bezier(.22,1,.36,1) infinite; } .bp-mv-pick { animation-name: bp-mv-pick; } .bp-mv-credit { animation-name: bp-mv-credit; } .bp-badge-a { animation-name: bp-badge-a; } .bp-badge-b { animation-name: bp-badge-b; } .bp-sop rect { fill: rgba(255,176,0,.18); } .bp-sop text { fill: var(--orange); } .bp-sop { animation-name: bp-sop; } .bp-cap { font-size: 12px; font-weight: 500; fill: var(--text-muted); opacity: 0; animation: 16s linear infinite; } .bp-cap-a { animation-name: bp-cap-a; } .bp-cap-b { animation-name: bp-cap-b; } .bp-cap-c { animation-name: bp-cap-c; } .bp-banner { opacity: 0; animation: bp-banner 16s ease-out infinite; } .bp-banner rect { fill: var(--bg); stroke: var(--orange); } .bp-banner text { font-size: 12px; font-weight: 500; fill: var(--text); text-anchor: middle; } .bp-pkt circle { fill: var(--orange); filter: drop-shadow(0 0 6px rgba(255,176,0,.7)); } @keyframes bp-src { 0%, 1% { opacity: 0; } 3%, 100% { opacity: 1; } } @keyframes bp-start { 0%, 13% { opacity: 0; } 14%, 100% { opacity: 1; } } @keyframes bp-f0 { 0%, 14% { opacity: 0; } 15%, 100% { opacity: 1; } } @keyframes bp-f1 { 0%, 18% { opacity: 0; } 19%, 100% { opacity: 1; } } @keyframes bp-f2 { 0%, 22% { opacity: 0; } 23%, 100% { opacity: 1; } } @keyframes bp-f3 { 0%, 26% { opacity: 0; } 27%, 100% { opacity: 1; } } @keyframes bp-f4 { 0%, 30% { opacity: 0; } 31%, 100% { opacity: 1; } } @keyframes bp-draw-1 { 0%, 15% { stroke-dashoffset: 210; fill-opacity: 0; } 18%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes bp-txt-1 { 0%, 17% { opacity: 0; } 18%, 100% { opacity: 1; } } @keyframes bp-draw-2 { 0%, 19% { stroke-dashoffset: 210; fill-opacity: 0; } 22%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes bp-txt-2 { 0%, 21% { opacity: 0; } 22%, 100% { opacity: 1; } } @keyframes bp-draw-3 { 0%, 23% { stroke-dashoffset: 210; fill-opacity: 0; } 26%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes bp-txt-3 { 0%, 25% { opacity: 0; } 26%, 100% { opacity: 1; } } @keyframes bp-draw-4 { 0%, 27% { stroke-dashoffset: 210; fill-opacity: 0; } 30%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes bp-txt-4 { 0%, 29% { opacity: 0; } 30%, 100% { opacity: 1; } } @keyframes bp-draw-5 { 0%, 31% { stroke-dashoffset: 210; fill-opacity: 0; } 34%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes bp-txt-5 { 0%, 33% { opacity: 0; } 34%, 100% { opacity: 1; } } @keyframes bp-p1 { 0%, 36% { opacity: 0; } 37%, 100% { opacity: 1; } } @keyframes bp-p3 { 0%, 42% { opacity: 0; } 43%, 100% { opacity: 1; } } @keyframes bp-p4 { 0%, 45% { opacity: 0; } 46%, 100% { opacity: 1; } } @keyframes bp-p2a { 0%, 39% { opacity: 0; } 40%, 79% { opacity: 1; } 80%, 100% { opacity: 0; } } @keyframes bp-p2b { 0%, 79% { opacity: 0; } 80%, 100% { opacity: 1; } } @keyframes bp-p5a { 0%, 48% { opacity: 0; } 49%, 81% { opacity: 1; } 82%, 100% { opacity: 0; } } @keyframes bp-p5b { 0%, 81% { opacity: 0; } 82%, 100% { opacity: 1; } } @keyframes bp-count-a { 0%, 50% { opacity: 0; } 51%, 83% { opacity: 1; } 84%, 100% { opacity: 0; } } @keyframes bp-count-b { 0%, 83% { opacity: 0; } 84%, 100% { opacity: 1; } } @keyframes bp-cmp { 0%, 53% { opacity: 0; } 55%, 100% { opacity: 1; } } @keyframes bp-row-1 { 0%, 56% { opacity: 0; } 57%, 100% { opacity: 1; } } @keyframes bp-row-2 { 0%, 59% { opacity: 0; } 60%, 100% { opacity: 1; } } @keyframes bp-badge-a { 0%, 62% { opacity: 0; } 63%, 76% { opacity: 1; } 77%, 100% { opacity: 0; } } @keyframes bp-badge-b { 0%, 77% { opacity: 0; } 78%, 100% { opacity: 1; } } @keyframes bp-mv-pick { 0%, 73% { transform: translateX(0); } 76%, 100% { transform: translateX(76px); } } @keyframes bp-mv-credit { 0%, 73% { transform: translateX(0); } 76%, 100% { transform: translateX(-76px); } } @keyframes bp-sop { 0%, 85% { opacity: 0; } 86%, 100% { opacity: 1; } } @keyframes bp-cap-a { 0%, 13% { opacity: 0; } 15%, 33% { opacity: 1; } 35%, 100% { opacity: 0; } } @keyframes bp-cap-b { 0%, 54% { opacity: 0; } 56%, 71% { opacity: 1; } 73%, 100% { opacity: 0; } } @keyframes bp-cap-c { 0%, 74% { opacity: 0; } 76%, 88% { opacity: 1; } 90%, 100% { opacity: 0; } } @keyframes bp-banner { 0%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bp-pkt { display: none; } .bp-src, .bp-rails, .bp-count, .bp-start, .bp-flow, .bp-task rect, .bp-task text, .bp-pill, .bp-badge, .bp-cmp, .bp-row, .bp-mv, .bp-cap, .bp-banner { animation: none; } .bp-src, .bp-rails, .bp-count-b, .bp-start, .bp-flow, .bp-task text, .bp-p1, .bp-p2b, .bp-p3, .bp-p4, .bp-p5b, .bp-cmp, .bp-row, .bp-badge-b, .bp-sop, .bp-banner { opacity: 1; } .bp-count-a, .bp-p2a, .bp-p5a, .bp-badge-a, .bp-cap { opacity: 0; } .bp-task rect { stroke-dashoffset: 0; fill-opacity: 1; } .bp-mv-pick { transform: translateX(76px); } .bp-mv-credit { transform: translateX(-76px); } } /* Operations hero: normal → strain → error → assisted fix → recovered (14 s loop; beats 1 0–16 · 2 16–34 · 3 34–48 · 4 48–70 · 5 70–88 · banner 88–100) */ .op-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .op-state text { font-size: 12px; font-weight: 600; fill: var(--text); } .op-dot-ok { fill: var(--success); } .op-dot-warn { fill: var(--warning); } .op-dot-bad { fill: var(--critical); } .op-state { opacity: 0; animation: 14s linear infinite; } .op-state-1 { animation-name: op-st-1; } .op-state-2 { animation-name: op-st-2; } .op-state-3 { animation-name: op-st-3; } .op-state-4 { animation-name: op-st-4; } .op-tile rect:first-child { fill: var(--surface-2); stroke: var(--border); } .op-lbl { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; fill: var(--text-muted); } .op-val { font-size: 15px; font-weight: 600; fill: var(--text); } .op-warn { fill: var(--warning); } .op-bad { fill: var(--critical); } .op-good { fill: var(--success); } .op-stripe { fill: var(--success); } .op-s-q { animation: op-s-q 14s linear infinite; } .op-s-e { animation: op-s-e 14s linear infinite; } .op-q-a, .op-e-a { animation: 14s linear infinite; } .op-q-b, .op-q-c, .op-e-b, .op-e-c { opacity: 0; animation: 14s linear infinite; } .op-q-a { animation-name: op-q-a; } .op-q-b { animation-name: op-q-b; } .op-q-c { animation-name: op-q-c; } .op-e-a { animation-name: op-e-a; } .op-e-b { animation-name: op-e-b; } .op-e-c { animation-name: op-e-c; } .op-panel { fill: var(--surface-2); stroke: var(--border); } .op-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: 14s linear infinite; } .op-line-a { stroke: var(--success); animation-name: op-line-a; } .op-line-b { stroke: var(--warning); animation-name: op-line-b; } .op-line-c { stroke: var(--success); animation-name: op-line-c; } .op-ln { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text); opacity: 0; animation: 14s linear infinite; } .op-l1 { animation-name: op-l1; } .op-l2 { animation-name: op-l2; } .op-l3 { animation-name: op-l3; } .op-l4 { animation-name: op-l4; } .op-l5 { animation-name: op-l5; } .op-hl { fill: rgba(232,74,95,.14); opacity: 0; animation: op-hl 14s linear infinite; } .op-ai { opacity: 0; animation: op-ai 14s ease-out infinite; } .op-ai-bg { fill: var(--bg); stroke: var(--orange); stroke-dasharray: 4 3; } .op-btn rect { fill: var(--orange); } .op-btn text { font-size: 10.5px; font-weight: 600; fill: var(--carbon); text-anchor: middle; } .op-btn { transform-box: fill-box; transform-origin: center; animation: 14s ease-in-out infinite; } .op-btn-an { animation-name: op-btn-an; } .op-btn-ap { opacity: 0; animation-name: op-btn-ap; } .op-an-1 { animation-name: op-an-1; } .op-an-2 { animation-name: op-an-2; } .op-pill rect { fill: rgba(50,199,135,.18); } .op-pill text { font-size: 9.5px; font-weight: 600; fill: var(--success); text-anchor: middle; } .op-applied { opacity: 0; animation: op-applied 14s ease-out infinite; } .op-banner { opacity: 0; animation: op-banner 14s ease-out infinite; } .op-banner rect { fill: var(--bg); stroke: var(--orange); } .op-banner text { font-size: 12px; font-weight: 500; fill: var(--text); text-anchor: middle; } @keyframes op-st-1 { 0%, 1% { opacity: 0; } 2%, 15% { opacity: 1; } 16%, 100% { opacity: 0; } } @keyframes op-st-2 { 0%, 16% { opacity: 0; } 17%, 34% { opacity: 1; } 35%, 100% { opacity: 0; } } @keyframes op-st-3 { 0%, 35% { opacity: 0; } 36%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } } @keyframes op-st-4 { 0%, 76% { opacity: 0; } 77%, 100% { opacity: 1; } } @keyframes op-q-a { 0%, 17% { opacity: 1; } 18%, 100% { opacity: 0; } } @keyframes op-q-b { 0%, 17% { opacity: 0; } 18%, 73% { opacity: 1; } 74%, 100% { opacity: 0; } } @keyframes op-q-c { 0%, 73% { opacity: 0; } 74%, 100% { opacity: 1; } } @keyframes op-e-a { 0%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } } @keyframes op-e-b { 0%, 35% { opacity: 0; } 36%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } } @keyframes op-e-c { 0%, 75% { opacity: 0; } 76%, 100% { opacity: 1; } } @keyframes op-s-q { 0%, 17% { fill: var(--success); } 18%, 73% { fill: var(--warning); } 74%, 100% { fill: var(--success); } } @keyframes op-s-e { 0%, 35% { fill: var(--success); } 36%, 75% { fill: var(--critical); } 76%, 100% { fill: var(--success); } } @keyframes op-line-a { 0%, 2% { stroke-dashoffset: 600; } 16%, 100% { stroke-dashoffset: 0; } } @keyframes op-line-b { 0%, 17% { stroke-dashoffset: 600; } 34%, 100% { stroke-dashoffset: 0; } } @keyframes op-line-c { 0%, 72% { stroke-dashoffset: 600; } 86%, 100% { stroke-dashoffset: 0; } } @keyframes op-l1 { 0%, 3% { opacity: 0; } 4%, 100% { opacity: 1; } } @keyframes op-l2 { 0%, 7% { opacity: 0; } 8%, 100% { opacity: 1; } } @keyframes op-l3 { 0%, 19% { opacity: 0; } 20%, 100% { opacity: 1; } } @keyframes op-l4 { 0%, 35% { opacity: 0; } 36%, 100% { opacity: 1; } } @keyframes op-l5 { 0%, 71% { opacity: 0; } 72%, 100% { opacity: 1; } } @keyframes op-hl { 0%, 35% { opacity: 0; } 36%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } } @keyframes op-ai { 0%, 46% { opacity: 0; } 48%, 100% { opacity: 1; } } @keyframes op-btn-an { 0%, 49% { transform: scale(1); } 50% { transform: scale(.92); } 51%, 100% { transform: scale(1); } } @keyframes op-an-1 { 0%, 51% { opacity: 0; } 53%, 100% { opacity: 1; } } @keyframes op-an-2 { 0%, 55% { opacity: 0; } 57%, 100% { opacity: 1; } } @keyframes op-btn-ap { 0%, 58% { opacity: 0; transform: scale(1); } 59%, 61% { opacity: 1; transform: scale(1); } 62% { opacity: 1; transform: scale(.92); } 63%, 65% { opacity: 1; transform: scale(1); } 66%, 100% { opacity: 0; transform: scale(1); } } @keyframes op-applied { 0%, 65% { opacity: 0; } 67%, 100% { opacity: 1; } } @keyframes op-banner { 0%, 88% { opacity: 0; } 90%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .op-state, .op-stripe, .op-val, .op-line, .op-ln, .op-hl, .op-ai, .op-btn, .op-applied, .op-banner { animation: none; } .op-state-4, .op-q-c, .op-e-c, .op-ln, .op-ai, .op-applied, .op-banner { opacity: 1; } .op-state-1, .op-state-2, .op-state-3, .op-q-a, .op-q-b, .op-e-a, .op-e-b, .op-hl, .op-btn-ap { opacity: 0; } .op-line { stroke-dashoffset: 0; } .op-btn { transform: none; } } /* AI assistant hero: ask → answer from live sources → request a change → scoped → built (16 s loop; beats 1 0–30 · 2 30–58 · 3 58–88 · banner 88–100) */ .ai-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .ai-panel { fill: var(--surface-2); stroke: var(--border); } .ai-bar { fill: var(--bg); } .ai-dot { fill: var(--border-strong); } .ai-bar-t { font-size: 11px; font-weight: 600; fill: var(--text-muted); } .ai-lbl { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; fill: var(--text-muted); } .ai-user rect { fill: rgba(255,176,0,.16); } .ai-user text { font-size: 10.5px; font-weight: 500; fill: var(--text); text-anchor: middle; } .ai-user { opacity: 0; animation: 16s ease-out infinite; } .ai-u1 { animation-name: ai-u1; } .ai-u2 { animation-name: ai-u2; } .ai-src { fill: var(--bg); stroke: var(--border-strong); } .ai-src-t { font-size: 9px; font-weight: 600; fill: var(--text-muted); text-anchor: middle; } .ai-ln { font-size: 10.5px; fill: var(--text); } .ai-strong { font-weight: 600; } .ai-ans { opacity: 0; animation: 16s linear infinite; } .ai-a1 { animation-name: ai-a1; } .ai-a2 { animation-name: ai-a2; } .ai-a3 { animation-name: ai-a3; } .ai-a4 { animation-name: ai-a4; } .ai-a5 { animation-name: ai-a5; } .ai-aff { animation-name: ai-aff; } .ai-pill rect { fill: rgba(50,199,135,.18); } .ai-pill text { font-size: 9px; font-weight: 600; fill: var(--success); text-anchor: middle; } .ai-pill { opacity: 0; animation: 16s ease-out infinite; } .ai-time1 { animation-name: ai-time1; } .ai-time2 { animation-name: ai-time2; } .ai-who { animation-name: ai-who; } .ai-model { animation-name: ai-model; } .ai-time1 rect, .ai-time2 rect { fill: rgba(255,176,0,.18); } .ai-time1 text, .ai-time2 text { fill: var(--orange); } .ai-cap { font-size: 11px; font-weight: 500; fill: var(--text-muted); opacity: 0; animation: 16s linear infinite; } .ai-cap-a { animation-name: ai-cap-a; } .ai-chip rect { fill: var(--bg); stroke: var(--border-strong); } .ai-chip text { font-size: 9.5px; font-weight: 500; fill: var(--text); text-anchor: middle; } .ai-warn rect { fill: rgba(255,122,48,.16); stroke: var(--warning); } .ai-warn text { fill: var(--warning); font-weight: 600; } .ai-chip { opacity: 0; animation: 16s ease-out infinite; } .ai-c1 { animation-name: ai-c1; } .ai-c2 { animation-name: ai-c2; } .ai-c3 { animation-name: ai-c3; } .ai-c4 { animation-name: ai-c4; } .ai-c5 { animation-name: ai-c5; } .ai-btn rect { fill: var(--orange); } .ai-btn text { font-size: 10.5px; font-weight: 600; fill: var(--carbon); text-anchor: middle; } .ai-btn { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ai-accept 16s ease-in-out infinite; } .ai-build { opacity: 0; animation: ai-build 16s ease-out infinite; } .ai-step rect { fill: var(--bg); stroke: var(--border); animation: 16s linear infinite; } .ai-step text { font-size: 9.5px; font-weight: 600; fill: var(--text); text-anchor: middle; } .ai-s1 rect { animation-name: ai-s1; } .ai-s2 rect { animation-name: ai-s2; } .ai-s3 rect { animation-name: ai-s3; } .ai-s4 rect { animation-name: ai-s4; } .ai-tile rect { fill: var(--bg); stroke: var(--border); animation: 16s linear infinite; } .ai-tile-t { font-size: 12px; font-weight: 600; fill: var(--text); } .ai-t-strategy rect { animation-name: ai-tl-1; } .ai-t-process rect { animation-name: ai-tl-2; } .ai-t-workflow rect { animation-name: ai-tl-3; } .ai-t-data rect { animation-name: ai-tl-4; } .ai-t-systems rect { animation-name: ai-tl-x2; } .ai-t-portals rect { animation-name: ai-tl-x3; } .ai-t-reports rect { animation-name: ai-tl-x4; } .ai-stat { font-size: 9.5px; font-weight: 600; text-anchor: end; opacity: 0; animation: 16s linear infinite; } .ai-read { fill: var(--success); } .ai-affected { fill: var(--warning); } .ai-r1 { animation-name: ai-r1; } .ai-r2 { animation-name: ai-r2; } .ai-r3 { animation-name: ai-r3; } .ai-r4 { animation-name: ai-r4; } .ai-x1 { animation-name: ai-x1; } .ai-x2 { animation-name: ai-x2; } .ai-x3 { animation-name: ai-x3; } .ai-x4 { animation-name: ai-x4; } .ai-banner { opacity: 0; animation: ai-banner 16s ease-out infinite; } .ai-banner rect { fill: var(--bg); stroke: var(--orange); } .ai-banner text { font-size: 12px; font-weight: 500; fill: var(--text); text-anchor: middle; } @keyframes ai-u1 { 0%, 2% { opacity: 0; } 4%, 100% { opacity: 1; } } @keyframes ai-a1 { 0%, 9% { opacity: 0; } 10%, 100% { opacity: 1; } } @keyframes ai-a2 { 0%, 12% { opacity: 0; } 13%, 100% { opacity: 1; } } @keyframes ai-a3 { 0%, 15% { opacity: 0; } 16%, 100% { opacity: 1; } } @keyframes ai-a4 { 0%, 18% { opacity: 0; } 19%, 100% { opacity: 1; } } @keyframes ai-a5 { 0%, 21% { opacity: 0; } 22%, 100% { opacity: 1; } } @keyframes ai-time1 { 0%, 23% { opacity: 0; } 24%, 100% { opacity: 1; } } @keyframes ai-cap-a { 0%, 24% { opacity: 0; } 25%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } } @keyframes ai-tl-1 { 0%, 9% { stroke: var(--border); } 10%, 100% { stroke: var(--success); } } @keyframes ai-tl-2 { 0%, 12% { stroke: var(--border); } 13%, 100% { stroke: var(--success); } } @keyframes ai-tl-3 { 0%, 15% { stroke: var(--border); } 16%, 39% { stroke: var(--success); } 40%, 100% { stroke: var(--warning); } } @keyframes ai-tl-4 { 0%, 18% { stroke: var(--border); } 19%, 100% { stroke: var(--success); } } @keyframes ai-tl-x2 { 0%, 41% { stroke: var(--border); } 42%, 100% { stroke: var(--warning); } } @keyframes ai-tl-x3 { 0%, 49% { stroke: var(--border); } 50%, 100% { stroke: var(--warning); } } @keyframes ai-tl-x4 { 0%, 45% { stroke: var(--border); } 46%, 100% { stroke: var(--warning); } } @keyframes ai-r1 { 0%, 9% { opacity: 0; } 10%, 100% { opacity: 1; } } @keyframes ai-r2 { 0%, 12% { opacity: 0; } 13%, 100% { opacity: 1; } } @keyframes ai-r3 { 0%, 15% { opacity: 0; } 16%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } } @keyframes ai-r4 { 0%, 18% { opacity: 0; } 19%, 100% { opacity: 1; } } @keyframes ai-u2 { 0%, 32% { opacity: 0; } 34%, 100% { opacity: 1; } } @keyframes ai-aff { 0%, 37% { opacity: 0; } 38%, 100% { opacity: 1; } } @keyframes ai-c1 { 0%, 39% { opacity: 0; } 40%, 100% { opacity: 1; } } @keyframes ai-c2 { 0%, 41% { opacity: 0; } 42%, 100% { opacity: 1; } } @keyframes ai-c3 { 0%, 43% { opacity: 0; } 44%, 100% { opacity: 1; } } @keyframes ai-c4 { 0%, 45% { opacity: 0; } 46%, 100% { opacity: 1; } } @keyframes ai-c5 { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes ai-x1 { 0%, 39% { opacity: 0; } 40%, 100% { opacity: 1; } } @keyframes ai-x2 { 0%, 41% { opacity: 0; } 42%, 100% { opacity: 1; } } @keyframes ai-x4 { 0%, 45% { opacity: 0; } 46%, 100% { opacity: 1; } } @keyframes ai-x3 { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes ai-accept { 0%, 55% { opacity: 0; transform: scale(1); } 56%, 59% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(.92); } 61%, 63% { opacity: 1; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(1); } } @keyframes ai-build { 0%, 63% { opacity: 0; } 65%, 100% { opacity: 1; } } @keyframes ai-s1 { 0%, 66% { fill: var(--bg); } 67%, 100% { fill: rgba(50,199,135,.25); } } @keyframes ai-s2 { 0%, 70% { fill: var(--bg); } 71%, 100% { fill: rgba(50,199,135,.25); } } @keyframes ai-s3 { 0%, 74% { fill: var(--bg); } 75%, 100% { fill: rgba(50,199,135,.25); } } @keyframes ai-s4 { 0%, 78% { fill: var(--bg); } 79%, 100% { fill: rgba(255,176,0,.25); } } @keyframes ai-time2 { 0%, 80% { opacity: 0; } 81%, 100% { opacity: 1; } } @keyframes ai-who { 0%, 82% { opacity: 0; } 83%, 100% { opacity: 1; } } @keyframes ai-model { 0%, 84% { opacity: 0; } 85%, 100% { opacity: 1; } } @keyframes ai-banner { 0%, 88% { opacity: 0; } 90%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ai-user, .ai-ans, .ai-pill, .ai-cap, .ai-chip, .ai-btn, .ai-build, .ai-step rect, .ai-tile rect, .ai-stat, .ai-banner { animation: none; } .ai-user, .ai-ans, .ai-pill, .ai-chip, .ai-build, .ai-banner, .ai-r1, .ai-r2, .ai-r4, .ai-x1, .ai-x2, .ai-x3, .ai-x4 { opacity: 1; } .ai-cap, .ai-btn, .ai-r3 { opacity: 0; } .ai-step rect { fill: rgba(50,199,135,.25); } .ai-s4 rect { fill: rgba(255,176,0,.25); } .ai-t-strategy rect, .ai-t-process rect, .ai-t-data rect { stroke: var(--success); } .ai-t-workflow rect, .ai-t-systems rect, .ai-t-portals rect, .ai-t-reports rect { stroke: var(--warning); } } /* AI assistant hero: describe → plan → approve → build (reviewed) → ship (16 s loop; beats 1 0–10 · 2 10–32 · 3 32–70 · 4 70–88 · banner 88–100) */ .bd-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); background: var(--surface); } .bd-panel { fill: var(--surface-2); stroke: var(--border); } .bd-bar { fill: var(--bg); } .bd-dot { fill: var(--border-strong); } .bd-bar-t { font-size: 11px; font-weight: 600; fill: var(--text-muted); } .bd-lbl { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; fill: var(--text-muted); } .bd-h { font-size: 11.5px; font-weight: 700; fill: var(--text); } .bd-user rect { fill: rgba(255,176,0,.16); } .bd-user text { font-size: 10.5px; font-weight: 500; fill: var(--text); text-anchor: middle; } .bd-user { opacity: 0; animation: bd-user 16s ease-out infinite; } .bd-agent rect { fill: var(--bg); stroke: var(--border-strong); } .bd-agent text { font-size: 9px; font-weight: 600; fill: var(--text-muted); text-anchor: middle; } .bd-agent-plan { opacity: 0; animation: bd-plan 16s ease-out infinite; } .bd-tag rect { fill: rgba(255,176,0,.18); } .bd-tag text { font-size: 8.5px; font-weight: 700; fill: var(--orange); text-anchor: middle; } .bd-reuse rect { fill: rgba(50,199,135,.18); } .bd-reuse text { fill: var(--success); } .bd-ln { font-size: 10.5px; fill: var(--text); } .bd-row { opacity: 0; animation: 16s linear infinite; } .bd-p1 { animation-name: bd-p1; } .bd-p2 { animation-name: bd-p2; } .bd-p3 { animation-name: bd-p3; } .bd-p4 { animation-name: bd-p4; } .bd-p5 { animation-name: bd-p5; } .bd-pill rect { fill: rgba(50,199,135,.18); } .bd-pill text { font-size: 9px; font-weight: 600; fill: var(--success); text-anchor: middle; } .bd-pill { opacity: 0; animation: 16s ease-out infinite; } .bd-time1 rect, .bd-time2 rect { fill: rgba(255,176,0,.18); } .bd-time1 text, .bd-time2 text { fill: var(--orange); } .bd-time1 { animation-name: bd-time1; } .bd-time2 { animation-name: bd-time2; } .bd-who { animation-name: bd-who; } .bd-guide { animation-name: bd-guide; } .bd-live { animation-name: bd-live; } .bd-btn rect { fill: var(--orange); } .bd-btn text { font-size: 10px; font-weight: 600; fill: var(--carbon); text-anchor: middle; } .bd-btn { opacity: 0; transform-box: fill-box; transform-origin: center; animation: bd-approve 16s ease-in-out infinite; } .bd-build { opacity: 0; animation: bd-build 16s ease-out infinite; } .bd-track { fill: var(--bg); } .bd-prog { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: 16s linear infinite; } .bd-g1 { animation-name: bd-g1; } .bd-g2 { animation-name: bd-g2; } .bd-g3 { animation-name: bd-g3; } .bd-g4 { animation-name: bd-g4; } .bd-g5 { animation-name: bd-g5; } .bd-st { font-size: 9.5px; font-weight: 600; opacity: 0; animation: 16s linear infinite; } .bd-sa { fill: var(--orange); } .bd-sb { fill: var(--success); } .bd-sa1 { animation-name: bd-sa1; } .bd-sb1 { animation-name: bd-sb1; } .bd-sa2 { animation-name: bd-sa2; } .bd-sb2 { animation-name: bd-sb2; } .bd-sa3 { animation-name: bd-sa3; } .bd-sb3 { animation-name: bd-sb3; } .bd-sa4 { animation-name: bd-sa4; } .bd-sb4 { animation-name: bd-sb4; } .bd-sa5 { animation-name: bd-sa5; } .bd-sb5 { animation-name: bd-sb5; } .bd-ship { opacity: 0; animation: bd-ship 16s ease-out infinite; } .bd-step rect { fill: var(--bg); stroke: var(--border); animation: 16s linear infinite; } .bd-step text { font-size: 9.5px; font-weight: 600; fill: var(--text); text-anchor: middle; } .bd-s1 rect { animation-name: bd-s1; } .bd-s2 rect { animation-name: bd-s2; } .bd-s3 rect { animation-name: bd-s3; } .bd-tile > rect:first-child { fill: var(--bg); stroke: var(--border); } .bd-stripe { fill: var(--success); } .bd-tt { font-size: 11.5px; font-weight: 600; fill: var(--text); } .bd-ts { font-size: 9.5px; fill: var(--text-muted); } .bd-mini rect { fill: var(--surface-2); stroke: var(--border-strong); } .bd-mini text { font-size: 8.5px; font-weight: 600; fill: var(--text); text-anchor: middle; } .bd-mini line { stroke: var(--text-muted); stroke-width: 1.5; } .bd-phone { fill: var(--surface-2); stroke: var(--border-strong); } .bd-scr { fill: var(--bg); } .bd-ui { fill: var(--surface-2); } .bd-ui-photo { fill: rgba(255,176,0,.25); } .bd-ui-btn { fill: var(--orange); } .bd-tile { opacity: 0; transform-box: fill-box; transform-origin: center; animation: 16s cubic-bezier(.22,1,.36,1) infinite; } .bd-t1 { animation-name: bd-t1; } .bd-t2 { animation-name: bd-t2; } .bd-t3 { animation-name: bd-t3; } .bd-t4 { animation-name: bd-t4; } .bd-t5 { animation-name: bd-t5; } .bd-banner { opacity: 0; animation: bd-banner 16s ease-out infinite; } .bd-banner rect { fill: var(--bg); stroke: var(--orange); } .bd-banner text { font-size: 12px; font-weight: 500; fill: var(--text); text-anchor: middle; } @keyframes bd-user { 0%, 2% { opacity: 0; } 4%, 100% { opacity: 1; } } @keyframes bd-plan { 0%, 9% { opacity: 0; } 10%, 100% { opacity: 1; } } @keyframes bd-p1 { 0%, 11% { opacity: 0; } 12%, 100% { opacity: 1; } } @keyframes bd-p2 { 0%, 14% { opacity: 0; } 15%, 100% { opacity: 1; } } @keyframes bd-p3 { 0%, 17% { opacity: 0; } 18%, 100% { opacity: 1; } } @keyframes bd-p4 { 0%, 20% { opacity: 0; } 21%, 100% { opacity: 1; } } @keyframes bd-p5 { 0%, 23% { opacity: 0; } 24%, 100% { opacity: 1; } } @keyframes bd-time1 { 0%, 25% { opacity: 0; } 26%, 100% { opacity: 1; } } @keyframes bd-approve { 0%, 27% { opacity: 0; transform: scale(1); } 28%, 30% { opacity: 1; transform: scale(1); } 31% { opacity: 1; transform: scale(.92); } 32%, 100% { opacity: 1; transform: scale(1); } } @keyframes bd-build { 0%, 32% { opacity: 0; } 34%, 100% { opacity: 1; } } @keyframes bd-g1 { 0%, 34% { transform: scaleX(0); } 41%, 100% { transform: scaleX(1); } } @keyframes bd-sa1 { 0%, 34% { opacity: 0; } 35%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } } @keyframes bd-sb1 { 0%, 40% { opacity: 0; } 41%, 100% { opacity: 1; } } @keyframes bd-g2 { 0%, 41% { transform: scaleX(0); } 48%, 100% { transform: scaleX(1); } } @keyframes bd-sa2 { 0%, 41% { opacity: 0; } 42%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } } @keyframes bd-sb2 { 0%, 47% { opacity: 0; } 48%, 100% { opacity: 1; } } @keyframes bd-g3 { 0%, 48% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } } @keyframes bd-sa3 { 0%, 48% { opacity: 0; } 49%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } } @keyframes bd-sb3 { 0%, 54% { opacity: 0; } 55%, 100% { opacity: 1; } } @keyframes bd-g4 { 0%, 55% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } } @keyframes bd-sa4 { 0%, 55% { opacity: 0; } 56%, 61% { opacity: 1; } 62%, 100% { opacity: 0; } } @keyframes bd-sb4 { 0%, 61% { opacity: 0; } 62%, 100% { opacity: 1; } } @keyframes bd-g5 { 0%, 62% { transform: scaleX(0); } 69%, 100% { transform: scaleX(1); } } @keyframes bd-sa5 { 0%, 62% { opacity: 0; } 63%, 68% { opacity: 1; } 69%, 100% { opacity: 0; } } @keyframes bd-sb5 { 0%, 68% { opacity: 0; } 69%, 100% { opacity: 1; } } @keyframes bd-t1 { 0%, 40% { opacity: 0; transform: scale(.94); } 42%, 100% { opacity: 1; transform: none; } } @keyframes bd-t2 { 0%, 41% { opacity: 0; transform: scale(.94); } 43%, 100% { opacity: 1; transform: none; } } @keyframes bd-t3 { 0%, 47% { opacity: 0; transform: scale(.94); } 49%, 100% { opacity: 1; transform: none; } } @keyframes bd-t4 { 0%, 54% { opacity: 0; transform: scale(.94); } 56%, 100% { opacity: 1; transform: none; } } @keyframes bd-t5 { 0%, 61% { opacity: 0; transform: scale(.94); } 63%, 100% { opacity: 1; transform: none; } } @keyframes bd-guide { 0%, 68% { opacity: 0; } 70%, 100% { opacity: 1; } } @keyframes bd-ship { 0%, 70% { opacity: 0; } 72%, 100% { opacity: 1; } } @keyframes bd-s1 { 0%, 73% { fill: var(--bg); } 74%, 100% { fill: rgba(50,199,135,.25); } } @keyframes bd-s2 { 0%, 77% { fill: var(--bg); } 78%, 100% { fill: rgba(50,199,135,.25); } } @keyframes bd-s3 { 0%, 81% { fill: var(--bg); } 82%, 100% { fill: rgba(255,176,0,.25); } } @keyframes bd-live { 0%, 82% { opacity: 0; } 83%, 100% { opacity: 1; } } @keyframes bd-time2 { 0%, 83% { opacity: 0; } 84%, 100% { opacity: 1; } } @keyframes bd-who { 0%, 85% { opacity: 0; } 86%, 100% { opacity: 1; } } @keyframes bd-banner { 0%, 88% { opacity: 0; } 90%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bd-user, .bd-agent-plan, .bd-row, .bd-pill, .bd-btn, .bd-build, .bd-prog, .bd-st, .bd-ship, .bd-step rect, .bd-tile, .bd-banner { animation: none; } .bd-user, .bd-agent-plan, .bd-row, .bd-pill, .bd-build, .bd-sb, .bd-ship, .bd-tile, .bd-banner { opacity: 1; } .bd-btn, .bd-sa { opacity: 0; } .bd-prog { transform: none; } .bd-tile { transform: none; } .bd-step rect { fill: rgba(50,199,135,.25); } .bd-s3 rect { fill: rgba(255,176,0,.25); } } /* Days-not-months lifecycle animation (features/marketplace) - one 16 s loop */ figure.shot.dn-figure { width: min(1040px, calc(100vw - 2 * var(--gutter))); margin-left: calc(50% - min(520px, calc(50vw - var(--gutter)))); } .dn-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); } .dn-panel { fill: var(--bg); stroke: var(--border); } .dn-panel-title { font-size: 16px; font-weight: 600; fill: var(--text); } .dn-panel-sub { font-size: 11.5px; fill: var(--text-muted); } .dn-rail { fill: none; stroke: #B9C0C8; stroke-width: 1.5; stroke-dasharray: 3 7; } .dn-mover-bg { fill: var(--orange); filter: drop-shadow(0 6px 12px rgba(255,176,0,.45)); } .dn-mover-icon { color: var(--carbon); } .dn-ai-bg { fill: var(--tint-100); } .dn-ai-icon { color: var(--amber-900); } .dn-ai-text { font-size: 12px; font-weight: 600; fill: var(--amber-900); } .dn-ai { transform-box: fill-box; transform-origin: center; animation: dn-ai 16s ease-in-out infinite; } .dn-doc-bg { fill: var(--surface); stroke: var(--border); } .dn-doc-title { font-size: 12.5px; font-weight: 600; fill: var(--text); } .dn-doc-sub { font-size: 10.5px; fill: var(--text-muted); } .dn-doc { opacity: 0; animation: dn-doc 16s linear infinite; } .dn-line { fill: var(--surface-2); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: 16s ease-out infinite; } .dn-line-0 { animation-name: dn-line-0; } .dn-line-1 { animation-name: dn-line-1; } .dn-line-2 { animation-name: dn-line-2; } .dn-line-3 { animation-name: dn-line-3; } .dn-chip-bg { fill: var(--surface); stroke: var(--border); } .dn-chip-icon { color: var(--text-2); } .dn-chip-text { font-size: 12px; font-weight: 500; fill: var(--text-2); } .dn-b-0, .dn-b-1, .dn-b-2, .dn-b-3, .dn-b-4 { opacity: 0; animation: 16s ease-out infinite; } .dn-b-0 { animation-name: dn-b-0; } .dn-b-1 { animation-name: dn-b-1; } .dn-b-2 { animation-name: dn-b-2; } .dn-b-3 { animation-name: dn-b-3; } .dn-b-4 { animation-name: dn-b-4; } .dn-spark { color: var(--orange); } .dn-spark-pop { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 16s ease-out infinite; } .dn-b-0 .dn-spark-pop { animation-name: dn-sp-0; } .dn-b-1 .dn-spark-pop { animation-name: dn-sp-1; } .dn-b-2 .dn-spark-pop { animation-name: dn-sp-2; } .dn-b-3 .dn-spark-pop { animation-name: dn-sp-3; } .dn-b-4 .dn-spark-pop { animation-name: dn-sp-4; } .dn-stage { opacity: .35; animation: dn-stage 16s ease-out infinite; } .dn-check circle { fill: var(--success); } .dn-check path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dn-check-stage { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: dn-checks 16s cubic-bezier(.22,1,.36,1) infinite; } .dn-prod { opacity: .35; animation: dn-prod 16s ease-out infinite; } .dn-prod-panel { animation: dn-glow 16s ease-in-out infinite; } .dn-live-badge rect { fill: var(--success); } .dn-live-badge text { font-size: 11px; font-weight: 700; fill: #fff; letter-spacing: .08em; } .dn-live-badge .dn-live-dot { fill: #fff; } .dn-live-badge { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: dn-live 16s cubic-bezier(.22,1,.36,1) infinite; } .dn-day { font-size: 12px; font-weight: 600; fill: var(--text-muted); letter-spacing: .06em; } .dn-phase { font-size: 13px; fill: var(--text-2); opacity: 0; animation: 16s linear infinite; } .dn-phase-0 { animation-name: dn-p0; } .dn-phase-1 { animation-name: dn-p1; } .dn-phase-2 { animation-name: dn-p2; } .dn-phase-3 { animation-name: dn-p3; fill: var(--success-text); font-weight: 500; } .dn-old-label { font-size: 11.5px; fill: var(--text-muted); } .dn-old-track { fill: var(--surface-2); } .dn-old-ticks rect { fill: var(--border); } .dn-old-tick { font-size: 10px; fill: var(--text-muted); text-anchor: middle; } .dn-new-label { font-size: 11.5px; font-weight: 600; fill: var(--text); } .dn-new-track { fill: var(--surface-2); } .dn-new-fill { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: dn-fill 16s linear infinite; } .dn-new-days { font-size: 12.5px; font-weight: 600; fill: var(--amber-900); } @keyframes dn-ai { 0%, 2% { transform: scale(1); } 6% { transform: scale(1.06); } 10% { transform: scale(1); } 14% { transform: scale(1.06); } 18%, 100% { transform: scale(1); } } @keyframes dn-doc { 0%, 4% { opacity: 0; } 8%, 100% { opacity: 1; } } @keyframes dn-line-0 { 0%, 8% { transform: scaleX(0); } 11%, 100% { transform: scaleX(1); } } @keyframes dn-line-1 { 0%, 11% { transform: scaleX(0); } 14%, 100% { transform: scaleX(1); } } @keyframes dn-line-2 { 0%, 14% { transform: scaleX(0); } 17%, 100% { transform: scaleX(1); } } @keyframes dn-line-3 { 0%, 17% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } } @keyframes dn-b-0 { 0%, 25% { opacity: 0; } 29%, 100% { opacity: 1; } } @keyframes dn-b-1 { 0%, 29% { opacity: 0; } 33%, 100% { opacity: 1; } } @keyframes dn-b-2 { 0%, 33% { opacity: 0; } 37%, 100% { opacity: 1; } } @keyframes dn-b-3 { 0%, 37% { opacity: 0; } 41%, 100% { opacity: 1; } } @keyframes dn-b-4 { 0%, 41% { opacity: 0; } 45%, 100% { opacity: 1; } } @keyframes dn-sp-0 { 0%, 25% { transform: scale(0); } 28% { transform: scale(1.25); } 31%, 44% { transform: scale(1); } 48%, 100% { transform: scale(0); } } @keyframes dn-sp-1 { 0%, 29% { transform: scale(0); } 32% { transform: scale(1.25); } 35%, 44% { transform: scale(1); } 48%, 100% { transform: scale(0); } } @keyframes dn-sp-2 { 0%, 33% { transform: scale(0); } 36% { transform: scale(1.25); } 39%, 44% { transform: scale(1); } 48%, 100% { transform: scale(0); } } @keyframes dn-sp-3 { 0%, 37% { transform: scale(0); } 40% { transform: scale(1.25); } 43%, 46% { transform: scale(1); } 48%, 100% { transform: scale(0); } } @keyframes dn-sp-4 { 0%, 41% { transform: scale(0); } 44% { transform: scale(1.25); } 46% { transform: scale(1); } 48%, 100% { transform: scale(0); } } @keyframes dn-stage { 0%, 55% { opacity: .35; } 59%, 100% { opacity: 1; } } @keyframes dn-checks { 0%, 60% { transform: scale(0); } 64% { transform: scale(1.2); } 67%, 100% { transform: scale(1); } } @keyframes dn-prod { 0%, 78% { opacity: .35; } 82%, 100% { opacity: 1; } } @keyframes dn-glow { 0%, 82% { filter: none; } 88% { filter: drop-shadow(0 0 18px rgba(50,199,135,.45)); } 97%, 100% { filter: drop-shadow(0 0 10px rgba(50,199,135,.25)); } } @keyframes dn-live { 0%, 82% { transform: scale(0); } 86% { transform: scale(1.15); } 89%, 100% { transform: scale(1); } } @keyframes dn-p0 { 0%, 2% { opacity: 0; } 4%, 20% { opacity: 1; } 23%, 100% { opacity: 0; } } @keyframes dn-p1 { 0%, 23% { opacity: 0; } 26%, 48% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes dn-p2 { 0%, 51% { opacity: 0; } 54%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } } @keyframes dn-p3 { 0%, 73% { opacity: 0; } 76%, 99% { opacity: 1; } 100% { opacity: 0; } } @keyframes dn-fill { 0%, 4% { transform: scaleX(0); } 88%, 100% { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .dn-mover { display: none; } .dn-ai, .dn-doc, .dn-line, .dn-b-0, .dn-b-1, .dn-b-2, .dn-b-3, .dn-b-4, .dn-spark-pop, .dn-stage, .dn-check-stage, .dn-prod, .dn-prod-panel, .dn-live-badge, .dn-phase, .dn-new-fill { animation: none; } .dn-doc, .dn-b-0, .dn-b-1, .dn-b-2, .dn-b-3, .dn-b-4, .dn-stage, .dn-prod, .dn-phase-3 { opacity: 1; } .dn-line, .dn-check-stage, .dn-live-badge, .dn-new-fill { transform: none; } .dn-spark-pop { transform: scale(0); } .dn-phase-0, .dn-phase-1, .dn-phase-2 { opacity: 0; } } /* Workflow section stories (features/workflows) - shared ws- primitives + three loops: relay 10s (_RelayStory), decisions 12s (_DecisionStory), live run 12s (_LiveRunStory) */ figure.shot.ws-figure { width: min(1040px, calc(100vw - 2 * var(--gutter))); margin-left: calc(50% - min(520px, calc(50vw - var(--gutter)))); } .ws-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); } .ws-panel { fill: var(--bg); stroke: var(--border); } .ws-panel-title { font-size: 15px; font-weight: 600; fill: var(--text); } .ws-panel-sub { font-size: 11.5px; fill: var(--text-muted); } .ws-row { fill: var(--surface); stroke: var(--border); } .ws-row-text { font-size: 12px; fill: var(--text-2); } .ws-node { fill: var(--surface); stroke: var(--border); } .ws-node-text { font-size: 12.5px; font-weight: 500; fill: var(--text); } .ws-node-icon { color: var(--text-2); } .ws-node-green { stroke: var(--success); } .ws-tagchip { fill: var(--tint-100); } .ws-tag-icon { color: var(--amber-900); } .ws-tag-text { font-size: 12px; font-weight: 600; fill: var(--amber-900); } .ws-okchip { fill: rgba(50,199,135,.14); } .ws-ok-text { font-size: 11px; font-weight: 600; fill: var(--success-text); } .ws-warnchip { fill: rgba(255,176,0,.16); } .ws-warn-icon { color: var(--amber-900); } .ws-warn-text { font-size: 11px; font-weight: 600; fill: var(--amber-900); } .ws-oldcard { fill: var(--surface-2); stroke: var(--border); } .ws-old-icon { color: var(--text-muted); } .ws-old-title { font-size: 13px; font-weight: 600; fill: var(--text-2); } .ws-old-sub { font-size: 11.5px; fill: var(--text-muted); } .ws-check circle { fill: var(--success); } .ws-check path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ws-check { transform-box: fill-box; transform-origin: center; transform: scale(0); } .ws-pulse-dot { fill: var(--orange); filter: drop-shadow(0 3px 8px rgba(255,176,0,.5)); } .ws-pulse-amber { fill: var(--amber-900); } .ws-rail-solid { fill: none; stroke-width: 2; } .ws-rail-green { stroke: rgba(50,199,135,.55); } .ws-rail-amber { stroke: rgba(255,176,0,.55); } .ws-phase { font-size: 13px; fill: var(--text-2); opacity: 0; } .ws-logrow { fill: var(--surface); } .ws-log-text { font-size: 11px; font-family: var(--font-mono, ui-monospace); fill: var(--text-2); } /* relay */ .ws-drawn { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 640; stroke-dashoffset: 640; animation: wsr-draw 10s linear infinite; } .wsr-chip-trigger, .wsr-chip-step { opacity: 0; animation: wsr-chips 10s linear infinite; } .wsr-ping { fill: var(--orange); transform-box: fill-box; transform-origin: center; animation: wsr-ping 10s ease-out infinite; } .wsr-arrive { animation: wsr-arrive 10s cubic-bezier(.22,1,.36,1) infinite; } .wsr-receipt { opacity: 0; animation: wsr-receipt 10s linear infinite; } .wsr-old { animation: wsr-old 10s linear infinite; } .wsr-cross { stroke: var(--amber-900); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: wsr-cross 10s linear infinite; } .wsr-cross-2 { animation-name: wsr-cross2; } .wsr-p0 { animation: wsr-p0 10s linear infinite; } .wsr-p1 { animation: wsr-p1 10s linear infinite; } @keyframes wsr-draw { 0%, 8% { stroke-dashoffset: 640; } 24%, 100% { stroke-dashoffset: 0; } } @keyframes wsr-chips { 0%, 22% { opacity: 0; } 28%, 100% { opacity: 1; } } @keyframes wsr-ping { 0%, 36% { transform: scale(1); } 39% { transform: scale(1.9); } 42%, 64% { transform: scale(1); } 67% { transform: scale(1.9); } 70%, 100% { transform: scale(1); } } @keyframes wsr-arrive { 0%, 48% { transform: scale(0); } 52% { transform: scale(1.2); } 55%, 100% { transform: scale(1); } } @keyframes wsr-receipt { 0%, 51% { opacity: 0; } 55%, 100% { opacity: 1; } } @keyframes wsr-old { 0%, 26% { opacity: 1; } 36%, 100% { opacity: .22; } } @keyframes wsr-cross { 0%, 8% { stroke-dashoffset: 320; } 16%, 100% { stroke-dashoffset: 0; } } @keyframes wsr-cross2 { 0%, 14% { stroke-dashoffset: 320; } 22%, 100% { stroke-dashoffset: 0; } } /* Phase windows sized for reading: ~3 words/second plus a beat. */ @keyframes wsr-p0 { 0%, 2% { opacity: 0; } 4%, 32% { opacity: 1; } 35%, 100% { opacity: 0; } } @keyframes wsr-p1 { 0%, 35% { opacity: 0; } 38%, 98% { opacity: 1; } 100% { opacity: 0; } } /* decisions */ .wsd-diamond { fill: var(--surface); stroke: var(--amber-900); stroke-width: 2; } .wsd-rule-label { font-size: 11.5px; font-weight: 600; fill: var(--success-text); } .wsd-judge-label { font-size: 11.5px; font-weight: 600; fill: var(--amber-900); } .wsd-erp { animation: wsd-erp 12s linear infinite; } .wsd-erp-check { animation: wsd-erp-check 12s cubic-bezier(.22,1,.36,1) infinite; } .wsd-done-check { animation: wsd-done-check 12s cubic-bezier(.22,1,.36,1) infinite; } .wsd-retry-tag { opacity: 0; animation: wsd-retry 12s linear infinite; } .wsd-person { transform-box: fill-box; transform-origin: center; animation: wsd-person 12s ease-in-out infinite; } .wsd-person-check { animation: wsd-person-check 12s cubic-bezier(.22,1,.36,1) infinite; } .wsd-p0 { animation: wsd-p0 12s linear infinite; } .wsd-p1 { animation: wsd-p1 12s linear infinite; } .wsd-p2 { animation: wsd-p2 12s linear infinite; } @keyframes wsd-erp { 0%, 26% { opacity: 1; } 28% { opacity: .45; } 30% { opacity: 1; } 32% { opacity: .45; } 34%, 100% { opacity: 1; } } @keyframes wsd-retry { 0%, 25% { opacity: 0; } 27%, 36% { opacity: 1; } 39%, 100% { opacity: 0; } } @keyframes wsd-erp-check { 0%, 37% { transform: scale(0); } 41% { transform: scale(1.2); } 44%, 100% { transform: scale(1); } } @keyframes wsd-done-check { 0%, 18% { transform: scale(0); } 22% { transform: scale(1.2); } 25%, 100% { transform: scale(1); } } @keyframes wsd-person { 0%, 54% { transform: scale(1); } 58% { transform: scale(1.04); } 62% { transform: scale(1); } 66% { transform: scale(1.04); } 70%, 100% { transform: scale(1); } } @keyframes wsd-person-check { 0%, 70% { transform: scale(0); } 74% { transform: scale(1.2); } 77%, 100% { transform: scale(1); } } /* Phase windows sized for reading: ~3 words/second plus a beat. */ @keyframes wsd-p0 { 0%, 2% { opacity: 0; } 4%, 28% { opacity: 1; } 31%, 100% { opacity: 0; } } @keyframes wsd-p1 { 0%, 31% { opacity: 0; } 34%, 55% { opacity: 1; } 58%, 100% { opacity: 0; } } @keyframes wsd-p2 { 0%, 58% { opacity: 0; } 61%, 98% { opacity: 1; } 100% { opacity: 0; } } /* live run */ .wsl-tag-CRM { fill: #3D8BFF; } .wsl-tag-Billing { fill: var(--orange); } .wsl-tag-Provisioning { fill: #8B5CF6; } .wsl-tag-Support { fill: #10B981; } .wsl-tag-Fieldapp { fill: #64748B; } .wsl-sys { font-size: 10.5px; fill: var(--text-muted); } .wsl-step { opacity: .4; animation: 12s ease-out infinite; } .wsl-step-0 { animation-name: wsl-s0; } .wsl-step-1 { animation-name: wsl-s1; } .wsl-step-2 { animation-name: wsl-s2; } .wsl-step-3 { animation-name: wsl-s3; } .wsl-step-4 { animation-name: wsl-s4; } .wsl-step-5 { animation-name: wsl-s5; } .wsl-step-6 { animation-name: wsl-s6; } .wsl-step-7 { animation-name: wsl-s7; } .wsl-step-8 { animation-name: wsl-s8; } .wsl-check-0, .wsl-check-1, .wsl-check-2, .wsl-check-3, .wsl-check-4, .wsl-check-5, .wsl-check-6, .wsl-check-7, .wsl-check-8 { animation: 12s cubic-bezier(.22,1,.36,1) infinite; } .wsl-check-0 { animation-name: wsl-c0; } .wsl-check-1 { animation-name: wsl-c1; } .wsl-check-2 { animation-name: wsl-c2; } .wsl-check-3 { animation-name: wsl-c3; } .wsl-check-4 { animation-name: wsl-c4; } .wsl-check-5 { animation-name: wsl-c5; } .wsl-check-6 { animation-name: wsl-c6; } .wsl-check-7 { animation-name: wsl-c7; } .wsl-check-8 { animation-name: wsl-c8; } @keyframes wsl-s0 { 0%, 7% { opacity: .4; } 10%, 100% { opacity: 1; } } @keyframes wsl-c0 { 0%, 9% { transform: scale(0); } 12%, 100% { transform: scale(1); } } @keyframes wsl-s1 { 0%, 12% { opacity: .4; } 15%, 100% { opacity: 1; } } @keyframes wsl-c1 { 0%, 14% { transform: scale(0); } 17%, 100% { transform: scale(1); } } @keyframes wsl-s2 { 0%, 17% { opacity: .4; } 20%, 100% { opacity: 1; } } @keyframes wsl-c2 { 0%, 19% { transform: scale(0); } 22%, 100% { transform: scale(1); } } @keyframes wsl-s3 { 0%, 22% { opacity: .4; } 25%, 100% { opacity: 1; } } @keyframes wsl-c3 { 0%, 24% { transform: scale(0); } 27%, 100% { transform: scale(1); } } @keyframes wsl-s4 { 0%, 27% { opacity: .4; } 30%, 100% { opacity: 1; } } @keyframes wsl-c4 { 0%, 29% { transform: scale(0); } 32%, 100% { transform: scale(1); } } @keyframes wsl-s5 { 0%, 32% { opacity: .4; } 35%, 100% { opacity: 1; } } @keyframes wsl-c5 { 0%, 34% { transform: scale(0); } 37%, 100% { transform: scale(1); } } @keyframes wsl-s6 { 0%, 37% { opacity: .4; } 40%, 100% { opacity: 1; } } @keyframes wsl-c6 { 0%, 39% { transform: scale(0); } 42%, 100% { transform: scale(1); } } @keyframes wsl-s7 { 0%, 42% { opacity: .4; } 45%, 100% { opacity: 1; } } @keyframes wsl-c7 { 0%, 44% { transform: scale(0); } 47%, 100% { transform: scale(1); } } @keyframes wsl-s8 { 0%, 47% { opacity: .4; } 50%, 100% { opacity: 1; } } @keyframes wsl-c8 { 0%, 49% { transform: scale(0); } 52%, 100% { transform: scale(1); } } .wsl-log { opacity: 0; animation: 12s linear infinite; } .wsl-log-0 { animation-name: wsl-l0; } .wsl-log-1 { animation-name: wsl-l1; } .wsl-log-2 { animation-name: wsl-l2; } .wsl-log-3 { animation-name: wsl-l3; } .wsl-log-4 { animation-name: wsl-l4; } @keyframes wsl-l0 { 0%, 10% { opacity: 0; } 13%, 100% { opacity: 1; } } @keyframes wsl-l1 { 0%, 17% { opacity: 0; } 20%, 100% { opacity: 1; } } @keyframes wsl-l2 { 0%, 26% { opacity: 0; } 29%, 100% { opacity: 1; } } @keyframes wsl-l3 { 0%, 37% { opacity: 0; } 40%, 100% { opacity: 1; } } @keyframes wsl-l4 { 0%, 46% { opacity: 0; } 49%, 100% { opacity: 1; } } .wsl-summary { opacity: 0; animation: wsl-sum 12s linear infinite; } @keyframes wsl-sum { 0%, 55% { opacity: 0; } 59%, 100% { opacity: 1; } } .wsl-btn { fill: var(--orange); } .wsl-btn-text { font-size: 12.5px; font-weight: 600; fill: var(--carbon); } .wsl-promote { transform-box: fill-box; transform-origin: center; animation: wsl-press 12s ease-out infinite; } .wsl-ring { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wsl-ring 12s ease-out infinite; } /* the tap cue that presses a button: hidden except around the ga-press beat (70–75) */ .wsl-cursor { fill: var(--orange); stroke: var(--carbon); stroke-width: 1.5; opacity: 0; animation: wsl-cursor 12s ease-out infinite; } @keyframes wsl-cursor { 0%, 64% { opacity: 0; } 68%, 78% { opacity: .9; } 82%, 100% { opacity: 0; } } .wsl-live-tag { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: wsl-live 12s cubic-bezier(.22,1,.36,1) infinite; } .wsl-promo-panel { animation: wsl-glow 12s ease-in-out infinite; } .wsl-p0 { animation: wsl-p0 12s linear infinite; } .wsl-p1 { animation: wsl-p1 12s linear infinite; } .wsl-p2 { animation: wsl-p2 12s linear infinite; } @keyframes wsl-press { 0%, 72% { transform: scale(1); } 74% { transform: scale(.95); } 77%, 100% { transform: scale(1); } } @keyframes wsl-ring { 0%, 72% { transform: scale(1); opacity: 0; } 74% { opacity: .6; } 82%, 100% { transform: scale(2.4); opacity: 0; } } @keyframes wsl-live { 0%, 78% { transform: scale(0); } 82% { transform: scale(1.15); } 85%, 100% { transform: scale(1); } } @keyframes wsl-glow { 0%, 80% { filter: none; } 86% { filter: drop-shadow(0 0 16px rgba(50,199,135,.4)); } 97%, 100% { filter: drop-shadow(0 0 8px rgba(50,199,135,.22)); } } @keyframes wsl-p0 { 0%, 2% { opacity: 0; } 5%, 26% { opacity: 1; } 29%, 100% { opacity: 0; } } @keyframes wsl-p1 { 0%, 29% { opacity: 0; } 32%, 68% { opacity: 1; } 71%, 100% { opacity: 0; } } @keyframes wsl-p2 { 0%, 71% { opacity: 0; } 74%, 98% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ws-pulse { display: none; } .ws-drawn, .wsr-chip-trigger, .wsr-chip-step, .wsr-ping, .wsr-arrive, .wsr-receipt, .wsr-old, .wsr-cross, .wsd-erp, .wsd-retry-tag, .wsd-erp-check, .wsd-done-check, .wsd-person, .wsd-person-check, .wsl-step, .wsl-check-0, .wsl-check-1, .wsl-check-2, .wsl-check-3, .wsl-check-4, .wsl-check-5, .wsl-check-6, .wsl-check-7, .wsl-check-8, .wsl-log, .wsl-summary, .wsl-promote, .wsl-ring, .wsl-cursor, .wsl-live-tag, .wsl-promo-panel, .ws-phase { animation: none; } .ws-drawn { stroke-dashoffset: 0; } .wsr-cross { stroke-dashoffset: 0; } .wsr-chip-trigger, .wsr-chip-step, .wsr-receipt, .wsl-step, .wsl-log, .wsl-summary { opacity: 1; } .wsr-old { opacity: .22; } .ws-check, .wsl-live-tag { transform: scale(1); } .wsr-p1, .wsd-p2, .wsl-p2 { opacity: 1; } } /* Generic story slots (ga-) - ONE 12s loop shared by every section story that follows. Appear slots a0..a7 (staggered on), check slots k0..k7 (pop just after), phase captions gp0..gp2 (3 windows) / gq0..gq1 (2 windows) sized for reading (~3 words/sec + a beat), plus draw/cross/press/glow/fill primitives. All reuse the ws- visual classes. */ .ga-a0, .ga-a1, .ga-a2, .ga-a3, .ga-a4, .ga-a5, .ga-a6, .ga-a7 { opacity: 0; animation: 12s ease-out infinite; } .ga-a0 { animation-name: ga-a0; } .ga-a1 { animation-name: ga-a1; } .ga-a2 { animation-name: ga-a2; } .ga-a3 { animation-name: ga-a3; } .ga-a4 { animation-name: ga-a4; } .ga-a5 { animation-name: ga-a5; } .ga-a6 { animation-name: ga-a6; } .ga-a7 { animation-name: ga-a7; } @keyframes ga-a0 { 0%, 6% { opacity: 0; } 9%, 100% { opacity: 1; } } @keyframes ga-a1 { 0%, 12% { opacity: 0; } 15%, 100% { opacity: 1; } } @keyframes ga-a2 { 0%, 18% { opacity: 0; } 21%, 100% { opacity: 1; } } @keyframes ga-a3 { 0%, 24% { opacity: 0; } 27%, 100% { opacity: 1; } } @keyframes ga-a4 { 0%, 30% { opacity: 0; } 33%, 100% { opacity: 1; } } @keyframes ga-a5 { 0%, 36% { opacity: 0; } 39%, 100% { opacity: 1; } } @keyframes ga-a6 { 0%, 42% { opacity: 0; } 45%, 100% { opacity: 1; } } @keyframes ga-a7 { 0%, 48% { opacity: 0; } 51%, 100% { opacity: 1; } } .ga-k0, .ga-k1, .ga-k2, .ga-k3, .ga-k4, .ga-k5, .ga-k6, .ga-k7 { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 12s cubic-bezier(.22,1,.36,1) infinite; } .ga-k0 { animation-name: ga-k0; } .ga-k1 { animation-name: ga-k1; } .ga-k2 { animation-name: ga-k2; } .ga-k3 { animation-name: ga-k3; } .ga-k4 { animation-name: ga-k4; } .ga-k5 { animation-name: ga-k5; } .ga-k6 { animation-name: ga-k6; } .ga-k7 { animation-name: ga-k7; } @keyframes ga-k0 { 0%, 8% { transform: scale(0); } 11% { transform: scale(1.2); } 14%, 100% { transform: scale(1); } } @keyframes ga-k1 { 0%, 14% { transform: scale(0); } 17% { transform: scale(1.2); } 20%, 100% { transform: scale(1); } } @keyframes ga-k2 { 0%, 20% { transform: scale(0); } 23% { transform: scale(1.2); } 26%, 100% { transform: scale(1); } } @keyframes ga-k3 { 0%, 26% { transform: scale(0); } 29% { transform: scale(1.2); } 32%, 100% { transform: scale(1); } } @keyframes ga-k4 { 0%, 32% { transform: scale(0); } 35% { transform: scale(1.2); } 38%, 100% { transform: scale(1); } } @keyframes ga-k5 { 0%, 38% { transform: scale(0); } 41% { transform: scale(1.2); } 44%, 100% { transform: scale(1); } } @keyframes ga-k6 { 0%, 44% { transform: scale(0); } 47% { transform: scale(1.2); } 50%, 100% { transform: scale(1); } } @keyframes ga-k7 { 0%, 50% { transform: scale(0); } 53% { transform: scale(1.2); } 56%, 100% { transform: scale(1); } } .ga-gp0, .ga-gp1, .ga-gp2, .ga-gq0, .ga-gq1 { opacity: 0; animation: 12s linear infinite; } .ga-gp0 { animation-name: ga-gp0; } .ga-gp1 { animation-name: ga-gp1; } .ga-gp2 { animation-name: ga-gp2; } .ga-gq0 { animation-name: ga-gq0; } .ga-gq1 { animation-name: ga-gq1; } @keyframes ga-gp0 { 0%, 2% { opacity: 0; } 5%, 28% { opacity: 1; } 31%, 100% { opacity: 0; } } @keyframes ga-gp1 { 0%, 31% { opacity: 0; } 34%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } } @keyframes ga-gp2 { 0%, 65% { opacity: 0; } 68%, 98% { opacity: 1; } 100% { opacity: 0; } } @keyframes ga-gq0 { 0%, 2% { opacity: 0; } 5%, 44% { opacity: 1; } 47%, 100% { opacity: 0; } } @keyframes ga-gq1 { 0%, 47% { opacity: 0; } 50%, 98% { opacity: 1; } 100% { opacity: 0; } } .ga-draw { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 640; stroke-dashoffset: 640; animation: ga-draw 12s linear infinite; } @keyframes ga-draw { 0%, 6% { stroke-dashoffset: 640; } 18%, 100% { stroke-dashoffset: 0; } } .ga-cross { stroke: var(--amber-900); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: ga-cross 12s linear infinite; } .ga-cross-2 { animation-name: ga-cross2; } @keyframes ga-cross { 0%, 8% { stroke-dashoffset: 320; } 15%, 100% { stroke-dashoffset: 0; } } @keyframes ga-cross2 { 0%, 13% { stroke-dashoffset: 320; } 20%, 100% { stroke-dashoffset: 0; } } .ga-fade-old { animation: ga-fade-old 12s linear infinite; } @keyframes ga-fade-old { 0%, 24% { opacity: 1; } 34%, 100% { opacity: .22; } } .ga-on-late { opacity: .35; animation: ga-on-late 12s ease-out infinite; } @keyframes ga-on-late { 0%, 56% { opacity: .35; } 61%, 100% { opacity: 1; } } .ga-press { transform-box: fill-box; transform-origin: center; animation: ga-press 12s ease-out infinite; } .ga-ring { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ga-ring 12s ease-out infinite; } @keyframes ga-press { 0%, 70% { transform: scale(1); } 72% { transform: scale(.95); } 75%, 100% { transform: scale(1); } } @keyframes ga-ring { 0%, 70% { transform: scale(1); opacity: 0; } 72% { opacity: .6; } 80%, 100% { transform: scale(2.4); opacity: 0; } } .ga-pop-late { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: ga-pop-late 12s cubic-bezier(.22,1,.36,1) infinite; } @keyframes ga-pop-late { 0%, 76% { transform: scale(0); } 80% { transform: scale(1.15); } 83%, 100% { transform: scale(1); } } .ga-glow { animation: ga-glow 12s ease-in-out infinite; } @keyframes ga-glow { 0%, 78% { filter: none; } 84% { filter: drop-shadow(0 0 16px rgba(50,199,135,.4)); } 97%, 100% { filter: drop-shadow(0 0 8px rgba(50,199,135,.22)); } } .ga-fill { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: ga-fill 12s linear infinite; } @keyframes ga-fill { 0%, 6% { transform: scaleX(0); } 82%, 100% { transform: scaleX(1); } } .ga-pulse { transform-box: fill-box; transform-origin: center; animation: ga-pulse 12s ease-in-out infinite; } @keyframes ga-pulse { 0%, 4% { transform: scale(1); } 8% { transform: scale(1.06); } 12% { transform: scale(1); } 16% { transform: scale(1.06); } 20%, 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ga-a0, .ga-a1, .ga-a2, .ga-a3, .ga-a4, .ga-a5, .ga-a6, .ga-a7, .ga-k0, .ga-k1, .ga-k2, .ga-k3, .ga-k4, .ga-k5, .ga-k6, .ga-k7, .ga-gp0, .ga-gp1, .ga-gp2, .ga-gq0, .ga-gq1, .ga-draw, .ga-cross, .ga-fade-old, .ga-on-late, .ga-press, .ga-ring, .ga-pop-late, .ga-glow, .ga-fill, .ga-pulse { animation: none; } .ga-a0, .ga-a1, .ga-a2, .ga-a3, .ga-a4, .ga-a5, .ga-a6, .ga-a7, .ga-on-late, .ga-gp2, .ga-gq1 { opacity: 1; } .ga-k0, .ga-k1, .ga-k2, .ga-k3, .ga-k4, .ga-k5, .ga-k6, .ga-k7, .ga-pop-late { transform: scale(1); } .ga-draw, .ga-cross { stroke-dashoffset: 0; } .ga-fill { transform: none; } .ga-fade-old { opacity: .22; } .ga-ring { opacity: 0; } } /* Home strategy board: decided Mon → live Wed/Thu/Fri → results the week after → implementation fades out (16 s; decided 4–12 · build 8–49 · results 62–77 · handled 78–100). Clock labels never overlap. */ figure.shot.sa-figure { width: min(1040px, calc(100vw - 2 * var(--gutter))); margin-left: calc(50% - min(520px, calc(50vw - var(--gutter)))); } .sa-svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); } .sa-col { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-muted); } .sa-name { font-size: 14px; font-weight: 600; fill: var(--text); } .sa-time { font-size: 13px; font-weight: 600; fill: var(--text); } .sa-parts { font-size: 10.5px; fill: var(--text-muted); } .sa-track { fill: var(--surface-2); } .sa-fill { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: 16s ease-out infinite; } .sa-fill-0 { animation-name: sa-fill-0; } .sa-fill-1 { animation-name: sa-fill-1; } .sa-fill-2 { animation-name: sa-fill-2; } .sa-dec, .sa-pl { opacity: 0; animation: 16s ease-out infinite; } .sa-dec-0 { animation-name: sa-dec-0; } .sa-dec-1 { animation-name: sa-dec-1; } .sa-dec-2 { animation-name: sa-dec-2; } .sa-pl-0 { animation-name: sa-pl-0; } .sa-pl-1 { animation-name: sa-pl-1; } .sa-pl-2 { animation-name: sa-pl-2; } .sa-live, .sa-el { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: 16s cubic-bezier(.22,1,.36,1) infinite; } .sa-live-0 { animation-name: sa-live-0; } .sa-live-1 { animation-name: sa-live-1; } .sa-live-2 { animation-name: sa-live-2; } .sa-el-0 { animation-name: sa-el-0; } .sa-el-1 { animation-name: sa-el-1; } .sa-el-2 { animation-name: sa-el-2; } .sa-res { opacity: 0; transform: translateY(6px); animation: 16s ease-out infinite; } .sa-res-0 { animation-name: sa-res-0; } .sa-res-1 { animation-name: sa-res-1; } .sa-res-2 { animation-name: sa-res-2; } .sa-res-bg { fill: rgba(50,199,135,.12); animation: sa-glow 16s ease-in-out infinite; } .sa-res-t { font-size: 15px; font-weight: 600; fill: var(--text); } .sa-res-s { font-size: 11px; font-weight: 500; fill: var(--success-text); } .sa-impl { animation: sa-dim 16s ease-out infinite; } .sa-handled { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sa-handled 16s cubic-bezier(.22,1,.36,1) infinite; } .sa-handled-bg { fill: var(--carbon); stroke: var(--orange); stroke-width: 2; filter: drop-shadow(0 8px 18px rgba(255,176,0,.3)); } .sa-handled-t { font-size: 11.5px; font-weight: 600; fill: var(--orange); text-anchor: middle; } .sa-clock { fill: var(--surface); stroke: var(--border); } .sa-clock-dot { fill: var(--orange); } .sa-ck { font-size: 12.5px; font-weight: 600; fill: var(--text); text-anchor: middle; opacity: 0; animation: 16s linear infinite; } .sa-ck0 { animation-name: sa-ck0; } .sa-ck1 { animation-name: sa-ck1; } .sa-ck2 { animation-name: sa-ck2; } .sa-ck3 { animation-name: sa-ck3; } .sa-ck4 { animation-name: sa-ck4; } .sa-p0 { animation: sa-p0 16s linear infinite; } .sa-p1 { animation: sa-p1 16s linear infinite; } .sa-p2 { animation: sa-p2 16s linear infinite; } @keyframes sa-dec-0 { 0%, 4% { opacity: 0; } 6%, 100% { opacity: 1; } } @keyframes sa-dec-1 { 0%, 7% { opacity: 0; } 9%, 100% { opacity: 1; } } @keyframes sa-dec-2 { 0%, 10% { opacity: 0; } 12%, 100% { opacity: 1; } } @keyframes sa-pl-0 { 0%, 8% { opacity: 0; } 10%, 100% { opacity: 1; } } @keyframes sa-pl-1 { 0%, 16% { opacity: 0; } 18%, 100% { opacity: 1; } } @keyframes sa-pl-2 { 0%, 12% { opacity: 0; } 14%, 100% { opacity: 1; } } @keyframes sa-fill-0 { 0%, 8% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } } @keyframes sa-fill-1 { 0%, 16% { transform: scaleX(0); } 44%, 100% { transform: scaleX(1); } } @keyframes sa-fill-2 { 0%, 12% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); } } @keyframes sa-live-0 { 0%, 24% { transform: scale(0); } 26% { transform: scale(1.2); } 28%, 100% { transform: scale(1); } } @keyframes sa-live-1 { 0%, 44% { transform: scale(0); } 46% { transform: scale(1.2); } 48%, 100% { transform: scale(1); } } @keyframes sa-live-2 { 0%, 34% { transform: scale(0); } 36% { transform: scale(1.2); } 38%, 100% { transform: scale(1); } } @keyframes sa-el-0 { 0%, 25% { transform: scale(0); } 27% { transform: scale(1.2); } 29%, 100% { transform: scale(1); } } @keyframes sa-el-1 { 0%, 45% { transform: scale(0); } 47% { transform: scale(1.2); } 49%, 100% { transform: scale(1); } } @keyframes sa-el-2 { 0%, 35% { transform: scale(0); } 37% { transform: scale(1.2); } 39%, 100% { transform: scale(1); } } @keyframes sa-res-0 { 0%, 62% { opacity: 0; transform: translateY(6px); } 65%, 100% { opacity: 1; transform: none; } } @keyframes sa-res-1 { 0%, 68% { opacity: 0; transform: translateY(6px); } 71%, 100% { opacity: 1; transform: none; } } @keyframes sa-res-2 { 0%, 74% { opacity: 0; transform: translateY(6px); } 77%, 100% { opacity: 1; transform: none; } } @keyframes sa-dim { 0%, 78% { opacity: 1; } 82%, 100% { opacity: .28; } } @keyframes sa-handled { 0%, 82% { transform: scale(0); } 85% { transform: scale(1.12); } 87%, 100% { transform: scale(1); } } @keyframes sa-glow { 0%, 78% { filter: none; } 84% { filter: drop-shadow(0 0 14px rgba(50,199,135,.45)); } 97%, 100% { filter: drop-shadow(0 0 8px rgba(50,199,135,.22)); } } @keyframes sa-ck0 { 0%, 13% { opacity: 1; } 14%, 100% { opacity: 0; } } @keyframes sa-ck1 { 0%, 14% { opacity: 0; } 15%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes sa-ck2 { 0%, 33% { opacity: 0; } 34%, 42% { opacity: 1; } 43%, 100% { opacity: 0; } } @keyframes sa-ck3 { 0%, 43% { opacity: 0; } 44%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } } @keyframes sa-ck4 { 0%, 59% { opacity: 0; } 60%, 98% { opacity: 1; } 100% { opacity: 0; } } /* Phase windows sized for reading: ~3 words/second plus a beat. */ @keyframes sa-p0 { 0%, 2% { opacity: 0; } 4%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes sa-p1 { 0%, 46% { opacity: 0; } 49%, 59% { opacity: 1; } 62%, 100% { opacity: 0; } } @keyframes sa-p2 { 0%, 62% { opacity: 0; } 65%, 98% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sa-fill, .sa-dec, .sa-pl, .sa-live, .sa-el, .sa-res, .sa-res-bg, .sa-impl, .sa-handled, .sa-ck, .sa-p0, .sa-p1, .sa-p2 { animation: none; } .sa-dec, .sa-pl, .sa-res, .sa-ck4, .sa-p2 { opacity: 1; } .sa-res { transform: none; } .sa-fill, .sa-live, .sa-el, .sa-handled { transform: none; } .sa-impl { opacity: .28; } .sa-res-bg { filter: drop-shadow(0 0 8px rgba(50,199,135,.22)); } .sa-ck0, .sa-ck1, .sa-ck2, .sa-ck3, .sa-p0, .sa-p1 { opacity: 0; } }