@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes gallery-enter {
  from { opacity: .45; translate: 0 12px; }
  to { opacity: 1; translate: none; }
}

.gallery {
  animation: gallery-enter 480ms cubic-bezier(.2, .7, .2, 1) backwards;
}

@keyframes frame-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.site-title,
.start-content > h1 {
  animation: page-enter 360ms cubic-bezier(.22, 1, .36, 1) backwards;
}

.header-meta,
main > p,
main > .contact,
main > .experiment-toolbar,
.rows > li,
.article > *,
.start-content > p,
.start-content > button {
  animation: page-enter 360ms cubic-bezier(.22, 1, .36, 1) 80ms backwards;
}

main > p:nth-child(2),
.rows > li:nth-child(2),
.article > :nth-child(2),
.start-content > button { animation-delay: 125ms; }

main > p:nth-child(3),
.rows > li:nth-child(3),
.article > :nth-child(3) { animation-delay: 170ms; }

.rows > li:nth-child(4),
.article > :nth-child(4) { animation-delay: 215ms; }

.rows > li:nth-child(n+5),
.article > :nth-child(n+5),
main > .contact { animation-delay: 260ms; }

.experiment-frame:not([data-entrance="internal"]) {
  animation: frame-enter 360ms cubic-bezier(.22, 1, .36, 1) 80ms backwards;
}

@media (prefers-reduced-motion: reduce) {
  .gallery,
  .site-title,
  .header-meta,
  main > p,
  main > .contact,
  main > .experiment-toolbar,
  .rows > li,
  .article > *,
  .experiment-frame,
  .start-content > h1,
  .start-content > p,
  .start-content > button {
    animation: none !important;
  }
}