/* Effektgruppe: text/letter-hover; Reihenfolge in inc/assets.php. */

/* Grundzustand */
.letter-hover .hover-char {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: default;
    will-change: transform;
}

/* Hover-Zustand */
.letter-hover .hover-char:hover {
    color: var(--global-palette2, #e8ac31);
    /* Nutzt 'forwards', damit der Buchstabe oben bleibt */
    animation: jump-and-stay 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Die Animation: Prozentbasierte Werte für volle Skalierbarkeit */
@keyframes jump-and-stay {
    0% {
        transform: translateY(0) scale(1);
    }
    /* Kurzer "Peak" beim Sprung */
    70% {
        transform: translateY(-18%) scale(1.15);
    }
    /* "Einrasten" auf der Zielhöhe */
    100% {
        transform: translateY(-13%) scale(1.15);
    }
}