/* ───────────────────────────────────────────────────────── WLP CAPITAL — CINEMATIC MOTION + DEPTH Shared utility layer. Pairs with wlp-motion.js + wlp-canvas.js. ───────────────────────────────────────────────────────── */ :root { --ease-cinema: cubic-bezier(.22, .61, .36, 1); --ease-slow: cubic-bezier(.16, 1, .3, 1); --dur-slow: 1.2s; --dur-mid: .8s; --dur-fast: .45s; } /* ── Reveal — refined cinematic entry ───────────────────── Existing pages already define .reveal/.visible. We extend without breaking older inline rules. */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-cinema), transform var(--dur-slow) var(--ease-cinema); will-change: opacity, transform; } .reveal.visible, .reveal.is-in { opacity: 1; transform: none; } /* Variant: subtle vertical lift only */ .reveal[data-reveal="rise"] { transform: translateY(18px); } /* Variant: drift in from left */ .reveal[data-reveal="left"] { transform: translate(-32px, 0); } .reveal[data-reveal="left"].visible, .reveal[data-reveal="left"].is-in { transform: none; } /* ── Hairline draw-on ─────────────────────────────────────
or
with a width. Animates from 0 width to its inline/CSS width. */ [data-hairline] { position: relative; overflow: hidden; } [data-hairline]::after { content: ''; position: absolute; inset: 0; background: inherit; transform-origin: left center; transform: scaleX(0); transition: transform 1.6s var(--ease-cinema); } [data-hairline].is-drawn::after { transform: scaleX(1); } /* Inline mode: animate the element's own scale */ .hairline-draw { transform-origin: left center; transform: scaleX(0); transition: transform 1.4s var(--ease-cinema); } .hairline-draw.is-drawn { transform: scaleX(1); } /* ── Parallax helpers ───────────────────────────────────── Apply transform via CSS vars set by wlp-motion.js. */ [data-parallax] { --px: 0px; --py: 0px; transform: translate3d(var(--px), var(--py), 0); transition: transform .8s var(--ease-cinema); will-change: transform; } [data-scroll-parallax] { --sy: 0px; transform: translate3d(0, var(--sy), 0); will-change: transform; } /* ── Ambient cursor glow ────────────────────────────────── Activated by . Single fixed node follows the cursor with very low opacity. Hidden until the cursor actually moves (motion.js flips a class). */ #wlp-cursor-glow { position: fixed; left: 0; top: 0; width: 460px; height: 460px; pointer-events: none; z-index: 0; transform: translate3d( calc(var(--cursor-x, -800px) - 230px), calc(var(--cursor-y, -800px) - 230px), 0 ); background: radial-gradient( circle at center, rgba(182,152,70,0.045) 0%, rgba(182,152,70,0.018) 30%, rgba(182,152,70,0) 62% ); filter: blur(8px); opacity: 0; transition: transform .55s var(--ease-cinema), opacity .8s ease; mix-blend-mode: screen; } #wlp-cursor-glow.is-active { opacity: 1; } /* ── Canvas auto-positioning ────────────────────────────── Any becomes a full-bleed absolute background of its nearest positioned ancestor. No wrapper class required. */ canvas[data-wlp-canvas] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; } /* ── Canvas attached to a section ───────────────────────── Optional helper layout:
. */ .wlp-stage { position: relative; overflow: hidden; } .wlp-stage > canvas[data-wlp-canvas] + * { position: relative; z-index: 1; } /* ── Hero with cinematic canvas — atmospheric wash + infra grid ─ Two-layer overlay: a soft radial wash for headline legibility, and a hairline infrastructure grid sitting at very low opacity. */ #hero:has(> canvas[data-wlp-canvas]) { isolation: isolate; background: var(--ink-1, #050505); } /* Vignette + atmospheric wash — lighter than before so the canvas reads through, but still preserves text contrast on the left. */ #hero:has(> canvas[data-wlp-canvas])::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(110% 70% at 16% 52%, rgba(5,5,5,0.46) 0%, rgba(5,5,5,0.22) 38%, rgba(5,5,5,0.02) 65%, transparent 82%), linear-gradient(180deg, rgba(5,5,5,0.20) 0%, rgba(5,5,5,0.00) 32%, rgba(5,5,5,0.00) 72%, rgba(5,5,5,0.55) 100%); } /* Hairline infrastructure overlay — ultra-faint vertical + horizontal tracks that suggest institutional architecture. Static, very subtle. */ #hero:has(> canvas[data-wlp-canvas])::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* faint vertical leverage tracks */ linear-gradient(90deg, transparent 0, transparent calc(20% - .5px), rgba(182,152,70,0.045) calc(20% - .5px), rgba(182,152,70,0.045) 20%, transparent 20%, transparent calc(62% - .5px), rgba(182,152,70,0.035) calc(62% - .5px), rgba(182,152,70,0.035) 62%, transparent 62%, transparent calc(84% - .5px), rgba(182,152,70,0.025) calc(84% - .5px), rgba(182,152,70,0.025) 84%, transparent 84%), /* one horizontal architectural baseline */ linear-gradient(180deg, transparent 0, transparent calc(78% - .5px), rgba(245,242,235,0.04) calc(78% - .5px), rgba(245,242,235,0.04) 78%, transparent 78%); mix-blend-mode: screen; } #hero:has(> canvas[data-wlp-canvas]) > .hero-content, #hero:has(> canvas[data-wlp-canvas]) > .hero-left, #hero:has(> canvas[data-wlp-canvas]) > .hero-right { position: relative; z-index: 2; } /* Subtle gradient floor that sits over the canvas for legibility */ .wlp-stage--with-floor::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 70% at 20% 60%, rgba(8,8,8,.78) 0%, rgba(8,8,8,.40) 40%, rgba(8,8,8,.10) 70%, transparent 100%); } /* ── Glass panel utility ────────────────────────────────── Premium translucent surface for overlays / detail cards. */ .glass { background: linear-gradient(180deg, rgba(245,243,239,0.025), rgba(245,243,239,0.008)); border: 1px solid rgba(245,243,239,0.06); backdrop-filter: blur(14px) saturate(110%); -webkit-backdrop-filter: blur(14px) saturate(110%); } .glass-gold { background: linear-gradient(180deg, rgba(182,152,70,0.045), rgba(182,152,70,0.010)); border: 1px solid rgba(182,152,70,0.18); backdrop-filter: blur(14px) saturate(110%); -webkit-backdrop-filter: blur(14px) saturate(110%); } /* ── Section transition: cinematic top/bottom fade ──────── Use on sections to keep the canvas legible at edges. */ .section-fade-top::before, .section-fade-bottom::after { content: ''; position: absolute; left: 0; right: 0; height: 140px; pointer-events: none; z-index: 2; } .section-fade-top::before { top: 0; background: linear-gradient(to bottom, rgba(8,8,8,1), rgba(8,8,8,0)); } .section-fade-bottom::after { bottom: 0; background: linear-gradient(to top, rgba(8,8,8,1), rgba(8,8,8,0)); } /* ── Reduced motion ───────────────────────────────────────*/ @media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible, .reveal.is-in, [data-hairline]::after, .hairline-draw, [data-parallax], [data-scroll-parallax] { transition-duration: .01ms !important; transform: none !important; } #wlp-cursor-glow { display: none; } } /* ───────────────────────────────────────────────────────── PREMIUM CTA — institutional, tactile, restrained Glass surface, slow gold edge illumination on hover, ambient inner pulse, no startup-style snap. Use as `` or `