/* Base Styles */
:root {
    --bg-dark: #050816;
    --accent-primary: #7C3AED;
    --accent-secondary: #06B6D4;
}

html {
    scroll-behavior: initial;
}

body {
    background-color: var(--bg-dark);
    color: #f8fafc;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Mesh Gradient Animation */
.mesh-gradient {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%), 
        radial-gradient(at 0% 100%, hsla(260,31%,20%,1) 0, transparent 50%), 
        radial-gradient(at 50% 100%, hsla(222,47%,11%,1) 0, transparent 50%), 
        radial-gradient(at 100% 100%, hsla(252,100%,10%,1) 0, transparent 50%);
    filter: blur(80px);
    animation: mesh-animation 20s ease infinite alternate;
}

@keyframes mesh-animation {
    0% { transform: scale(1); }
    100% { transform: scale(1.1) rotate(2deg); }
}

/* Noise Overlay */
.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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

/* Neuromorphism (Dark Mode) */
.neuro-button {
    background: #0B1120;
    box-shadow: 5px 5px 10px #04070d, -5px -5px 10px #121b33;
    transition: all 0.3s ease;
}

.neuro-button:active {
    box-shadow: inset 5px 5px 10px #04070d, inset -5px -5px 10px #121b33;
}

/* Typography Effects */
.text-gradient {
    background: linear-gradient(to right, #7C3AED, #06B6D4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
}

/* Scrolling Logo Rail */
.animate-scroll {
    animation: scroll 30s linear infinite;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Glitch Effect */
.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

/* Magnetic Button Helper */
.magnetic-btn {
    display: inline-block;
}

/* Smooth Scrolling Fix for GSAP */
.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}