/* Custom variables and typography mappings based on DESIGN.md */
:root {
    --surface: #0f131d;
    --surface-dim: #0f131d;
    --surface-bright: #353944;
    --surface-container-lowest: #0a0e18;
    --surface-container-low: #171b26;
    --surface-container: #1c1f2a;
    --surface-container-high: #262a35;
    --surface-container-highest: #313540;
    --on-surface: #dfe2f1;
    --on-surface-variant: #ccc3d8;
    --inverse-surface: #dfe2f1;
    --inverse-on-surface: #2c303b;
    --outline: #958da1;
    --outline-variant: #4a4455;
    --surface-tint: #d2bbff;
    --primary: #d2bbff;
    --on-primary: #3f008e;
    --primary-container: #7c3aed;
    --on-primary-container: #ede0ff;
    --inverse-primary: #732ee4;
    --secondary: #ddb7ff;
    --on-secondary: #490080;
    --secondary-container: #6f00be;
    --on-secondary-container: #d6a9ff;
    --tertiary: #adc6ff;
    --on-tertiary: #002e6a;
    --tertiary-container: #0062d2;
    --on-tertiary-container: #dce5ff;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --background: #0f131d;
    --on-background: #dfe2f1;
    
    scroll-behavior: smooth;
}

body {
    background-color: var(--surface-container-lowest);
    color: var(--on-surface);
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Material Icons setting */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glassmorphism card styles with crisp solid borders */
.glass-card {
    background: rgba(28, 31, 42, 0.55);
    border: 1.5px solid rgba(158, 158, 158, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.glass-card:hover {
    background: rgba(28, 31, 42, 0.72);
    border-color: rgba(192, 192, 192, 0.85);
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45), 0 0 16px rgba(160, 160, 160, 0.12);
}

/* Hero gradient styles */
.hero-gradient {
    background: radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.15), transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(111, 0, 190, 0.1), transparent 40%),
                #0B0F19;
}

/* Glowing buttons */
.glow-button {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.glow-button:hover {
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.6);
    transform: scale(1.05);
}

/* Animation floats */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(2deg);
    }
}

.animate-float {
    animation: float 8s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 10s ease-in-out infinite 1.5s;
}

/* Scroll reveal classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

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

/* Active navigation styles on scroll */
.nav-active {
    background: rgba(15, 19, 29, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(210, 187, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* AI Network background dots pattern */
.ai-grid {
    background-image: radial-gradient(rgba(210, 187, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Accessibility features */
@media (prefers-reduced-motion: reduce) {
    .animate-float, .animate-float-delayed, .reveal, .glow-button:hover {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Custom Neural Slider Styles */
#neural-slider-container {
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
}

#neural-slider-container:active {
    cursor: grabbing;
}

#neural-slider-container img {
    pointer-events: none;
}

/* Project Slider Custom Styles */
#project-slider-wrapper img, #app-slider-wrapper img, #special-slider-wrapper img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}