/* Crevyro public landing-page motion system — 2026-08-05.
   Loaded after the shared theme so motion can compose with the existing design. */

:root{
  --acx-motion-ease:cubic-bezier(.2,.72,.24,1);
  --acx-motion-ease-out:cubic-bezier(.16,1,.3,1);
  --acx-motion-purple:#6f45f4;
  --acx-motion-pink:#f04f9b;
  --acx-motion-yellow:#e9ff58;
}

html{overflow-x:clip}

body.acx-landing-page:not(.acx-homepage){
  overflow-x:clip;
}

body.acx-landing-page:not(.acx-homepage) .mcv2-header{
  transition:opacity .72s var(--acx-motion-ease-out),transform .72s var(--acx-motion-ease-out),background-color .25s ease,box-shadow .25s ease;
}

body.acx-motion-ready:not(.acx-page-loaded) .mcv2-header{
  opacity:0;
  transform:translate3d(0,-18px,0);
}

body.acx-motion-ready.acx-page-loaded .mcv2-header{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Shared reveal primitives. Content stays visible until JavaScript marks the
   page motion-ready, so a script failure can never hide the page. */
body.acx-motion-ready .acx-reveal{
  --acx-reveal-x:0px;
  --acx-reveal-y:36px;
  --acx-reveal-scale:.985;
  --acx-reveal-rotate:0deg;
  --acx-scrub-y:0px;
  opacity:0;
  transform:translate3d(var(--acx-reveal-x),var(--acx-reveal-y),0) scale(var(--acx-reveal-scale)) rotate(var(--acx-reveal-rotate));
  transform-origin:50% 55%;
  transition:
    opacity .78s var(--acx-motion-ease-out) var(--acx-reveal-delay,0ms),
    transform .92s var(--acx-motion-ease-out) var(--acx-reveal-delay,0ms);
  will-change:opacity,transform;
}

body.acx-motion-ready .acx-reveal.acx-from-left{
  --acx-reveal-x:-48px;
  --acx-reveal-y:8px;
}

body.acx-motion-ready .acx-reveal.acx-from-right{
  --acx-reveal-x:48px;
  --acx-reveal-y:8px;
}

body.acx-motion-ready .acx-reveal.acx-scale-in{
  --acx-reveal-y:20px;
  --acx-reveal-scale:.94;
}

body.acx-motion-ready .acx-reveal.acx-tilt-left{
  --acx-reveal-x:-24px;
  --acx-reveal-y:34px;
  --acx-reveal-scale:.96;
  --acx-reveal-rotate:-1.4deg;
}

body.acx-motion-ready .acx-reveal.acx-tilt-right{
  --acx-reveal-x:24px;
  --acx-reveal-y:34px;
  --acx-reveal-scale:.96;
  --acx-reveal-rotate:1.4deg;
}

body.acx-motion-ready .acx-reveal.is-inview{
  opacity:1;
  transform:translate3d(0,var(--acx-scrub-y,0px),0) scale(1) rotate(0deg);
}

/* Hero entrance and reversible depth. */
body.acx-landing-page:not(.acx-homepage) main>.hero,
body.acx-landing-page:not(.acx-homepage) main>.pricing-hero{
  isolation:isolate;
  overflow:clip;
}

body.acx-landing-page:not(.acx-homepage) main>.hero::after,
body.acx-landing-page:not(.acx-homepage) main>.pricing-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(260px,34vw,520px);
  aspect-ratio:1;
  right:-12%;
  bottom:-48%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(233,255,88,.34),rgba(240,79,155,.15) 38%,transparent 70%);
  pointer-events:none;
  transform:translate3d(var(--acx-hero-orb-x,0px),var(--acx-hero-orb-y,0px),0) scale(var(--acx-hero-orb-scale,1));
  transition:opacity .4s ease;
  will-change:transform;
}

body.acx-landing-page:not(.acx-homepage) main>.hero>div:first-child{
  opacity:var(--acx-hero-copy-opacity,1);
  transform:translate3d(0,var(--acx-hero-copy-y,0px),0);
  will-change:transform,opacity;
}

body.acx-landing-page.acx-motion-ready:not(.acx-homepage) .mc-editorial-page>.hero .hero-card,
body.acx-landing-page.acx-motion-ready:not(.acx-homepage) .mc-policy-page>.hero .hero-card{
  opacity:0;
  transform:translate3d(44px,24px,0) rotate(2deg) scale(.96)!important;
  transform-origin:50% 60%;
  transition:opacity .72s var(--acx-motion-ease-out) .12s,transform .86s var(--acx-motion-ease-out) .12s!important;
  will-change:transform,opacity;
}

body.acx-landing-page.acx-motion-ready.acx-page-loaded:not(.acx-homepage) .mc-editorial-page>.hero .hero-card,
body.acx-landing-page.acx-motion-ready.acx-page-loaded:not(.acx-homepage) .mc-policy-page>.hero .hero-card{
  opacity:1;
  transform:translate3d(var(--acx-hero-card-x,0px),var(--acx-hero-card-y,0px),0) rotate(var(--acx-hero-card-rotate,0deg)) scale(var(--acx-hero-card-scale,1))!important;
}

body.acx-motion-ready .hero-card .metric{
  transition:transform .32s var(--acx-motion-ease),background-color .32s ease;
}

body.acx-motion-ready .hero-card .metric:hover{
  transform:translate3d(7px,0,0);
}

body.acx-landing-page:not(.acx-homepage) .pricing-hero>*{
  position:relative;
  z-index:1;
}

body.acx-motion-ready .pricing-hero>.acx-reveal.is-inview{
  transform:translate3d(0,var(--acx-hero-copy-y,0px),0) scale(1);
}

/* Section parallax accents and editorial card motion. */
body.acx-landing-page:not(.acx-homepage) .acx-motion-section{
  position:relative;
  isolation:isolate;
  overflow:clip;
}

body.acx-landing-page:not(.acx-homepage) .acx-motion-section>*{
  position:relative;
  z-index:1;
}

body.acx-landing-page:not(.acx-homepage) .acx-motion-section:nth-of-type(odd)::after{
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(220px,28vw,430px);
  aspect-ratio:1;
  right:-12%;
  top:12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,69,244,.09),rgba(240,79,155,.04) 45%,transparent 72%);
  pointer-events:none;
  transform:translate3d(0,var(--acx-section-orb-y,0px),0);
  will-change:transform;
}

body.acx-landing-page:not(.acx-homepage) .section-head{
  transform:translate3d(0,var(--acx-heading-y,0px),0);
  will-change:transform;
}

body.acx-motion-ready .grid>.card,
body.acx-motion-ready .grid>article,
body.acx-motion-ready .faq article,
body.acx-motion-ready .feature-list>li,
body.acx-motion-ready .step{
  backface-visibility:hidden;
}

body.acx-motion-ready .grid>.card.is-inview:hover,
body.acx-motion-ready .grid>article.is-inview:hover,
body.acx-motion-ready .faq article.is-inview:hover{
  transform:translate3d(0,calc(var(--acx-scrub-y,0px) - 7px),0) scale(1.012);
}

/* Sticky scroll storytelling for numbered flows and editorial FAQs. */
@media (min-width:981px) and (min-height:700px){
  body.acx-landing-page:not(.acx-homepage) .acx-steps-story,
  body.acx-landing-page:not(.acx-homepage) .acx-faq-story{
    display:grid!important;
    grid-template-columns:minmax(310px,.82fr) minmax(0,1.18fr);
    align-items:start;
    column-gap:clamp(46px,7vw,108px);
  }

  body.acx-landing-page:not(.acx-homepage) .acx-steps-story>.section-head,
  body.acx-landing-page:not(.acx-homepage) .acx-faq-story>.section-head{
    position:sticky!important;
    top:112px;
    align-self:start;
  }

  body.acx-landing-page:not(.acx-homepage) .acx-steps-story>.steps,
  body.acx-landing-page:not(.acx-homepage) .acx-faq-story>.faq{
    margin-top:0!important;
  }

  body.acx-landing-page:not(.acx-homepage) .acx-steps-story>.section-head h2{
    font-size:clamp(3.2rem,4.7vw,5.4rem)!important;
    line-height:.89!important;
  }

  body.acx-landing-page:not(.acx-homepage) .acx-steps-story .step{
    min-height:142px;
    align-content:center;
  }

  body.acx-landing-page:not(.acx-homepage) main>.faq.acx-support-story{
    display:grid!important;
    grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr)!important;
    align-items:start;
    gap:clamp(42px,7vw,100px)!important;
  }

  body.acx-landing-page:not(.acx-homepage) main>.faq.acx-support-story>h2{
    position:sticky;
    top:112px;
    margin:0;
  }

  body.acx-landing-page:not(.acx-homepage) main>.faq.acx-support-story>.grid{
    grid-template-columns:1fr!important;
    margin-top:0!important;
  }
}

body.acx-landing-page:not(.acx-homepage) .step>span{
  transform:translate3d(0,var(--acx-step-y,0px),0) rotate(var(--acx-step-rotate,0deg));
  transition:transform .45s var(--acx-motion-ease-out),background-color .25s ease,color .25s ease;
  will-change:transform;
}

body.acx-landing-page:not(.acx-homepage) .step:hover>span{
  transform:translate3d(0,calc(var(--acx-step-y,0px) - 4px),0) rotate(4deg) scale(1.06);
}

/* Desktop vertical-to-horizontal pricing story. Touch layouts retain the
   original swipeable catalogue. */
.acx-pricing-motion{
  position:relative;
  width:100%;
}

.acx-pricing-sticky{
  position:relative;
  width:100%;
}

.acx-pricing-viewport{
  width:100%;
}

.acx-pricing-progress{
  display:none;
  height:3px;
  margin-top:18px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(5,5,5,.14);
}

.acx-pricing-progress>span{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:#050505;
  transform:scaleX(var(--acx-pricing-progress,0));
  transform-origin:left center;
}

@media (min-width:981px) and (min-height:700px){
  body.acx-pricing-pinned .pricing-shell{
    padding-top:0!important;
    padding-bottom:0!important;
  }

  body.acx-pricing-pinned .acx-pricing-motion{
    min-height:var(--acx-pricing-story-height,1700px);
  }

  body.acx-pricing-pinned .acx-pricing-sticky{
    position:sticky;
    top:78px;
    height:calc(100vh - 88px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-block:24px;
    overflow:hidden;
  }

  body.acx-pricing-pinned .acx-pricing-viewport{
    overflow:hidden;
  }

  body.acx-pricing-pinned .seo-pricing-grid{
    width:max-content!important;
    max-width:none!important;
    padding:4px 2px 16px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    transform:translate3d(var(--acx-pricing-x,0px),0,0);
    will-change:transform;
  }

  body.acx-pricing-pinned .acx-pricing-progress{
    display:block;
  }

  body.acx-pricing-pinned .pricing-shell>.legal-note{
    margin:-62px max(22px,calc((100vw - 1180px)/2)) 38px!important;
    position:relative;
    z-index:2;
  }
}

/* Pricing comparison rows tell the feature story one capability at a time. */
body.acx-motion-ready .comparison tbody tr.acx-reveal{
  --acx-reveal-y:16px;
  --acx-reveal-scale:1;
}

body.acx-motion-ready .comparison tbody tr.acx-reveal td{
  transition:background-color .22s ease;
}

body.acx-motion-ready .comparison tbody tr.acx-reveal:hover td{
  background:rgba(111,69,244,.055);
}

/* Policy pages receive a restrained reading rhythm rather than pinned effects. */
body.acx-landing-page:not(.acx-homepage) .mc-policy-page>.card{
  isolation:isolate;
  overflow:clip;
}

body.acx-landing-page:not(.acx-homepage) .mc-policy-page>.card::after{
  content:"";
  position:absolute;
  z-index:0;
  width:360px;
  aspect-ratio:1;
  right:-180px;
  top:80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,69,244,.1),transparent 68%);
  pointer-events:none;
  transform:translate3d(0,var(--acx-policy-orb-y,0px),0);
}

body.acx-landing-page:not(.acx-homepage) .mc-policy-page>.card>*{
  position:relative;
  z-index:1;
}

body.acx-motion-ready .mc-policy-article>section.acx-reveal{
  --acx-reveal-y:26px;
  --acx-reveal-scale:.99;
}

/* CTA and footer finish. */
body.acx-landing-page:not(.acx-homepage) main>.cta{
  position:relative;
  isolation:isolate;
  overflow:clip;
}

body.acx-landing-page:not(.acx-homepage) main>.cta::after{
  content:"";
  position:absolute;
  z-index:0;
  width:460px;
  aspect-ratio:1;
  right:-110px;
  bottom:-270px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,79,155,.44),rgba(233,255,88,.14) 36%,transparent 68%);
  pointer-events:none;
  transform:translate3d(var(--acx-cta-orb-x,0px),var(--acx-cta-orb-y,0px),0);
}

body.acx-landing-page:not(.acx-homepage) main>.cta>*{
  position:relative;
  z-index:1;
}

body.acx-motion-ready .footer-grid>div{
  transition:opacity .75s var(--acx-motion-ease-out) var(--acx-reveal-delay,0ms),transform .85s var(--acx-motion-ease-out) var(--acx-reveal-delay,0ms);
}

/* Touch layouts use shorter travel and no sticky choreography. */
@media (max-width:980px),(max-height:699px){
  body.acx-landing-page:not(.acx-homepage) .section-head{
    transform:none;
  }

  body.acx-landing-page:not(.acx-homepage) .acx-pricing-motion,
  body.acx-landing-page:not(.acx-homepage) .acx-pricing-sticky{
    min-height:0!important;
    height:auto!important;
  }

  body.acx-landing-page:not(.acx-homepage) .acx-pricing-viewport{
    overflow:visible;
  }

  body.acx-landing-page:not(.acx-homepage) .seo-pricing-grid{
    transform:none!important;
  }
}

@media (max-width:580px){
  body.acx-motion-ready .acx-reveal{
    --acx-reveal-y:24px;
  }

  body.acx-motion-ready .acx-reveal.acx-from-left,
  body.acx-motion-ready .acx-reveal.acx-from-right{
    --acx-reveal-x:0px;
    --acx-reveal-y:24px;
  }

  body.acx-landing-page.acx-motion-ready:not(.acx-homepage) .mc-editorial-page>.hero .hero-card,
  body.acx-landing-page.acx-motion-ready.acx-page-loaded:not(.acx-homepage) .mc-editorial-page>.hero .hero-card,
  body.acx-landing-page.acx-motion-ready:not(.acx-homepage) .mc-policy-page>.hero .hero-card,
  body.acx-landing-page.acx-motion-ready.acx-page-loaded:not(.acx-homepage) .mc-policy-page>.hero .hero-card{
    transform:translate3d(0,var(--acx-hero-card-y,0px),0)!important;
  }

  body.acx-landing-page:not(.acx-homepage) main>.hero::after,
  body.acx-landing-page:not(.acx-homepage) main>.pricing-hero::after{
    opacity:.58;
  }
}

/* Accessibility: all content is immediate and static when motion is reduced. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}

  body.acx-landing-page:not(.acx-homepage),
  body.acx-landing-page:not(.acx-homepage) *{
    scroll-behavior:auto!important;
  }

  body.acx-motion-ready .acx-reveal,
  body.acx-motion-ready .acx-reveal.is-inview,
  body.acx-landing-page.acx-motion-ready:not(.acx-homepage) .mc-editorial-page>.hero .hero-card,
  body.acx-landing-page.acx-motion-ready.acx-page-loaded:not(.acx-homepage) .mc-editorial-page>.hero .hero-card,
  body.acx-landing-page.acx-motion-ready:not(.acx-homepage) .mc-policy-page>.hero .hero-card,
  body.acx-landing-page.acx-motion-ready.acx-page-loaded:not(.acx-homepage) .mc-policy-page>.hero .hero-card,
  body.acx-motion-ready .mcv2-header{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  body.acx-pricing-pinned .acx-pricing-motion,
  body.acx-pricing-pinned .acx-pricing-sticky{
    min-height:0!important;
    height:auto!important;
    position:relative!important;
    top:auto!important;
  }

  body.acx-pricing-pinned .seo-pricing-grid{
    width:100%!important;
    transform:none!important;
    overflow-x:auto!important;
  }

  .acx-pricing-progress{display:none!important}
}
