[class*="card-fill"].animate{
    transition: $period-animation;
    color: inherit !important;

    &:before{ transition: $period-animation ease-in-out;}
    &:hover{
        color: var(--var-text-color) !important;
        transition: $period-animation ease-in-out;

        > .card-item { color: var(--var-text-color) !important; }
    }

    &:hover:before { bottom: 0; }
    > .card-item { --var-text-color: initial !important }
}

.card-fill-top.animate:hover:before{ top: 0; }
.card-fill-left.animate:hover:before{ left: 0; }
.card-fill-right.animate:hover:before{ right: 0; }