/* === Original: Dynamic Blinking Text with Auto-Pause on Hover === */
.blink {
    animation: blinkPause var(--blink-speed, 5s) linear infinite;
}

.blink:hover {
    animation-play-state: paused; /* ✅ Stops blinking on hover */
}

@keyframes blinkPause {
    0%, 49% {
        opacity: 1; /* Visible first half */
    }
    50%, 60% {
        opacity: 0; /* Quick blink */
    }
    61%, 100% {
        opacity: 1; /* Pause (visible) */
    }
}

/* === NEW: Blink Twice → Pause 2s (Reusable Globally) === */
.blink2 {
    animation: blinkTwicePause var(--blink-speed, 3s) ease-in-out infinite;
}

.blink2:hover {
    animation-play-state: paused; /* ✅ Stops blinking on hover */
}

@keyframes blinkTwicePause {
    0%, 10% {
        opacity: 1; /* Visible */
    }
    15%, 25% {
        opacity: 0; /* First blink */
    }
    30%, 40% {
        opacity: 1; /* Visible again */
    }
    45%, 55% {
        opacity: 0; /* Second blink */
    }
    60%, 100% {
        opacity: 1; /* Pause (visible for ~2s) */
    }
}

/* ✅ Legacy: Faster & Slower Blink (No Pause, Old Behavior) */
.blink-fast {
    animation: blinker 0.8s linear infinite;
}

.blink-slow {
    animation: blinker 2.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}