/* Effects are isolated in this file so they can be disabled without touching the base design. */
html,body{max-width:100%;overflow-x:hidden}
.photo,.shape,.bubble{transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.btn-call{isolation:isolate}

@keyframes heroRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroPhoto{from{opacity:0;transform:translateX(34px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes bubblePop{0%{opacity:0;scale:.72}70%{scale:1.08}100%{opacity:1;scale:1}}

.motion-ready .hero-copy>*{opacity:0;animation:heroRise .72s cubic-bezier(.2,.8,.2,1) forwards}
.motion-ready .hero-copy>*:nth-child(1){animation-delay:.08s}
.motion-ready .hero-copy>*:nth-child(2){animation-delay:.18s}
.motion-ready .hero-copy>*:nth-child(3){animation-delay:.3s}
.motion-ready .hero-copy>*:nth-child(4){animation-delay:.42s}
.motion-ready .hero-copy>*:nth-child(5){animation-delay:.54s}
.motion-ready .hero-visual{opacity:0;animation:heroPhoto .9s cubic-bezier(.2,.8,.2,1) .16s forwards}
.motion-ready .hero-visual .bubble{animation:bubblePop .55s cubic-bezier(.2,.8,.2,1) .9s both}
.motion-ready .hero-visual .bubble-b{animation-delay:1.05s}

.motion-ready .scroll-reveal{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .7s cubic-bezier(.2,.75,.2,1) var(--delay,0ms),transform .7s cubic-bezier(.2,.75,.2,1) var(--delay,0ms)}
.motion-ready .scroll-reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}

.motion-ready h2{position:relative;width:fit-content}
.motion-ready h2:after{content:"";position:absolute;left:0;bottom:-10px;width:82px;height:7px;background:var(--yellow);border-radius:999px;transform:scaleX(0);transform-origin:left;transition:transform .75s cubic-bezier(.2,.8,.2,1) .25s}
.motion-ready .is-visible h2:after,.motion-ready h2.is-visible:after,.motion-ready section:hover h2:after{transform:scaleX(1)}

.issue,.step-row article,.price-grid article,.review-grid article{will-change:transform;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.issue:hover,.step-row article:hover,.review-grid article:hover{transform:translateY(-7px) rotate(-.35deg);filter:saturate(1.06)}
.step-row article:hover{box-shadow:7px 7px 0 var(--line)}
.review-grid article:hover{box-shadow:6px 6px 0 #6a9b84}

.ticker.ticker-paused div{animation-play-state:paused}

.tab{transition:background-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
.tab:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--line)}

.accordion details{overflow:hidden;transition:background-color .25s ease,padding .25s ease}
.accordion details:hover{background:rgba(118,87,213,.055);padding-inline:14px}
.accordion details[open] summary i{transform:rotate(45deg)}
.accordion summary i{display:inline-block;transition:transform .25s ease}

@media(max-width:900px){
  .photo,.shape,.bubble{translate:none!important}
  .motion-ready .scroll-reveal{transform:translateY(18px)}
  .motion-ready .scroll-reveal.is-visible{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .photo,.shape,.bubble,.scroll-reveal,.tab,.accordion details,.accordion summary i,.hero-copy>*,.hero-visual{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}