@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }

        /* Remove the old background image style */
        .hero-bg {
            /* We will use the video tag for the background now */
            background: none;
        }

        /* Ensure the video is always behind the text */
        .video-overlay {
            background-color: rgba(0, 0, 0, 0.7);
            /* Dark overlay for text readability */
        }

        /* Custom style to apply a slight zoom effect to the video (14% scale) */
        .video-zoom-in {
            transform: scale(1.14);
        }

        /* === SCROLL REVEAL STYLES === */
        /* 1. Initial hidden state (Default/Slide Up) */
        .scroll-hidden {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 2. Slide Left Hidden state */
        .slide-left-hidden {
            opacity: 0;
            transform: translateX(-100px);
            /* Starts off screen to the left */
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 3. Slide Right Hidden state */
        .slide-right-hidden {
            opacity: 0;
            transform: translateX(100px);
            /* Starts off screen to the right */
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* Visible state: fully opaque and in its final position (Shared for all) */
        .scroll-visible {
            opacity: 1;
            /* Returns the element to its original position (0, 0) for all animations */
            transform: translate(0, 0);
        }

        /* === IMAGE/VIDEO REVEAL STYLES === */
        .image-reveal {
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
        }

        .image-revealed {
            opacity: 1;
            transform: scale(1);
        }

        /* === TYPING EFFECT STYLES === */
        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        .typing-cursor {
            display: inline-block;
            width: 0.3em;
            height: 1.1em;
            background-color: white;
            margin-left: 2px;
            animation: blink 1s step-end infinite;
            vertical-align: middle;
            /* Align cursor vertically with text */
        }

 /* Typing Effect — faster and clean */
.typing-effect {
    width: 0;
    border-right: 4px solid #a78bfa;
    animation: typing 1.2s steps(10, end) forwards, blink 0.5s step-end infinite;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

/* Typing width */
@keyframes typing {
    from { width: 0 }
    to { width: 8ch } /* adjust to match text length */
}

/* Blinking cursor */
@keyframes blink {
    50% { border-color: transparent }
}

/* Make cursor disappear after typing ends */
.typing-effect.finished {
    border-right: none !important;
}

/* Fade-up transition */
.fade-up {
    animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Reusable classes */
.fade-up.show { animation: fadeUp 1s ease forwards; }
.fade-left.show { animation: fadeLeft 1s ease forwards; }
.fade-right.show { animation: fadeRight 1s ease forwards; }