/* The homepage's motion layer, for every other page (see site-fx.js). Hidden states live under .mo,
   which is only set when the visitor hasn't asked for reduced motion. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.5,.5,1)}
.w{display:inline-block}

/* the headline waits for its fonts, then gets painted in (header-fx.css) */
.mo :is(.hero,.pg-hero):not(.go) h1{opacity:0}

/* the lime highlight and the scribbled phrase get brushed on after the words land */
.mo .go h1 .hl::after,.mo .go h1 .scribble::after{transform-origin:0 50%;animation:siteBrush .7s var(--ease) 1.1s backwards}
@keyframes siteBrush{from{scale:0 1}}

/* section headings rise word by word */
.mo h2.split .w{opacity:0;translate:0 .4em;rotate:5deg;transition:opacity .6s var(--ease),translate .8s var(--ease),rotate .8s var(--ease);transition-delay:calc(var(--i) * .06s)}
.mo h2.split.in .w{opacity:1;translate:0 0;rotate:0deg}

/* paper slides in as you reach it */
.mo .rv{opacity:0;translate:0 28px;transition:opacity .8s var(--ease) var(--rd,0s),translate .9s var(--ease) var(--rd,0s)}
.mo .rv.in{opacity:1;translate:0 0}

/* the footer heart */
.heart{cursor:pointer;user-select:none}
.puff{position:fixed;z-index:60;pointer-events:none;color:var(--tangerine);font-size:18px;animation:puff 1.3s ease-out forwards}
@keyframes puff{to{opacity:0;translate:var(--x) -90px;rotate:var(--r);scale:1.6}}