/* Shared with the native Ghost theme: one motion language across the website. */
@view-transition { navigation: auto; }

.rapid-nav-wrap, .site-header { view-transition-name: rapid-navigation; }
.rapid-hero > .rapid-scene, .hero-scene { view-transition-name: rapid-scenery; }
.rapid-hero-copy > h1, .hero-copy > h1 { view-transition-name: rapid-title; }
.rapid-hero-copy > p, .hero-copy > p { view-transition-name: rapid-description; }
.rapid-hero-copy > .rapid-actions, .hero-copy > .hero-actions { view-transition-name: rapid-actions; }

::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 720ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: rapid-page-out 260ms ease both; }
::view-transition-new(root) { animation: rapid-page-in 560ms ease both; }
::view-transition-old(rapid-navigation) { animation: rapid-page-out 180ms ease both; }
::view-transition-new(rapid-navigation) { animation: rapid-page-in 220ms ease both; }
::view-transition-old(rapid-scenery) { animation: rapid-page-out 620ms ease both; }
::view-transition-new(rapid-scenery) { animation: rapid-scene-in 900ms cubic-bezier(.22,1,.36,1) both; }
::view-transition-old(rapid-title),
::view-transition-old(rapid-description),
::view-transition-old(rapid-actions) { animation: rapid-copy-out 220ms ease both; }
::view-transition-new(rapid-title) { animation: rapid-copy-in 620ms 70ms cubic-bezier(.22,1,.36,1) both; }
::view-transition-new(rapid-description) { animation: rapid-copy-in 620ms 130ms cubic-bezier(.22,1,.36,1) both; }
::view-transition-new(rapid-actions) { animation: rapid-copy-in 620ms 190ms cubic-bezier(.22,1,.36,1) both; }

/* Progressive entrance for first visits, browser history and older browsers. */
html:not([data-rapid-transition]) :is(.rapid-hero-copy > h1, .hero-copy > h1, .article-opening > h1) { animation: rapid-copy-in 640ms cubic-bezier(.22,1,.36,1) both; }
html:not([data-rapid-transition]) :is(.rapid-hero-copy > p, .hero-copy > p) { animation: rapid-copy-in 640ms 80ms cubic-bezier(.22,1,.36,1) both; }
html:not([data-rapid-transition]) :is(.rapid-hero-copy > .rapid-actions, .hero-actions) { animation: rapid-copy-in 640ms 150ms cubic-bezier(.22,1,.36,1) both; }
/* Removing the transition marker must not replay the entrance a second time. */
html[data-rapid-transition="settled"] :is(.rapid-hero-copy > *, .hero-copy > *, .article-opening > h1) { animation: none; }

@keyframes rapid-page-out { to { opacity: 0; } }
@keyframes rapid-page-in { from { opacity: 0; } }
@keyframes rapid-scene-in { from { opacity: 0; transform: scale(1.018); } to { opacity: 1; transform: scale(1); } }
@keyframes rapid-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rapid-copy-out { to { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html :is(.rapid-hero-copy > *, .hero-copy > *, .article-opening > h1) { animation: none !important; }
}