ITRadio/client/src/assets/css/module/home.scss

.home {
    overflow-x: hidden;
    &__meaning {
        min-height: var(--base-content-size);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        &:after, &:before {
            content: '';
            position: absolute;
            background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
            background-size: 100%;
            z-index: 1;
        }

        &:after {
            right: 50vh;
            bottom: 10vh;
            width: 300px;
            height: 300px;
            animation: moving-circle-2 9s infinite linear;
            @keyframes moving-circle-2 {
                0%{
                    -webkit-transform: rotate(360deg) translatex(100%) translatey(100%) scale(1.5);
                }
                100%{
                    -webkit-transform: rotate(0deg) translatex(100%) translatey(100%) scale(1.5);
                }
            }
        }

        &:before {
            width: 250px;
            height: 250px;
            left: 10vh;
            bottom: 10vh;
            animation: moving-circle-3 8s infinite linear;
            @keyframes moving-circle-3 {
                0%{
                    -webkit-transform: rotate(360deg) translatex(-100%) translatey(150%) scale(1.5);
                }
                100%{
                    -webkit-transform:rotate(0deg) translatex(-100%) translatey(200%) scale(1.5);
                }
            }
        }
    }

    &__subtitle {
        text-align: center;

        span {
            font-weight: 700;
        }
        &:after{
            content: '';
            position: absolute;
            top: 0;
            width: 400px;
            height: 400px;
            background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
            background-size: 100%;
            animation: moving-circle 10s infinite linear;
            z-index: -1;
            @keyframes moving-circle {
                0%{
                    -webkit-transform: rotate(0) translatex(-400px) translatey(-100px) scale(1.5);
                }
                50%{
                    -webkit-transform: rotate(180deg) translatex(-200px) translatey(-200px) scale(1);
                }
                100%{
                    -webkit-transform: rotate(360deg) translatex(-400px) translatey(-100px) scale(1.5);
                }
            }
        }

    }

    &__title {
        @mixin h1;
        -webkit-background-clip: text;
        text-align: center;
        background-clip: text;
        background-image: linear-gradient(91.17deg, var(--color-white) -4.01%, var(--color-white) 36.14%, var(--color-white) 77.44%, var(--color-white) 106.11%);
        padding: 0 20px;
        span {
            color: var(--color-black);
            -webkit-background-clip: text;
            -webkit-text-stroke: 3px transparent;
        }
    }
    &__banner {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("./assets/img/bg/home-banner.png") no-repeat center;
        width: 1920px;
        max-height: var(--base-content-size);
        background-size: contain;
        scale: 0.8;
        margin-left: calc(-1920px + 100vw);
    }

    &__description {
        margin-top: calc(var(--space-between-sections) / 2);
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--space-between-sections);
    }

    &__info {
        width: 60%;

        &--item {
            display: flex;
            justify-content: space-between;
            color: transparent;
            background-clip: text;
            background-image: var(--linear-gradient);

            &.m--circle {
                align-items: end;

                &:before {
                    content: '';
                    display: block;
                    width: 130px;
                    height: 130px;
                    background: url("./assets/img/icon/circleGradient.svg") no-repeat center;
                }
            }

            span {
                font-weight: 400;
                color: var(--color-white);
                width: 57%;
            }
        }
    }

    &__content {
        max-width: 360px;

        &--item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            font-size: 16px;
            margin-bottom: 2.5rem;

            &:before {
                content: '';
                height: 50px;
                margin-bottom: 10px;
                position: relative;
                z-index: 2;
            }

            &.m--one-circle:before {
                width: 50px;
                background: url("./assets/img/icon/one-circle.svg") no-repeat center;
            }

            &.m--two-circle:before {
                width: 100px;
                background: url("./assets/img/icon/two-circle.svg") no-repeat center;
            }

            &.m--three-circle:before {
                width: 150px;
                background: url("./assets/img/icon/three-circle.svg") no-repeat center;
            }

            span {
                color: transparent;
                background-clip: text;
                background-image: var(--linear-gradient);
            }
        }
    }

    &__social {
        height: var(--base-content-size);
        max-height: 900px;
        background: url("./assets/img/bg/bg-social.svg") no-repeat center;
        padding: 3rem 2.5rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        position: relative;
        z-index: 2;
        margin-bottom: var(--space-between-sections);
        background-size: cover;
        &:after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(179.74deg, rgba(0, 0, 0, 0) 0.23%, rgba(0, 0, 0, 0.66) 99.77%);
        }

        &--tools {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        &--description {
            max-width: 45%;
        }

        &--btns {
            display: grid;
            grid-template-columns: min-content min-content;
            grid-template-rows: min-content min-content;
            grid-column-gap: 8px;
            grid-row-gap: 8px;
        }
    }

}