/* ==========================================================================
   components/motion-button.css
   Botón flotante para pausar / reanudar animaciones.
   ========================================================================== */
.motion-btn { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,15,20,.8); border: 1px solid var(--line-2); backdrop-filter: blur(8px); color: var(--muted); transition: all .3s var(--ease); }
.motion-btn:hover { color: #fff; border-color: var(--red); }
.motion-btn .mb-play, .motion-btn[aria-pressed="true"] .mb-pause { display: none; }
.motion-btn[aria-pressed="true"] .mb-play { display: grid; }
.motion-btn[aria-pressed="true"] { color: #fff; background: var(--red); border-color: var(--red); }
.motion-btn__tip { position: absolute; left: calc(100% + 10px); white-space: nowrap; font-size: .78rem; font-weight: 600; padding: .4em .8em; border-radius: 999px; background: #fff; color: #111; opacity: 0; transform: translateX(-6px); pointer-events: none; transition: all .3s var(--ease); }
.motion-btn:hover .motion-btn__tip, .motion-btn:focus-visible .motion-btn__tip { opacity: 1; transform: none; }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; }
body.motion-paused #bg3d { opacity: .55; transition: opacity .6s; }