@import url('./variable.css');

/* PROJECTS */
.projects {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10dvh;
}

.projects-gap {
    gap: var(--gap-medium);
}

.project-link {
    width: 100%;
}

/* PROJECT DIV */
.project-div {
    width: 100%;
    padding: min(5%, var(--padding-big));
    border-radius: var(--border-radius);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.8dvh;

    background-color: black;

    box-sizing: border-box;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.project-homepage {
    height: var(--height-line);
    background-image: var(--project-gradient-homepage), var(--project-image);
}

.project-main {
    height: var(--height-main);
    background-image: var(--project-gradient-main), var(--project-image);
}

.project-line {
    height: var(--height-line);
    background-image: var(--project-gradient-line), var(--project-image);
}


@keyframes project-div-animation {
    from {
        height: var(--height-line);
    }

    to {
        height: var(--height-main);
    }
}

@supports (animation-timeline: view()) {
    .project-homepage {
        animation: project-div-animation cubic-bezier(0.64, 0.01, 0.69, 0.57) both;
        animation-timeline: view(block);
        animation-range: cover 0% contain 40%;
    }
}


.project-1 {
    view-transition-name: project-div-1;
    --project-image: url('../assets/img/homepage/project-1.webp');
}

.project-2 {
    view-transition-name: project-div-2;
    --project-image: url('../assets/img/homepage/project-2.webp');
}

.project-3 {
    view-transition-name: project-div-3;
    --project-image: url('../assets/img/homepage/project-3.webp');
}

.project-4 {
    view-transition-name: project-div-4;
    --project-image: url('../assets/img/homepage/project-4.webp');
}

.project-5 {
    view-transition-name: project-div-5;
    --project-image: url('../assets/img/homepage/project-5.webp');
}

.project-6 {
    view-transition-name: project-div-6;
    --project-image: url('../assets/img/homepage/project-6.webp');
}

.project-7 {
    view-transition-name: project-div-7;
    --project-image: url('../assets/img/homepage/project-7.webp');
}

.project-8 {
    view-transition-name: project-div-8;
    --project-image: url('../assets/img/homepage/project-8.webp');
}

.project-9 {
    view-transition-name: project-div-9;
    --project-image: url('../assets/img/homepage/project-9.webp');
}

.project-10 {
    view-transition-name: project-div-10;
    --project-image: url('../assets/img/homepage/project-10.webp');
}


.project-content {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--padding-big);
}