/* base */
html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(99, 102, 241, 0.10), transparent 30%),
        radial-gradient(circle at 88% 4%, rgba(236, 72, 153, 0.08), transparent 28%),
        radial-gradient(circle at 20% 92%, rgba(245, 158, 11, 0.07), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(16, 185, 129, 0.08), transparent 32%),
        #f6f7fb;
    font-feature-settings: 'ss01', 'cv11';
}

html[dir="ltr"] body { font-family: 'Inter', system-ui, sans-serif; }

::selection { background: #6366f1; color: #fff; }
/* base end */

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid #f6f7fb; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* scrollbar end */

/* utils */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.skill-hidden { display: none !important; }

.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
/* utils end */

/* modal */
#image-modal { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
#image-modal.modal-visible { opacity: 1; pointer-events: auto; }
#modal-image { transform: scale(0.94); transition: transform 0.32s cubic-bezier(.2,.8,.2,1); }
#image-modal.modal-visible #modal-image { transform: scale(1); }
/* modal end */

/* card shine */
.card-shine {
    position: relative;
    isolation: isolate;
}
.card-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--tw-gradient-from, transparent), transparent 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.card-shine:hover::after { opacity: 1; }
/* card shine end */

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}
/* reduced motion end */