@view-transition {
  navigation: auto;
}

* {
  transition: background-color 0.5s ease, color 0.25s ease, border-color 0.5s ease;
}

/* blog preview animations */

/* left column */
.blog-preview:nth-child(2n + 1) {
  view-transition-class: blog-preview blog-preview-left;
}
/* exit animation */
::view-transition-old(.blog-preview-left):only-child {
  animation: slide-out-to-left both;
}
/* entry animation */
::view-transition-new(.blog-preview-left):only-child {
  animation: slide-in-from-left both;
}

/* right column */
.blog-preview:nth-child(2n) {
  view-transition-class: blog-preview blog-preview-right;
}
/* exit-animation */
::view-transition-old(.blog-preview-right):only-child {
  animation: slide-out-to-right both;
}
/* entry-animation */
::view-transition-new(.blog-preview-right):only-child {
  animation: slide-in-from-right both;
}

/* reduce / enlarge */
::view-transition-image-pair(.blog-preview) {
  animation: blink;
}

:root { /* :root is important here to have enough specificity to override :only-child */
  &::view-transition-group(.blog-preview),
  &::view-transition-image-pair(.blog-preview),
  &::view-transition-old(.blog-preview),
  &::view-transition-new(.blog-preview) {
    animation-duration: 500ms;
  }
}

header {
  view-transition-name: header;
}

.reusable-header {
  view-transition-name: reusable-header;
}

#form-tags {
  view-transition-name: form-tags;
}

footer {
  view-transition-name: footer;
}

@keyframes blink {
  50% {
    transform: scale(0.8);
  }
}

@keyframes slide-out-to-left {
  to {
    transform: translate(-100%, 100%);
    opacity: 0;
  }
}

@keyframes slide-out-to-right {
  to {
    transform: translate(100%, 100%);
    opacity: 0;
  }
}

@keyframes slide-in-from-left {
  from {
    transform: translate(-100%, -100%);
    opacity: 0;
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translate(100%, -100%);
    opacity: 0;
  }
}
