/* Base Styles */
body {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    background-color: #ffffff; 
    color: #171717; 
    margin: 0;
    overflow-x: hidden;
}

/* Custom Scrollbar (Light Mode) */
::-webkit-scrollbar { 
    width: 8px; 
}

::-webkit-scrollbar-track { 
    background: #f5f5f5; 
}

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

::-webkit-scrollbar-thumb:hover { 
    background: #a3a3a3; 
}

/* Language Display Logic */
html.lang-en .show-zh { 
    display: none !important; 
}

html.lang-zh .show-en { 
    display: none !important; 
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 1; 
}

/* Animations */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Hover Effects */
.group:hover .group-hover\:text-indigo-500 {
    color: #6366f1;
    transition: color 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* Print styles */
@media print {
    nav, 
    footer,
    #contact-popup {
        display: none;
    }
}

/* Preloader styles */
#preloader {
    background: #ffffff;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.preloader-logo {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.15));
}

.preloader-path {
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
    animation: preloader-draw 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes preloader-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Hidden state: scale down + fade out for premium exit */
#preloader.preloader-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95) translateY(-20px);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .preloader-path { animation: none; stroke-dashoffset: 0; }
    #preloader { transition: none; }
}