.wavelines-projects {
    position: absolute;
    top: 0;
    right: 20px;
    height: 100%;
}

.article-projects {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.article-projects > p {
    text-align: left;
    font-size: 20px;
}
.article-projects > a {
    transform: translateY(40px);
}

.projects-div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;
    max-width: 550px;
    max-height: 90vh;
    overflow-x: scroll;
    overflow-y: visible;
}
.projects-div::-webkit-scrollbar {
    background-color: transparent;
    width: 10px;
}
.projects-div::-webkit-scrollbar-thumb {
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: 10px;
}

.title {
    text-align: center;
    margin: 0;
    margin-top: 1em;
}

.projectContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    width: 150px;
    border: 2px solid white;
    border-radius: 2.7em;
}

.hover-rec {
    background-color: rgb(255, 143, 143, 0.6);
    box-sizing: border-box;
    width: 100%;
    height: 0;
    border-radius: inherit;
    position: absolute;
}

.hover-rec::after {
    content: "Go to Project";
    color: white;
    position: absolute;

    top: 50%;
    left: 50%;
    opacity: 0;
    text-align: center;
    font-weight: 500;

    transform: translate(-50%, -50%);
}

.singleProject {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.singleProject:hover {
    .hover-rec {
        transition: all ease 0.3s;
        height: 100%;
    }

    .hover-rec::after {
        opacity: 1;
    }

    .projectImage {
        opacity: 35%;
    }
}

.projectImage {
    width: 70px;
}

.subtitle {
    margin-top: 5px;
    text-align: center;
    font-size: small;
    font-style: italic;
    font-weight: lighter;
    color: white;
}

/* ---- Projects: scroll-triggered entrance ----
   The waveline draws in, the heading/copy/CTA rise, and the project tiles
   stagger in one by one (a legitimate list stagger, driven by --i set in JS).
   All gated behind .js so the section ships fully visible without scripts. */
.js .wavelines-projects path {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
}
.js #projects.is-visible .wavelines-projects path {
    animation: wavy 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js #projects .article-projects > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}
/* The CTA anchor keeps its baseline translateY(40px) offset; fold the reveal
   lift into the same axis so it settles to that resting position, not to 0. */
.js #projects .article-projects > a {
    transform: translateY(68px);
}
.js #projects.is-visible .article-projects > * {
    opacity: 1;
    transform: translateY(0);
}
.js #projects.is-visible .article-projects > a {
    transform: translateY(40px);
}
.js #projects.is-visible .article-projects > h2 {
    --reveal-delay: 0.3s;
}
.js #projects.is-visible .article-projects > p {
    --reveal-delay: 0.42s;
}
.js #projects.is-visible .article-projects > .article-note {
    --reveal-delay: 0.5s;
}
.js #projects.is-visible .article-projects > a {
    --reveal-delay: 0.58s;
}

/* Project tiles: staggered bloom, each tile offset by its --i (set in JS). */
.js #projects .singleProject {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(0.35s + var(--i, 0) * 0.09s);
}
.js #projects.is-visible .singleProject {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width: 1120px) {
    .wavelines-projects {
        display: none;
    }
    .projects-div {
        /* overflow-x: auto; */
        flex-wrap: nowrap;
        justify-content: unset;
        align-items: unset;
        height: 210px;
        gap: 100px;
        max-width: 200px;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
    .singleproject {
        width: 100vw;
        min-width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .projects-div::-webkit-scrollbar {
        height: 10px;
    }
    .article-projects {
        max-width: 600px;
    }

    .article-projects p {
        font-size: 18px;
        padding: 0;
    }


}