/* ========================================================
   Base & Mobile CSS
   This file handles scrollbars, base animations, and 
   the default look for smaller screens. 
   ======================================================== */

::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}
::-webkit-scrollbar-track { 
    background: transparent; 
}
::-webkit-scrollbar-thumb { 
    background: #8B5CF6; 
    border-radius: 4px; 
}

/* Hide Scrollbar for specific slider containers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Glassmorphism Defaults */
.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.dark .glass {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Utilities */
.text-gradient {
    background: linear-gradient(to right, #8B5CF6, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Base Blob styling (Mobile Size) */
.blob {
    position: absolute; 
    width: 300px; 
    height: 300px;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.3) 0%, rgba(6, 182, 212, 0.3) 100%);
    filter: blur(60px); 
    border-radius: 50%; 
    z-index: -1; 
    transition: opacity 0.5s ease;
}
.dark .blob { 
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%); 
}

/* Base Device Frame styling (Mobile Size) */
.device-frame {
    position: relative; 
    border: 6px solid #cbd5e1; 
    border-radius: 1.5rem;
    overflow: hidden; 
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1); 
    transition: all 0.3s ease;
}
.dark .device-frame { 
    border-color: #334155; 
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4); 
}

/* Nav Link Hover animations */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px;
    bottom: -4px; left: 0; background-color: #8B5CF6; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

.sidebar-link { transition: all 0.3s ease; transform: translateX(0); }
.sidebar-link:hover { transform: translateX(10px); color: #8B5CF6; }