/* The payday scene on the Stuffed home page. Generated by
   tools/build-stuffed-scene.py; edit that, not this. */
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.scene .pay-label { font: 700 13px var(--sans); letter-spacing: 2.4px; fill: rgba(63,46,39,.5); }
.scene .name { font: 700 15px var(--sans); fill: var(--ink); }
.scene .amt { font: 400 19px var(--serif); fill: var(--terracotta-text); }
.scene .flap, .scene .flap-up, .scene .fly, .scene .amt {
  animation-duration: 9.0s; animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.3,.7,.3,1); animation-fill-mode: both;
}
.scene .flap-up { transform: scaleY(0); }
.scene .fly { opacity: 0; }
.scene .amt { opacity: 0; }

@keyframes flap0 {
  0%, 3.33% { transform: scaleY(1); }
  4.89% { transform: scaleY(0); }
  16.00% { transform: scaleY(0); }
  19.33%, 100% { transform: scaleY(1); }
}
@keyframes flapup0 {
  0%, 4.89% { transform: scaleY(0); }
  6.44% { transform: scaleY(1); }
  16.00% { transform: scaleY(1); }
  17.56%, 100% { transform: scaleY(0); }
}
@keyframes fly0 {
  0%, 5.89% { transform: translate(360px, 96px) rotate(0deg); opacity: 0; }
  6.44% { transform: translate(360px, 84px) rotate(0deg); opacity: 1; }
  9.78% { transform: translate(240.0px, 60px) rotate(-14deg); opacity: 1; }
  13.33% { transform: translate(120px, 242px) rotate(0deg); opacity: 1; }
  16.00% { transform: translate(120px, 286px) rotate(0deg); opacity: 1; }
  16.22%, 100% { transform: translate(120px, 286px); opacity: 0; }
}
@keyframes amt0 {
  0%, 16.00% { opacity: 0; transform: translateY(6px) scale(.9); }
  18.78% { opacity: 1; transform: none; }
  93.89% { opacity: 1; transform: none; }
  97.22%, 100% { opacity: 0; transform: none; }
}
.scene .e0 .flap { animation-name: flap0; }
.scene .e0 .flap-up { animation-name: flapup0; }
.scene .f0 { animation-name: fly0; }
.scene .a0 { animation-name: amt0; }
@keyframes flap1 {
  0%, 22.22% { transform: scaleY(1); }
  23.78% { transform: scaleY(0); }
  34.89% { transform: scaleY(0); }
  38.22%, 100% { transform: scaleY(1); }
}
@keyframes flapup1 {
  0%, 23.78% { transform: scaleY(0); }
  25.33% { transform: scaleY(1); }
  34.89% { transform: scaleY(1); }
  36.44%, 100% { transform: scaleY(0); }
}
@keyframes fly1 {
  0%, 24.78% { transform: translate(360px, 96px) rotate(0deg); opacity: 0; }
  25.33% { transform: translate(360px, 84px) rotate(0deg); opacity: 1; }
  28.67% { transform: translate(320.0px, 60px) rotate(-14deg); opacity: 1; }
  32.22% { transform: translate(280px, 242px) rotate(0deg); opacity: 1; }
  34.89% { transform: translate(280px, 286px) rotate(0deg); opacity: 1; }
  35.11%, 100% { transform: translate(280px, 286px); opacity: 0; }
}
@keyframes amt1 {
  0%, 34.89% { opacity: 0; transform: translateY(6px) scale(.9); }
  37.67% { opacity: 1; transform: none; }
  93.89% { opacity: 1; transform: none; }
  97.22%, 100% { opacity: 0; transform: none; }
}
.scene .e1 .flap { animation-name: flap1; }
.scene .e1 .flap-up { animation-name: flapup1; }
.scene .f1 { animation-name: fly1; }
.scene .a1 { animation-name: amt1; }
@keyframes flap2 {
  0%, 41.11% { transform: scaleY(1); }
  42.67% { transform: scaleY(0); }
  53.78% { transform: scaleY(0); }
  57.11%, 100% { transform: scaleY(1); }
}
@keyframes flapup2 {
  0%, 42.67% { transform: scaleY(0); }
  44.22% { transform: scaleY(1); }
  53.78% { transform: scaleY(1); }
  55.33%, 100% { transform: scaleY(0); }
}
@keyframes fly2 {
  0%, 43.67% { transform: translate(360px, 96px) rotate(0deg); opacity: 0; }
  44.22% { transform: translate(360px, 84px) rotate(0deg); opacity: 1; }
  47.56% { transform: translate(400.0px, 60px) rotate(14deg); opacity: 1; }
  51.11% { transform: translate(440px, 242px) rotate(0deg); opacity: 1; }
  53.78% { transform: translate(440px, 286px) rotate(0deg); opacity: 1; }
  54.00%, 100% { transform: translate(440px, 286px); opacity: 0; }
}
@keyframes amt2 {
  0%, 53.78% { opacity: 0; transform: translateY(6px) scale(.9); }
  56.56% { opacity: 1; transform: none; }
  93.89% { opacity: 1; transform: none; }
  97.22%, 100% { opacity: 0; transform: none; }
}
.scene .e2 .flap { animation-name: flap2; }
.scene .e2 .flap-up { animation-name: flapup2; }
.scene .f2 { animation-name: fly2; }
.scene .a2 { animation-name: amt2; }
@keyframes flap3 {
  0%, 60.00% { transform: scaleY(1); }
  61.56% { transform: scaleY(0); }
  72.67% { transform: scaleY(0); }
  76.00%, 100% { transform: scaleY(1); }
}
@keyframes flapup3 {
  0%, 61.56% { transform: scaleY(0); }
  63.11% { transform: scaleY(1); }
  72.67% { transform: scaleY(1); }
  74.22%, 100% { transform: scaleY(0); }
}
@keyframes fly3 {
  0%, 62.56% { transform: translate(360px, 96px) rotate(0deg); opacity: 0; }
  63.11% { transform: translate(360px, 84px) rotate(0deg); opacity: 1; }
  66.44% { transform: translate(480.0px, 60px) rotate(14deg); opacity: 1; }
  70.00% { transform: translate(600px, 242px) rotate(0deg); opacity: 1; }
  72.67% { transform: translate(600px, 286px) rotate(0deg); opacity: 1; }
  72.89%, 100% { transform: translate(600px, 286px); opacity: 0; }
}
@keyframes amt3 {
  0%, 72.67% { opacity: 0; transform: translateY(6px) scale(.9); }
  75.44% { opacity: 1; transform: none; }
  93.89% { opacity: 1; transform: none; }
  97.22%, 100% { opacity: 0; transform: none; }
}
.scene .e3 .flap { animation-name: flap3; }
.scene .e3 .flap-up { animation-name: flapup3; }
.scene .f3 { animation-name: fly3; }
.scene .a3 { animation-name: amt3; }

/* Still: every envelope shut and filled, the amounts showing. */
@media (prefers-reduced-motion: reduce) {
  .scene .flap, .scene .flap-up, .scene .fly, .scene .amt { animation: none; }
  .scene .amt { opacity: 1; }
}