@import url("../public/animation.css");

#home {
  /* margin-top: 150px; */
  padding-top: 180px;
  margin-bottom: 50px;
  width: 100%;
  /* min-height: 100px; */
  /* height: 700px; */
  /* background: blue; */
  display: flex;
  position: relative;
}

    #head-decorate {
    width: 100%;
    height: 100%;
    position: absolute;
    }
        .dot-pattern {
        width: clamp(10px, 35.7vw, 250px);
        aspect-ratio: 250 / 180;

        background-size: 30px 30px;
        position: absolute;
        z-index: -2;
        left: -75px;
        bottom: 0%;

        opacity: 0;
        }
        .dot-pattern.load {
        animation: zoomInX2 1.5s ease-out forwards;
        }

            .dot-pattern.light {
                background-image: radial-gradient(
                    circle,
                    color-mix(in srgb, var(--main-color) 50%, rgb(250, 250, 250) 50%) 20%,
                    transparent 0%
                );
            }

            .dot-pattern.dark {
                background-image: radial-gradient(
                    circle,
                    color-mix(
                        in srgb,
                        var(--main-color-dark) 80%,
                        rgba(126, 126, 126, 0.192) 20%
                    )
                    20%,
                    transparent 0%
                );
            }

    #head-content {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        justify-content: space-evenly;
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        /* padding: 0px 50px; */
        row-gap: clamp(10px, 11vw, 80px);
        flex-wrap: wrap;
    }

    .first-content {
        display: flex;
        column-gap: 65px;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: clamp(10px, 10vw, 75px);
    }

    #introduce-text {
        /* width: 100%; */
        max-width: 665px;
        margin: 0px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* margin: 0px 60px; */
    }
        #introduce-text p {
            margin: 0px;
        }

        #introduce-text .hi {
            font-size: 30px;
            margin-bottom: 10px;

            opacity: 0;
        }
        #introduce-text .hi.load {
            animation: fadeDown 0.6s ease-out forwards;
            animation-delay: 1.5s;
        }

            .hi.light {
                color: #47474786;
            }

            .hi.dark {
                color: #969696da;
            }

        #introduce-text .intro {
            /* font-size: 50px; */
            font-size: clamp(16px, 7vw, 50px);

            opacity: 0;
        }
        #introduce-text .intro.load {
            animation: fadeDown 0.6s ease-out forwards;
            animation-delay: 0.2s;
        }

            #introduce-text .intro span {
                /* font-size: 60px; */
                font-size: clamp(16px, 8.5vw, 60px);
            }

            #job {
                color: var(--text-job);
                text-shadow: 
                    1px 1px var(--shadow-job), 
                    2px 2px var(--shadow-job),
                    3px 3px var(--shadow-job), 
                    4px 4px var(--shadow-job),
                    5px 5px var(--shadow-job);

                -webkit-transform: translateX(-8px) translateY(-8px);
                transform: translateX(-8px) translateY(-8px);
                transition: text-shadow 0.5s;
            }
                #job.light {
                    color: var(--text-job);
                    text-shadow: 
                        1px 1px var(--shadow-job), 
                        2px 2px var(--shadow-job),
                        3px 3px var(--shadow-job), 
                        4px 4px var(--shadow-job),
                        5px 5px var(--shadow-job);
                }

                #job.dark {
                    color: var(--text-job-dark);
                    text-shadow: 
                        1px 1px var(--shadow-job-dark), 
                        2px 2px var(--shadow-job-dark),
                        3px 3px var(--shadow-job-dark), 
                        4px 4px var(--shadow-job-dark),
                        5px 5px var(--shadow-job-dark);
                }

            #animation-job {
                width: 100%;
                height: 65px;
                height: clamp(10px, 9.3vw, 65px);

                position: relative;
            }

            #description {
                /* margin-top: 5px !important; */
                margin-bottom: 25px !important;

                /* first load */
                opacity: 0;
            }
            #description.load {
                animation: fadeUp 0.7s ease-out forwards;
                animation-delay: 0.5s;
            }

            #introduce-text .des {
                font-size: 20px;
                font-size: clamp(14px, 2.8vw, 20px);
            }

            .follow-container {
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                /* first load */
                opacity: 0;
            }
            .follow-container.load {
                animation: fadeUp 0.6s ease-out forwards;
                animation-delay: 1s;
            }

                .follow-container p:first-child {
                    margin-right: 15px !important;
                }

                .follow-container .element-icon {
                    width: clamp(10px, 13.5vw, 80px);
                    /* height: 50px; */
                    aspect-ratio: 1 / 1;
                    margin-left: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    position: relative;
                }

                    .hover-icon {
                    opacity: 0;
                    }

                    .element-icon i {
                    font-size: 40px;
                    }

                    .element-icon svg {
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    }

                    .element-icon:hover svg {
                    animation: biggerIcon 0.25s forwards;
                    }

                        .element-icon.light:hover .hover-icon.light {
                        animation: fadeIn 0.8s forwards;
                        }

                        .element-icon.dark:hover .hover-icon.dark {
                        animation: fadeIn 0.8s forwards;
                        }

                    /* animation icon */
                    @keyframes fadeIn {
                        from {
                            opacity: 0;
                        }
                        to {
                            opacity: 1;
                        }
                    }

                    /* animation icon */
                    @keyframes biggerIcon {
                        to {
                            height: 120%;
                            width: 120%;
                        }
                    }

        .avatar-container {
        /* width: 800px; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* padding: 0px 50px; */
        margin: 0px 25px;
        position: relative;
        }

        .avatar-container::after {
        content: "";
        height: 90%;
        width: 90%;
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        border: 5px #d8d7d750 solid;
        left: -18px;
        top: -22px;

        /* first load */
        opacity: 0;
        }
        .avatar-container.load::after {
            animation: fadeUp 1.5s ease-out forwards;
            animation-delay: 1s;
        }
            .avatar-container.light::after {
            border-color: #d8d7d750;
            }

            .avatar-container.dark::after {
            border-color: #57575759;
            }

        .avatar-container::before {
        content: "";
        height: 30%;
        width: 30%;
        position: absolute;
        z-index: -1;
        border: 6px #fcf0ab50 solid;
        right: 25px;
        bottom: 30px;
        transform: rotate(45deg);

        /* first load */
        opacity: 0;
        }
        .avatar-container.load::before {
        animation: fadeUp 1.3s ease-out forwards;
        animation-delay: 0.2s;
        }
            .avatar-container.light::before {
            border-color: #fcf0ab50;
            }

            .avatar-container.dark::before {
            border-color: #84ff541a;
            }

        #introduce-avatar {
            /* width: 50%; */
            width: clamp(10px, 77.2vw, 540px);
            /* height: 500px; */
            aspect-ratio: 1 / 1;
            position: relative;
            border: 3px rgb(252, 238, 194) solid;
            border-radius: 50%;
            overflow: hidden;

            /* first load */
            opacity: 0;
        }
        #introduce-avatar.load {
            animation: fadeUpX2 1.5s ease-out forwards;
            animation-delay: 0.4s;
        }
            #introduce-avatar.light {
            border-color: rgb(252, 238, 194);
            }

            #introduce-avatar.dark {
            border-color: rgb(34, 100, 18);
            }

            #introduce-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;

            transition: opacity 0.8s;
            }

/* count visits */

#count {
  display: flex;
  gap: 25px;
  direction: rtl;
  margin-left: 15px;
  /* margin-right: 5px; */

  writing-mode: sideways-lr;
  justify-content: center;

  /* first load */
  opacity: 0;
}
#count.load {
  animation: slideLeft 1s ease-out forwards;
    animation-delay: 1s;
}

    #count .box-count {
        /* flex-grow: 1; */
        /* padding-left: 150px; */
        direction: ltr;

        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 11px;
        margin-bottom: 20px;
    }

        .box-count p {
            font-family: "Poppins", serif;
            margin: 0px;
            display: flex;
            align-items: center;
            gap: 8px;
            /* font-size: 18px; */
        }

            .title-count {
            font-size: clamp(9px, 2.5vw, 17px);
            font-weight: 500;
            text-transform: uppercase;
            color: rgb(148, 148, 148);
            }

                #count.light .box-count .title-count {
                color: rgb(133, 133, 133);
                }

                #count.dark .box-count .title-count {
                color: rgb(116, 116, 116);
                }

            .value-count {
            font-size: 32px;
            font-size: clamp(10px, 4.6vw, 32px);
            color: rgb(126, 126, 126);
            font-weight: 500;
            }

                #count.light .box-count .value-count {
                color: rgb(110, 110, 110);
                }

                #count.dark .box-count .value-count {
                color: rgb(150, 150, 150);
                }

@media screen and (max-width: 900px) {
  #count {
    writing-mode: inherit;
    /* direction:initial; */
    justify-content: space-evenly;
    gap: 20px;
    margin: 0px;
    width: 100%;
  }

  #count .box-count {
    /* flex-grow:  1; */
    margin: 0px;
    margin-right: 20px;
  }

  #home {
    padding-top: 80px;
  }
}