/* ========================================================================== Motion: hero drift + load-in, scroll reveals, photo wipes. Everything here only runs when has the "motion" class, which is set in the only if the visitor has NOT turned on Reduce Motion. ========================================================================== */ /* ---- Hero drift: 104% → 110% scale, 1.2% left / 1% down, 26s, eased, reversing forever */ @keyframes hero-drift{ from{transform:translate(0,0) scale(1.04)} to{transform:translate(-1.2%,1%) scale(1.10)} } .motion .hero-drift{animation:hero-drift 26s ease-in-out infinite alternate} /* ---- Headline + wordmark (+ badge) fade in and rise 24px on load, staggered */ @keyframes hero-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .motion .welcome .fg-head{animation:hero-rise 1.2s cubic-bezier(.2,.7,.1,1) .25s both} .motion .welcome .fg-word{animation:hero-rise 1.2s cubic-bezier(.2,.7,.1,1) .45s both} .motion .welcome .interact{animation:hero-rise 1.2s cubic-bezier(.2,.7,.1,1) .75s both,breathe 1.27s ease-in-out 1.95s infinite} /* ---- Scroll reveals: start 34px lower and invisible, rise over 1.1s, once */ @keyframes rv-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}} .motion .rv:not(.in){opacity:0} .motion .rv.in{animation:rv-rise 1.1s cubic-bezier(.2,.7,.1,1) both} /* ---- Photo wipes, top to bottom over 1.3s */ @keyframes rv-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} .rw-box>img{display:block;width:100%;height:auto;margin:0;max-width:none} .photo-grid .rw-box>img{aspect-ratio:1/1;object-fit:cover} .motion .rw-box:not(.in)>img{clip-path:inset(0 0 100% 0)} .motion .rw-box.in>img{animation:rv-wipe 1.3s cubic-bezier(.2,.7,.1,1) both;animation-delay:inherit} /* desktop: photos are part of the page art, so a black curtain slides off them */ @keyframes rv-curtain{from{transform:scaleY(1)}to{transform:scaleY(0)}} .wipe{background:#000;transform-origin:50% 100%;pointer-events:none;z-index:1} .motion .wipe.in{animation:rv-curtain 1.3s cubic-bezier(.2,.7,.1,1) both} @media (prefers-reduced-motion:reduce){ .hero-drift,.welcome .fg-head,.welcome .fg-word,.welcome .interact,.rv,.rw-box>img,.wipe{animation:none!important;opacity:1!important;clip-path:none!important} .wipe{display:none} .hero-par{transform:none!important} }