/* Modern Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #404040; }

/* Grain Overlay */
.noise-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 50;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Glass Pill & Bento Cards */
.glass-pill {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.bento-card {
    background: linear-gradient(145deg, rgba(38, 38, 38, 0.4) 0%, rgba(23, 23, 23, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.1);
}

/* Gradient Text */
.text-glow {
    background: linear-gradient(to right, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hardware Accelerated Loop Marquees */
@keyframes marquee-l {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marquee-r {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.animate-marquee-left {
    display: flex;
    width: max-content;
    animation: marquee-l 35s linear infinite;
}
.animate-marquee-right {
    display: flex;
    width: max-content;
    animation: marquee-r 35s linear infinite;
}
.animate-marquee-left:hover, .animate-marquee-right:hover {
    animation-play-state: paused;
}