/* Cross-document transitions: a diagonal reveal over a receding page. */
@view-transition{navigation:auto}
::view-transition{pointer-events:none}
::view-transition-group(root){animation-duration:.55s}
::view-transition-old(root){animation:page-depart .45s cubic-bezier(.4,0,.2,1) both;mix-blend-mode:normal}
::view-transition-new(root){animation:page-uncover .55s cubic-bezier(.16,1,.3,1) both;mix-blend-mode:normal}
@keyframes page-depart{to{opacity:.35;transform:scale(.985);filter:brightness(.65)}}
@keyframes page-uncover{from{clip-path:polygon(0 0,0 0,-15% 100%,0 100%);transform:translateX(18px)}to{clip-path:polygon(0 0,115% 0,100% 100%,0 100%);transform:none}}
/* Browsers without document transitions still reveal the destination. */
.page-enter main,.page-enter .hero-grid{animation:page-arrive .6s cubic-bezier(.16,1,.3,1) both}
@keyframes page-arrive{from{opacity:.15;transform:translateY(18px);clip-path:inset(0 0 12% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
.motion-off.page-enter main,.motion-off.page-enter .hero-grid{animation:none}
.motion-off::view-transition-old(root),.motion-off::view-transition-new(root){animation:none}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .page-enter main,.page-enter .hero-grid{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}