@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Animation classes */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* ThreeJS background container */
#threejs-bg {
    background: linear-gradient(to bottom, #1a1a1a, #0a0a0a);
}

/* Connection lines for network visualization */
.connection-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(249,115,22,0) 0%, rgba(249,115,22,1) 50%, rgba(249,115,22,0) 100%);
    transform-origin: left center;
    z-index: 1;
}

/* Pulse animation for metrics */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(249, 115, 22, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
    }
}

.pulse-effect {
    animation: pulse 2s infinite;
}

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

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.6);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.8);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #network-visualization {
        height: 500px;
    }
}