
:root{--p2m-duration:1800ms;--p2m-ease-enter:cubic-bezier(.16,1,.3,1);--p2m-ease-assemble:cubic-bezier(.35,0,.25,1);--p2m-ease-settle:cubic-bezier(.4,0,.2,1)}
#mark-stem,#mark-beam,#mark-fold,.letter{transform-box:fill-box;transform-origin:center;animation-duration:var(--p2m-duration);animation-fill-mode:both;animation-timing-function:linear}
#mark-stem{animation-name:stem}
#mark-beam{animation-name:beam}
#mark-fold{animation-name:fold}
@keyframes stem{
 /* ease-assemble: continuous approach through the opening phase. */
 0%{opacity:0;transform:translateY(25px) scale(.96);animation-timing-function:cubic-bezier(.35,0,.25,1)}
 70%{opacity:1;transform:translateY(.25px) scale(1);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 88%,100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes beam{
 0%,10%{opacity:0;transform:translate(-35px,17px);animation-timing-function:cubic-bezier(.35,0,.25,1)}
 67%{opacity:1;transform:translate(-.3px,.15px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 91%,100%{opacity:1;transform:translate(0,0)}}
@keyframes fold{
 0%,14%{opacity:0;transform:translate(34px,-17px);animation-timing-function:cubic-bezier(.35,0,.25,1)}
 73%{opacity:1;transform:translate(.2px,-.1px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 94%,100%{opacity:1;transform:translate(0,0)}}
#letter-1{animation-name:letter1}
@keyframes letter1{
 0%,38.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 65.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 82.000%,100%{opacity:1;transform:translateY(0)}}
#letter-2{animation-name:letter2}
@keyframes letter2{
 0%,40.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 67.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 84.000%,100%{opacity:1;transform:translateY(0)}}
#letter-3{animation-name:letter3}
@keyframes letter3{
 0%,42.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 69.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 86.000%,100%{opacity:1;transform:translateY(0)}}
#letter-4{animation-name:letter4}
@keyframes letter4{
 0%,44.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 71.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 88.000%,100%{opacity:1;transform:translateY(0)}}
#letter-5{animation-name:letter5}
@keyframes letter5{
 0%,46.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 73.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 90.000%,100%{opacity:1;transform:translateY(0)}}
#letter-6{animation-name:letter6}
@keyframes letter6{
 0%,48.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 75.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 92.000%,100%{opacity:1;transform:translateY(0)}}
#letter-7{animation-name:letter7}
@keyframes letter7{
 0%,50.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 77.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 94.000%,100%{opacity:1;transform:translateY(0)}}
#letter-8{animation-name:letter8}
@keyframes letter8{
 0%,52.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 79.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 96.000%,100%{opacity:1;transform:translateY(0)}}
#letter-9{animation-name:letter9}
@keyframes letter9{
 0%,54.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 81.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 98.000%,100%{opacity:1;transform:translateY(0)}}
#letter-10{animation-name:letter10}
@keyframes letter10{
 0%,56.000%{opacity:0;transform:translateY(13px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 83.000%{opacity:1;transform:translateY(.35px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 100.000%,100%{opacity:1;transform:translateY(0)}}
