﻿.creepy-text {
    opacity: 0;
    display: inline-block;
    transition: opacity 0.6s;
}

/* Each letter wrapper */
.creepy-letter {
    display: inline-block;
    will-change: transform, filter;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 2px -2px 0 #222, -2px 2px 0 #222;
    transition: transform 0.1s, filter 0.1s;
}

/* Flicker animation for subtle opacity changes */
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
    }

    20%, 22%, 24%, 55% {
        opacity: 0.85;
    }
}

.creepy-text.flicker .creepy-letter {
    animation: flicker 3s infinite;
}