/* link.css — Link with animated underline */

.link {
    color: var(--accent);
    text-decoration: none;
    position: relative;
    display: inline-block;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 2px;
    transition: color 0.15s var(--ease), background-size 0.2s var(--ease);
}

.link:hover {
    background-size: 100% 1px;
}