.rostel-bg-wrap {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.rostel-bg-layer {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    will-change: transform;
}



/* 1️⃣ ZOOM OUT ONLY */
@keyframes rostelZoom {
    0% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rostelRightToLeft {
    0% {
        transform: scale(1.25) translateX(80px);
    }

    100% {
        transform: scale(1) translateX(-80px);
    }
}


@keyframes rostelLeftToRight {
    0% {
        transform: scale(1.25) translateX(-80px);
    }

    100% {
        transform: scale(1) translateX(80px);
    }
}


@keyframes rostelBottomToTop {
    0% {
        transform: scale(1.25) translateY(80px);
    }

    100% {
        transform: scale(1) translateY(-80px);
    }
}


@keyframes rostelTopToBottom {
    0% {
        transform: scale(1.25) translateY(-80px);
    }

    100% {
        transform: scale(1) translateY(80px);
    }
}


@keyframes rostelCenterPulse {
    0% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}