style.css

/* Custom animations and global styles */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

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

.gradient-animate {
    background: linear-gradient(-45deg, #0ea5e9, #d946ef, #0ea5e9, #d946ef);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

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

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

::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Glass morphism effect */
.glass {
    background: rgba(31, 41, 55, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(75, 85, 99, 0.3);
}

/* Glow effects */
.glow-primary {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
}

.glow-secondary {
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.5);
}

/* Smooth transitions */
* {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Text selection */
::selection {
    background: rgba(14, 165, 233, 0.3);
}

/* Focus styles */
.focus-ring:focus {
    outline: none;
    ring: 2px;
    ring-color: #0ea5e9;
    ring-offset: 2px;
}

/* Hover lift effect */
.hover-lift {
    transition: transform 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
}

/* Loading animation */
.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}
/* 3D Canvas styles */
#3d-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
}

/* Preview container enhancements */
#preview-container {
    position: relative;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 12px;
    overflow: hidden;
}

#preview-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #0ea5e9, #d946ef, #0ea5e9);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

#preview-container:hover::before {
    opacity: 0.3;
}

/* Loading spinner for canvas */
.canvas-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 3px solid rgba(14, 165, 233, 0.3);
    border-top: 3px solid #0ea5e9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Style button active state */
.style-btn.active {
    background: linear-gradient(135deg, #0ea5e9, #d946ef);
    color: white;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
    .grid-responsive {
        grid-template-columns: 1fr;
    }
}