@media(prefers-reduced-motion:no-preference){
  .can-animate{--ease-paper:cubic-bezier(.18,.72,.25,1);--ease-photo:cubic-bezier(.2,.7,.28,1)}
  .can-animate .cover-photo{animation:cover-settle 1.35s var(--ease-photo) both}
  .can-animate .cover-frame{animation:ink-in .75s .06s both}
  .can-animate .cover-kicker{animation:ink-in .56s .14s both}
  .can-animate .cover h1{animation:written-in .78s .19s var(--ease-paper) both}
  .can-animate .cover-copy>.caps{animation:written-in .65s .34s var(--ease-paper) both}
  .can-animate .cover-link{animation:written-in .62s .46s var(--ease-paper) both}

  .can-animate .envelope:not(.entered) .count-card{transform:translateY(38%) rotate(-3deg)}
  .can-animate .envelope:not(.entered) .sprig-top{transform:rotate(45deg) scale(.75);opacity:.44}
  .can-animate .envelope:not(.entered) .sprig-bottom{transform:rotate(183deg) scale(.68);opacity:.44}
  .can-animate .envelope.entered .count-card{animation:paper-rise .91s .17s var(--ease-paper) both}
  .can-animate .envelope.entered .sprig-top{animation:branch-top .83s .05s var(--ease-paper) both}
  .can-animate .envelope.entered .sprig-bottom{animation:branch-bottom .82s .13s var(--ease-paper) both}
  .can-animate .envelope.entered .wax{animation:seal-press .62s .13s var(--ease-paper) both}

  .can-animate .couple:not(.entered) .groom{transform:translate(-19%,20%) rotate(-6deg) scale(.95);opacity:.55}
  .can-animate .couple:not(.entered) .bride{transform:translate(19%,-16%) rotate(5deg) scale(.94);opacity:.55}
  .can-animate .couple.entered .groom{animation:groom-slide .79s .02s var(--ease-photo) both}
  .can-animate .couple.entered .bride{animation:bride-slide .83s .16s var(--ease-photo) both}
  .can-animate .couple.entered .name-groom{animation:written-in .51s .13s var(--ease-paper) both}
  .can-animate .couple.entered .name-bride{animation:written-in .55s .27s var(--ease-paper) both}
  .can-animate .couple.entered .record{animation:record-in .81s .22s var(--ease-paper) both}
  .can-animate .letter-paper.entered{animation:letter-in .66s var(--ease-paper) both}

  .film[data-ready] .film-track{animation:film-roll 14s linear infinite;animation-play-state:paused}
  .film[data-ready][data-visible]:not([data-paused]) .film-track{animation-play-state:running}
}

@keyframes cover-settle{from{transform:scale(1.075)}to{transform:scale(1)}}
@keyframes ink-in{from{opacity:0}to{opacity:1}}
@keyframes written-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes paper-rise{
  0%{transform:translateY(38%) rotate(-3deg)}
  76%{transform:translateY(-2%) rotate(.65deg)}
  100%{transform:none}
}
@keyframes branch-top{from{transform:rotate(45deg) scale(.75);opacity:.44}to{transform:rotate(28deg);opacity:1}}
@keyframes branch-bottom{from{transform:rotate(183deg) scale(.68);opacity:.44}to{transform:rotate(211deg) scale(.88);opacity:1}}
@keyframes seal-press{0%{transform:translateY(-4px) scale(1.1);opacity:.64}65%{transform:scale(.96);opacity:1}100%{transform:none}}
@keyframes groom-slide{
  0%{transform:translate(-19%,20%) rotate(-6deg) scale(.95);opacity:.55}
  76%{transform:translate(1%,-1%) rotate(10deg);opacity:1}
  100%{transform:rotate(9deg)}
}
@keyframes bride-slide{
  0%{transform:translate(19%,-16%) rotate(5deg) scale(.94);opacity:.55}
  75%{transform:translate(-1%,1%) rotate(-12deg);opacity:1}
  100%{transform:rotate(-11deg)}
}
@keyframes record-in{
  0%{transform:rotate(-89deg) scale(.72);opacity:.3}
  75%{transform:rotate(-9deg) scale(1.04);opacity:1}
  100%{transform:rotate(-14deg)}
}
@keyframes letter-in{from{opacity:.55;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes film-roll{to{transform:translate3d(-50%,0,0)}}

@media(prefers-reduced-motion:no-preference){
  .can-animate [data-reveal="text"]:not(.entered){opacity:.56;transform:translateY(12px)}
  .can-animate [data-reveal="text"].entered{animation:text-settle .66s var(--ease-paper) both}
  .can-animate [data-reveal="gallery"]:not(.entered) .album-main img{opacity:.55;transform:translateY(9px) scale(1.05)}
  .can-animate [data-reveal="gallery"].entered .album-main img{animation:gallery-in .8s var(--ease-photo) both}
  .can-animate [data-reveal="gallery"].entered .album-thumbs button{animation:frame-in .55s var(--delay,.05s) var(--ease-photo) both}
  .album-thumbs button:nth-child(2){--delay:.10s}
  .album-thumbs button:nth-child(3){--delay:.15s}
  .album-thumbs button:nth-child(4){--delay:.20s}
  .album-thumbs button:nth-child(5){--delay:.25s}
  .album-thumbs button:nth-child(6){--delay:.30s}
  .can-animate [data-reveal="closing"].entered .closing-ring{animation:ring-in .85s var(--ease-paper) both}
  .can-animate [data-reveal="closing"].entered .print-one{animation:print-one .78s .08s var(--ease-paper) both}
  .can-animate [data-reveal="closing"].entered .print-two{animation:print-two .78s .18s var(--ease-paper) both}
}
@keyframes text-settle{from{opacity:.56;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes gallery-in{from{opacity:.55;transform:translateY(9px) scale(1.05)}to{opacity:1;transform:none}}
@keyframes frame-in{from{opacity:.55;transform:translateX(8px)}to{opacity:1;transform:none}}
@keyframes ring-in{from{opacity:.55;transform:rotate(-26deg) scale(.94)}to{opacity:1;transform:rotate(-19deg)}}
@keyframes print-one{from{opacity:.55;transform:translate(-15px,13px) rotate(-2deg)}to{opacity:1;transform:rotate(-11deg)}}
@keyframes print-two{from{opacity:.55;transform:translate(-11px,-11px) rotate(5deg)}to{opacity:1;transform:rotate(13deg)}}