/*------------------------------------------------------------------
[8.7 - Homepage]
*/
@keyframes animate {
    0% {
        transform: translateY(0) rotate(45deg);
    }

    25% {
        transform: translateY(-50px) rotate(45deg);
    }

    75% {
        transform: translateY(100px) rotate(45deg);
    }

    100% {
        transform: translateY(0px) rotate(45deg);
    }
}

.home-header-area {
    .uploader-card {
        @include transition(transform 1s ease);

        &:hover {
            transform: scale(1.05);
        }
    }

    .title {
        color: var(--color-2);
        font-weight: 800;

        @media (min-width: $breakpoint-medium) {
            font-size: 3rem;
        }

        @media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
            font-size: 2.5rem;
        }
    }

    .text {
        color: var(--color-2);
        font-weight: 300;

        @media (min-width: $breakpoint-medium) {
            font-size: 1.25rem;
        }

        @media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
            font-size: 1.125rem;
        }
    }

    .upload-methods {
        a {
            color: var(--color-2);
            font-weight: 600;

            &.active {
                color: var(--color-1);
            }
        }
    }

    .link-area {
        border-radius: 1rem;
        border: 2px dashed var(--color-1);
        color: var(--color-2);

        #file-url {
            resize: none;
        }
    }

    .squares,
    .circles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        
        li {
            position: absolute;
            display: block;
            list-style: none;
            background: rgba(var(--color-1-rgb),.03);
            animation: animate 30s linear infinite;
            z-index: -1;
        }
    }

    .squares li {
        &:nth-child(1) {
            left: 25%;
            width: 80px;
            height: 80px;
            bottom: 200px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 0s;
        }

        &:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            bottom: 100px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 2s;
        }

        &:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            bottom: 500px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 0s;
        }

        &:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            bottom: 550px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 2s;
        }

        &:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            bottom: 800px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 0s;
        }

        &:nth-child(6) {
            left: 75%;
            width: 75px;
            height: 75px;
            bottom: 600px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 2s;
        }

        &:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            bottom: 700px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 0s;
        }

        &:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            bottom: 600px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 2s;
        }

        &:nth-child(9) {
            left: 20%;
            width: 30px;
            height: 30px;
            bottom: 600px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 0s;
        }

        &:nth-child(10) {
            left: 85%;
            width: 150px;
            height: 150px;
            bottom: 100px;
            transform: translateY(0) rotate(45deg);
            animation-delay: 2s;
        }
    }

    .circles li {
        &:nth-child(1) {
            left: 5%;
            width: 80px;
            height: 80px;
            bottom: 400px;
            animation-delay: 0s;
            border-radius: 100%;
        }

        &:nth-child(2) {
            left: 70%;
            width: 80px;
            height: 80px;
            bottom: 400px;
            animation-delay: 2s;
            border-radius: 100%;
        }

        &:nth-child(3) {
            left: 90%;
            width: 120px;
            height: 120px;
            bottom: 600px;
            animation-delay: 0s;
            border-radius: 100%;
        }

        &:nth-child(4) {
            left: 10%;
            width: 120px;
            height: 120px;
            bottom: 600px;
            animation-delay: 2s;
            border-radius: 100%;
        }
    }
}

.home-features-area {
    .feature-container:not(:last-child) {
        margin-bottom: 8rem;
    }

    .feature-image {
        width: 26rem;
        height: 18rem;
        border-radius: 1rem;

        @media (max-width: $breakpoint-sm) {
            width: 22rem;
        }
    }

    .feature-title {
        font-weight: 700;
        color: var(--color-2);

        @media (min-width: $breakpoint-small) {
            font-size: 2rem;
        }
    }
}
