@import "../../bootstrap/variables";

@keyframes up-down-smooth-full-width-hero-overlay-img-animation {
    0%, 100% {
        transform: translateY(8px);
    }
    50% {
        transform: translateY(-24px);
    }
}

@keyframes left-right-smooth-full-width-hero-overlay-img-animation {
    0%, 100% {
        transform: translateX(-8px);
    }
    50% {
        transform: translateX(24px);
    }
}

.full-width-hero-section {
    width: 100%;
    height: 1200px;
    margin-bottom: 234px;
    padding-top: 150px;

    &__bg-wrapper {
        position: absolute;
        inset: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: 1;
    }

    &__images-content {
        width: 100%;
        height: 750px;

        .plyr.plyr--video {
            max-width: 100%;
            max-height: 100%;
        }


        &-overlay-1, &-overlay-2 {
            width: 346px;
            height: 214px;
            position: absolute;
            z-index: 3;

            img {
                box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.02);
            }
        }

        &-overlay-1 {
            bottom: 180px;
            right: -116px;
            animation: left-right-smooth-full-width-hero-overlay-img-animation 4s ease-in-out infinite;

            .rtl & {
                right: auto;
                left: -116px;
            }
        }

        &-overlay-2 {
            bottom: 120px;
            left: -116px;
            animation: up-down-smooth-full-width-hero-overlay-img-animation 4s ease-in-out infinite;

            .rtl & {
                left: auto;
                right: -116px;
            }
        }
    }

    &__upper-cta-badge-icon {
        display: inline-block;
        animation-name: wave-animation;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
    }

    &__badge-text {
        position: absolute;
        top: 84px;
        right: 0;
        transform: rotate(20deg);

        .rtl & {
            right: auto;
            left: 0;
            transform: rotate(-20deg);
        }
    }

    @media (max-width: $screen-sm-max) {
        height: auto;
        padding-top: 60px;
        margin-bottom: 40px;

        &__badge-text {
            top: 14px;
            right: -24px;

            .rtl & {
                right: auto;
                left: -24px;
            }
        }

        &__images-content {
            height: 480px;

            &-overlay-1, &-overlay-2 {
                width: 114px;
                height: 88px;
            }

            &-overlay-1 {
                bottom: -50px;
                right: -24px;

                .rtl & {
                    right: auto;
                    left: -24px;
                }
            }

            &-overlay-2 {
                bottom: -50px;
                left: -24px;

                .rtl & {
                    left: auto;
                    right: -24px;
                }
            }
        }
    }
}