/* Additional CSS for flash letter animation */

.hero-title .letter {
    display: inline-block;
    color: transparent;
    background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.9;
    text-shadow: 0 0 30px rgba(196, 181, 253, 0.6), 0 0 60px rgba(196, 181, 253, 0.3);
}

/* Ensure text stays on one line on desktop */
@media (min-width: 768px) {
    #animatedTitle {
        white-space: nowrap;
    }
}

/* Glitch effect for word changes */
.glitch-word {
    position: relative;
    display: inline-block;
}

.glitch-word::before,
.glitch-word::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glitch-word::before {
    animation: glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-2px, -2px);
    opacity: 0.8;
}

.glitch-word::after {
    animation: glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse infinite;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    transform: translate(2px, 2px);
    opacity: 0.8;
}

@keyframes glitch-1 {
    0%, 100% {
        transform: translate(0);
    }
    33% {
        transform: translate(-4px, 2px);
    }
    66% {
        transform: translate(4px, -2px);
    }
}

@keyframes glitch-2 {
    0%, 100% {
        transform: translate(0);
    }
    33% {
        transform: translate(4px, 2px);
    }
    66% {
        transform: translate(-4px, -2px);
    }
}