@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&family=Salsa&display=swap');
.softwareGrid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 30px;
    padding: 20px 10px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    transform-origin: left;
}

.softwareGrid::-webkit-scrollbar {
    height: 10px;
}

.softwareGrid::-webkit-scrollbar-thumb {
    background: #2e2e2e;
    border-radius: 5px;
}

.softwareTile {
    position: relative;
    background: #1f1f21;
    border-radius: 32px;
    padding: 8px 16px;
    min-width: 210px;
    max-width: 230px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px; /* even thinner */
    box-shadow: 8px 8px 16px #121212, -8px -8px 16px #2c2c2e;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    /* Remove default border */
    border: none;
}

.softwareTile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 2px; /* thickness of the border */
    background: linear-gradient(
        90deg,
        #6a11cb 0%,
        #2575fc var(--proficiency-level, 80%),
        #2e2e2e var(--proficiency-level, 80%),
        #2e2e2e 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

.softwareTile:hover {
    transform: translateY(-6px);
    box-shadow: 6px 6px 12px #101010, -6px -6px 12px #2a2a2c;
}

.softwareLogo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: inset 2px 2px 6px #121212, inset -2px -2px 6px #2c2c2e;
    flex-shrink: 0;
}

.softwareTileContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    gap: 2px;
}

.softwareName {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
    text-align: left;
}

.proficiencyBarContainer {
    display: none; /* Hide the old bar */
}

.proficiencyBar {
    height: 100%;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    width: 0;
    animation: fillProficiency 1.2s ease-out forwards;
    border-radius: 50px;
}

.softwareDescription {
    display: none; /* Hide to keep it pill-sized. Remove this if needed */
}

@keyframes fillProficiency {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
