/* view transitions */
@view-transition {
  navigation: auto;
}

nav,
section {
  padding: 1rem;
}

.home {
  background-color: hotpink;
}

.about {
  background-color: lightblue;
}

.switch-to-view-timeline {
  padding: 1rem;
}

html:has(.cooler) {
  /* Apply the custom animation to the old and new page states */
  &::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;
  }

  &::view-transition-new(root) {
    animation: 0.4s ease-in both move-in;
  }
}

/* Create a custom animation */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}