/* ========================================================================== The Lead Gen Company — motion layer (v2) Loads AFTER leadhq-lab.css / leadhq-guide.css / leadhq-asset.css. Rules this layer obeys: 1. Nothing hides unless JS is running. `.m-on` is set on by an inline script, so with JS off or broken every element renders at its final state. 2. Only `transform` and `opacity` animate. No layout-affecting properties. 3. Every reveal is one-shot. Scrolling back up does not replay it. 4. The lead form, nav, breadcrumbs, tables and legal copy are excluded by design — see MOTION-MAP.md. ========================================================================== */ :root { --m-fast: 180ms; /* hover / press feedback */ --m-base: 520ms; /* section + card reveals */ --m-slow: 760ms; /* headline line masks, hero imagery */ --m-stagger: 70ms; /* between headline lines */ --m-stagger-sm: 60ms; /* between sibling cards */ --m-out: cubic-bezier(.22, .61, .36, 1); /* ease-out-quad */ --m-expo: cubic-bezier(.16, 1, .30, 1); /* ease-out-expo */ --m-spring: cubic-bezier(.34, 1.4, .64, 1); /* slight overshoot */ } /* ========================================================================== 1. HERO — headline entrance Each word is wrapped in a clipping box; words sharing a line share a delay, so the headline reads as a line-by-line wipe rather than a word scatter. Padding + equal negative margin keeps descenders (g, y, p) out of the clip. ========================================================================== */ .m-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .16em; margin: -.08em 0 -.16em; } .m-w > i { display: inline-block; font-style: inherit; will-change: transform; } .m-on .m-w > i { transform: translateY(112%); } .m-on .m-in .m-w > i { transform: translateY(0); transition: transform var(--m-slow) var(--m-expo); transition-delay: calc(var(--m-line, 0) * var(--m-stagger)); } /* Hero supporting elements: eyebrow, sub, CTA row, readouts, console. Sequenced after the headline so the eye lands on the claim first. */ .m-on [data-m-hero] { opacity: 0; transform: translateY(14px); will-change: transform, opacity; } .m-on .m-in[data-m-hero], .m-on .m-in [data-m-hero] { opacity: 1; transform: none; transition: opacity var(--m-base) var(--m-out), transform var(--m-base) var(--m-out); transition-delay: calc(var(--m-seq, 0) * var(--m-stagger-sm)); } /* ========================================================================== 2. SCROLL REVEALS — supporting sections 18px is deliberately short: enough to register as arrival, not enough to feel like the page is assembling itself. ========================================================================== */ .m-on [data-m-reveal] { opacity: 0; transform: translateY(18px); will-change: transform, opacity; } .m-on [data-m-reveal].m-in { opacity: 1; transform: none; transition: opacity var(--m-base) var(--m-out), transform var(--m-base) var(--m-out); transition-delay: calc(var(--m-seq, 0) * var(--m-stagger-sm)); } /* Imagery: settles from a slight over-scale so the frame feels like it resolves rather than pops. Wrapper clips the overflow. */ .m-figure { overflow: hidden; } .m-on [data-m-img] { opacity: 0; transform: scale(1.045); will-change: transform, opacity; } .m-on [data-m-img].m-in { opacity: 1; transform: scale(1); transition: opacity var(--m-slow) var(--m-out), transform var(--m-slow) var(--m-out); } /* Counters hold their final width so the count-up cannot shift layout. */ [data-m-count] { display: inline-block; text-align: left; } /* ========================================================================== 3. CTA — hover sheen + press The base .btn--go already lifts 2px and glows on hover; this adds the sheen and a press response without overriding what is there. ========================================================================== */ .btn--go, .btn--ghost { position: relative; overflow: hidden; } .btn--go::after, .btn--ghost::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%); transform: translateX(-120%); pointer-events: none; } .btn--ghost::after { background: linear-gradient(105deg, transparent 38%, rgba(184, 255, 58, .22) 50%, transparent 62%); } .btn--go:hover::after, .btn--ghost:hover::after { transform: translateX(120%); transition: transform var(--m-slow) var(--m-out); } .btn--go:active, .btn--ghost:active { transform: translateY(0) scale(.985); transition: transform 90ms var(--m-out); } /* Focus ring — motion must never replace a visible focus state. */ .btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; } /* ========================================================================== 4. HERO VISUAL — liquid aura The panel itself never moves: it holds a form, and a form should feel anchored. Instead a soft mass of light sits BEHIND it and seeps toward the cursor. Three blobs at different lag rates are merged by an SVG gooey filter (blur -> alpha contrast -> soften), which is what gives the mass a surface tension rather than reading as three overlapping circles. ========================================================================== */ .m-aura-wrap { position: relative; } .m-aura-wrap > .console { position: relative; z-index: 1; } .m-aura { position: absolute; inset: -150px -170px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 900ms var(--m-out); } .m-blob { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate3d(-50%, -50%, 0); will-change: transform; mix-blend-mode: screen; /* light adds where the masses overlap */ } /* Sizes descend with lag: the big slow mass reads as body, the small fast one as the leading edge being drawn out toward the pointer. */ /* Long, soft falloffs. Overlapping gradients under `screen` fuse on their own, which costs nothing — an SVG gooey filter gave a slightly harder edge and measured 3x the frame budget. The liquid quality comes from the differential lag between the three masses, not from the filter. */ .m-blob--1 { width: 560px; height: 560px; background: radial-gradient(circle closest-side, rgba(184,255,58,.50) 0%, rgba(184,255,58,.26) 38%, rgba(184,255,58,.07) 66%, transparent 100%); } .m-blob--2 { width: 400px; height: 400px; background: radial-gradient(circle closest-side, rgba(184,255,58,.42) 0%, rgba(170,246,110,.20) 42%, rgba(170,246,110,.05) 70%, transparent 100%); } .m-blob--3 { width: 270px; height: 270px; background: radial-gradient(circle closest-side, rgba(120,240,200,.34) 0%, rgba(84,216,255,.15) 45%, rgba(84,216,255,.04) 72%, transparent 100%); } .m-goo-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ========================================================================== 5. REDUCED MOTION — everything resolves instantly, nothing is hidden. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .m-on .m-w > i, .m-on .m-in .m-w > i { transform: none !important; transition: none !important; } .m-on [data-m-hero], .m-on [data-m-reveal], .m-on [data-m-img] { opacity: 1 !important; transform: none !important; transition: none !important; } .btn--go::after, .btn--ghost::after { display: none; } .m-aura { opacity: .22 !important; transition: none !important; } .m-blob { transform: translate3d(-50%, -50%, 0) !important; } }