/* UI Classes */
.glass {
    position: relative;
    background: var(--uiGlass);
    backdrop-filter: var(--uiBlur) saturate(185%) brightness(110%);

    border-radius: var(--r);
    box-shadow:
        0 0px 24px rgba(31, 38, 135, 0.15), /* soft outer shadow */
        inset 0 0px 2px rgba(255, 255, 255, 0.1); /* subtle inner glow */

    transition: all 200ms ease-in-out;
}
.glass:hover {
    background: var(--uiGlassHightlight);
    backdrop-filter: var(--uiBlur) saturate(190%) brightness(112%);
    box-shadow:
        0 0px 24px rgba(31, 38, 135, 0.15), /* soft outer shadow */
        inset 0 0px 4px rgba(255, 255, 255, 0.3); /* subtle inner glow */
}

.glassNH {
    position: relative;
    background: var(--uiGlass);
    backdrop-filter: var(--uiBlur) saturate(180%) brightness(108%);

    border-radius: var(--r);
    box-shadow:
        0 0px 24px rgba(31, 38, 135, 0.15), /* soft outer shadow */
        inset 0 0px 4px rgba(255, 255, 255, 0.1); /* subtle inner glow */

    transition: all 100ms linear;
}

/* UI Shaping */
.uiCapsule {
    position: relative;
    cursor: pointer;

    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;

    min-width: 2.5rem;
    height: 2.5rem;
}
.uiIcon {
    pointer-events: none;

    min-width: 1.25rem;
    height: 1.25rem;
}

.audioCapsule {
    position: relative;
    cursor: pointer;

    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;

    min-width: 2rem;
    height: 2rem;
}
.audioIcon {
    pointer-events: none;

    min-width: 1rem;
    height: 1rem;
}

.capsule {
    min-width: 3rem;
    height: 3rem;
}


/* MEDIA PLAYER UI */
.capsule00 {
    min-width: 2.5rem;
    height: 2.5rem;
}
.icon {
    pointer-events: none;

    min-width: 1.5rem;
    height: 1.5rem;
}


/* Shadow */
.nneomorphism {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(255, 255, 255, 0.05);
    transition: all 200ms ease-in-out;
}
.nneomorphism2 {
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.4), inset 4px 4px 8px rgba(255, 255, 255, 0.05);

}

/* Skills / Abilities */
.bounce:hover {
    animation: bounce 0.3s;
}
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

.scrollText {
    display: inline-flex;
    animation: scrollTextAnim 10s linear infinite;

}
@keyframes scrollTextAnim {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}



.no-scroll {
    overflow: hidden;
    pointer-events: none;
}