/* === Reusable motion primitives (overlay fade + surface zoom) ===
 * Use on any overlay/dialog:
 *   overlay: class="ducky-motion-overlay" + is-motion-enter | is-motion-exit
 *   surface: class="ducky-motion-surface" + is-motion-enter | is-motion-exit
 * JS helpers: DuckyUI.motion.enterPair / exitPair
 */

:root {
  --ducky-motion-overlay-duration: 200ms;
  --ducky-motion-surface-duration: 240ms;
  --ducky-motion-surface-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ducky-motion-surface-scale-from: 0.92;
}

.ducky-motion-overlay,
.ducky-motion-surface {
  animation-fill-mode: both;
  will-change: opacity, transform;
}

.ducky-motion-overlay {
  opacity: 0;
  animation-duration: var(--ducky-motion-overlay-duration);
  animation-timing-function: ease;
}

.ducky-motion-surface {
  opacity: 0;
  transform: scale(var(--ducky-motion-surface-scale-from));
  transform-origin: center center;
  animation-duration: var(--ducky-motion-surface-duration);
  animation-timing-function: var(--ducky-motion-surface-ease);
}

.ducky-motion-overlay.is-motion-enter {
  animation-name: ducky-motion-overlay-in;
}

.ducky-motion-overlay.is-motion-exit {
  animation-name: ducky-motion-overlay-out;
}

.ducky-motion-surface.is-motion-enter {
  animation-name: ducky-motion-surface-in;
}

.ducky-motion-surface.is-motion-exit {
  animation-name: ducky-motion-surface-out;
}

@keyframes ducky-motion-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ducky-motion-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes ducky-motion-surface-in {
  from {
    opacity: 0;
    transform: scale(var(--ducky-motion-surface-scale-from));
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ducky-motion-surface-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(var(--ducky-motion-surface-scale-from));
  }
}