body {
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* navbar */
.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* dark mode */
.dark .glass-nav {
    background: rgba(15, 23, 42, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.clip-image {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1s ease;
}

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

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

.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #4DB6AC;
}

/* lenis */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Timeline Section */
#history {
    /* Ensure it doesn't overflow horizontally on the main page flow */
    overflow-x: hidden;
}

.timeline-container {
    /* Will be animated by GSAP */
    will-change: transform;
}

.timeline-panel {
    /* Ensure panels take up full viewport width */
    flex-shrink: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}