/**
 * View Transitions API - Default transition styles.
 *
 * These styles apply to all view-transition pseudo-elements by default,
 * eliminating the need for dynamic style injection based on transition names.
 *
 * Usage: Apply `view-transition-name` via inline style or CSS variable:
 *   <div style={{ viewTransitionName: 'hero' }}>...</div>
 *
 * Or via CSS:
 *   .my-element { view-transition-name: hero; }
 */

/* Default animation for all view transitions */
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 300ms;
  animation-timing-function: ease-out;
}