/* Homepage scroll enter/exit · only active when (armed by home-scroll-fx.js after #hero is detected). Without that class, everything stays fully visible — no blank-section risk if JS fails. */ html.hsfx-on{ --hsfx-ease-in:cubic-bezier(.16,1.35,.28,1); --hsfx-ease-out:cubic-bezier(.55,.05,.75,.2); --hsfx-dur:.85s; } /* Do NOT put perspective on #contentWrapper — it turns every position:fixed descendant (roadmap pops, tips) into a local-fixed element and destroys the floating card layout. */ html.hsfx-on .hsfx{ --hsfx-i:0; transform-origin:50% 80%; will-change:transform,opacity,filter,clip-path; transition: opacity var(--hsfx-dur) var(--hsfx-ease-out), transform var(--hsfx-dur) var(--hsfx-ease-out), filter var(--hsfx-dur) var(--hsfx-ease-out), clip-path var(--hsfx-dur) var(--hsfx-ease-out); /* Pre-enter rest pose · hidden until .is-in */ opacity:0; filter:blur(14px) saturate(.7); transform:translate3d(0,88px,0) scale(.92); clip-path:inset(18% -4% -8% -4%); pointer-events:none; } html.hsfx-on .hsfx.is-in{ opacity:1; filter:blur(0) saturate(1); transform:translate3d(0,0,0) scale(1); clip-path:inset(0 0 0 0); pointer-events:auto; transition-timing-function:var(--hsfx-ease-in); } /* Leave upward (scrolled past, continuing down) */ html.hsfx-on .hsfx.is-out-up{ opacity:0; filter:blur(16px) brightness(1.15); transform:translate3d(0,-72px,0) scale(.94); clip-path:inset(0 -4% 22% -4%); pointer-events:none; transition-timing-function:var(--hsfx-ease-out); transition-duration:.55s; } /* Leave downward (scrolled back up past section) */ html.hsfx-on .hsfx.is-out-down{ opacity:0; filter:blur(16px) saturate(.55); transform:translate3d(0,96px,0) scale(.92); clip-path:inset(24% -4% -8% -4%); pointer-events:none; transition-timing-function:var(--hsfx-ease-out); transition-duration:.55s; } /* Staggered children inside a section */ html.hsfx-on .hsfx .hsfx-child{ opacity:0; transform:translate3d(0,42px,0) scale(.94) rotateZ(-.4deg); filter:blur(8px); transition: opacity .7s var(--hsfx-ease-out), transform .7s var(--hsfx-ease-out), filter .7s var(--hsfx-ease-out); transition-delay:0ms; } html.hsfx-on .hsfx.is-in .hsfx-child{ opacity:1; transform:none; filter:none; transition-timing-function:var(--hsfx-ease-in); transition-delay:calc(var(--hsfx-i, 0) * 70ms + 60ms); } html.hsfx-on .hsfx.is-out-up .hsfx-child, html.hsfx-on .hsfx.is-out-down .hsfx-child{ opacity:0; filter:blur(10px); transition-delay:calc(var(--hsfx-i, 0) * 28ms); transition-duration:.4s; } html.hsfx-on .hsfx.is-out-up .hsfx-child{ transform:translate3d(0,-28px,0) scale(.96); } html.hsfx-on .hsfx.is-out-down .hsfx-child{ transform:translate3d(0,36px,0) scale(.94); } /* Alternating lateral punch for odd/even children */ html.hsfx-on .hsfx .hsfx-child:nth-child(odd){ transform:translate3d(36px,48px,0) scale(.93) rotateZ(.6deg); } html.hsfx-on .hsfx .hsfx-child:nth-child(even){ transform:translate3d(-36px,48px,0) scale(.93) rotateZ(-.6deg); } html.hsfx-on .hsfx.is-in .hsfx-child:nth-child(odd), html.hsfx-on .hsfx.is-in .hsfx-child:nth-child(even){ transform:none; } /* Section titles (prestudy / phases): no clip-path / edge frame — only soft fade-up */ html.hsfx-on .psr-head.hsfx{ clip-path:none !important; box-shadow:none !important; filter:blur(8px); transform:translate3d(0,36px,0); animation:none !important; } html.hsfx-on .psr-head.hsfx.is-in{ filter:none; transform:none; box-shadow:none !important; animation:none !important; } html.hsfx-on .psr-head.hsfx.is-out-up, html.hsfx-on .psr-head.hsfx.is-out-down{ clip-path:none !important; box-shadow:none !important; filter:blur(8px); animation:none !important; } html.hsfx-on .psr-head.hsfx.is-out-up{transform:translate3d(0,-24px,0)} html.hsfx-on .psr-head.hsfx.is-out-down{transform:translate3d(0,36px,0)} @media (max-width:720px){ html.hsfx-on .hsfx{ transform:translate3d(0,56px,0) scale(.94); filter:blur(8px); clip-path:inset(10% 0 0 0); } html.hsfx-on .hsfx.is-out-up{ transform:translate3d(0,-40px,0) scale(.95); } html.hsfx-on .hsfx.is-out-down{ transform:translate3d(0,56px,0) scale(.94); } html.hsfx-on .hsfx .hsfx-child:nth-child(odd), html.hsfx-on .hsfx .hsfx-child:nth-child(even){ transform:translate3d(0,28px,0) scale(.96); } } @media (prefers-reduced-motion:reduce){ html.hsfx-on .hsfx, html.hsfx-on .hsfx .hsfx-child{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; transition:none !important; animation:none !important; pointer-events:auto !important; } }