*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

* {
  transform-style: preserve-3d;
}

:root {
  --duration: 3.2s;
  --stagger: .65s;
  --easing: cubic-bezier(.36,.07,.25,1);
  --offscreen: 130vmax;
  --color-bg: #e5e5e5;
  --color-blue: #384969;
  --color-shadow: #211842;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-bg);
}

#app {
  height: 70vmin;
  width: 40vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg);
  background: black;
  border-radius: 5vmin;
  perspective: 10000px;
}
#app:before {
  border: 10vmin solid black;
  border-left-width: 2vmin;
  border-right-width: 2vmin;
  border-radius: inherit;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border: 10vmin solid black;
  border-left-width: 2vmin;
  border-right-width: 2vmin;
  background: black;
}
#app > .papers, #app:before {
  transform: translateZ(3vmin);
}
#app:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
  transform: translateZ(1.5vmin);
}
#app > .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  transform: rotateX(90deg);
  background: var(--color-shadow);
  border-radius: inherit;
}

.paper-shadow {
  background: var(--color-shadow);
  height: 50%;
  width: 100%;
  position: absolute;
  top: calc(100% + 3vmin);
  left: 0;
  transform-origin: top center;
  -webkit-animation: shadow-in var(--duration) var(--easing) infinite;
          animation: shadow-in var(--duration) var(--easing) infinite;
  -webkit-animation-delay: calc(var(--i) * var(--stagger));
          animation-delay: calc(var(--i) * var(--stagger));
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes shadow-in {
  0%, 5% {
    transform: scale(0.8, 1) translateY(var(--offscreen));
  }
  100% {
    transform: scale(0.8, 0);
  }
}
@keyframes shadow-in {
  0%, 5% {
    transform: scale(0.8, 1) translateY(var(--offscreen));
  }
  100% {
    transform: scale(0.8, 0);
  }
}

.papers {
  width: 30vmin;
  height: 40vmin;
  background: black;
}

.paper {
  --segments: 5;
  --segment: calc(100% * 1 / var(--segments));
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-animation: fly-in var(--duration) var(--easing) infinite;
          animation: fly-in var(--duration) var(--easing) infinite;
  -webkit-animation-delay: calc( (var(--i) * var(--stagger)) );
          animation-delay: calc( (var(--i) * var(--stagger)) );
}
@-webkit-keyframes fly-in {
  0%, 2% {
    transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
  }
  80%, 100% {
    transform: translateZ(0px) translateY(0%) rotateX(0deg);
  }
}
@keyframes fly-in {
  0%, 2% {
    transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
  }
  80%, 100% {
    transform: translateZ(0px) translateY(0%) rotateX(0deg);
  }
}
.paper > .segment {
  height: var(--segment);
}

.segment {
  --rotate: 20deg;
  height: 100%;
  transform-origin: top center;
  /* background: url("money.png") no-repeat fixed center;
  border: 1px solid rgba(0, 0, 0, 0.2); */

  background: 
                linear-gradient(90deg, #4ade80 0%, #22c55e 100%),
                repeating-linear-gradient(
                    45deg,
                    rgba(255,255,255,0.1) 0px,
                    rgba(255,255,255,0.1) 20px,
                    transparent 20px,
                    transparent 40px
                );
            /* border: 8px solid #166534;
            border-radius: 8px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.5); */
            color: #e5e5e5;
            
  border-top: none;
  border-bottom: none;
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: curve-paper;
          animation-name: curve-paper;
}

.segment::before {
            content: "HK$";
            position: absolute;
            top: 20px;
            left: 25px;
            font-size: 28px;
        }

        .segment::after {
            content: "$ 8.8";
            position: absolute;
            bottom: 25px;
            right: 30px;
            font-size: 32px;
            opacity: 0.9;
        }


.segment > .segment {
  top: 98%;
}
@-webkit-keyframes curve-paper {
  0%, 2% {
    transform: rotateX(var(--rotate, 0deg));
  }
  90%, 100% {
    transform: rotateX(0deg);
  }
}
@keyframes curve-paper {
  0%, 2% {
    transform: rotateX(var(--rotate, 0deg));
  }
  90%, 100% {
    transform: rotateX(0deg);
  }
}

/* ---------------------------------- */
.paper.-rogue {
  transform-origin: top center -5vmin;
}
.paper.-rogue .segment {
  --rotate: 30deg;
  -webkit-animation-name: curve-rogue-paper;
          animation-name: curve-rogue-paper;
}
@-webkit-keyframes curve-rogue-paper {
  0%, 50% {
    transform: rotateX(var(--rotate));
  }
  100% {
    transform: rotateX(0deg);
  }
}
@keyframes curve-rogue-paper {
  0%, 50% {
    transform: rotateX(var(--rotate));
  }
  100% {
    transform: rotateX(0deg);
  }
}
.paper.-rogue > .segment {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: rogue-paper;
          animation-name: rogue-paper;
  transform-origin: left top 20vmin;
}
@-webkit-keyframes rogue-paper {
  0%, 2% {
    transform: rotateX(1.5turn);
  }
  80%, 100% {
    transform: rotateX(0turn);
  }
}
@keyframes rogue-paper {
  0%, 2% {
    transform: rotateX(1.5turn);
  }
  80%, 100% {
    transform: rotateX(0turn);
  }
}