* { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Vazirmatn', sans-serif; margin: 0; }

.sk-bg {
  background-image:
    radial-gradient(circle at 85% -5%, rgba(108,92,231,.07), transparent 40%),
    radial-gradient(circle at 0% 30%, rgba(0,206,201,.05), transparent 35%);
}

.sk-card { transition: transform .25s ease, box-shadow .25s ease; }
.sk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(108,92,231,.35); }

@keyframes reveal { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
.sk-reveal { animation: reveal .5s cubic-bezier(.2,.7,.2,1) both; }

@keyframes pop { 0% { transform: scale(.6); opacity:0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity:1; } }
.sk-pop { animation: pop .28s cubic-bezier(.2,.8,.2,1) both; }

@keyframes fade { from { opacity:0; } to { opacity:1; } }
.sk-fade { animation: fade .25s ease both; }

@keyframes toastIn { from { opacity:0; transform: translate(-50%, 20px); } to { opacity:1; transform: translate(-50%, 0); } }
.sk-toast { animation: toastIn .3s cubic-bezier(.2,.8,.2,1) both; }

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0); opacity:1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity:.2; }
}
.sk-confetti { animation: confettiFall 2.4s cubic-bezier(.3,.6,.4,1) forwards; }

/* range slider polish */
input[type=range] { height: 4px; border-radius: 999px; }

/* scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(108,92,231,.35); border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(0,206,201,.35); }