/* ========================================================================== fx-kit.css | FB funnel motion + glow kit, re-keyed to brand variables Source: output/fb-funnel/index.html (live at trombonetimollc.com), packaged 2026-10-06. Catalog + usage: FX-KIT.md (same folder). Load AFTER the page's own CSS. Pair with fx-kit.js (defer) and the one-line head snippet in FX-KIT.md (adds html.fx-js before first paint). Contract - Everything that moves lives in @media (prefers-reduced-motion: no-preference). Outside it the page is static and complete (glows stay, motion goes). - Scroll reveals start from a VISIBLE state (offset + slight scale/blur, opacity >= .6), and only when html.fx-js is set. No JS = no pre-state = finished page. - Reveal / hover use the individual `translate` and `scale` properties, so the kit never clobbers a page element's own `transform` (except .fx-lift / .fx-tilt hover, see FX-KIT.md). - Defaults are tuned for LIGHT pages. Put .fx-dark on a dark band to get the funnel's original (dark) glow numbers; .fx-light switches back inside it. ========================================================================== */ /* ---------- 0. Brand inputs (zero specificity: any page :root rule wins) ---------- */ :where(:root) { --fx-accent: #dc2626; /* solid accent: CTA glow, strikes, rules, sparks */ --fx-accent-rgb: 220, 38, 38; /* the same color as r, g, b; every glow is built from it */ /* --fx-glow: r, g, b; optional: glow color if it must differ from the accent */ --fx-ink: #15171c; --fx-ink-rgb: 21, 23, 28; /* soft shadow tint on light pages */ --fx-bg: #ffffff; --fx-bg-rgb: 255, 255, 255; /* page ground: Ken Burns bottom melt */ /* easings lifted from the funnel */ --fx-ease-out: cubic-bezier(.2, .8, .2, 1); /* heroRise, leadPop */ --fx-ease-pop: cubic-bezier(.2, 1.4, .35, 1); /* n8Pop overshoot */ --fx-ease-win: cubic-bezier(.2, 1.5, .35, 1); /* mkWin overshoot */ --fx-ease-draw: cubic-bezier(.4, 0, .2, 1); /* mtDraw, n8Draw */ --fx-ease-strike: cubic-bezier(.65, 0, .35, 1); /* mkStrike */ --fx-ease-lift: cubic-bezier(.2, .7, .3, 1); /* client-card hover */ --fx-ease-bob: cubic-bezier(.45, 0, .35, 1); /* cueBounce, handBob */ --fx-step: 90ms; /* stagger step between siblings */ } /* LIGHT tuning (default): lower alpha, tighter blur, accent-colored, never white */ :where(:root), .fx-light { --fx-cta-y: 14px; --fx-cta-blur: 30px; --fx-cta-spread: -12px; --fx-cta-a: .42; --fx-cta-hover-a: .55; --fx-pulse-w: 10px; --fx-pulse-a: .16; --fx-pulse-scale: 1.03; --fx-halo-a: .16; --fx-halo-blur: 28px; --fx-halo-lo: .6; --fx-rim-rgb: initial; --fx-rim-a: .16; --fx-frame-a: .24; --fx-shade-rgb: initial; --fx-shade-a: .26; --fx-shade-blur: 60px; --fx-shade-spread: -24px; --fx-lift-a: .16; --fx-lift-shade-a: .22; --fx-ring-inset: -12%; --fx-spin-blur: 10px; --fx-spin-lo: .4; --fx-spin-hi: .65; --fx-ring-2: rgba(var(--fx-accent-rgb), .28); --fx-spark: initial; --fx-spark-2: initial; --fx-spark-3: initial; --fx-spark-glow-rgb: initial; --fx-spark-a: .35; --fx-arrow-a: .28; --fx-play-ring-rgb: initial; --fx-play-ring-a: .16; --fx-play-ring-hover-a: .22; } /* DARK tuning: the funnel's own numbers (it is a near-black page) */ .fx-dark { --fx-cta-y: 18px; --fx-cta-blur: 52px; --fx-cta-spread: -8px; --fx-cta-a: .7; --fx-cta-hover-a: .8; --fx-pulse-w: 14px; --fx-pulse-a: .18; --fx-halo-a: .28; --fx-halo-blur: 40px; --fx-halo-lo: .55; --fx-rim-rgb: 255, 255, 255; --fx-rim-a: .06; --fx-frame-a: .18; --fx-shade-rgb: 0, 0, 0; --fx-shade-a: .55; --fx-shade-blur: 70px; --fx-shade-spread: 0px; --fx-lift-a: .22; --fx-lift-shade-a: .9; --fx-ring-inset: -16%; --fx-spin-blur: 14px; --fx-spin-lo: .58; --fx-spin-hi: .9; --fx-ring-2: #ffd24a; --fx-spark: #ffd27a; --fx-spark-2: #fff6d8; --fx-spark-3: #ffb45c; --fx-spark-glow-rgb: 255, 210, 122; --fx-spark-a: .85; --fx-arrow-a: .55; --fx-play-ring-rgb: 255, 255, 255; --fx-play-ring-a: .14; --fx-play-ring-hover-a: .18; } /* phones: a full-width CTA leaves ~16px to the screen edge, so the pulse ring stays inside it */ @media (max-width: 720px) { :where(:root), .fx-light, .fx-dark { --fx-pulse-w: 8px; --fx-pulse-scale: 1.015; } } /* ========================================================================== 1. HERO ENTRANCE (funnel: heroRise 900ms, stagger 0 / 120 / 200ms) CSS only, plays once on load. Hero blocks only (it is not a scroll reveal). ========================================================================== */ @keyframes fxRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .fx-d1 { --fx-delay: 120ms; } .fx-d2 { --fx-delay: 200ms; } .fx-d3 { --fx-delay: 320ms; } .fx-d4 { --fx-delay: 440ms; } /* ========================================================================== 2. GLOW HALO behind hero media (funnel: .hero-photo-glow + heroGlow 9s breathe, funnel.css .video-panel::before) Put on a wrapper that does NOT clip (no overflow:hidden). The media sits inside. ========================================================================== */ .fx-halo { position: relative; isolation: isolate; } .fx-halo::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -6% -5% -9% -5%; background: radial-gradient(58% 50% at 50% 46%, rgba(var(--fx-glow, var(--fx-accent-rgb)), var(--fx-halo-a)), transparent 72%); filter: blur(var(--fx-halo-blur)); } /* phones: no negative side inset, so the glow box can never cause sideways scroll */ @media (max-width: 720px) { .fx-halo::before { inset: -5% 0 -8% 0; } } @keyframes fxBreathe { from { opacity: var(--fx-halo-lo); } to { opacity: 1; } } /* ========================================================================== 3. GLOWING VIDEO / MEDIA FRAME (funnel: .vsl + funnel.css .video-frame) Put on the clipped box that holds the