.skills-wrapper {
    height: 100vh;

    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.background-skills1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 50%;
}
.background-skills2 {
    background: url(../img/rectangle-skills.svg) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 50%;
}

.skills-ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 550px;
    max-height: 50%;
    gap: 1em;
}
.skills-ul > li {
    z-index: 2;
    padding: 0.3em 1.5em;
    text-align: center;
    background-color: var(--purple);
    border-radius: 5em;
    width: fit-content;
    list-style-type: none;
}
.article-skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
    text-align: left;
}
.article-note {
    font-weight: lighter;
    font-style: italic;
    font-size: 15px;
}

/* ---- Skills: scroll-triggered entrance ----
   No waveline here (the section carries the SVG rectangle motif instead), so
   the reveal is the heading + copy rising, then the skill chips blooming in a
   staggered sweep. Chip stagger caps under ~1.1s across all 13 chips. */
.js #skills .article-skills > * {
    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);
}
.js #skills.is-visible .article-skills > * {
    opacity: 1;
    transform: translateY(0);
}
.js #skills.is-visible .article-skills > h2 {
    --reveal-delay: 0.25s;
}
.js #skills.is-visible .article-skills > p {
    --reveal-delay: 0.37s;
}

/* Skill chips: staggered bloom. nth-child drives the offset so no JS is needed
   for the static chip list. */
.js #skills .skills-ul > li {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}
.js #skills.is-visible .skills-ul > li {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.js #skills.is-visible .skills-ul > li:nth-child(1) { --reveal-delay: 0.45s; }
.js #skills.is-visible .skills-ul > li:nth-child(2) { --reveal-delay: 0.51s; }
.js #skills.is-visible .skills-ul > li:nth-child(3) { --reveal-delay: 0.57s; }
.js #skills.is-visible .skills-ul > li:nth-child(4) { --reveal-delay: 0.63s; }
.js #skills.is-visible .skills-ul > li:nth-child(5) { --reveal-delay: 0.69s; }
.js #skills.is-visible .skills-ul > li:nth-child(6) { --reveal-delay: 0.75s; }
.js #skills.is-visible .skills-ul > li:nth-child(7) { --reveal-delay: 0.81s; }
.js #skills.is-visible .skills-ul > li:nth-child(8) { --reveal-delay: 0.87s; }
.js #skills.is-visible .skills-ul > li:nth-child(9) { --reveal-delay: 0.93s; }
.js #skills.is-visible .skills-ul > li:nth-child(10) { --reveal-delay: 0.99s; }
.js #skills.is-visible .skills-ul > li:nth-child(11) { --reveal-delay: 1.05s; }
.js #skills.is-visible .skills-ul > li:nth-child(12) { --reveal-delay: 1.11s; }
.js #skills.is-visible .skills-ul > li:nth-child(13) { --reveal-delay: 1.17s; }

@media(max-width: 1120px){
    .skills-wrapper {
        flex-direction: column;
        justify-content: space-evenly;
        padding: 1em;
        gap: 0.8em;
    }
    .background-skills1 {
        height: unset;
        width: unset;
    }
    .background-skills2 {
        background: none;
        height: unset;
        width: unset;
    }
    .skills-ul {
        flex-wrap: wrap;
        max-width: 600px;
        max-height: unset;
        gap: 1em;
        padding: 0 0.5em;
        margin: 0;
    }
    .skills-ul > li {
        background-color: rgb(255, 255, 255, 0.3);
        font-size: 1rem;
    }
    .article-skills {
        max-width: 600px;
    }
    .article-skills p {
        font-size: 18px;
        padding: 0;
    }
}
@media(max-width: 480px){
    .skills-ul {
        gap: 0.6em;
    }
}