@view-transition{navigation:auto}
::view-transition-old(root){animation:pageOut .3s ease both}
::view-transition-new(root){animation:pageIn .48s cubic-bezier(.22,1,.36,1) both}
@keyframes pageOut{to{opacity:0;transform:scale(.997)}}
@keyframes pageIn{from{opacity:0;transform:scale(1.003)}}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-media{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--ease)}
body.is-ready .reveal-media{clip-path:inset(0)}
.project-chapter .chapter-media{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.project-chapter.visible .chapter-media{clip-path:inset(0)}
.project-chapter .chapter-copy{opacity:0;transform:translateY(24px);transition:opacity .72s var(--ease) .14s,transform .82s var(--ease) .14s}
.project-chapter.visible .chapter-copy{opacity:1;transform:none}
.project-chapter.is-active .chapter-copy h3{font-style:italic}

.hero-copy>*{opacity:0;transform:translateY(18px);animation:heroEditorialIn .7s var(--ease) forwards}
.hero-copy>*:nth-child(1){animation-delay:.18s}.hero-copy>*:nth-child(2){animation-delay:.26s}.hero-copy>*:nth-child(3){animation-delay:.34s}.hero-copy>*:nth-child(4){animation-delay:.42s}.hero-copy>*:nth-child(5){animation-delay:.5s}
@keyframes heroEditorialIn{to{opacity:1;transform:none}}

::selection{background:var(--accent);color:#090909}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .reveal,.reveal-media,.project-chapter .chapter-media,.project-chapter .chapter-copy,.hero-copy>*{opacity:1;transform:none;clip-path:none;animation:none;transition:none}
}