.flyletter-right {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translate(30px, -30px) rotate(45deg);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
    margin: 0 1px;
    font-family: var(--main-font);
    font-size: var(--font-size-normal);
}

.flyletter-right.active {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Ensure transitions are defined */
}

/* Container styles */
[id^="flyletter-"] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 50px;
    align-items: center;
}