/* Assign unique transition names */
#content-section {
  view-transition-name: content-transition;
}

#upper-right-section {
  view-transition-name: graph-transition;
}

::view-transition-old(content-transition) {
  animation: slideToBottom 0.3s ease-in-out;
  animation-fill-mode: forwards; /* Keep final state */
}

::view-transition-new(content-transition) {
  animation: slideFromTop 0.3s ease-in-out;
  animation-fill-mode: forwards; /* Keep final state */
}

@keyframes slideToBottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(50px);
  }
}

@keyframes slideFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

::view-transition-old(graph-transition) {
  animation: fadeOutScale 0.3s ease-in-out;
  animation-fill-mode: forwards; /* Keep final state */
}

::view-transition-new(graph-transition) {
  animation: fadeInScale 0.3s ease-in-out;
  animation-fill-mode: forwards; /* Keep final state */
}

@keyframes fadeOutScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}