.title-text {
    color: transparent;
    font-size: 8rem;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    font-weight: bold;
    letter-spacing: 0.2em;
    user-select: none;
    position: relative;
    z-index: 2;
    display: block;
}

.title-text span {
    display: inline-block;
    color: #fff; /* Make spans visible */
    opacity: 0.7;
    text-shadow: 0 0 8px #fff4;
    animation: glow 12s linear infinite;
    user-select: none;
}

@keyframes glow {
    0%   { opacity: 0.7; text-shadow: 0 0 8px #fff4; }
    15%  { opacity: 1;   text-shadow: 0 0 32px #fff8, 0 0 8px #fff4; }
    45%  { opacity: 1;   text-shadow: 0 0 32px #fff8, 0 0 8px #fff4; }
    60%  { opacity: 0.7; text-shadow: 0 0 8px #fff4; }
    100% { opacity: 0.7; text-shadow: 0 0 8px #fff4; }
}

/* Each letter glows in a bigger wave */
.title-text span:nth-child(1) { animation-delay: 0s; }
.title-text span:nth-child(2) { animation-delay: 0.4s; }
.title-text span:nth-child(3) { animation-delay: 0.8s; }
.title-text span:nth-child(4) { animation-delay: 1.2s; }
.title-text span:nth-child(5) { animation-delay: 1.6s; }
.title-text span:nth-child(6) { animation-delay: 2.0s; }

@media (max-width: 1200px) {
    .title-text {
        font-size: 6rem;
        letter-spacing: 0.15em;
    }
}

@media (max-width: 600px) {
    .title-text {
        font-size: 4rem;
        letter-spacing: 0.1em;
    }
}

@media (max-width: 300px) {
    .title-text {
        font-size: 3rem;
        letter-spacing: 0.075em;
    }
}