* {
            font-family: 'Inter', sans-serif;
        }

        /* Thin font weights globally */
        body {
            font-weight: 200;
        }

        /* Custom thin scrollbar */
        ::-webkit-scrollbar {
            width: 2px;
        }

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

        ::-webkit-scrollbar-thumb {
            background: #666;
        }

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

        /* Timeline line */
        .timeline-line {
            background: #fff;
            width: 1px;
        }

        /* Smooth reveal animation */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hover card animation */
        .timeline-card {
            max-height: 80px;
            overflow: hidden;
            transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .timeline-card:hover {
            max-height: 800px;
        }

        /* Subtle dot pulse */
        @keyframes subtlePulse {

            0%,
            100% {
                opacity: 0.4;
            }

            50% {
                opacity: 1;
            }
        }

        .timeline-dot {
            animation: subtlePulse 4s ease-in-out infinite;
        }

        .timeline-dot:hover {
            animation: none;
            opacity: 1;
        }
/* Add this to your existing style.css */

/* Hide year label when hovering over the timeline card */
.timeline-card:hover ~ .timeline-dot-container .year-label,
.reveal:has(.timeline-card:hover) .year-label {
    opacity: 0;
}

/* Alternative approach - add this class to your existing styles */
.timeline-card {
    position: relative;
}

/* When card is hovered, find the year label and hide it */
.reveal:has(.timeline-card:hover) .timeline-dot-container .year-label {
    opacity: 0;
}