.scroll-reveal{opacity:0;translate:0 26px;transition:opacity .8s ease var(--reveal-delay,0ms),translate .8s cubic-bezier(.2,.65,.25,1) var(--reveal-delay,0ms)}
.scroll-reveal.is-visible{opacity:1;translate:0 0}
.hero-glow{animation:ambient-light 9s ease-in-out infinite alternate}
.infinity-art{animation:gentle-float 8s ease-in-out infinite}
.discover svg{animation:scroll-cue 2.5s ease-in-out infinite}
.cta{transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.cta svg,.text-link svg,.top>a:last-child svg{transition:transform .25s ease}
.comparison-card,.offer-card{transition:opacity .8s ease var(--reveal-delay,0ms),translate .8s cubic-bezier(.2,.65,.25,1) var(--reveal-delay,0ms),transform .3s ease,box-shadow .3s ease}
.faq-item button{transition:color .2s ease}
.faq-item button:hover{color:#e6b7ab}
.faq-item p{animation:answer-in .35s ease both}
.modal-overlay{animation:overlay-in .2s ease both}
.checkout-modal{animation:dialog-in .35s cubic-bezier(.2,.65,.25,1) both}
@media(hover:hover){
.cta:hover{box-shadow:0 10px 35px #218c3238}
.cta:hover svg,.text-link:hover svg,.top>a:last-child:hover svg{transform:translate(3px,-3px)}
.comparison-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px #0004}
.offer-card:hover{transform:translateY(-4px);box-shadow:0 30px 80px #0007}
}
@keyframes ambient-light{from{opacity:.65}to{opacity:1}}
@keyframes gentle-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(12px) rotate(3deg)}}
@keyframes scroll-cue{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(5px)}}
@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.scroll-reveal{opacity:1;translate:none}
html{scroll-behavior:auto}
}