/*
Mask Button
*/
a.bc-mask-button{
    cursor: pointer;
}
.bc-mask-button{
    all: unset;

    --bg: rgba(0,0,0);
    --fg: hsl(0 0% 90%);
    --button-bg: var(--bg);
    --button-fg: var(--fg);
    --transition-duration: 0.5s; /*duration*/
    color: var(--button-fg);
    /*typography*/
    padding: 15px 30px; /*padding*/
    border-radius: 0;
    background: var(--button-bg); 
    touch-action: none;
    position: relative;
    overflow: hidden;

    display: grid;
    width: fit-content;
}

.bc-mask-button__title{
    position: relative;
    mix-blend-mode: difference;
}

.bc-mask-button__back{
    will-change: transform;
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bc-mask-button__back > span{
    left: calc(var(--x, 0) * 1px);
    top: calc(var(--y, 0) * 1px);
    width: 50%; /*width de la mask*/
    display: inline-block;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(var(--active, 0));
    transition: transform; 
    transition-duration: calc(var(--transition-duration) / 2); /*exit duration*/
    background: hsl(0 0% 90%);
    position: absolute;
    pointer-events: none;
    overflow: hidden;
    --border-radius2-top: 100px; /*border-radius*/
    --border-radius2-left: 100px; /*border-radius*/
    --border-radius2-bottom: 100px; /*border-radius*/
    --border-radius2-right: 100px; /*border-radius*/
    border-radius: var(--border-radius2-top) var(--border-radius2-left) var(--border-radius2-bottom) var(--border-radius2-right); /*border de la mask*/
}

.bc-mask-button:is(:hover, :focus-visible) {
    --active: 1.5;
}

.bc-mask-button:active {
    --active: 3;
}

.bc-mask-button:active .bc-mask-button__back > span {
    transition: transform 0.15s; 
}

@supports (transition-timing-function: linear(0, 1)) {
.bc-mask-button:is(:hover, :focus-visible) .bc-mask-button__back > span {
    transition-duration: var(--transition-duration); /**/
    transition-timing-function: linear(
    0, 0.5007 7.21%, 0.7803 12.29%,
    0.8883 14.93%, 0.9724 17.63%,
    1.0343 20.44%, 1.0754 23.44%,
    1.0898 25.22%, 1.0984 27.11%,
    1.1014 29.15%, 1.0989 31.4%,
    1.0854 35.23%, 1.0196 48.86%,
    1.0043 54.06%, 0.9956 59.6%,
    0.9925 68.11%, 1
    );
}
}