.rmbe-effect-heat {
    background: #0b0a0f;
    border: 1px solid rgba(129, 76, 44, 0.62);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.66),
        inset 0 1px 0 rgba(255, 178, 92, 0.035),
        0 0 0 1px rgba(65, 22, 16, 0.18);
}

.rmbe-effect-heat .rmbe-button__surface {
    background:
        radial-gradient(circle 52px at var(--rmbe-x) var(--rmbe-y),
            rgba(255, 119, 26, calc(var(--rmbe-active) * 0.20)) 0%,
            rgba(180, 28, 88, calc(var(--rmbe-active) * 0.13)) 36%,
            rgba(55, 8, 67, calc(var(--rmbe-active) * 0.08)) 58%,
            transparent 78%),
        linear-gradient(180deg, rgba(19, 17, 22, 0.98), rgba(8, 7, 11, 0.99));
    transition: opacity 180ms ease;
}

.rmbe-effect-heat .rmbe-button__waves {
    z-index: 1;
}

.rmbe-heat-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.rmbe-effect-heat .rmbe-button__label {
    z-index: 3;
    color: #f8f5f4;
    text-shadow:
        0 1px 5px rgba(0, 0, 0, 0.78),
        0 0 10px rgba(255, 119, 46, 0.09);
}

.rmbe-effect-heat:hover,
.rmbe-effect-heat:focus-visible {
    border-color: rgba(220, 112, 50, 0.70);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 190, 112, 0.06),
        0 0 12px rgba(173, 43, 27, 0.10);
}

@media (prefers-reduced-motion: reduce) {
    .rmbe-effect-heat .rmbe-button__surface {
        transition: none;
    }
}