:root {
    --motion-fx-layer-z: 12000;
}

.motion-fx-layer {
    position: fixed;
    inset: 0;
    z-index: var(--motion-fx-layer-z);
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.motion-fx-instance {
    position: fixed;
    display: block;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.motion-fx-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.motion-fx-instance--panel {
    opacity: 0.32;
}

.motion-fx-inline-loader {
    display: inline-grid;
    width: 1.35em;
    height: 1.35em;
    place-items: center;
    vertical-align: -0.28em;
}

.motion-fx-inline-loader > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .motion-fx-layer,
    .motion-fx-inline-loader {
        display: none !important;
    }
}