/* Custom Styles for GeoScatter 3D Application */

/* Global Styles */
:root {
    --primary: #3B82F6;
    --secondary: #10B981;
    --accent: #8B5CF6;
    --dark-bg: #0F172A;
    --dark-card: #1E293B;
    --dark-border: #334155;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Animation Classes */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes ray-path {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.animate-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.animate-ray {
    animation: ray-path 1.2s ease-out forwards;
}

/* Utility Classes */
.gradient-bg {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.glow {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.hover-glow:hover {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.4);
    transition: box-shadow 0.3s ease;
}

/* Custom Radio & Checkbox */
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
    color: var(--primary);
    font-weight: 500;
}

/* Model Selection Dropdown */
.group:hover .group-hover\:block {
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #canvasContainer {
        height: 400px;
    }
}

@media (max-width: 640px) {
    #canvasContainer {
        height: 350px;
    }
}

/* Transition Effects */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}