:root {
            --hero-dark: #043915;
            --hero-light: #F5F1DC;
            --accent-1: #D8E983;
            --accent-2: #ECE852;
            --accent-3: #C1D8C3;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--hero-light);
            color: var(--hero-dark);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .page {
    display: none;
}
.page.active {
    display: block;
}

/* Page navigation fix - ensure all pages display properly */
.page {
    display: none;
    min-height: 100vh;
    width: 100%;
}

.page.active {
    display: block !important;
    animation: fadeIn 0.8s ease-out;
}

/* Specific page visibility */
#home.page.active,
#about.page.active,
#podcast.page.active,
#events.page.active,
#contact.page.active {
    display: block !important;
}

/* Ensure content is visible */
.page.active > * {
    opacity: 1;
    visibility: visible;
}
        .tapestry { font-family: 'Tapestry', serif; }

        /* Animation Keyframes */
        @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }

        .page { display: none; min-height: 100vh; }
        .page.active { display: block; animation: fadeIn 0.8s ease-out; }

        .reveal { opacity: 0; transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.visible { opacity: 1; transform: translate(0, 0) !important; }
        .reveal-left { transform: translateX(-80px); }
        .reveal-right { transform: translateX(80px); }
        .reveal-top { transform: translateY(-80px); }
        .reveal-bottom { transform: translateY(80px); }

        .dotted-circle {
            width: 250px; height: 250px;
            border: 2px dotted var(--accent-1);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            animation: none;
        }

        .hero-image-container img {
            transition: transform 0.8s ease-out;
            transform: scale(1);
        }
        .hero-image-container:hover img { transform: scale(1.05); }

        .marquee-wrapper {
            background: var(--hero-dark);
            color: var(--accent-1);
            overflow: hidden;
            white-space: nowrap;
            padding: 20px 0;
        }
        .marquee-content {
            display: inline-block;
            animation: marquee 40s linear infinite;
        }

        .v-card {
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .v-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(4, 57, 21, 0.15); }

        .modal { 
            display: none; position: fixed; inset: 0; z-index: 200; 
            background: rgba(4, 57, 21, 0.98); backdrop-filter: blur(10px);
            align-items: center; justify-content: center; padding: 20px;
        }
        .modal.active { display: flex; }

        /* Filter Pills */
        .filter-pill {
            padding: 8px 24px; border-radius: 100px; border: 1px solid #043915;
            cursor: pointer; transition: all 0.3s; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
        }
        .filter-pill.active { background: #043915; color: #D8E983; }

        .auth-container input {
            width: 100%; padding: 16px; margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
            color: white; outline: none; transition: border 0.3s;
        }
        .auth-container input:focus { border-color: var(--accent-1); }

        /* Header logic */
        header.scrolled { background: white; color: #043915 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 15px 40px; }
        header.scrolled #login-btn { border-color: #043915; }
    

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: inline-block;
    animation: marquee 20s linear infinite;
}