:root { color-scheme: dark; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #020617; color: #cbd5e1; margin: 0; overflow-x: hidden; }

/* Smooth transitions across elements */
a, button, input, div {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Animated Gradients & Glows */
.hero-glow { 
    position: fixed; 
    inset: 0; 
    background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 40%), 
                radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.12) 0%, transparent 40%); 
    z-index: -1; 
    pointer-events: none; 
    animation: pulseGlow 10s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}

/* Enhanced Bento Grid Transitions */
.bento-card { 
    background: rgba(30, 41, 59, 0.35); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    position: relative; 
    overflow: hidden; 
}
.bento-card:hover { 
    border-color: rgba(59, 130, 246, 0.4); 
    background: rgba(30, 41, 59, 0.55); 
    transform: translateY(-8px) scale(1.01); 
    box-shadow: 0 40px 100px -20px rgba(59, 130, 246, 0.15), 0 20px 40px -15px rgba(0, 0, 0, 0.7); 
}

/* Continuous Ambient Text Gradient Shift */
.text-gradient { 
    background: linear-gradient(to right, #60a5fa, #a855f7, #60a5fa); 
    background-size: 200% auto;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    animation: gradientMove 6s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Micro-interactions */
.interactive-link {
    position: relative;
}
.interactive-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #60a5fa;
    transition: width 0.3s ease;
}
.interactive-link:hover::after {
    width: 100%;
}

/* Subtle Viewport Entry Animation placeholders */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.no-scrollbar::-webkit-scrollbar { display: none; }