/* TASKPAY shared effects (app + landing): smooth scroll, aurora, grid, cursor ring, progress bar, button shine + ripple, page rise. */
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; }
#aurora { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: .95; }
.gridbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(165, 245, 212, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(165, 245, 212, .045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, #000 20%, transparent 75%); }
.cur { position: fixed; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1.5px solid rgba(45, 228, 162, .7); z-index: 300; pointer-events: none; opacity: 0; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s, opacity .3s; will-change: transform; }
.cur.on { opacity: 1; } .cur.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(45, 228, 162, .14); border-color: rgba(165, 245, 212, .9); } .cur.dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--mint); }
@media (pointer: coarse) { .cur { display: none; } }
.prog { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 120; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #17c98e, #46f0b4, #a5f5d4); box-shadow: 0 0 14px rgba(45, 228, 162, .8); }
.nav-l { transition: transform .5s var(--ease), background .3s, border-color .3s; } .nav-l.hide { transform: translateY(-100%); }


.btn.pri::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; } .btn.pri:hover::before { transform: translateX(120%); }
.btn { overflow: hidden; } .btn .rip { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); animation: rip .7s ease-out forwards; pointer-events: none; } @keyframes rip { to { transform: scale(3); opacity: 0; } }


.rise { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); } @keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.985); } }
.card.hov:hover, .tc:hover { border-color: rgba(45, 228, 162, .5); }
.nav a, .tab, .chip { transition: color .25s, background .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; } .tab:active, .chip:active { transform: scale(.96); }
/* user chose calm mode (toggle on the site) */ html.calm .rise { animation: none; } html.calm #aurora, html.calm .cur, html.calm .prog { display: none; }