.morpheon-morph-button {
    --morpheon-button-bg: #6F02F4;
    --morpheon-button-reveal: #FFFFFF;
    --morpheon-button-text: #FFFFFF;
    --morpheon-button-hover-text: #06064C;
    --morpheon-button-font: Grift, sans-serif;
    --morpheon-button-font-size: 16px;
    --morpheon-button-font-weight: 400;
    --morpheon-button-letter-spacing: 0.8px;
    --morpheon-button-line-height: 0.95;
    --morpheon-button-height: 54px;
    --morpheon-button-padding-x: 33px;
    --morpheon-button-radius: 38px;
    --morpheon-button-circle-size: 44px;
    --morpheon-button-duration: 1.022s;
    --morpheon-button-final-size: 308px;
    --morpheon-button-final-y: -127px;
    --morpheon-button-start-y: 45px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: max-content;
    height: var(--morpheon-button-height);
    padding: 0 var(--morpheon-button-padding-x);
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: var(--morpheon-button-radius);
    background: var(--morpheon-button-bg);
    color: var(--morpheon-button-text);
    font-family: var(--morpheon-button-font);
    font-size: var(--morpheon-button-font-size);
    font-weight: var(--morpheon-button-font-weight);
    font-style: normal;
    line-height: var(--morpheon-button-line-height);
    letter-spacing: var(--morpheon-button-letter-spacing);
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.morpheon-morph-button.is-uppercase {
    text-transform: uppercase;
}

.morpheon-morph-button:hover,
.morpheon-morph-button:focus,
.morpheon-morph-button:visited,
.morpheon-morph-button:active {
    text-decoration: none !important;
}

.morpheon-morph-button__fill {
    position: absolute;
    z-index: 1;
    left: calc(var(--morpheon-button-circle-size) * -1);
    top: var(--morpheon-button-start-y);
    width: var(--morpheon-button-circle-size);
    height: var(--morpheon-button-circle-size);
    border-radius: 50%;
    background: var(--morpheon-button-reveal);
    pointer-events: none;
    will-change: width, height, left, top;
}

.morpheon-morph-button__label {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--morpheon-button-text);
    pointer-events: none;
    will-change: color;
}

/* CSS fallback when GSAP is not present. */
.morpheon-morph-button:not(.is-gsap-enabled) .morpheon-morph-button__fill {
    transition:
        width var(--morpheon-button-duration) cubic-bezier(.22, 1, .36, 1),
        height var(--morpheon-button-duration) cubic-bezier(.22, 1, .36, 1),
        left var(--morpheon-button-duration) cubic-bezier(.22, 1, .36, 1),
        top var(--morpheon-button-duration) cubic-bezier(.22, 1, .36, 1);
}

.morpheon-morph-button:not(.is-gsap-enabled) .morpheon-morph-button__label {
    transition: color .42s cubic-bezier(.22, 1, .36, 1);
}

.morpheon-morph-button:not(.is-gsap-enabled):hover .morpheon-morph-button__fill,
.morpheon-morph-button:not(.is-gsap-enabled):focus-visible .morpheon-morph-button__fill {
    width: var(--morpheon-button-final-size);
    height: var(--morpheon-button-final-size);
    left: 0;
    top: var(--morpheon-button-final-y);
}

.morpheon-morph-button:not(.is-gsap-enabled):hover .morpheon-morph-button__label,
.morpheon-morph-button:not(.is-gsap-enabled):focus-visible .morpheon-morph-button__label {
    color: var(--morpheon-button-hover-text);
}

@media (prefers-reduced-motion: reduce) {
    .morpheon-morph-button,
    .morpheon-morph-button * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}