body {
            background-color: #FAFAFA;
            color: #1E1E1E;
            overflow-x: hidden;
        }

        html {
            scroll-padding-top: 80px;
        }

        /* Glassmorphism */
        .glass-panel {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }

        .glass-nav {
            background: rgba(250, 250, 250, 0.85);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.02);
        }
        
        /* Reveal Animation (More aesthetic) */
        .reveal-up {
            opacity: 0;
            transform: translateY(40px);
            transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .reveal-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Storytelling effect for About section */
        .sticky-story {
            top: 100px;
        }

        /* Modal Transitions */
        .modal {
            transition: opacity 0.3s ease, visibility 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }
        .modal.open {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            transform: scale(0.98);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal.open .modal-content {
            transform: scale(1);
        }
        /* Text fade-up animation */
            @keyframes fadeUp {
            0% { opacity: 0; transform: translateY(25px); }
            100% { opacity: 1; transform: translateY(0); }
            }

            .reveal-animated {
            opacity: 0;
            animation: fadeUp 1s ease-out forwards;
            }

            .reveal-delay-1 {
            animation-delay: .2s;
            }
            .reveal-delay-2 {
            animation-delay: .4s;
            }
            .reveal-delay-3 {
            animation-delay: .6s;
            }

            /* Floating dots animation */
            @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
            }

            .animate-float { animation: float 4s ease-in-out infinite; }
            .animate-float-delayed { animation: float 4s ease-in-out infinite 1s; }

            /* Typewriter cursor */
            .typewriter-text {
                border-right: 3px solid #6ee7b7;
                padding-right: 4px;
                white-space: nowrap;
                animation: cursorBlink 0.6s infinite;
            }

            @keyframes cursorBlink {
                0%, 50% { border-color: transparent; }
                51%, 100% { border-color: #6ee7b7; }
            }


    /* Marquee track */
.marquee-track {
    display: flex;
    animation: marqueeMove 18s linear infinite;
}

/* Marquee text styling */
.marquee-text {
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 3rem;
    background: linear-gradient(to right, #111, #6ee7b7, #111);
    -webkit-background-clip: text;
    color: transparent;
    white-space: nowrap;
    letter-spacing: 4px;
}

/* Marquee animation */
@keyframes marqueeMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Glossy shine animation */
@keyframes shine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.animate-shine {
    animation: shine 3.5s linear infinite;
}

/* Responsive text */
@media (max-width: 768px) {
    .marquee-text {
        font-size: 2rem;
        letter-spacing: 2px;
    }
}