/* Add custom text shadow for the glow effect */
    
    .cosmic-title {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 4px 4px 8px rgba(255, 50, 0, 0.4), 6px 6px 12px rgba(255, 100, 0, 0.3);
        animation: title-glow 2s ease-in-out infinite alternate;
    }
    
    @keyframes title-glow {
        from {
            filter: brightness(1);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 4px 4px 8px rgba(255, 50, 0, 0.4);
        }
        to {
            filter: brightness(1.2);
            text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6), 8px 8px 16px rgba(255, 50, 0, 0.6), 12px 12px 24px rgba(255, 100, 0, 0.5);
        }
    }
    
    .text-shadow-glow {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), /* Softer inner glow */
        0 0 25px rgba(255, 255, 255, 0.4), /* Medium glow */
        0 0 40px rgba(255, 255, 255, 0.3);
        /* Wider outer glow */
    }
    
    .dark .text-shadow-glow-dark {
        text-shadow: 0 0 15px rgba(250, 200, 50, 0.6), /* Matches sun color */
        0 0 25px rgba(250, 200, 50, 0.4), 0 0 40px rgba(250, 200, 50, 0.2);
    }
    /* twinkling stars */
    
    #stars .star {
        position: absolute;
        background: white;
        border-radius: 50%;
        animation: twinkle var(--duration) ease-in-out infinite;
    }
    /* fade‑in & fade‑up */
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-fadeIn {
        opacity: 0;
        animation: fadeIn 1s ease-out forwards;
    }
    
    .animate-fadeUp {
        opacity: 0;
        animation: fadeUp 1s ease-out forwards;
    }
    
    .delay-300 {
        animation-delay: 0.3s !important;
    }
    
    .delay-600 {
        animation-delay: 0.6s !important;
    }
    /* typing caret */
    /* Add these new animations */
    
    @keyframes deleting {
        from {
            width: 100%;
        }
        to {
            width: 0;
        }
    }
    
    .typing-animation {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        border-right: 2px solid currentColor;
        width: 0;
    }
    
    .typing {
        animation: typing 3s steps(40) forwards, blink-caret 0.75s step-end;
    }
    
    .deleting {
        animation: deleting 1.5s steps(40) forwards, blink-caret 0.75s step-end;
    }
    
    @keyframes blink-caret {
        50% {
            border-color: transparent;
        }
    }
    /* stars twinkle */
    
    @keyframes twinkle {
        0%,
        100% {
            opacity: .8;
        }
        50% {
            opacity: .2;
        }
    }
    
    .star {
        position: absolute;
        background: white;
        border-radius: 50%;
        animation: twinkle var(--duration) ease-in-out infinite;
    }
    /* shooting star */
    
    @keyframes shoot {
        to {
            transform: translate(150vw, 150vh) rotate(45deg);
            opacity: 0;
        }
    }
    /* shooting star */
    
    .shooting-star {
        position: absolute;
        width: 2px;
        height: 80px;
        background: linear-gradient(white, rgba(255, 255, 255, 0));
        transform: rotate(45deg);
        /* specify a duration (e.g. 1s) instead of relying on the default 0s */
        animation: shoot 4s linear forwards;
        z-index: 25;
        /* ensure they're above the sun (which is at z-20) */
        filter: brightness(150%);
        /* boost visibility */
    }