/* ========================================================================== STAY FREE ENTERPRISE — Palm Dust Reformation (styles) Pairs with js/dust-reformation.js. Storyboard: Home #7 + /results payoff. Ambient non-additive gold-dust drifts, then converges into the pin+palm logo silhouette as the section pins. Payoff copy is real DOM, supplied by the page (never drawn on the canvas — canvas is never the LCP element). Palette governance (plan §2 / tokens.css): gold reads as MATERIAL, never additive glow on ivory; shadows are taupe-tinted, never black; coral is never used here (this is not a CTA). All color via custom properties. Reduced motion: sf-gl.js never mounts the context and stamps .sf-reduced; the injected static logo is shown assembled — "just show the SVG". ========================================================================== */ .sf-dust-reformation { position: relative; overflow: hidden; isolation: isolate; /* a comfortable stage for the drift-to-assemble beat; page may override */ min-height: clamp(30rem, 62vh, 46rem); background: var(--sf-bg-primary); } /* the lazy canvas sf-gl.js injects (class .fx-canvas-abs). Scoped here so we don't touch the shared base layer; it fills the host behind the copy. */ .sf-dust-reformation .fx-canvas-abs { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; /* dust never eats clicks; copy/CTA stay interactive */ z-index: 0; } /* real-DOM payoff copy sits above the dust. The page owns the markup; this is a safe default so the line is legible over the drift on ivory. */ .sf-dust-reformation__payoff { position: relative; z-index: 1; font-family: var(--sf-font-display); font-weight: 420; font-size: var(--sf-text-3xl); line-height: 1.08; color: var(--sf-text-primary); text-align: center; max-width: 20ch; margin-inline: auto; text-wrap: balance; } /* ---- static assembled logo (reduced-motion + no-WebGL fallback) ---- Injected by dust-reformation.js so every host has an honest fallback even if the page markup omits it. Hidden while the live dust is running; shown assembled when reduced motion is requested or the context can't mount. */ .sf-dust-reformation__still { position: absolute; top: 50%; left: 50%; width: clamp(9rem, 22vw, 15rem); height: auto; transform: translate(-50%, -50%); z-index: 0; display: none; opacity: 0; filter: drop-shadow(var(--sf-elevation-2)); transition: opacity var(--sf-dur-slow) var(--sf-ease-out); pointer-events: none; } /* Reveal the static logo whenever the live effect is not (or cannot be) live: - .sf-reduced → prefers-reduced-motion (sf-gl global flag) - host.sf-reduced → sfMount early-return stamp on this host - host.sf-dust--static → JS marks this when WebGL is unavailable */ :root.sf-reduced .sf-dust-reformation__still, .sf-dust-reformation.sf-reduced .sf-dust-reformation__still, .sf-dust-reformation.sf-dust--static .sf-dust-reformation__still { display: block; opacity: 1; } /* When the static logo is shown, keep the payoff copy clear of it. */ :root.sf-reduced .sf-dust-reformation, .sf-dust-reformation.sf-reduced, .sf-dust-reformation.sf-dust--static { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sf-space-6); padding-block: var(--sf-space-8); } :root.sf-reduced .sf-dust-reformation__still, .sf-dust-reformation.sf-reduced .sf-dust-reformation__still, .sf-dust-reformation.sf-dust--static .sf-dust-reformation__still { position: relative; top: auto; left: auto; transform: none; } @media (max-width: 48rem) { .sf-dust-reformation__payoff { font-size: var(--sf-text-2xl); } .sf-dust-reformation { min-height: clamp(26rem, 70vh, 38rem); } }