/* Shared button hover animation inspired by the welcome screen CTA */
.hireMe__button a,
.home__buttons a,
.home__buttons button,
.contact > a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hireMe__button a::after,
.home__buttons a::after,
.home__buttons button::after,
.contact > a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Normal: filled first, empties on hover like the welcome button. */
.hireMe__button a,
.home__buttons a {
    border: 2px solid var(--secondary-bg-color);
    background: transparent;
    color: #fff;
}

.hireMe__button a::after,
.home__buttons a::after {
    background: var(--secondary-bg-color);
    transform: translateX(0);
}

.hireMe__button a:hover,
.home__buttons a:hover {
    color: var(--secondary-bg-color);
    background: transparent;
}

.hireMe__button a:hover::after,
.home__buttons a:hover::after {
    transform: translateX(-100%);
}

/* Inverse: empty first, fills on hover. */
.home__buttons button,
.contact > a {
    background: transparent;
}

.home__buttons button {
    border: 2px solid #fff;
    color: #fff;
}

.contact > a {
    border: 2px solid var(--secondary-bg-color);
    color: #a3a3a3;
}

.home__buttons button::after,
.contact > a::after {
    background: var(--secondary-bg-color);
    transform: translateX(-100%);
}

.home__buttons button:hover,
.contact > a:hover {
    border-color: var(--secondary-bg-color);
    color: #fff;
}

.home__buttons button:hover::after,
.contact > a:hover::after {
    transform: translateX(0);
}

.contact > a span,
.contact > a i {
    color: inherit;
}