/* =============================================================
   PCT Menu Effects — Staggered letter blink on hover
   Apply class "pct-blink-link" to any <a> element.
   JS (menu-effects.js) wraps letters automatically.
   ============================================================= */

/* Letter wrapper spans (inside any text container) */
.pct-blink-link .pct-blink-out,
.pct-blink-link .pct-blink-in {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.pct-blink-link .pct-blink-out {
    display: inline-flex;
}

.pct-blink-link .pct-blink-in {
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(80%);
    color: var(--accent-1);
}

/* Wrapper span for each letter pair */
.pct-blink-link span:has(.pct-blink-out) {
    position: relative;
    overflow: hidden;
}

/* Hover: slide out old, slide in new */
.pct-blink-link:hover .pct-blink-out {
    opacity: 0;
    transform: translateX(-80%);
}

.pct-blink-link:hover .pct-blink-in {
    opacity: 1;
    transform: translateX(0);
}