/* Custom Utilities */

/* Noise Overlay for frosted glass effect */
.noise-overlay {
    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");
    background-repeat: repeat;
    background-size: 150px 150px;
    mix-blend-mode: overlay;
    opacity: 0.05;
}

.dark .noise-overlay {
    opacity: 0.08; /* Slightly stronger noise in dark mode */
}

/* Base Glassmorphim */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.dark .glass-panel {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(51, 65, 85, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) inset, 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Staggered animations */
.delay-100 { animation-delay: 50ms; }
.delay-200 { animation-delay: 100ms; }
.delay-300 { animation-delay: 150ms; }
.delay-400 { animation-delay: 200ms; }

/* Ensure elements are hidden before animation */
.animate-slide-up { opacity: 0; }

/* Custom Scrollbar for smaller screens if needed */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
}
.dark ::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.5);
}