/* CSS Hacks & Optimizations */
body {
    background-color: #030014;
    color: #e2e8f0;
}

/* Spotlight Effect Logic */
.spotlight-card {
    position: relative;
    overflow: hidden;
    background: rgba(15, 12, 41, 0.6);
}

.spotlight-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
            800px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.06),
            transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 3;
}

.spotlight-card:hover::before {
    opacity: 1;
}

.spotlight-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
            600px circle at var(--mouse-x) var(--mouse-y),
            rgba(124, 58, 237, 0.5),
            transparent 40%
    );
    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 2;
}

.spotlight-card:hover .spotlight-border {
    opacity: 1;
}

/* Text Gradient */
.text-gradient {
    background: linear-gradient(to right, #818cf8, #c084fc, #db2777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: textShine 5s linear infinite;
}

@keyframes textShine {
    to { background-position: 200% center; }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #030014; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Utility for marquee mask */
.mask-edges {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}