/* Motion for the article pages: ink drawings draw themselves in, numbers count up, blocks ease in.
   Everything here is skipped for people who asked their system for less motion. */
@media (prefers-reduced-motion: no-preference) {
  /* every initial hidden state is scoped to html.motion, which articles.js sets; without JS nothing is ever hidden */
  /* blocks ease in as they reach the viewport (class "ani" set by the build, "in" set by articles.js) */
  .motion .ani{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .motion .ani.in{opacity:1;transform:none}

  /* drawings: lines draw, bars rise, labels fade in last. Runs when the drawing has the "in" class. */
  .motion .draw path{stroke-dasharray:1400;stroke-dashoffset:1400}
  .motion .draw rect,.motion .draw circle{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.02)}
  .motion .draw circle{transform-origin:50% 50%;transform:scale(.2)}
  .motion .draw text{opacity:0}
  .motion .draw.in path{animation:draw 1.5s cubic-bezier(.4,0,.2,1) forwards}
  .motion .draw.in rect{animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .motion .draw.in circle{animation:pop .5s 1.1s cubic-bezier(.2,.7,.2,1) forwards}
  .motion .draw.in text{animation:fade .6s .9s forwards}
  .motion .draw.in rect:nth-of-type(2n){animation-delay:.08s} .motion .draw.in rect:nth-of-type(3n){animation-delay:.16s} .motion .draw.in rect:nth-of-type(4n){animation-delay:.24s}
  .motion .draw.in rect:nth-of-type(5n){animation-delay:.32s} .motion .draw.in rect:nth-of-type(6n){animation-delay:.4s} .motion .draw.in rect:nth-of-type(7n){animation-delay:.48s}
  .motion .draw.in path.accent{animation-delay:.5s;animation-duration:1.8s}
  .motion .draw.in path:nth-of-type(2n){animation-delay:.12s} .motion .draw.in path:nth-of-type(3n){animation-delay:.24s}

  /* the hero photograph settles in; the title rises after it */
  .motion .hero-photo img{transform:scale(1.04);opacity:0;animation:settle 1.4s cubic-bezier(.2,.7,.2,1) forwards}
  .motion .hero-text>*{opacity:0;transform:translateY(10px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .motion .hero-text.in>*{opacity:1;transform:none}
  .motion .hero-text>*:nth-child(2){transition-delay:.1s} .motion .hero-text>*:nth-child(3){transition-delay:.2s} .motion .hero-text>*:nth-child(4){transition-delay:.3s}
  .motion .stats li{opacity:0;transform:translateY(10px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .motion .stats.in li{opacity:1;transform:none}
  .motion .stats li:nth-child(2){transition-delay:.12s} .motion .stats li:nth-child(3){transition-delay:.24s}

  /* reading progress hairline grows with a little life */
  .progress span{transition:width .25s cubic-bezier(.2,.7,.2,1)}

  /* cards lift on hover (already) and arrive staggered */
  .motion .cards .card-art{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
  .motion .cards.in .card-art{opacity:1;transform:none}
  .motion .cards.in .card-art:nth-child(2){transition-delay:.1s} .motion .cards.in .card-art:nth-child(3){transition-delay:.2s} .motion .cards.in .card-art:nth-child(4){transition-delay:.3s} .motion .cards.in .card-art:nth-child(5){transition-delay:.4s} .motion .cards.in .card-art:nth-child(6){transition-delay:.5s}
  .motion .cards.in .card-art:hover{transform:translateY(-3px)}

  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes rise{to{opacity:1;transform:scaleY(1)}}
  @keyframes pop{to{opacity:1;transform:scale(1)}}
  @keyframes fade{to{opacity:1}}
  @keyframes settle{to{opacity:1;transform:scale(1)}}
  @keyframes up{to{opacity:1;transform:none}}
}

/* the one slow moving element in each drawing stays still for people who asked for less motion */
@media (prefers-reduced-motion: reduce) { .loop { display: none; } }

/* the engraving arrives like an ink wash: revealed left to right under a soft edge, then settles */
@media (prefers-reduced-motion: no-preference) {
  .motion .hero-photo img{opacity:0;transform:scale(1.03);clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.6,0,.2,1),opacity .6s,transform 2.2s cubic-bezier(.2,.7,.2,1)}
  .motion .hero-photo.in img{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}