/* Base setup */
:root {
    --neo-void: #0A2540;
    --neo-steel: #C0C0C0;
    --neo-pulse: #39FF14;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--neo-void);
}
::-webkit-scrollbar-thumb {
    background: var(--neo-steel);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neo-pulse);
}

/* Neon Effects */
.neon-text {
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.7), 0 0 20px rgba(57, 255, 20, 0.5);
}

.neon-border {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.3), inset 0 0 10px rgba(57, 255, 20, 0.1);
}

.hud-overlay {
    background: linear-gradient(
        180deg, 
        rgba(57, 255, 20, 0.05) 0%, 
        transparent 10%, 
        transparent 90%, 
        rgba(57, 255, 20, 0.05) 100%
    );
    pointer-events: none;
}

/* Scanline effect */
.scanline {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(10, 37, 64, 0.3) 51%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 40;
    opacity: 0.3;
}

/* Model Viewer Customization */
model-viewer {
    width: 100%;
    height: 500px;
    background-color: radial-gradient(circle at center, #0F3256 0%, #0A2540 70%);
    --poster-color: transparent;
    --progress-bar-color: var(--neo-pulse);
    --progress-mask: transparent;
}

/* Clip Paths for Cyberpunk shapes */
.clip-angle {
    clip-path: polygon(
        20px 0, 100% 0, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 
        0 100%, 
        0 20px
    );
}

.clip-hex {
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.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); }
}