.mim-stage {
    position: relative;
    width: 100%;
    height: var(--mim-height, auto);
    aspect-ratio: var(--mim-ratio, 3.32);
    overflow: hidden;
    isolation: isolate;
    background: var(--mim-color, #fff);
    --mim-dx: 0px;
    --mim-dy: 0px;
}
.mim-frame {
    position: absolute;
    left: var(--mim-x, 50%);
    top: var(--mim-y, 50%);
    width: var(--mim-width, 96%);
    height: var(--mim-mask-height, 90%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.mim-cutout {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: var(--mim-mask, none);
    mask-image: var(--mim-mask, none);
    -webkit-mask-size: var(--mim-mask-fit, contain);
    mask-size: var(--mim-mask-fit, contain);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: var(--mim-mask-mode, alpha);
    transform: translate3d(var(--mim-dx), var(--mim-dy), 0);
    transition: transform var(--mim-smoothing, 180ms) ease-out;
}
.mim-photo-plane {
    position: absolute;
    left: var(--mim-photo-left);
    top: var(--mim-photo-top);
    width: var(--mim-photo-width);
    height: var(--mim-photo-height);
    transition: transform var(--mim-smoothing, 180ms) ease-out;
}
/* Equal and opposite translation cancels the mask's movement for the photo.
   The photo plane covers the whole stage, matching the optional backdrop. */
.mim-stage[data-target="mask"] .mim-photo-plane {
    transform: translate3d(calc(-1 * var(--mim-dx)), calc(-1 * var(--mim-dy)), 0);
}
.mim-stage .mim-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: var(--mim-image-fit, cover);
    object-position: var(--mim-image-x, 50%) var(--mim-image-y, 50%);
    transform-origin: var(--mim-image-x, 50%) var(--mim-image-y, 50%);
    pointer-events: none;
}
.mim-backdrop {
    position: absolute;
    inset: 0;
    opacity: var(--mim-background-opacity, .15);
    pointer-events: none;
}
.mim-stage[data-zoom="1"] .mim-image {
    animation: mim-breathe var(--mim-duration, 12s) ease-in-out infinite alternate;
}
.mim-stage.mim-paused .mim-image { animation-play-state: paused; }
.mim-stage .mim-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 24px;
    font: 16px/1.6 sans-serif;
    text-align: center;
    color: #555;
    border: 1px dashed #999;
}
@keyframes mim-breathe {
    from { transform: scale(1); }
    to { transform: scale(var(--mim-zoom, 1.08)); }
}
@media (max-width: 767.98px) {
    .mim-stage { height: var(--mim-mobile-height, auto); }
}
@media (prefers-reduced-motion: reduce) {
    .mim-stage[data-zoom="1"] .mim-image { animation: none; }
    .mim-stage .mim-cutout { transform: none; transition: none; }
    .mim-stage .mim-photo-plane { transform: none; transition: none; }
}