/* View Transitions API styles */
::view-transition-old(root),
::view-transition-new(root) {
  /* Prevent the default fade animation */
  animation: none;
  /* Ensure proper mixing of colors */
  mix-blend-mode: normal;
}

/* Ensure the animation works with reduced motion preferences */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
  }
  
  ::view-transition-new(root) {
    animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in;
  }
}

/* Basic animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}