/* fill MUST stay 'backwards' (not 'both'): vxIn animates transform, and a forwards-
   filling transform animation keeps <main> a containing block for position:fixed
   descendants in Safari/WebKit — which throws the futures Long/Short bar, order sheet
   and overlays off the viewport (verified: both→bar floats into page, backwards→pinned
   to viewport bottom). No visual difference here since there's no animation-delay. */
main{animation:vxIn .5s cubic-bezier(.4,0,.2,1) backwards}
@keyframes vxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.btn:active,.wc-btn:active,.btn-primary:active,.btn-ghost:active,button.wc-btn:active,a.wc-btn:active{transform:scale(.985)}

/* backwards, not both — same reason as main above: a forwards-filling transform
   animation turns this into a containing block for any position:fixed descendant on Safari. */
.vx-reveal{animation:vxIn .5s cubic-bezier(.4,0,.2,1) backwards}

.vx-lift{transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s cubic-bezier(.4,0,.2,1)}
.vx-lift:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.38)}

.vx-skel{position:relative;overflow:hidden;background:var(--bg-2,#0d1420);border-radius:10px}
.vx-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:vxshim 1.3s cubic-bezier(.4,0,.2,1) infinite}
@keyframes vxshim{to{transform:translateX(100%)}}

.vx-count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
    main,.vx-reveal{animation:vxFadeOnly .4s ease both}
    @keyframes vxFadeOnly{from{opacity:0}to{opacity:1}}
    .vx-lift:hover{transform:none;box-shadow:0 8px 22px rgba(0,0,0,.3)}
    .btn:active,.wc-btn:active,.btn-primary:active,.btn-ghost:active,button.wc-btn:active,a.wc-btn:active{transform:none}
    .vx-skel::after{animation-duration:2.2s}
}