/* motion setup */
h1,
h1 + p,
h1 + p + * {
  transition: opacity 0.5s, filter 0.7s;
  filter: none;
  opacity: 1;

  @starting-style {
    filter: blur(10px);
    opacity: 0;
  }
}

/* apply motion in sequence */
h1 {
  transition-delay: 0.1s;
}
h1 + p {
  transition-delay: 0.2s;
}
h1 + p + * {
  transition-delay: 0.4s;
}

/* view transitions */
article {
  /* view-transition-name: article; */
}

/* view transition (scales down the old page) */
/* ::view-transition-old(article) {
  transform: scale(1.2) translateY(2em);
  transition: 0.8s;
} */