/* preflight.art motion layer. Only animates transform, translate, scale, rotate, opacity, filter and clip-path. html.pfjs = script is running (set in ) html.pfm = motion allowed (not prefers-reduced-motion) html.fx-* = each effect, so any one can be switched off */ /* L. safety net: no JS, or reduced motion, shows every .reveal complete and still */ html:not(.pfjs) .reveal{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ html.fx-l .reveal{opacity:1!important;transform:none!important;transition:none!important} } /* masked words (hero headline, section headings) */ .pfw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em} .pfw>span{display:inline-block} html.pfm .pfw>span{transition:translate .95s var(--ease) calc(var(--i,0) * 55ms + var(--w0,0ms))} /* C. hero load sequence. The hidden states match real selectors so nothing flashes before the script runs. */ .hero .eyebrow{--d:0s}.hero p.sub{--d:.55s}.hero .hero-cta{--d:.7s}.hero .hero-meta{--d:.82s}.hero .ent-link{--d:.92s} html.pfm .hero :is(.eyebrow,p.sub,.hero-cta,.hero-meta,.ent-link){transition:opacity .8s var(--ease) var(--d,0s),translate .8s var(--ease) var(--d,0s)} html.pfm.fx-c:not(.pf-loaded) .hero :is(.eyebrow,p.sub,.hero-cta,.hero-meta,.ent-link){opacity:0;translate:0 16px} html.pfm.fx-c:not(.pf-loaded) .hero h1:not(.pf-ready){opacity:0} html.pfm.fx-c:not(.pf-loaded) .hero h1 .pfw>span{translate:0 110%} /* E. section headings rise word by word; kickers draw their rule first */ html.pfm.fx-e h2.pf-split.reveal{opacity:1;transform:none} html.pfm.fx-e h2.pf-split:not(.in) .pfw>span{translate:0 110%} html.pfm.fx-e .kicker::before{transform-origin:0 50%;transition:transform .7s var(--ease) .1s} html.pfm.fx-e .kicker.reveal:not(.in)::before,html.pfm.fx-e .reveal:not(.in) .kicker::before{transform:scaleX(0)} /* F. things that arrive together stagger */ html.pfm .checkrow>.chip,html.pfm .plan li,html.pfm .strip .logos>span{transition:opacity .5s var(--ease) calc(var(--i,0) * 45ms + .25s),translate .5s var(--ease) calc(var(--i,0) * 45ms + .25s)} html.pfm.fx-f .reveal:not(.in) .checkrow>.chip,html.pfm.fx-f .plan.reveal:not(.in) li,html.pfm.fx-f .strip:not(.in) .logos>span{opacity:0;translate:0 10px} /* G. the founder statement lights up as it scrolls */ .pfk{transition:none} /* I. the sample report assembles itself */ html.pfm #report .report>*{transition:opacity .5s var(--ease) var(--d,0s),translate .5s var(--ease) var(--d,0s)} html.pfm #report .report .st{transition:scale .45s cubic-bezier(.3,1.6,.5,1) var(--d2,0s),opacity .2s ease var(--d2,0s)} html.pfm #report .report .stamp{transition:scale .5s cubic-bezier(.2,1.5,.4,1) var(--d2,0s),opacity .15s ease var(--d2,0s),rotate .5s var(--ease) var(--d2,0s)} html.pfm.fx-i #report .reveal:not(.in) .report>*{opacity:0;translate:-14px 0} html.pfm.fx-i #report .reveal:not(.in) .report .st{scale:.3;opacity:0} html.pfm.fx-i #report .reveal:not(.in) .report .stamp{scale:2.2;opacity:0;rotate:-14deg} /* J. pointer extras: red buttons lean toward the cursor and press in */ html.pfm.fx-j .btn-red{transition:translate .35s var(--ease),scale .12s ease,transform .25s var(--ease),box-shadow .3s var(--ease),background .25s} html.pfm.fx-j .btn:active,html.pfm.fx-j .pcta:active{scale:.97} /* K. phones: the Run button waits for the hero to pass; a section bar pins under the header */ @media (max-width:900px){ html.pfjs.fx-k .mobile-cta{translate:0 120%;transition:translate .4s var(--ease)} html.pfjs.fx-k .mobile-cta.pf-on{translate:0 0} html.pfjs.fx-k #pfbar{display:flex} } #pfbar{position:fixed;left:0;right:0;top:var(--pf-hdr,56px);z-index:59;height:46px;display:none;align-items:center;gap:4px;padding:0 4px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);translate:0 -110%;opacity:0;transition:translate .35s var(--ease),opacity .25s} #pfbar.pf-on{translate:0 0;opacity:1} #pfbar button{width:44px;height:44px;border:none;background:transparent;display:grid;place-items:center;color:var(--ink);cursor:pointer;flex:none} #pfbar .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} #pfbar .lab{font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} #pfbar .lab span{font-family:'DM Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--muted);margin-right:8px} #pfbar .dots{display:flex;gap:4px} #pfbar .dots i{width:14px;height:3px;border-radius:2px;background:#DAD6CF} #pfbar .dots i.on{background:var(--red)}