/* ============================================
   JOSEPH SAN - SMOOTH LINK ANIMATIONS
   Transform-based, not opacity-based
   ============================================ */

.link-wrapper {
    vertical-align: top;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

/* Standard link with underline that slides out on hover */
.link {
    vertical-align: top;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.link::after {
    content: '';
    transform-origin: left;
    background: currentColor;
    width: 100%;
    height: 1px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(1);
}

.link:hover::after {
    transform-origin: right;
    transform: scaleX(0);
}

/* Hidden link that slides in on hover */
.link-hidden {
    vertical-align: top;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.link-hidden::after {
    content: '';
    transform-origin: right;
    background: currentColor;
    width: 100%;
    height: 1px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
}

.link-hidden:hover::after {
    transform-origin: left;
    transform: scaleX(1);
}

/* Separate underline component for more complex layouts */
.link__line {
    content: '';
    background: currentColor;
    width: 100%;
    height: 1px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: absolute;
    bottom: 0;
    left: 0;
}

.link__line--visible {
    transform-origin: left;
    transform: scaleX(1);
}

.link__line--hidden {
    transform-origin: right;
    transform: scaleX(0);
}