/* Only transform and opacity change during opening/closing. Promote layers briefly. */
[data-surface-motion]{ transform-origin:center; }
[data-surface-motion="opening"], [data-surface-motion="closing"]{ will-change:transform,opacity; }
[data-surface-motion="closing"] > *{ pointer-events:none; }
[data-surface-motion="opening"]::backdrop{ animation:surface-shade-in 360ms ease-out both; }
[data-surface-motion="closing"]::backdrop{ animation:surface-shade-out 240ms ease-in both; }
@keyframes surface-shade-in { from { opacity:0; } to { opacity:1; } }
@keyframes surface-shade-out { from { opacity:var(--surface-shade-from,1); } to { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  [data-surface-motion]::backdrop{ animation:none; }
}