.action-showcase{max-width:1280px;padding-top:34px;padding-bottom:120px}
.action-list{border-bottom:1px solid #dfe3ed}
.action-row{--action-from:#4e6bf5;--action-mid:#5977ff;--action-to:#7658d8;position:relative;isolation:isolate;display:flex;align-items:center;width:100%;min-height:190px;padding:26px 30px;overflow:hidden;border:0;border-top:1px solid #dfe3ed;background:transparent;color:#a3a8b5;text-align:left;cursor:pointer}
.action-row::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:linear-gradient(100deg,rgba(78,107,245,.025),rgba(89,119,255,.065) 55%,rgba(118,88,216,.035));transition:opacity 350ms cubic-bezier(.22,1,.36,1),transform 700ms cubic-bezier(.22,1,.36,1);transform:scaleX(.985)}
.action-receive::before{background:linear-gradient(260deg,rgba(78,107,245,.025),rgba(89,119,255,.06) 50%,rgba(118,88,216,.03))}
.action-swap::before{background:linear-gradient(100deg,rgba(78,107,245,.035),rgba(118,88,216,.07) 55%,rgba(78,107,245,.025))}
.action-row:hover::before,.action-row:focus-visible::before,.action-row.is-active::before{opacity:1;transform:scaleX(1)}
.action-row:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.action-word{position:relative;z-index:2;font-family:var(--sans);font-size:clamp(80px,10vw,138px);font-weight:600;line-height:.88;letter-spacing:-.07em;color:#a3a8b5;transition:color 320ms cubic-bezier(.22,1,.36,1)}
.action-row:hover .action-word,.action-row:focus-visible .action-word,.action-row.is-active .action-word{color:transparent;background:linear-gradient(105deg,var(--action-from),var(--action-mid) 52%,var(--action-to));-webkit-background-clip:text;background-clip:text}
.action-route{--action-travel:calc(min(34vw,360px) - 24px);--action-travel-negative:calc(24px - min(34vw,360px));position:absolute;z-index:1;right:6%;top:50%;width:min(34vw,360px);height:38px;transform:translateY(-50%);opacity:.58}
.route-line{position:absolute;left:0;right:0;top:50%;height:1px;background:#d7dce8;transition:background 320ms cubic-bezier(.22,1,.36,1)}
.route-end{position:absolute;top:calc(50% - 4px);right:0;width:8px;height:8px;border:1px solid #cbd2e2;border-radius:50%;background:var(--paper);transition:border-color 320ms cubic-bezier(.22,1,.36,1),background 320ms cubic-bezier(.22,1,.36,1)}
.action-receive .route-end{right:auto;left:0}
.action-row:hover .route-line,.action-row:focus-visible .route-line,.action-row.is-active .route-line{background:linear-gradient(90deg,var(--action-from),var(--action-to))}
.action-row:hover .route-end,.action-row:focus-visible .route-end,.action-row.is-active .route-end{border-color:var(--action-to);background:#fff}
.action-token{position:absolute;top:7px;width:24px;height:24px;padding:2px;border:1px solid rgba(100,116,175,.14);border-radius:50%;background:#fff;opacity:0;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(50,68,128,.16));will-change:transform,opacity}
.token-send{left:0}.token-receive{right:0}.token-swap-a{left:0}.token-swap-b{right:0}
.action-send:hover .token-send,.action-send:focus-visible .token-send,.action-send.is-active .token-send{animation:action-send 780ms cubic-bezier(.22,1,.36,1) both}
.action-receive:hover .token-receive,.action-receive:focus-visible .token-receive,.action-receive.is-active .token-receive{animation:action-receive 780ms cubic-bezier(.22,1,.36,1) both}
.action-swap:hover .token-swap-a,.action-swap:focus-visible .token-swap-a,.action-swap.is-active .token-swap-a{animation:action-swap-a 820ms cubic-bezier(.22,1,.36,1) both}
.action-swap:hover .token-swap-b,.action-swap:focus-visible .token-swap-b,.action-swap.is-active .token-swap-b{animation:action-swap-b 820ms cubic-bezier(.22,1,.36,1) both}
.action-swap .route-line-a{transform:translateY(-5px)}.action-swap .route-line-b{transform:translateY(5px)}
@keyframes action-send{0%{opacity:0;transform:translate3d(-8px,0,0) scale(.86)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(var(--action-travel),0,0) scale(1)}}
@keyframes action-receive{0%{opacity:0;transform:translate3d(8px,0,0) scale(.86)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(var(--action-travel-negative),0,0) scale(1)}}
@keyframes action-swap-a{0%{opacity:0;transform:translate3d(-8px,-5px,0) scale(.86)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(var(--action-travel),5px,0) scale(1)}}
@keyframes action-swap-b{0%{opacity:0;transform:translate3d(8px,5px,0) scale(.86)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(var(--action-travel-negative),-5px,0) scale(1)}}
@media(max-width:980px){.action-row{min-height:150px;padding:24px 18px}.action-word{font-size:clamp(56px,11vw,90px)}.action-route{right:4%;width:34vw}}
@media(max-width:760px){.action-showcase{padding-top:16px;padding-bottom:78px}.action-row{min-height:116px;padding:22px 2px}.action-word{font-size:clamp(44px,15vw,64px);letter-spacing:-.06em}.action-route{--action-travel:calc(42vw - 20px);--action-travel-negative:calc(20px - 42vw);right:1%;width:42vw;height:32px}.action-token{top:6px;width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.action-row::before{transition:none;transform:none}.action-token,.action-row:hover .action-token,.action-row:focus-visible .action-token,.action-row.is-active .action-token{display:none;animation:none}.action-row:hover .route-line,.action-row:focus-visible .route-line,.action-row.is-active .route-line,.action-row:hover .route-end,.action-row:focus-visible .route-end,.action-row.is-active .route-end{background:#d7dce8;border-color:#cbd2e2}}