@use '~@epam/promo/assets/styles/colors.scss' as *;

.layout {
    margin: 0 auto;
    background-color: $gray10;
    overflow: hidden;

    .hero {
        max-width: 1200px;
        width: 100%;
        padding: 60px 0 0;
        margin: 0 auto;
        align-items: start;

        .hero-text {
            width: 50%;
            padding: 0 0 144px;

            .hero-header {
                font-size: 72px;
                line-height: 90px;
                padding: 0;
            }

            .hero-secondary {
                line-height: 36px;
                margin-top: 24px;
                padding: 0;
            }
        }

        .hero-wrapper {
            width: 50%;
            transform: rotateX(0deg) rotateY(0deg);
            transition: 1s;
            transform-style: preserve-3d;

            .hero-image {
                width: 100%;
                position: relative;
                //overflow: hidden;
                height: 396px;

                .layer_1 {
                    top: 41%;
                    left: 8%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 4;

                    &::before {
                        content: '';
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 30px;
                        transform: rotateY(90deg);
                        background-color: #0E74E2;
                        position: absolute;
                    }
                }

                .layer_2 {
                    top: 46%;
                    left: 30%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 2;
                }

                .layer_3 {
                    top: 46%;
                    left: 51%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 1;
                }

                .layer_4 {
                    top: 46%;
                    left: 72%;
                    transform: translateZ(0);
                    transition: 1s;
                }

                .layer_5 {
                    top: 78%;
                    left: 30%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 2;
                }

                .layer_6 {
                    top: 78%;
                    left: 51%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 1;
                }

                .layer_7 {
                    top: 78%;
                    left: 72%;
                    transform: translateZ(0);
                    transition: 1s;
                }

                .layer_8 {
                    top: 109%;
                    left: 30%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 2;
                }

                .layer_9 {
                    top: 109%;
                    left: 51%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 1;
                }

                .layer_10 {
                    top: 109%;
                    left: 72%;
                    transform: translateZ(0);
                    transition: 1s;
                }

                .layer_11 {
                    top: 141%;
                    left: 30%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 2;
                }

                .layer_12 {
                    top: 141%;
                    left: 51%;
                    transform: translateZ(0);
                    transition: 1s;
                    z-index: 1;
                }

                .layer_13 {
                    top: 141%;
                    left: 72%;
                    transform: translateZ(0);
                    transition: 1s;
                }

                .search {
                    position: absolute;
                    top: 20%;
                    left: 8%;
                    width: 84%;
                    transform: translateZ(0);
                    transition: 1s;
                    -webkit-font-smoothing: antialiased;
                }

                img {
                    transform-style: preserve-3d;
                    position: absolute;
                    top: 0;
                }

                :first-child img {
                    box-shadow: 0 1px 2px 0 rgba(29, 30, 38, 0.1), 0 2px 10px 0 rgba(29, 30, 38, 0.15);
                }
            }

            &:hover, &:global(.show-animation) {
                transform: perspective(1000px) translateZ(-60px) rotate3d(0, 1, 0, 15deg);
                box-shadow: -18px 18px 30px rgba(34, 34, 34, 0.15);

                .search, .layer_1, .layer_2, .layer_3, .layer_4, .layer_5, .layer_6, .layer_7, .layer_8, .layer_9, .layer_10, .layer_11, .layer_12, .layer_13 {
                    transform: translateZ(120px) translateY(6px);
                    box-shadow: -12px 12px 12px rgba(34, 34, 34, 0.15);
                    image-rendering: high-quality;

                    &:hover {
                        box-shadow: -6px 6px 12px rgba(34, 34, 34, 0.1), -1px 1px 3px rgba(34, 34, 34, 0.05);
                        transform: translateZ(60px);
                        transition: 0.5s;
                    }
                }
            }
        }
    }

    @media (max-width: 1280px) {
        .hero {
            max-width: 732px;
            align-items: start;
            flex-direction: column;
            padding: 48px 0 0;

            .hero-text {
                width: 100%;
                padding: 0 0 36px;

                .hero-secondary {
                    letter-spacing: -0.5px;
                }

                &:not(:last-child) {
                    margin-right: 0;
                }
            }

            .hero-wrapper {
                width: 100%;
                transform: none;

                &:not(:first-child) {
                    margin-left: 0;
                }

                .hero-image {
                    width: 100%;
                    position: relative;
                    max-height: 480px;
                    transform: none;
                    height: var(--height);

                    img {
                        box-shadow: 0 1px 2px 0 rgba(29, 30, 38, 0.1), 0 2px 10px 0 rgba(29, 30, 38, 0.15);
                        transform-style: initial;
                        position: absolute;
                        top: 0;
                    }
                }

                &:hover {
                    transform: none;
                    box-shadow: none;
                }
            }
        }
    }

    @media (max-width: 768px) {
        .hero {
            max-width: none;
            width: inherit;
            padding: 30px 0 0;
            margin: 0 12px;
            align-items: start;

            .hero-text {
                width: 100%;
                padding: 0 0 36px;

                .hero-header {
                    font-size: 36px;
                    line-height: 48px;
                    padding: 0;
                }

                .hero-secondary {
                    line-height: 24px;
                    font-size: 16px;
                    margin-top: 12px;
                    padding: 0;
                }
            }

            .hero-wrapper {
                width: 100%;
                transform: none;
                transition: none;
                transform-style: unset;

                &:not(:first-child) {
                    margin-left: 0;
                }

                .hero-image {
                    width: 100%;
                    position: relative;
                    height: var(--height);

                    img {
                        box-shadow: 0 1px 2px 0 rgba(29, 30, 38, 0.1), 0 2px 10px 0 rgba(29, 30, 38, 0.15);
                        transform-style: unset;
                        position: absolute;
                        top: 0;
                    }
                }

                &:hover {
                    transform: none;
                    box-shadow: none;
                }
            }
        }
    }
}
