.mb-masquerade {
    width: 100%;
}

.mb-masquerade__figure {
    width: 100%;
}

.mb-masquerade__stage {
    aspect-ratio: var(--mb-masquerade-aspect-ratio, 16 / 9);
    isolation: isolate;
    container-type: inline-size;
    position: relative;
    transition: gap 560ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.mb-masquerade__stage::before {
    background-image: var(--mb-masquerade-image);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: var(--mb-masquerade-radius, 16px);
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 360ms ease;
    z-index: 0;
}

.mb-masquerade__item {
    background-position: var(--mb-masquerade-mask-position-x, 50%) var(--mb-masquerade-mask-position-y, 50%);
    background-size: var(--mb-masquerade-mask-background-size, cover);
    border-radius: var(--mb-masquerade-piece-radius, var(--mb-masquerade-radius, 16px));
    clip-path: var(--mb-masquerade-mask-clip-path, inset(0 round var(--mb-masquerade-piece-radius, var(--mb-masquerade-radius, 16px))));
    opacity: var(--mb-masquerade-mask-opacity, 1);
    position: relative;
    transform: var(--mb-masquerade-mask-transform, translate3d(0, 0, 0));
    transition: border-radius 560ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 560ms cubic-bezier(0.22, 1, 0.36, 1), clip-path 560ms cubic-bezier(0.22, 1, 0.36, 1), filter 560ms cubic-bezier(0.22, 1, 0.36, 1), height 560ms cubic-bezier(0.22, 1, 0.36, 1), margin 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms ease, padding 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1), width 560ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, clip-path, opacity;
    z-index: 1;
}

.mb-masquerade__item--shadow {
    box-shadow: 0 var(--mb-masquerade-shadow-distance, 18px) var(--mb-masquerade-shadow-blur, 44px) rgba(15, 23, 42, var(--mb-masquerade-shadow-opacity, 0.2));
}

.mb-masquerade__item--uses-inner {
    background-image: none;
    clip-path: none;
    overflow: visible;
}

.mb-masquerade__item--segment.mb-masquerade__item--shadow,
.mb-masquerade__item--portalFrame.mb-masquerade__item--shadow {
    box-shadow: none;
    filter: drop-shadow(0 var(--mb-masquerade-shadow-distance, 18px) var(--mb-masquerade-shadow-blur, 44px) rgba(15, 23, 42, var(--mb-masquerade-shadow-opacity, 0.2)));
    overflow: visible;
}

.mb-masquerade__stage--centerPeak,
.mb-masquerade__stage--wave,
.mb-masquerade__stage--triptych,
.mb-masquerade__stage--curtainFold,
.mb-masquerade__stage--posterFold,
.mb-masquerade__stage--diagonalShards,
.mb-masquerade__stage--archWindows,
.mb-masquerade__stage--magazineStrips {
    align-items: center;
    display: flex;
    gap: clamp(4px, var(--mb-masquerade-gap, 16px), 12px);
    justify-content: center;
}

.mb-masquerade__item--segment {
    flex: 1 1 0;
    height: var(--mb-masquerade-mask-height, 100%);
    min-height: 12px;
    min-width: 1px;
    width: auto;
}

.mb-masquerade__stage--shutterSlats {
    display: block;
    position: relative;
}

.mb-masquerade__stage--shutterSlats .mb-masquerade__item--segment {
    height: calc(var(--mb-masquerade-mask-height, 14%) - var(--mb-masquerade-gap, 16px));
    left: 0;
    min-height: 1px;
    min-width: 0;
    position: absolute;
    top: calc(var(--mb-masquerade-mask-top, 0%) + (var(--mb-masquerade-gap, 16px) / 2));
    width: 100%;
}

.mb-masquerade__stage--curtainFold .mb-masquerade__item--segment,
.mb-masquerade__stage--posterFold .mb-masquerade__item--segment {
    transform-origin: center center;
}

.mb-masquerade__stage--triptych .mb-masquerade__item--segment {
    background-size: 300% 100%;
}

.mb-masquerade__stage--diagonalShards .mb-masquerade__item--segment {
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
    transform: skewX(var(--mb-masquerade-mask-skew, 0deg));
}

.mb-masquerade__stage--archWindows {
    align-items: flex-end;
}

.mb-masquerade__stage--magazineStrips {
    align-items: flex-start;
}

.mb-masquerade__item--archWindows {
    border-radius: 999px 999px var(--mb-masquerade-piece-radius, var(--mb-masquerade-radius, 16px)) var(--mb-masquerade-piece-radius, var(--mb-masquerade-radius, 16px));
    flex: 1 1 0;
    height: var(--mb-masquerade-mask-height, 90%);
    min-height: 28%;
}

.mb-masquerade__item--magazineStrips {
    align-self: center;
}

.mb-masquerade__item--magazineStrips:nth-of-type(2n) {
    align-self: flex-start;
}

.mb-masquerade__item--magazineStrips:nth-of-type(3n) {
    align-self: flex-end;
}

.mb-masquerade__stage--mosaicCut {
    display: block;
    position: relative;
}

.mb-masquerade__stage--portalFrame {
    display: block;
    position: relative;
}

.mb-masquerade__item--mosaicCut {
    box-sizing: border-box;
    height: var(--mb-masquerade-mask-height, 40%);
    left: var(--mb-masquerade-mask-left, 0);
    overflow: visible;
    padding: var(--mb-masquerade-mosaic-gap, 8px);
    position: absolute;
    top: var(--mb-masquerade-mask-top, 0);
    width: var(--mb-masquerade-mask-width, 40%);
    z-index: var(--mb-masquerade-mask-z, 1);
}

.mb-masquerade__item--portalFrame {
    box-sizing: border-box;
    height: var(--mb-masquerade-mask-height, 40%);
    left: var(--mb-masquerade-mask-left, 0);
    position: absolute;
    top: var(--mb-masquerade-mask-top, 0);
    width: var(--mb-masquerade-mask-width, 40%);
    z-index: var(--mb-masquerade-mask-z, 1);
}

.mb-masquerade__item--mosaicCut .mb-masquerade__item-inner {
    clip-path: none;
}

.mb-masquerade__item-inner {
    background-position: var(--mb-masquerade-mask-position-x, 50%) var(--mb-masquerade-mask-position-y, 50%);
    background-repeat: no-repeat;
    background-size: var(--mb-masquerade-mask-background-size, cover);
    border-radius: inherit;
    clip-path: var(--mb-masquerade-mask-clip-path, inset(0 round var(--mb-masquerade-piece-radius, var(--mb-masquerade-radius, 16px))));
    display: block;
    height: 100%;
    transition: border-radius 560ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 560ms cubic-bezier(0.22, 1, 0.36, 1), clip-path 560ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.mb-masquerade--motion .mb-masquerade__stage--centerPeak:hover,
.mb-masquerade--motion .mb-masquerade__stage--wave:hover,
.mb-masquerade--motion .mb-masquerade__stage--triptych:hover,
.mb-masquerade--motion .mb-masquerade__stage--curtainFold:hover,
.mb-masquerade--motion .mb-masquerade__stage--posterFold:hover,
.mb-masquerade--motion .mb-masquerade__stage--shutterSlats:hover,
.mb-masquerade--motion .mb-masquerade__stage--diagonalShards:hover,
.mb-masquerade--motion .mb-masquerade__stage--archWindows:hover,
.mb-masquerade--motion .mb-masquerade__stage--magazineStrips:hover {
    border-radius: var(--mb-masquerade-radius, 16px);
    gap: 0;
}

.mb-masquerade--motion .mb-masquerade__stage--centerPeak:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--wave:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--triptych:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--curtainFold:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--posterFold:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--shutterSlats:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--diagonalShards:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--archWindows:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--magazineStrips:hover::before,
.mb-masquerade--motion .mb-masquerade__stage--portalFrame:hover::before {
    opacity: 1;
}

.mb-masquerade--motion .mb-masquerade__stage:hover .mb-masquerade__item--segment {
    border-radius: 0;
    height: 100%;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.mb-masquerade--motion .mb-masquerade__stage:hover .mb-masquerade__item--segment .mb-masquerade__item-inner {
    clip-path: none;
}

.mb-masquerade--motion .mb-masquerade__stage:hover .mb-masquerade__item--segment:first-of-type {
    border-radius: var(--mb-masquerade-radius, 16px) 0 0 var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage:hover .mb-masquerade__item--segment:last-of-type {
    border-radius: 0 var(--mb-masquerade-radius, 16px) var(--mb-masquerade-radius, 16px) 0;
}

.mb-masquerade--motion .mb-masquerade__stage--centerPeak:hover .mb-masquerade__item--segment,
.mb-masquerade--motion .mb-masquerade__stage--wave:hover .mb-masquerade__item--segment,
.mb-masquerade--motion .mb-masquerade__stage--triptych:hover .mb-masquerade__item--segment,
.mb-masquerade--motion .mb-masquerade__stage--curtainFold:hover .mb-masquerade__item--segment,
.mb-masquerade--motion .mb-masquerade__stage--archWindows:hover .mb-masquerade__item--segment,
.mb-masquerade--motion .mb-masquerade__stage--magazineStrips:hover .mb-masquerade__item--segment {
    margin-left: -1px;
    margin-right: -1px;
}

.mb-masquerade--motion .mb-masquerade__stage--centerPeak:hover .mb-masquerade__item--segment:first-of-type,
.mb-masquerade--motion .mb-masquerade__stage--wave:hover .mb-masquerade__item--segment:first-of-type,
.mb-masquerade--motion .mb-masquerade__stage--triptych:hover .mb-masquerade__item--segment:first-of-type,
.mb-masquerade--motion .mb-masquerade__stage--curtainFold:hover .mb-masquerade__item--segment:first-of-type,
.mb-masquerade--motion .mb-masquerade__stage--archWindows:hover .mb-masquerade__item--segment:first-of-type,
.mb-masquerade--motion .mb-masquerade__stage--magazineStrips:hover .mb-masquerade__item--segment:first-of-type {
    margin-left: 0;
}

.mb-masquerade--motion .mb-masquerade__stage--centerPeak:hover .mb-masquerade__item--segment:last-of-type,
.mb-masquerade--motion .mb-masquerade__stage--wave:hover .mb-masquerade__item--segment:last-of-type,
.mb-masquerade--motion .mb-masquerade__stage--triptych:hover .mb-masquerade__item--segment:last-of-type,
.mb-masquerade--motion .mb-masquerade__stage--curtainFold:hover .mb-masquerade__item--segment:last-of-type,
.mb-masquerade--motion .mb-masquerade__stage--archWindows:hover .mb-masquerade__item--segment:last-of-type,
.mb-masquerade--motion .mb-masquerade__stage--magazineStrips:hover .mb-masquerade__item--segment:last-of-type {
    margin-right: 0;
}

.mb-masquerade--motion .mb-masquerade__stage--diagonalShards:hover .mb-masquerade__item--segment {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -1px;
    margin-right: -1px;
    transform: translate3d(0, 0, 0);
}

.mb-masquerade--motion .mb-masquerade__stage--diagonalShards:hover .mb-masquerade__item--segment:first-of-type {
    margin-left: 0;
}

.mb-masquerade--motion .mb-masquerade__stage--diagonalShards:hover .mb-masquerade__item--segment:last-of-type {
    margin-right: 0;
}

.mb-masquerade--motion .mb-masquerade__stage--diagonalShards:hover .mb-masquerade__item-inner {
    clip-path: none;
}

.mb-masquerade--motion .mb-masquerade__stage--curtainFold:hover .mb-masquerade__item--segment,
.mb-masquerade--motion .mb-masquerade__stage--posterFold:hover .mb-masquerade__item--segment {
    clip-path: inset(0);
    transform: translate3d(0, 0, 0) rotate(0deg);
}

.mb-masquerade--motion .mb-masquerade__stage--posterFold:hover .mb-masquerade__item--segment {
    margin-left: -1px;
    margin-right: -1px;
}

.mb-masquerade--motion .mb-masquerade__stage--posterFold:hover .mb-masquerade__item--segment:first-of-type {
    margin-left: 0;
}

.mb-masquerade--motion .mb-masquerade__stage--posterFold:hover .mb-masquerade__item--segment:last-of-type {
    margin-right: 0;
}

.mb-masquerade--motion .mb-masquerade__stage--curtainFold:hover .mb-masquerade__item-inner,
.mb-masquerade--motion .mb-masquerade__stage--posterFold:hover .mb-masquerade__item-inner {
    clip-path: none;
}

.mb-masquerade--motion .mb-masquerade__stage--archWindows:hover .mb-masquerade__item--segment {
    border-radius: 0;
    height: 100%;
    transform: translate3d(0, 0, 0);
}

.mb-masquerade--motion .mb-masquerade__stage--shutterSlats:hover .mb-masquerade__item--segment {
    border-radius: 0;
    clip-path: inset(0);
    height: calc(var(--mb-masquerade-mask-height, 14%) + 1px);
    left: 0;
    opacity: 1;
    top: calc(var(--mb-masquerade-mask-top, 0%) - 0.5px);
    transform: translate3d(0, 0, 0) rotate(0deg);
    width: 100%;
}

.mb-masquerade--motion .mb-masquerade__stage--shutterSlats:hover .mb-masquerade__item-inner {
    clip-path: none;
}

.mb-masquerade--motion .mb-masquerade__stage--shutterSlats:hover .mb-masquerade__item--segment:first-of-type {
    border-radius: var(--mb-masquerade-radius, 16px) var(--mb-masquerade-radius, 16px) 0 0;
}

.mb-masquerade--motion .mb-masquerade__stage--shutterSlats:hover .mb-masquerade__item--segment:last-of-type {
    border-radius: 0 0 var(--mb-masquerade-radius, 16px) var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage--mosaicCut:hover .mb-masquerade__item {
    height: calc(var(--mb-masquerade-mask-height, 40%) + 1.5px);
    left: calc(var(--mb-masquerade-mask-left, 0%) - 0.75px);
    padding: 0;
    top: calc(var(--mb-masquerade-mask-top, 0%) - 0.75px);
    width: calc(var(--mb-masquerade-mask-width, 40%) + 1.5px);
}

.mb-masquerade--motion .mb-masquerade__stage--portalFrame:hover {
    border-radius: var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage--portalFrame:hover .mb-masquerade__item {
    border-radius: 0;
    clip-path: inset(0);
    height: calc(var(--mb-masquerade-mask-height, 40%) + 1.5px);
    left: calc(var(--mb-masquerade-mask-left, 0%) - 0.75px);
    opacity: 1;
    top: calc(var(--mb-masquerade-mask-top, 0%) - 0.75px);
    transform: translate3d(0, 0, 0) rotate(0deg);
    width: calc(var(--mb-masquerade-mask-width, 40%) + 1.5px);
}

.mb-masquerade--motion .mb-masquerade__stage--portalFrame:hover .mb-masquerade__item-inner {
    clip-path: none;
}

.mb-masquerade--motion .mb-masquerade__stage--portalFrame:hover .mb-masquerade__item--corner-tl {
    border-top-left-radius: var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage--portalFrame:hover .mb-masquerade__item--corner-tr {
    border-top-right-radius: var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage--portalFrame:hover .mb-masquerade__item--corner-bl {
    border-bottom-left-radius: var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage--portalFrame:hover .mb-masquerade__item--corner-br {
    border-bottom-right-radius: var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage:hover .mb-masquerade__item--shadow {
    box-shadow: 0 0 0 rgba(15, 23, 42, 0);
    filter: drop-shadow(0 0 0 rgba(15, 23, 42, 0));
}

.mb-masquerade--motion .mb-masquerade__stage--mosaicCut:hover .mb-masquerade__item-inner {
    border-radius: 0;
    clip-path: none;
}

.mb-masquerade--motion .mb-masquerade__stage--mosaicCut:hover .mb-masquerade__item--corner-tl .mb-masquerade__item-inner {
    border-top-left-radius: var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage--mosaicCut:hover .mb-masquerade__item--corner-tr .mb-masquerade__item-inner {
    border-top-right-radius: var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage--mosaicCut:hover .mb-masquerade__item--corner-bl .mb-masquerade__item-inner {
    border-bottom-left-radius: var(--mb-masquerade-radius, 16px);
}

.mb-masquerade--motion .mb-masquerade__stage--mosaicCut:hover .mb-masquerade__item--corner-br .mb-masquerade__item-inner {
    border-bottom-right-radius: var(--mb-masquerade-radius, 16px);
}

@media (max-width: 640px) {
    .mb-masquerade__stage--centerPeak,
    .mb-masquerade__stage--wave,
    .mb-masquerade__stage--triptych,
    .mb-masquerade__stage--curtainFold,
    .mb-masquerade__stage--posterFold,
    .mb-masquerade__stage--diagonalShards,
    .mb-masquerade__stage--archWindows,
    .mb-masquerade__stage--magazineStrips {
        gap: clamp(4px, var(--mb-masquerade-gap, 16px), 8px);
    }

    .mb-masquerade__stage--shutterSlats {
        gap: clamp(4px, var(--mb-masquerade-gap, 16px), 8px);
    }
}