/* Page intro animations.
   Mark an element with data-intro="1".."8" to have it rise in, staggered by that number.
   data-intro="h" slides the header down, data-intro="p" zooms a photo in.
   Brush labels (data-brush) inside an intro element sweep in after it.
   --zp-t is set when a pre-rendered page hands over to the live page, so the
   intro continues where it was instead of restarting. */
@keyframes zpIntro { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes zpIntroDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes zpIntroPhoto { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes zpIntroBrush { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

[data-intro] {
  animation: zpIntro .9s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--zp-step, 0) * 110ms + 120ms - var(--zp-t, 0ms));
}
[data-intro="h"] { animation-name: zpIntroDown; animation-duration: .7s; --zp-step: 0; }
[data-intro="p"] { animation-name: zpIntroPhoto; animation-duration: 1.4s; --zp-step: 2; }
[data-intro="1"] { --zp-step: 1; }
[data-intro="2"] { --zp-step: 2; }
[data-intro="3"] { --zp-step: 3; }
[data-intro="4"] { --zp-step: 4; }
[data-intro="5"] { --zp-step: 5; }
[data-intro="6"] { --zp-step: 6; }
[data-intro="7"] { --zp-step: 7; }
[data-intro="8"] { --zp-step: 8; }
[data-intro] [data-brush] {
  animation: zpIntroBrush .9s cubic-bezier(.6,0,.2,1) both;
  animation-delay: calc(var(--zp-step, 0) * 110ms + 520ms - var(--zp-t, 0ms));
}

[data-intro].brush::before {
  animation: zpIntroBrush .9s cubic-bezier(.6,0,.2,1) both;
  animation-delay: calc(var(--zp-step, 0) * 110ms + 380ms - var(--zp-t, 0ms));
}

@media (prefers-reduced-motion: reduce) {
  [data-intro], [data-intro] [data-brush], [data-intro].brush::before { animation: none; }
}