.hover-invert {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-invert:hover {
    background-color: var(--color-ink);
    color: var(--color-paper);
}

.btn-geometric {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.btn-geometric::before {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: var(--color-ink);
    content: "";
    transition: left 0.3s ease;
}

.btn-geometric:hover::before {
    left: 0;
}

.btn-geometric:hover {
    color: var(--color-paper);
}

.process-card {
    transition: background-color 0.4s ease, border-color 0.4s ease,
        box-shadow 0.4s ease, opacity 0.5s ease, transform 0.5s ease;
}

.process-step .process-card {
    opacity: 0.45;
    transform: translateY(1rem);
}

.process-step:hover .process-card,
.process-step.is-active .process-card {
    border-color: rgb(253 253 253 / 80%);
    background-color: #050505;
    box-shadow: 0 0 20px rgb(253 253 253 / 8%),
        inset 0 0 10px rgb(253 253 253 / 3%);
    opacity: 1;
    transform: translateY(0);
}

.process-step.is-active .process-number {
    color: #d4d4d8;
}

.process-step.is-active .process-node {
    border-color: var(--color-paper);
    box-shadow: 0 0 12px rgb(255 255 255 / 40%);
}

.process-step.is-active .process-node-dot {
    background-color: var(--color-paper);
}