.altaonix-hero-motion { position: relative; }
.altaonix-hero-motion > canvas {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 560;
    pointer-events: none;
}
.altaonix-hero-motion.is-animated > img { opacity: 0; }
.altaonix-hero-motion > .altaonix-motion-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--wp--preset--color--outline, #353a30);
    border-radius: 50%;
    background: var(--wp--preset--color--surface, #191c18);
    color: var(--wp--preset--color--muted, #b0b5a9);
    cursor: pointer;
}
.altaonix-motion-toggle:hover { color: var(--wp--preset--color--accent, #d0f479); }
.altaonix-motion-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--accent, #d0f479); outline-offset: 4px; }
.altaonix-motion-toggle > svg { width: 16px; height: 16px; fill: currentColor; }
.altaonix-motion-toggle .motion-play { display: none; }
.altaonix-motion-toggle[data-paused="true"] .motion-play { display: block; }
.altaonix-motion-toggle[data-paused="true"] .motion-pause { display: none; }