/* Basic styling for the paragraph */
.flicker-text {
    color: #fff; /* White base color */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); /* Subtle blue/cyan glow */
}

/* Target the individual letters (the <span>s created by JavaScript) */
.flicker-text span {
    display: inline-block; /* Allows transformation and animation */
}

.flicker-text .flicker {
    /* Base animation properties */
    animation-name: flicker;
    animation-duration: 14s; /* The length of the entire flicker cycle */
    animation-iteration-count: infinite;
}

/* Keyframes for the animation */
@keyframes flicker {
    /* The steps() function in the span selector will jump between these keyframes */
    0%, 4% {
        opacity: 1; /* Fully visible */
        text-shadow: 0 0 5px #0ff, 0 0 15px #0ff; /* Base glow */
    }

    1% {
        opacity: 0.2; /* Almost invisible flash */
        text-shadow: none; /* No glow on the "off" moment */
    }

    2% {
        opacity: 0.8; /* Slight dim */
        text-shadow: 0 0 20px #0ff, 0 0 50px #0ff; /* Super bright flash */
    }
}
