/* Global Styles */
* {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

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

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

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient 3s ease infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* Smooth scroll */
html {
    scroll-padding-top: 80px;
}

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #facc15, #f97316);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #eab308, #ea580c);
}

/* Custom scrollbar - Mobile */
* {
    scrollbar-width: thin;
    scrollbar-color: #f97316 #1a1a1a;
}

/* For mobile browsers that support it */
body {
    scrollbar-width: thin;
    scrollbar-color: #f97316 #1a1a1a;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #f97316 #1a1a1a;
}

/* iOS SafariScrollBar */
@supports (-webkit-overflow-scrolling: touch) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: rgba(26, 26, 26, 0.5);
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, #facc15, #f97316);
        border-radius: 10px;
    }
}

/* Section transitions */
section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

section.visible {
    opacity: 1;
    transform: translateY(0);
}