/* motion.css — site-wide "kinetic" motion (the /v2 feel), layered on scroll-fx's reveal. Active only with .cr-reveal on (JS + motion allowed), so reduced-motion and no-JS always keep content visible. Loaded by page-shell right after style.css so it wins ties. */ /* Reveal: a touch more travel, smoother + a little slower ease. */ .cr-reveal [data-in]{ transform: translateY(32px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d,0s); } /* Headings wipe in left-to-right — the signature /v2 move. */ .cr-reveal h1[data-in], .cr-reveal h2[data-in]{ clip-path: inset(0 100% 0 0); transition: clip-path 1.05s cubic-bezier(.72,0,.24,1), opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d,0s); } .cr-reveal h1[data-in].is-in, .cr-reveal h2[data-in].is-in, .cr-reveal.cr-shown h1[data-in], .cr-reveal.cr-shown h2[data-in]{ clip-path: inset(0 0 0 0); } /* Button micro-interaction. */ .btn-primary, .btn-outline{ transition: transform .22s cubic-bezier(.34,1.4,.6,1), box-shadow .3s ease, background-color .2s ease, border-color .2s ease; } .btn-primary:hover{ transform: translateY(-2px); } .btn-outline:hover{ transform: translateY(-1px); } /* Hero parallax runs on the INSIDE .hero-media (which is overflow:hidden), so the photo can never bleed past the hero into the next section. */ .hero-media img{ will-change: transform; } /* Mobile: keep it smooth, less travel, and no parallax (JS skips touch). */ @media (max-width: 640px){ .cr-reveal [data-in]{ transform: translateY(22px); transition-duration: .85s; } .cr-reveal h1[data-in], .cr-reveal h2[data-in]{ transition-duration: .9s; } } @media (prefers-reduced-motion: reduce){ .cr-reveal [data-in], .cr-reveal h1[data-in], .cr-reveal h2[data-in]{ clip-path: none !important; transition: none !important; transform: none !important; } }