.ati-motion-icon {
    width: var(--ati-motion-icon-size, 32px);
    height: var(--ati-motion-icon-size, 32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 8px;
    transform-origin: 50% 70%;
    will-change: transform, filter;
    z-index: 20;
}

.ati-motion-stage {
    position: relative;
    width: min(100%, var(--ati-motion-stage-width, 240px));
    min-height: var(--ati-motion-stage-height, calc(var(--ati-motion-icon-size, 32px) + 8px));
    overflow: visible;
    z-index: 15;
}

.ati-motion-stage .ati-motion-icon {
    position: absolute;
    left: 0;
    top: 0;
}

.ati-motion-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.ati-motion-icon--soft {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .ati-motion-icon {
        transform: none !important;
    }
}