/* Base Styles */
@media (prefers-color-scheme: dark) {
    body { background-color: #000000; }
}

/* Glass Panel (Responsive to Dark Mode) */
.glass-panel {
    /* Light Mode Default */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease;
}

/* Dark Mode Override */
.dark .glass-panel {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.glass-panel:hover {
    transform: scale(1.02);
}

.dark .glass-panel:hover {
    background: rgba(44, 44, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Glass Navbar */
.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .glass-nav {
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Text Gradients */
.text-gradient-blue {
    background: linear-gradient(135deg, #2997ff 0%, #9dceff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Marquee Scroller Mask */
.marquee-container {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Bento Grid Layout Configuration */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .bento-grid { 
        grid-template-columns: repeat(4, 1fr); 
        grid-template-rows: repeat(2, minmax(200px, auto)); 
    }
    .col-span-2 { grid-column: span 2; }
    .col-span-4 { grid-column: span 4; }
    .row-span-2 { grid-row: span 2; }
}