@keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        body { animation: fadeIn 1s ease forwards; }

        /* Slide-up + fade */
        @keyframes fadeUp {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Slide-left */
        @keyframes fadeLeft {
            0% { opacity: 0; transform: translateX(-40px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Slide-right */
        @keyframes fadeRight {
            0% { opacity: 0; transform: translateX(40px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Navbar drop */
        @keyframes fadeDown {
            0% { opacity: 0; transform: translateY(-30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .fade-up { opacity: 0; animation: fadeUp 1s ease forwards; }
        .fade-left { opacity: 0; animation: fadeLeft 1s ease forwards; }
        .fade-right { opacity: 0; animation: fadeRight 1s ease forwards; }
        .fade-down { opacity: 0; animation: fadeDown 0.8s ease forwards; }

        /* Delays */
        .delay-1 { animation-delay: 0.2s; }
        .delay-2 { animation-delay: 0.4s; }
        .delay-3 { animation-delay: 0.6s; }
        .delay-4 { animation-delay: 0.8s; }
        .delay-5 { animation-delay: 1s; }

        /* Hover-lift */
        .hover-lift {
            transition: transform .3s ease, box-shadow .3s ease;
        }
        .hover-lift:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        }


           .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      font-size: 24px;
    }
    @keyframes gradient-animation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    .animated-gradient {
        background: linear-gradient(-45deg, #101622, #132a5a, #101622, #0d1e3e);
        background-size: 400% 400%;
        animation: gradient-animation 15s ease infinite;
    }
    .light .animated-gradient {
        background: linear-gradient(-45deg, #f6f6f8, #e0e9fc, #f6f6f8, #d4e0f9);
        background-size: 400% 400%;
    }
    .nav-link {
        position: relative;
    }
    .nav-link::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: -4px;
        left: 0;
        background-color: #135bec;
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }
    .nav-link:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }
    .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(ellipse 80% 80% at 50% -20%, rgba(19, 91, 236, 0.3), rgba(255, 255, 255, 0)),
            radial-gradient(ellipse 80% 80% at 50% 120%, rgba(10, 16, 26, 0.5), rgba(255, 255, 255, 0));
    }
    .dark .hero-bg {
        background-image:
            radial-gradient(ellipse 80% 80% at 50% -20%, rgba(19, 91, 236, 0.3), rgba(255, 255, 255, 0)),
            radial-gradient(ellipse 80% 80% at 50% 120%, rgba(10, 16, 26, 0.5), rgba(255, 255, 255, 0));
    }

    /* Overlay on top of Vanta so hero text stays readable */
    .hero-bg.hero-bg-overlay {
        z-index: 1;
        background-image:
            radial-gradient(ellipse 100% 100% at 50% 50%, rgba(246, 246, 248, 0.75) 0%, rgba(246, 246, 248, 0.4) 50%, transparent 70%),
            radial-gradient(ellipse 80% 80% at 50% -20%, rgba(19, 91, 236, 0.25), transparent 50%),
            radial-gradient(ellipse 80% 80% at 50% 120%, rgba(10, 16, 26, 0.2), transparent 50%);
    }
    .dark .hero-bg.hero-bg-overlay {
        background-image:
            radial-gradient(ellipse 100% 100% at 50% 50%, rgba(16, 22, 34, 0.82) 0%, rgba(16, 22, 34, 0.5) 50%, transparent 70%),
            radial-gradient(ellipse 80% 80% at 50% -20%, rgba(19, 91, 236, 0.25), transparent 50%),
            radial-gradient(ellipse 80% 80% at 50% 120%, rgba(10, 16, 26, 0.4), transparent 50%);
    }

    /* Animated Intro Section Styles */
    #animated-intro {
        position: relative;
    }

    /* Animated Background Gradient */
    .animated-bg-gradient {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #000000 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #000000 100%);
        background-size: 400% 400%;
        animation: gradient-shift 8s ease infinite;
        opacity: 0.8;
    }

    @keyframes gradient-shift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    @keyframes gradient-intensify {
        0% {
            opacity: 0.8;
            filter: brightness(1);
        }
        100% {
            opacity: 1;
            filter: brightness(1.3);
        }
    }

    /* Particles Effect */
    .particles {
        position: absolute;
        inset: 0;
        background-image: 
            radial-gradient(2px 2px at 20% 30%, rgba(19, 91, 236, 0.3), transparent),
            radial-gradient(2px 2px at 60% 70%, rgba(19, 91, 236, 0.2), transparent),
            radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.1), transparent),
            radial-gradient(1px 1px at 80% 10%, rgba(19, 91, 236, 0.2), transparent),
            radial-gradient(2px 2px at 90% 40%, rgba(19, 91, 236, 0.3), transparent),
            radial-gradient(1px 1px at 33% 60%, rgba(255, 255, 255, 0.1), transparent),
            radial-gradient(2px 2px at 70% 20%, rgba(19, 91, 236, 0.2), transparent),
            radial-gradient(3px 3px at 40% 80%, rgba(19, 91, 236, 0.4), transparent),
            radial-gradient(2px 2px at 10% 50%, rgba(255, 255, 255, 0.15), transparent);
        background-size: 200% 200%;
        animation: particles-move 20s linear infinite;
        opacity: 0.4;
        transition: opacity 1s ease;
    }

    @keyframes particles-move {
        0% { background-position: 0% 0%; }
        100% { background-position: 100% 100%; }
    }

    @keyframes particles-intensify {
        0% {
            opacity: 0.4;
            transform: scale(1);
        }
        100% {
            opacity: 1;
            transform: scale(1.2);
        }
    }

    /* Text Animation - More Creative */
    @keyframes textSlideIn {
        0% {
            opacity: 0;
            transform: translateY(50px) scale(0.8) rotateX(90deg);
            filter: blur(10px);
        }
        60% {
            opacity: 0.8;
            transform: translateY(-10px) scale(1.05) rotateX(0deg);
            filter: blur(2px);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1) rotateX(0deg);
            filter: blur(0);
        }
    }

    @keyframes textBounce {
        0%, 100% {
            transform: translateY(0) scale(1);
        }
        50% {
            transform: translateY(-15px) scale(1.05);
        }
    }

    @keyframes textGlow {
        0%, 100% {
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
                         0 0 40px rgba(19, 91, 236, 0.6),
                         0 0 60px rgba(19, 91, 236, 0.4),
                         0 0 80px rgba(19, 91, 236, 0.2);
        }
        50% {
            text-shadow: 0 0 30px rgba(255, 255, 255, 1),
                         0 0 60px rgba(19, 91, 236, 0.8),
                         0 0 90px rgba(19, 91, 236, 0.6),
                         0 0 120px rgba(19, 91, 236, 0.3);
        }
    }

    @keyframes letterPop {
        0% {
            opacity: 0;
            transform: scale(0) rotate(180deg);
        }
        50% {
            transform: scale(1.2) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

    .text-animate {
        animation: textSlideIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
        opacity: 1 !important;
    }

    .text-bounce {
        animation: textBounce 0.6s ease-out 1.2s forwards;
    }

    .text-glow {
        animation: textGlow 2s ease-in-out infinite;
    }

    /* Gradient Text Animation */
    @keyframes animate-gradient {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }

    .animate-gradient {
        background-size: 200% 200%;
        animation: animate-gradient 3s ease infinite;
    }

    /* Final Background Effect - More dramatic and alive */
    @keyframes background-pulse {
        0%, 100% {
            opacity: 0.8;
            filter: brightness(1) hue-rotate(0deg);
        }
        50% {
            opacity: 1;
            filter: brightness(1.5) hue-rotate(10deg);
        }
    }

    @keyframes ripple-effect {
        0% {
            transform: scale(0.8);
            opacity: 0.8;
        }
        50% {
            transform: scale(1.2);
            opacity: 0.4;
        }
        100% {
            transform: scale(1.8);
            opacity: 0;
        }
    }

    @keyframes wave-effect {
        0%, 100% {
            transform: translateY(0) scaleY(1);
            opacity: 0.3;
        }
        50% {
            transform: translateY(-20px) scaleY(1.1);
            opacity: 0.6;
        }
    }

    @keyframes light-rays {
        0% {
            transform: rotate(0deg) scale(1);
            opacity: 0.3;
        }
        50% {
            transform: rotate(180deg) scale(1.2);
            opacity: 0.6;
        }
        100% {
            transform: rotate(360deg) scale(1);
            opacity: 0.3;
        }
    }

    #animated-intro.final-effect::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, rgba(19, 91, 236, 0.4) 0%, rgba(19, 91, 236, 0.2) 40%, transparent 70%);
        animation: ripple-effect 2s ease-out infinite;
        pointer-events: none;
        z-index: 1;
    }

    #animated-intro.final-effect::after {
        content: '';
        position: absolute;
        inset: -50%;
        background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(19, 91, 236, 0.1) 90deg, transparent 180deg, rgba(19, 91, 236, 0.1) 270deg, transparent 360deg);
        animation: light-rays 8s linear infinite;
        pointer-events: none;
        z-index: 1;
    }

    #animated-intro.final-effect .animated-bg-gradient {
        animation: background-pulse 2s ease-in-out infinite, gradient-shift 6s ease infinite, gradient-intensify 1s ease forwards;
        opacity: 1;
    }

    #animated-intro.final-effect .particles {
        animation: particles-move 15s linear infinite, particles-intensify 1s ease forwards;
        opacity: 1;
    }

    #animated-intro.final-effect {
        position: relative;
    }

    #animated-intro.final-effect .animated-bg-gradient::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, transparent 30%, rgba(19, 91, 236, 0.1) 50%, transparent 70%);
        animation: wave-effect 3s ease-in-out infinite;
    }

    /* Spotlight Effect */
    .spotlight-effect {
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(19, 91, 236, 0.1) 30%, transparent 70%);
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s ease;
        filter: blur(40px);
        z-index: 2;
    }

    .spotlight-effect.active {
        opacity: 1;
    }

    /* Wand Trail Effect */
    .wand-trail {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(19, 91, 236, 0.3) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%);
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -50%);
        filter: blur(30px);
        z-index: 2;
        transition: opacity 0.2s ease, transform 0.1s ease;
    }

    .wand-trail.active {
        opacity: 0.6;
    }

    @keyframes sparkle {
        0%, 100% {
            opacity: 0;
            transform: scale(0) rotate(0deg);
        }
        50% {
            opacity: 1;
            transform: scale(1) rotate(180deg);
        }
    }

    .wand-trail::before,
    .wand-trail::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: sparkle 1s ease-in-out infinite;
    }

    .wand-trail::after {
        animation-delay: 0.5s;
        background: rgba(19, 91, 236, 0.8);
    }

    /* Scroll Icon Animation */
    @keyframes bounce-smooth {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }

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

    #scroll-icon {
        cursor: pointer;
        transition: transform 0.3s ease;
        z-index: 20;
    }

    #scroll-icon.show {
        animation: fadeInUp 0.8s ease-out forwards;
        opacity: 1 !important;
    }

    #scroll-icon:hover {
        transform: translateY(-5px);
    }

    #scroll-icon #scroll-arrow {
        filter: drop-shadow(0 0 10px rgba(19, 91, 236, 0.5));
    }

    #scroll-icon.show #scroll-arrow {
        animation: bounce-smooth 2s ease-in-out infinite;
    }

    #scroll-icon.show #scroll-text {
        animation: bounce-smooth 2s ease-in-out infinite;
    }