/* Skills Section */
#skills {
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100svh;
    padding-block: 1em;
}

#skills > .section-title {
    margin-block: 1em;
}

.skills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items:center;
    width: 90%;
    margin-top: 2em;
}

.skills-content {
    background-color: var(--card-color);
    min-width: 550px;
    border-radius: 10px;
    flex: 1 1 calc(50% - 1em); /* Take up half the width minus gap */
    box-sizing: border-box; /* Include padding and border in width calculation */
    --webkit-backdrop-filter: blur(10px);
    padding: 1em;
}

.skills-content .skills-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skills-content .skills-header svg{
    width: 48px; height: auto;
    fill: var(--lighter-accent-color);
}

.skills-title > svg {
    fill: var(--secondary-font-color);
    width: 24px;  height: auto;
}

.skills-area-title {
    font-size: 1.75em;
    /* font-size: clamp(1.25em, 1.5em + 0.2vmax, 1.75em); */
    margin-block: .5em;
    color: var(--lighter-accent-color);
}

.skills-subtitle {
    font-size: 1em;
    /* font-size: clamp(0.75em, 0.75em + 0.2vmax, 1.25em); */
    color: var(--secondary-font-color);
}

.skills-data {
    margin-block: 1.5em;
    color: var(--secondary-font-color);
    animation: skillCardReveal 1s ease-in-out both;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 10vh;
}

.skills-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

.skills-title .skills-number {
    margin-left: auto;
}

.skills-title .skills-name {
    font-weight: 400;
}

.skills-bar,
.skills-percentage {
    height: 5px;
    border-radius: 0.25rem;
}

.skills-bar {
    background-color: var(--lighter-accent-color);
}

.skills-percentage {
    display: block;
    background: var(--accent-color);
    width: 0;
    animation: percentageReveal 1s ease-in-out both;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 15vh;
    animation-fill-mode: forwards; /* Ensure it retains the final state */
}

@keyframes percentageReveal {
    from {
        width: 0;
    }
    to {
        width: var(--_percent);
    }
}

@keyframes skillCardReveal {
    from {
        opacity: 0;
        transform: translate(-50%, 100px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}