@import "~/styles/partials/mixins";

.ourBrand {
    &--container {
        position: sticky;
        bottom: 0;

        &-image {
            right: 0;

            &.active {
                transform: translateX(100%);
            }
        }

        &-group {
            left: 0;
            height: 100%;
            width: 30%;

            &.active {
                transform: translateX(-100%);
            }
        }

        &-wrap {
            
            &-play {
                left: 50%;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                transform: translateX(100%);

                @include max(1366) {
                    transform: translateX(50%);
                }

                @include maxOrientation(1024, portrait) {
                    left: auto;
                    width: 80px;
                    height: 80px;
                    transform: none;
                }

                img {
                    animation: rotation 5s infinite linear;
                }
            }

            &-pause {
                top: 150px;
                right: 40px;

                @include maxOrientation(1024, portrait) {
                    top: 20px;
                    right: 20px;
                }
            }

            video {
                height: 100vh;
                object-fit: cover;

                @include maxOrientation(1024, portrait) {
                    height: 100%;
                }
            }
        }

        &-image,
        &-group {
            top: 0;
            z-index: 1;
            transition: all 0.5s linear;
        }
    }

}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}