.btn-knob {
    --button-background: transparent;
    --button-border: currentColor;
    --button-color: var(--deep);
    --knob-color: var(--gold);
    --active-color: var(--deep);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-right: 3.4rem;
    border-color: var(--button-border);
    background: var(--button-background);
    color: var(--button-color);
    text-align: left;
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

/* Beat generic card-link colour rules while preserving variant custom properties. */
.btn.btn-knob {
    color: var(--button-color);
}

.btn-knob::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 1rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--knob-color);
    content: "";
    transform: translateY(-50%) scale(1);
    transform-origin: center;
    transition: transform 0.58s cubic-bezier(0.72, 0, 0.2, 1);
}

.btn-knob span {
    position: relative;
    z-index: 1;
}

.btn-knob:hover,
.btn-knob:focus-visible {
    border-color: var(--knob-color);
    color: var(--active-color);
    box-shadow: 0 0.8rem 2rem rgba(20, 5, 29, 0.18);
    transform: translateY(-2px);
}

.btn.btn-knob:hover,
.btn.btn-knob:focus-visible {
    color: var(--active-color);
}

.btn-knob:hover::before,
.btn-knob:focus-visible::before {
    transform: translateY(-50%) scale(34);
}

.btn-knob-gold {
    --button-background: var(--gold);
    --button-border: var(--gold);
    --button-color: var(--deep);
    --knob-color: var(--purple);
    --active-color: #fff;
}

.btn-knob-purple {
    --button-background: var(--purple);
    --button-border: var(--purple);
    --button-color: #fff;
    --knob-color: var(--gold);
    --active-color: var(--deep);
}

.btn-knob-outline {
    --button-background: transparent;
    --button-border: rgba(255, 255, 255, 0.85);
    --button-color: #fff;
    --knob-color: var(--gold);
    --active-color: var(--deep);
}

.btn-knob:disabled,
.btn-knob.disabled {
    pointer-events: none;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .btn-knob,
    .btn-knob::before {
        transition-duration: 0.01ms;
    }
}