/* Motion is decorative; the page is complete without these effects. */
.preview-label{font-size:10px;color:#6e6a7b}
.hero-content>*,.hero-art,.solution-card,.button svg,.text-link svg,.method-option,.flow-step{will-change:auto}
.hero-content>*{animation:hero-reveal .8s cubic-bezier(.22,1,.36,1) both}
.hero-content>:nth-child(2){animation-delay:.08s}
.hero-content>:nth-child(3){animation-delay:.16s}
.hero-content>:nth-child(4){animation-delay:.24s}
.hero-content>:nth-child(5){animation-delay:.32s}
.hero h1 span{background-size:180% 100%;animation:headline-light 4s ease-in-out .5s 2 alternate}
.hero-art{translate:var(--pointer-x,0px) var(--pointer-y,0px);transition:translate .6s cubic-bezier(.22,1,.36,1)}
.hero-art-right{translate:calc(var(--pointer-x,0px) * -.75) calc(var(--pointer-y,0px) * -.75)}
.solution-card{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.button svg,.text-link svg{transition:translate .25s cubic-bezier(.22,1,.36,1)}
.method-option,.flow-step{transition:background .25s,border-color .25s,box-shadow .25s}
.modal::backdrop{animation:backdrop-reveal .25s ease-out}
.motion-entered .chart-stroke{animation:draw-chart 1.65s cubic-bezier(.3,0,.2,1) .15s both}
.motion-entered .payment-status-icon{animation:confirm-payment .65s cubic-bezier(.2,.8,.3,1.2) .35s both}
.motion-entered .event-row{animation:hero-reveal .6s cubic-bezier(.22,1,.36,1) both}
.motion-entered .event-row:nth-child(2){animation-delay:.2s}
.motion-entered .event-row:nth-child(3){animation-delay:.38s}
.motion-entered .event-row:nth-child(4){animation-delay:.56s}
.motion-entered .conversion-line{animation:conversion-reveal .8s ease-out .4s both;transform-origin:left center}
.motion-entered .token-usdt{animation:token-arrive .75s cubic-bezier(.22,1,.36,1) .5s both}
.faq-list details[open] p{animation:hero-reveal .35s ease-out}
.faq-list summary span{transition:transform .25s}
.button{position:relative;overflow:hidden;isolation:isolate}
.button::after{content:'';position:absolute;inset:-50% auto -50% -65%;width:42%;background:linear-gradient(105deg,transparent,#ffffff38,transparent);rotate:18deg;opacity:0;pointer-events:none}
.hero-buttons>.button:first-child::after{animation:cta-first-shine .85s ease 1.15s}
.button:focus-visible::after,.hero-buttons>.button:first-child:focus-visible::after{animation:cta-shine .7s ease}
.method-display.motion-entered .checkout-card{animation:checkout-bob 5.5s ease-in-out .8s 2}
.checkout-card:focus-within{animation-play-state:paused!important}
.payment-status-icon{position:relative}
.payment-status-icon::after{content:'';position:absolute;inset:-4px;border:1px solid #77bca1;border-radius:inherit;opacity:0;pointer-events:none}
.motion-entered .payment-status-icon::after{animation:confirmation-halo 1.8s ease-out 1s 2}
@media(hover:hover) and (pointer:fine){
  .solution-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px #5145780c;border-color:#dedcf2}
  .button:hover svg,.text-link:hover svg{translate:3px 0}
  .button:hover svg,.text-link:hover svg{animation:arrow-nudge .45s ease-out}
  .button:hover::after,.hero-buttons>.button:first-child:hover::after{animation:cta-shine .7s ease}
  .checkout-card:hover{animation-play-state:paused!important}
}
@keyframes hero-reveal{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes headline-light{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes draw-chart{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes confirm-payment{from{opacity:0;scale:.65}to{opacity:1;scale:1}}
@keyframes conversion-reveal{from{opacity:0;scale:.3 1}to{opacity:1;scale:1}}
@keyframes token-arrive{from{opacity:0;translate:-12px 0}to{opacity:1;translate:0 0}}
@keyframes backdrop-reveal{from{opacity:0}to{opacity:1}}
@keyframes cta-first-shine{0%{translate:0 0;opacity:0}20%{opacity:1}85%{opacity:1}100%{translate:440% 0;opacity:0}}
@keyframes cta-shine{0%{translate:0 0;opacity:0}20%{opacity:1}85%{opacity:1}100%{translate:440% 0;opacity:0}}
@keyframes checkout-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes confirmation-halo{0%{scale:1;opacity:0}20%{opacity:.5}100%{scale:1.6;opacity:0}}
@keyframes arrow-nudge{0%{translate:0 0}65%{translate:6px 0}100%{translate:3px 0}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-art,.hero-art-right{translate:none}
  .solution-card:hover{transform:none}
}