/* ===================================================================== PAGEFX — shared animation styles for every page except home. Driven entirely by attributes (see js/pagefx.js). All hidden states are gated on html.fx, so no-JS/reduced-motion = the resting design. IMPORTANT: data-hero / data-reveal variants that use transform must NOT be put on elements that already have a resting CSS transform (e.g. anything with translateX(-50%) centering) — use "fade" or "wipe" on those instead. ===================================================================== */ /* ---------------- one-shot viewport reveals ---------------- */ html.fx [data-reveal]{ opacity: 0; transform: translateY(46px); transition: opacity .75s cubic-bezier(0.215, 0.61, 0.355, 1), transform .75s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform, opacity; } html.fx [data-reveal="left"] { transform: translateX(-64px); } html.fx [data-reveal="right"] { transform: translateX(64px); } html.fx [data-reveal="scale"] { transform: scale(0.86); } html.fx [data-reveal="fade"] { transform: none; } html.fx [data-reveal="wipe"]{ transform: none; /* 98%, not 100%: a fully-clipped element has zero visible area and IntersectionObserver then never fires — the reveal would never run. The 2% sliver is invisible anyway (opacity 0 until .is-in). */ clip-path: inset(0 98% 0 0); transition: clip-path .95s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1); } html.fx [data-reveal].is-in{ opacity: 1; transform: none; clip-path: inset(0 0 0 0); } /* keep centering transforms intact on fade/wipe reveals */ html.fx [data-reveal="fade"].is-in, html.fx [data-reveal="wipe"].is-in{ transform: none; } /* ---------------- hero load-in (plays once on page load) ---------------- */ html.fx [data-hero]{ opacity: 0; } html.fx.fx-load [data-hero]{ animation: fxHeroUp .85s cubic-bezier(0.215, 0.61, 0.355, 1) both; } html.fx.fx-load [data-hero="left"] { animation-name: fxHeroLeft; } html.fx.fx-load [data-hero="right"]{ animation-name: fxHeroRight; } html.fx.fx-load [data-hero="scale"]{ animation-name: fxHeroScale; } html.fx.fx-load [data-hero="fade"] { animation-name: fxHeroFade; } @keyframes fxHeroUp { from{ opacity:0; transform: translateY(44px); } to{ opacity:1; transform:none; } } @keyframes fxHeroLeft { from{ opacity:0; transform: translateX(-70px); } to{ opacity:1; transform:none; } } @keyframes fxHeroRight{ from{ opacity:0; transform: translateX(70px); } to{ opacity:1; transform:none; } } @keyframes fxHeroScale{ from{ opacity:0; transform: scale(0.82); } to{ opacity:1; transform:none; } } @keyframes fxHeroFade { from{ opacity:0; } to{ opacity:1; } } /* ---------------- scroll-typed text ---------------- */ [data-type] .ch{ opacity: clamp(0, calc(var(--n, 9999) - var(--i, 0)), 1); } /* ---------------- FOOTER — same scene as the home page ---------------- The page tags its footer clone:
and these rules do the rest: racks slide in from the edges, headline rises, CTA pops, pin drops, columns fade up. Defaults (--p:1) keep the design without JS. */ .sec-footer .ftr-rack--left{ --e: clamp(0, calc((var(--p, 1) - 0.05) / 0.48), 1); transform: translateX(calc((1 - var(--e)) * -320px)); opacity: var(--e); will-change: transform, opacity; } .sec-footer .ftr-rack--right{ --e: clamp(0, calc((var(--p, 1) - 0.05) / 0.48), 1); transform: translateX(calc((1 - var(--e)) * 320px)); opacity: var(--e); will-change: transform, opacity; } .sec-footer .ftr-headline{ --e: clamp(0, calc((var(--p, 1) - 0.16) / 0.44), 1); transform: translateY(calc((1 - var(--e)) * 80px)); opacity: var(--e); will-change: transform, opacity; } .sec-footer .ftr-paragraph{ --e: clamp(0, calc((var(--p, 1) - 0.28) / 0.40), 1); transform: translateY(calc((1 - var(--e)) * 50px)); opacity: var(--e); will-change: transform, opacity; } .sec-footer .ftr-cta{ --e: clamp(0, calc((var(--p, 1) - 0.38) / 0.36), 1); transform: translateY(calc((1 - var(--e)) * 40px)) scale(calc(0.9 + var(--e) * 0.1)); opacity: var(--e); will-change: transform, opacity; } .sec-footer .ftr-pin{ --e: clamp(0, calc((var(--p, 1) - 0.44) / 0.36), 1); transform: translateY(calc((1 - var(--e)) * -70px)) rotate(-90.97deg); opacity: var(--e); will-change: transform, opacity; } .sec-footer .ftr-logo, .sec-footer .ftr-tagline, .sec-footer .ftr-social, .sec-footer .ftr-col--learn, .sec-footer .ftr-col--support, .sec-footer .ftr-contact-header, .sec-footer .ftr-contact--email, .sec-footer .ftr-contact--address{ --e: clamp(0, calc((var(--p, 1) - 0.52) / 0.40), 1); transform: translateY(calc((1 - var(--e)) * 36px)); opacity: var(--e); will-change: transform, opacity; } /* hover transitions must not fight the scrub on these */ .sec-footer .ftr-cta, .sec-footer .ftr-pin{ transition: none !important; } /* ---------------- reduced motion: design at rest ---------------- */ @media (prefers-reduced-motion: reduce){ html.fx [data-reveal], html.fx [data-hero]{ opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; } .sec-footer .ftr-rack--left, .sec-footer .ftr-rack--right, .sec-footer .ftr-headline, .sec-footer .ftr-paragraph, .sec-footer .ftr-cta, .sec-footer .ftr-logo, .sec-footer .ftr-tagline, .sec-footer .ftr-social, .sec-footer .ftr-col--learn, .sec-footer .ftr-col--support, .sec-footer .ftr-contact-header, .sec-footer .ftr-contact--email, .sec-footer .ftr-contact--address{ --p: 1 !important; } .sec-footer .ftr-pin{ --p: 1 !important; } } /* Text must be selectable: the positioning shells disable hit-testing and pointer-events inherits, which silently made every headline/paragraph unselectable. Restore it on text elements (they're small, so they don't bring back the shell click-swallowing this system exists to prevent). */ #stage p, #stage h1, #stage h2, #stage h3, #stage h4, #stage h5, #stage h6, #stage li, #stage blockquote{ pointer-events: auto; }