/* ========================================================= AcreLoop CRM — motion layer (Framer-style) Loaded last in the shared , so every page gets it. Progressive by design: - chrome entrances (top bar / nav) are pure CSS, always run - scroll reveals only apply to elements motion.js marked with [data-m] inside -> with JS off, or prefers-reduced-motion on, nothing is ever hidden: the page renders complete and still. ========================================================= */ :root { --m-ease: cubic-bezier(.22, 1, .36, 1); /* expo-out — the Framer default feel */ --m-ease-in: cubic-bezier(.4, 0, 1, 1); --m-spring: cubic-bezier(.34, 1.36, .5, 1); /* gentle overshoot for pop-ins */ --m-dur: .78s; } /* --------------------------------------------------------- 1. Chrome entrance (CSS only — no JS gating, no FOUC risk) --------------------------------------------------------- */ @keyframes m-drop { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } } @keyframes m-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } } .topbar__inner > * { animation: m-drop .6s var(--m-ease) both; } .topbar__inner > *:nth-child(2) { animation-delay: .07s; } .nav__inner > *:not(.nav__menu) { animation: m-rise .7s var(--m-ease) both; } .nav__inner > *:nth-child(1) { animation-delay: .1s; } .nav__menu > ul { animation: m-rise .7s var(--m-ease) .17s both; } /* --------------------------------------------------------- 2. Scroll reveals (only elements motion.js opted in) --------------------------------------------------------- */ .motion [data-m] { opacity: 0; } .motion [data-m="up"] { transform: translate3d(0, 30px, 0) scale(.985); filter: blur(5px); } .motion [data-m="fade"] { transform: none; filter: none; } .motion [data-m="left"] { transform: translate3d(-48px, 12px, 0); filter: none; } .motion [data-m="right"] { transform: translate3d(48px, 12px, 0); filter: none; } .motion [data-m="rise"] { transform: translate3d(0, .42em, 0); filter: blur(7px); } /* the transition lives on the REVEALED state only — declaring it on the hidden state would animate the hide itself and flicker on first paint */ .motion [data-m].is-in { opacity: 1; transform: none; filter: none; transition: opacity var(--m-dur) var(--m-ease) var(--m-delay, 0ms), transform .9s var(--m-ease) var(--m-delay, 0ms), filter .8s var(--m-ease) var(--m-delay, 0ms); } /* side-sliding reveals sit outside their box while they wait to animate in — clip that at the section edge, otherwise the page grows a horizontal scrollbar for as long as a section is still pending. `clip` (not `hidden`) creates no scroll container, so the sticky nav and anchor bar keep working; and they live outside these sections. Scoped to html.motion: a JS-off or reduced-motion visitor gets no clipping at all. */ html.motion :is(.psec, .section) { overflow-x: clip; } /* --------------------------------------------------------- 3. Scroll progress hairline --------------------------------------------------------- */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 999; pointer-events: none; } .progress i { display: block; height: 100%; transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--teal-deep), var(--slate-teal) 55%, #7fd0cb); } /* --------------------------------------------------------- 4. Scroll parallax (translate composes with transform, so it never fights a reveal on the same element) --------------------------------------------------------- */ [data-par] { translate: 0 var(--par, 0px); } /* --------------------------------------------------------- 5. Micro-interactions --------------------------------------------------------- */ /* buttons — lift, press, CTA shadow */ .btn { transition: transform .45s var(--m-ease), box-shadow .45s var(--m-ease), background-color .22s var(--m-ease), color .22s var(--m-ease), border-color .22s var(--m-ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; } .btn--cta:hover { box-shadow: 0 14px 30px -12px rgba(206, 63, 44, .55); } /* cards */ .pcard, .quote, .person, .fig, .mark, .assurance__marks { transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease), border-color .35s var(--m-ease); } .pcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); } .quote:hover, .person:hover, .fig:hover, .mark:hover, .assurance__marks:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } /* nav links */ .nav__menu > ul > li > a { transition: background-color .3s var(--m-ease), color .3s var(--m-ease), transform .3s var(--m-ease); } .nav__menu > ul > li > a:hover { transform: translateY(-1px); } /* dropdown */ .sub { transform: translateY(10px) scale(.985); transform-origin: top left; transition: opacity .34s var(--m-ease), transform .34s var(--m-ease), visibility .34s, box-shadow .34s var(--m-ease); } .has-sub:hover > .sub, .has-sub:focus-within > .sub { transform: translateY(0) scale(1); } /* mobile drawer keeps its own slide, just smoother */ .nav__menu { transition: transform .5s var(--m-ease), opacity .4s var(--m-ease), visibility .5s; } /* sticky section pills */ .anchor-nav a { transition: background-color .35s var(--m-ease), color .35s var(--m-ease), border-color .35s var(--m-ease), transform .35s var(--m-ease); } .anchor-nav a:hover { transform: translateY(-1px); } /* FAQ rows */ .acc summary { transition: color .3s var(--m-ease); } .acc summary:hover { color: var(--teal-deep); } .acc details { transition: border-color .3s var(--m-ease), box-shadow .3s var(--m-ease); } /* forms */ .field input, .field textarea, .phone input { transition: border-color .3s var(--m-ease), box-shadow .3s var(--m-ease); } .field input.is-error, .field textarea.is-error, .phone input.is-error { animation: m-shake .42s var(--m-ease); } @keyframes m-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } } .form__success:not([hidden]) { animation: m-pop .5s var(--m-spring) both; } @keyframes m-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------- 6. Accordion height animation (progressive, feature-tested) --------------------------------------------------------- */ @supports selector(::details-content) { html { interpolate-size: allow-keywords; } .acc details::details-content { block-size: 0; overflow: clip; transition: block-size .38s var(--m-ease); } .acc details[open]::details-content { block-size: auto; } } /* --------------------------------------------------------- 7. App-like page transitions between pages --------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } ::view-transition-old(root) { animation: m-vt-out .2s var(--m-ease-in) both; } ::view-transition-new(root) { animation: m-vt-in .44s var(--m-ease) both; } @keyframes m-vt-out { to { opacity: 0; transform: scale(.99); } } @keyframes m-vt-in { from { opacity: 0; transform: translateY(14px); } } /* --------------------------------------------------------- 8. Reduced motion — nothing moves, nothing is hidden --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .topbar__inner > *, .nav__inner > *, .nav__menu > ul { animation: none !important; } .progress { display: none; } .motion [data-m] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } [data-par] { translate: none; } }