@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* Base */
body {
    font-family: 'Outfit', sans-serif;
    /* Cleaner, more geometric body */
    overflow-x: hidden;
    background-color: #f8fafc;
    color: #0f172a;
    transition: background-color 0.5s ease, color 0.5s ease;
    /* Smooth Theme Swap */
}

/* Dark Base (Handled by Tailwind usually, but enforcing here if needed) */
.dark body {
    background-color: #020617;
    /* Slate 950 */
    color: #f8fafc;
}

/* Animations */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes gradient-shift {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(0, 0);
    }

    50% {
        opacity: 0.6;
        transform: translate(20px, 20px);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

.animate-gradient-shift {
    animation: gradient-shift 15s ease-in-out infinite;
}

/* Custom Cursor */
body {
    cursor: none;
}

a,
button,
.stat-card-gsap,
.info-element {
    cursor: none;
}

#custom-cursor {
    transform: translate(-50%, -50%);
}

#custom-cursor-follower {
    transform: translate(-50%, -50%);
}

/* Preloader */
#preloader {
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Headings */
h1,
h2,
h3,
.stat-value {
    font-family: 'Space Grotesk', sans-serif;
    /* Tech + Premium feel */
    letter-spacing: -0.03em;
    /* Tight tracking for that "editorial" look */
}

/* Horizontal Scroll Section */
.horizontal-scroll-section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

.scrolling-track {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 5rem;
}

/* Card Styling */
.stat-card-gsap {
    flex: 0 0 auto;
    width: 400px;
    margin-right: 4rem;
    transform-style: preserve-3d;
    /* For Tilt */
}

/* Animation Utilities */
.clip-text {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}

.reveal-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    /* Initial state for reveal */
}

/* Hide scrollbar */
::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}