:root {
    --letter-size: 30px;
    /* Change this value to adjust letter size */
}

.logo-adbe img {
    opacity: 0;
    /* Start hidden */
    visibility: hidden;
    /* Prevent interaction and layout shifting */
    animation-fill-mode: forwards;
    /* Keep the final state of the animation */
}

@keyframes right100 {
    0% {
        transform: translateX(0) rotate(-90deg);
        opacity: 0;
        visibility: visible;
        /* Ensure it is visible during animation */
    }

    100% {
        transform: translateX(calc(var(--letter-size) * 1)) rotate(0);
        /* Adjusted for letter size */
        opacity: 1;
        visibility: visible;
        /* Ensure it stays visible */
    }
}

@keyframes right200 {
    0% {
        transform: translateX(0) rotate(-180deg);
        opacity: 0;
        visibility: visible;
        /* Ensure it is visible during animation */
    }

    25% {
        opacity: 0;
    }

    100% {
        transform: translateX(calc(var(--letter-size) * 2)) rotate(0);
        /* Adjusted for letter size */
        opacity: 1;
        visibility: visible;
        /* Ensure it stays visible */
    }
}

@keyframes right300 {
    0% {
        transform: translateX(0) rotate(-180deg);
        opacity: 0;
        visibility: visible;
        /* Ensure it is visible during animation */

    }

    42% {
        opacity: 0;
    }

    100% {
        transform: translateX(calc(var(--letter-size) * 3)) rotate(0);
        /* Adjusted for letter size */
        opacity: 1;
        visibility: visible;
        /* Ensure it stays visible */

    }
}

@keyframes right400 {
    0% {
        transform: translateX(0) rotate(-180deg);
        opacity: 0;
        visibility: visible;
        /* Ensure it is visible during animation */
    }

    55% {
        opacity: 0;
    }

    100% {
        transform: translateX(calc(var(--letter-size) * 4)) rotate(0);
        /* Adjusted for letter size */
        opacity: 1;
        visibility: visible;
        /* Ensure it stays visible */
    }
}

.logo-adbe-1 {
    animation: right100 1s forwards;
    animation-delay: 0.2s;
    animation-timing-function: ease-out;
    left: calc(var(--letter-size) * -1);
    top: 30%;
}

.logo-adbe-2 {
    animation: right200 2s forwards;
    animation-delay: 0.2s;
    animation-timing-function: ease-out;
    left: calc(var(--letter-size) * -1);
    top: 30%;
}

.logo-adbe-3 {
    animation: right300 3s forwards;
    animation-delay: 0.2s;
    animation-timing-function: ease-out;
    left: calc(var(--letter-size) * -1);
    top: 30%;
}

.logo-adbe-4 {
    animation: right400 4s forwards;
    animation-delay: 0.2s;
    animation-timing-function: ease-out;
    left: calc(var(--letter-size) * -1);
    top: 30%;

}