:root{

            --gold: #FAB95B;
            --purple: #735372;
        }

        body {
            font-family: 'Noto Sans', sans-serif;
            background-color: #fcfcfc;
            color: #1a1a1a;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: var(--purple); }

        /* Navigation Styles */
        nav.scrolled {
            background-color: var(--purple);
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        /* Hero Gradient Animation */
        .hero-gradient {
            background: linear-gradient(135deg, #735372 0%, #2c1e2c 100%);
            position: relative;
            overflow: hidden;
        }
        .hero-grain::before {
            content: "";
            position: absolute;
            inset: -100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Ffilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.05;
            animation: noise 1s steps(2) infinite;
            pointer-events: none;
        }
        @keyframes noise {
            0% { transform: translate(0,0); }
            10% { transform: translate(-5%,-5%); }
            20% { transform: translate(-10%,5%); }
            30% { transform: translate(5%,-10%); }
            40% { transform: translate(-5%,15%); }
            50% { transform: translate(-10%,5%); }
            60% { transform: translate(15%,0); }
            70% { transform: translate(0,10%); }
            80% { transform: translate(-15%,0); }
            90% { transform: translate(10%,5%); }
            100% { transform: translate(5%,0); }
        }

        /* Typography Reveal */
        .line-reveal {
            overflow: hidden;
        }
        .line-reveal span {
            display: inline-block;
            transform: translateY(100%);
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .active .line-reveal span {
            transform: translateY(0);
        }

        /* Horizontal Scroll Container */
        .horizontal-scroll-wrapper {
            display: flex;
            width: 400vw;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .scroll-section-pinned {
            height: 100vh;
            position: sticky;
            top: 0;
            overflow: hidden;
        }

        /* Page Transitions */
        .page {
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .page.active {
            display: block;
            opacity: 1;
        }

        /* Interactive Timeline */
        .timeline-line {
            width: 0;
            transition: width 2s ease;
        }
        .active .timeline-line {
            width: 100%;
        }

        /* Parallax Layering */
        .parallax-bg {
            transition: transform 0.2s linear;
        }

        /* Modal Overlay */
        #modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(10px);
            z-index: 5000;
            align-items: center;
            justify-content: center;
        }
        #modal-overlay.active {
            display: flex;
        }