/* ============================================================================ AMP · ALICE MARKET PLACE — LIVE LAYER (motion-completion, additive) File: assets/alive/amp-live.css · pairs with: assets/alive/amp-live.js -------------------------------------------------------------------------- Three named interventions the baseline did NOT ship, plus the hero bloom: (1) LIVING MACRO TICKER .amp-ticker — neutral marquee strip (2) ROTATING KPI RAIL .amp-kpi-rail — cross-fading compliant chips (3) DRAW-ON-SCROLL [data-draw="on"] — toggles .is-visible (+) HERO BLOOM .amp-bloom — seed -> sunflower reveal -------------------------------------------------------------------------- HARD RULES honored: · Pure CSS/SVG — zero external assets, zero downloads, zero logos. · GPU-only animation props (transform / opacity). No layout thrash. · prefers-reduced-motion: REDUCE => NO motion; everything renders final/static. · The JS sets ONLY when motion is permitted and the script booted; every animated rule is scoped to it, so no-JS / reduced-motion / boot-failure all degrade to the original static, fully-legible state. · One shared rAF lives in amp-live.js; CSS owns only declarative transitions and a couple of bounded keyframes (ticker translate, KPI cross-fade, bloom). · Bolder/more-present than the subtle field, but institutional — slow, low amplitude, never a screensaver; mobile-performant. Token source of truth: assets/amp-design-system.css (--amp-*). Fallbacks inlined. Author: AMP MOTION-COMPLETION engineer · 2026-06-03 ========================================================================== */ :root { --amp-live-gold: var(--amp-gold, #C9A84C); --amp-live-gold-hot: var(--amp-gold-hot, #FFD56B); --amp-live-cream: var(--amp-cream, #F3EFE6); --amp-live-navy: var(--amp-navy, #0A1A3D); --amp-live-navy-lift: var(--amp-navy-lift, #0F2256); --amp-live-fog: var(--amp-gold-fog, rgba(201,168,76,0.18)); --amp-live-border: var(--amp-gold-border, rgba(201,168,76,0.30)); --amp-live-dim: var(--amp-dim, rgba(232,228,214,0.55)); --amp-live-mono: var(--amp-mono, 'IBM Plex Mono', monospace); --amp-live-ease: var(--amp-ease, cubic-bezier(0.16,0.84,0.36,1)); --amp-live-ease-io: var(--amp-ease-inout, cubic-bezier(0.65,0,0.35,1)); --amp-live-ticker-dur: 40s; /* one full marquee loop */ --amp-live-kpi-dur: 4s; /* per-chip dwell before cross-fade */ } /* =========================================================================== (1) LIVING MACRO TICKER — .amp-ticker A horizontal marquee strip of NEUTRAL status words + compliant category labels. NO prices, NO yields, NO returns. The JS duplicates the track into a second identical track so the loop is seamless, then translates the rail -50% across --amp-live-ticker-dur (~40s) linear. Hover pauses. Static-by-default: without .amp-live-on the rail is a normal horizontally scrollable strip (overflow-x:auto) showing one static track — fully legible. =========================================================================== */ .amp-ticker { position: relative; width: 100%; overflow: hidden; background: linear-gradient(180deg, rgba(15,34,86,0.30), rgba(6,16,31,0.30)); border-top: 1px solid var(--amp-live-border); border-bottom: 1px solid var(--amp-live-border); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } /* No-JS / reduced-motion: the strip is a quiet scrollable row. */ .amp-ticker__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; } .amp-live-on .amp-ticker__viewport { overflow-x: hidden; } .amp-ticker__rail { display: flex; align-items: center; width: max-content; gap: 0; padding: 12px 0; will-change: transform; } .amp-live-on .amp-ticker__rail { animation: amp-ticker-scroll var(--amp-live-ticker-dur) linear infinite; } .amp-live-on .amp-ticker:hover .amp-ticker__rail, .amp-live-on .amp-ticker:focus-within .amp-ticker__rail { animation-play-state: paused; } @keyframes amp-ticker-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } /* exactly one track width */ } .amp-ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 26px; font-family: var(--amp-live-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--amp-live-cream); white-space: nowrap; border-right: 1px solid rgba(201,168,76,0.14); } .amp-ticker__cat { color: var(--amp-live-gold); font-weight: 600; } .amp-ticker__sep { color: var(--amp-live-dim); } .amp-ticker__state { color: var(--amp-live-cream); opacity: 0.92; } /* A small breathing status dot — only animates under .amp-live-on. */ .amp-ticker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amp-live-gold); box-shadow: 0 0 0 0 rgba(201,168,76,0.0); flex: none; } .amp-live-on .amp-ticker__dot { animation: amp-live-dot 2200ms var(--amp-live-ease-io) infinite; } @keyframes amp-live-dot { 0%,100% { opacity: 0.5; box-shadow: 0 0 0 0 rgba(201,168,76,0); } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(201,168,76,0.16); } } /* =========================================================================== (2) ROTATING KPI RAIL — .amp-kpi-rail A small set of compliant KPI chips (category / label only, NO return %). Exactly one chip is visible at a time; the JS toggles .is-active round-robin every ~4s. Cross-fade + tiny rise. Chips stack in the same grid cell so the rail never reflows. Static-by-default: without .amp-live-on ALL chips show (laid out in a wrapping row), fully legible. =========================================================================== */ .amp-kpi-rail { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .amp-live-on .amp-kpi-rail { display: grid; grid-template-columns: 1fr; min-height: 56px; align-items: center; } .amp-kpi-chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--amp-live-border); border-radius: var(--amp-r-md, 8px); background: linear-gradient(180deg, rgba(15,34,86,0.34), rgba(6,16,31,0.20)); font-family: var(--amp-live-mono); color: var(--amp-live-cream); } .amp-live-on .amp-kpi-chip { grid-area: 1 / 1; /* all chips stack in one cell */ opacity: 0; transform: translateY(8px); transition: opacity 620ms var(--amp-live-ease), transform 620ms var(--amp-live-ease); pointer-events: none; will-change: opacity, transform; } .amp-live-on .amp-kpi-chip.is-active { opacity: 1; transform: none; pointer-events: auto; } .amp-kpi-chip__k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amp-live-gold); font-weight: 600; } .amp-kpi-chip__v { font-size: 14px; letter-spacing: 0.02em; color: var(--amp-live-cream); } .amp-kpi-chip__icon { width: 22px; height: 22px; color: var(--amp-live-gold); flex: none; } .amp-kpi-chip__icon svg, .amp-kpi-chip__icon use { width: 100%; height: 100%; } /* =========================================================================== (3) DRAW-ON-SCROLL — [data-draw="on"] A tiny IntersectionObserver (in amp-live.js) toggles .is-visible on any element carrying data-draw="on". Two finishes are supported: a) STROKE draw — inline paths/lines marked .amp-draw-stroke get a stroke-dasharray reveal (capital-stack keylines + new signature SVGs). b) TIER cascade — the existing capital-stack groups fade+rise in sequence (mirrors amp-visuals.css so an inline stack draws even though the form cannot). Static-by-default + reduced-motion: strokes fully drawn, tiers fully shown. =========================================================================== */ /* a) stroke draw */ .amp-live-on [data-draw="on"] .amp-draw-stroke { stroke-dasharray: var(--amp-draw-len, 1200); stroke-dashoffset: var(--amp-draw-len, 1200); transition: stroke-dashoffset 1100ms var(--amp-live-ease); } .amp-live-on [data-draw="on"].is-visible .amp-draw-stroke { stroke-dashoffset: 0; } /* stagger multiple strokes via inline --amp-draw-i on each stroke */ .amp-live-on [data-draw="on"] .amp-draw-stroke { transition-delay: calc(var(--amp-draw-i, 0) * 140ms); } /* b) tier cascade — for an INLINE capital-stack (g.av-tier groups) */ .amp-live-on [data-draw="on"] .av-tier { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--amp-live-ease), transform 700ms var(--amp-live-ease); } .amp-live-on [data-draw="on"].is-visible .av-tier { opacity: 1; transform: none; } .amp-live-on [data-draw="on"].is-visible .av-tier:nth-of-type(1) { transition-delay: 60ms; } .amp-live-on [data-draw="on"].is-visible .av-tier:nth-of-type(2) { transition-delay: 170ms; } .amp-live-on [data-draw="on"].is-visible .av-tier:nth-of-type(3) { transition-delay: 280ms; } .amp-live-on [data-draw="on"].is-visible .av-tier:nth-of-type(4) { transition-delay: 390ms; } .amp-live-on [data-draw="on"].is-visible .av-tier:nth-of-type(5) { transition-delay: 500ms; } /* generic fade-rise for any non-SVG element that opts into draw-on-scroll */ .amp-live-on [data-draw="on"].amp-draw-fade { opacity: 0; transform: translateY(16px); transition: opacity 680ms var(--amp-live-ease), transform 680ms var(--amp-live-ease); } .amp-live-on [data-draw="on"].amp-draw-fade.is-visible { opacity: 1; transform: none; } /* =========================================================================== (+) HERO BLOOM — .amp-bloom (seed -> sunflower reveal, interactive) Self-contained SVG sunflower built by amp-bloom.js into [data-amp-bloom]. States are class-driven on the host: .amp-bloom base wrapper (relative) .is-seeded initial collapsed/closed state (set by JS) .is-bloomed opened (auto after mount, on hover/focus, or on pointer move mapping to petal spread) All transforms are GPU-only; the whole thing is decorative (aria-hidden) and illustrative ONLY (no yields, no values). Reduced-motion: renders fully bloomed and static immediately. =========================================================================== */ .amp-bloom { position: relative; display: inline-block; width: clamp(180px, 26vw, 320px); height: clamp(180px, 26vw, 320px); color: var(--amp-live-gold); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .amp-bloom svg { width: 100%; height: 100%; display: block; overflow: visible; } /* soft glow disc behind the bloom */ .amp-bloom__halo { transform-origin: 50% 50%; opacity: 0.0; transition: opacity 900ms var(--amp-live-ease-io); } .amp-live-on .amp-bloom.is-bloomed .amp-bloom__halo { opacity: 0.55; } /* petals: each is rotated to its slot via inline transform; the SCALE from seed(0.12) -> bloom(1) is what we animate, around the flower center, so they unfurl. */ .amp-bloom__petal { transform-box: fill-box; transform-origin: 50% 92%; /* petal base near center */ transition: transform 900ms var(--amp-live-ease), opacity 700ms var(--amp-live-ease); } .amp-live-on .amp-bloom.is-seeded .amp-bloom__petal { transform: scale(0.10); opacity: 0.0; } .amp-live-on .amp-bloom.is-bloomed .amp-bloom__petal { transform: scale(1); opacity: 1; } /* center seed-head breathes once bloomed */ .amp-bloom__core { transform-box: fill-box; transform-origin: 50% 50%; } .amp-live-on .amp-bloom.is-seeded .amp-bloom__core { transform: scale(0.55); } .amp-live-on .amp-bloom.is-bloomed .amp-bloom__core { transform: scale(1); transition: transform 700ms var(--amp-live-ease) 120ms; } .amp-live-on .amp-bloom.is-bloomed .amp-bloom__core-dots { animation: amp-bloom-breathe 4200ms var(--amp-live-ease-io) infinite; transform-box: fill-box; transform-origin: 50% 50%; } @keyframes amp-bloom-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025);} } /* stagger petal unfurl by ring index (set inline: --amp-bloom-i) */ .amp-live-on .amp-bloom.is-bloomed .amp-bloom__petal { transition-delay: calc(var(--amp-bloom-i, 0) * 26ms); } /* a faint instructional caption fades when bloomed */ .amp-bloom__hint { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-family: var(--amp-live-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amp-live-dim); white-space: nowrap; transition: opacity 500ms var(--amp-live-ease); pointer-events: none; } .amp-live-on .amp-bloom.is-bloomed .amp-bloom__hint { opacity: 0; } /* =========================================================================== REDUCED-MOTION + NO-JS HARD STOP (belt-and-suspenders) .amp-live-on is only added when motion is permitted, but we also honor the media query directly so a stylesheet-only load (or runtime toggle) is safe. Everything ends in its final, fully-legible, static state. =========================================================================== */ @media (prefers-reduced-motion: reduce) { .amp-live-on .amp-ticker__rail { animation: none !important; transform: none !important; } .amp-live-on .amp-ticker__viewport { overflow-x: auto !important; } .amp-live-on .amp-ticker__dot { animation: none !important; box-shadow: none !important; } .amp-live-on .amp-kpi-rail { display: flex !important; flex-wrap: wrap !important; } .amp-live-on .amp-kpi-chip { grid-area: auto !important; opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: auto !important; } .amp-live-on [data-draw="on"] .amp-draw-stroke { stroke-dashoffset: 0 !important; transition: none !important; } .amp-live-on [data-draw="on"] .av-tier, .amp-live-on [data-draw="on"].amp-draw-fade { opacity: 1 !important; transform: none !important; transition: none !important; } .amp-live-on .amp-bloom__petal, .amp-live-on .amp-bloom__core { transform: scale(1) !important; opacity: 1 !important; transition: none !important; } .amp-live-on .amp-bloom__halo { opacity: 0.4 !important; transition: none !important; } .amp-live-on .amp-bloom__core-dots { animation: none !important; } .amp-live-on .amp-bloom__hint { opacity: 0 !important; } }