:root {
    --mustard: #E1AD01;
    --mustard-glow: #aa8200;
}

@keyframes broken-neon {
    0%, 18%, 22%, 25%, 53%, 57% {
        opacity: 0.1;
        text-shadow: none;
        color: rgba(225, 173, 1, 0.2);
    }

    100% {
        opacity: 0.4;
        text-shadow: none;
        color: rgba(225, 173, 1, 0.2);
    }
    20%, 24%, 55% {            
        opacity: 1;
        text-shadow: 
            0 0 4px #fff,
            0 0 11px #fff,
            0 0 19px #fff,
            0 0 40px var(--mustard),
            0 0 80px var(--mustard),
            0 0 90px var(--mustard),
            0 0 100px var(--mustard),
            0 0 150px var(--mustard);
        color: #fff;
    }
    21%, 54% {
        opacity: 0.8; 
        text-shadow: none;
        color: var(--mustard);
    }
    2% { opacity: 0.1; }
    4% { opacity: 1; text-shadow: 0 0 30px var(--mustard); color: #fff; }
    6% { opacity: 0.1; color: rgba(225, 173, 1, 0.2); }
    60%, 100% {
        opacity: 0.9;
        text-shadow: 0 0 10px var(--mustard), 0 0 20px var(--mustard);
        color: #fff;
    }
    70% {
        opacity: 0.7;
        text-shadow: 0 0 5px var(--mustard);
        color: var(--mustard);
    }
    85% {
        opacity: 0.4;
        text-shadow: none;
        color: rgba(225, 173, 1, 0.1);
    }
}

@keyframes white-neon {
    0% {
        opacity: 0;
        text-shadow: none;
    }
    5%, 15%, 25%, 30%, 45% {
        opacity: 0.1;
        text-shadow: none;
    }
    10%, 20%, 35%, 40%, 50% {
        opacity: 1;
        text-shadow: 
            0 0 2px #fff,
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #228DFF,
            0 0 35px #228DFF,
            0 0 40px #228DFF;
        color: #fff;
    }
    55% {
        opacity: 0.8;
        text-shadow: none;
    }
    60%, 100% {
        opacity: 1;
        text-shadow: 
            0 0 4px #fff,
            0 0 10px #fff,
            0 0 18px #fff,
            0 0 38px #228DFF,
            0 0 73px #228DFF,
            0 0 80px #228DFF;
        color: #fff;
    }
}

.ufo-neon {
    font-family: 'Tilt Neon', sans-serif;
    color: rgba(225, 173, 1, 0.2);
    animation: broken-neon 6s linear forwards;
}

.handwritten-neon {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    opacity: 0;
    animation: white-neon 3s linear 3s forwards; 
}

.btn-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.btn-visible {
    opacity: 1;
    transform: translateY(0);
}

.bg-mustard { background-color: var(--mustard); }
.text-mustard { color: var(--mustard); }
.hover-glow:hover {
    box-shadow: 0 0 20px var(--mustard);
}