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

#app {
  transform-style: preserve-3d; }

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

.animation-paper, .paper-animation {
  margin: 0;
  padding: 0; }

.animation-paper {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  z-index: 9; }

#app {
  max-width: 240px;
  max-height: 420px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(8vw) rotateX(-20deg) rotateY(-55deg);
  background: var(--color-blue);
  border-radius: 2vmin;
  perspective: 10000px;
  padding-bottom: 8rem;
  z-index: 9; }
  @media screen and (max-width: 992px) {
    #app {
      margin-top: 11rem;
      max-width: 240px;
      max-height: 420px;
      padding-bottom: 13rem; } }

#app:before {
  border: 3vmin solid #C0C0C0;
  border-left-width: 2vmin;
  border-right-width: 2vmin;
  border-radius: inherit;
  content: "";
  position: absolute;
  transform-style: preserve-3d;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-left-width: 2vmin;
  border-right-width: 2vmin;
  z-index: 9;
  background: var(--color-blue); }

#app > .papers, #app:before {
  transform: translateZ(3vmin); }

#app:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: inherit;
  transform-style: preserve-3d;
  border-radius: inherit;
  transform: translateZ(1.5vmin);
  z-index: 9; }

.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;
  transform-style: preserve-3d; }

.paper {
  --segments: 5;
  --segment: calc(100% * 1 / var(--segments));
  position: absolute;
  top: -50px;
  left: 0;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  -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)) ); }
  @media screen and (max-width: 991px) {
    .paper {
      top: 13px;
      transform-style: preserve-3d; } }

.paper > .segment {
  height: var(--segment);
  transform-style: preserve-3d; }

.segment {
  --rotate: 20deg;
  height: 100%;
  width: 200px;
  transform-origin: top center;
  background: #fff8c9;
  border-top: none;
  border-bottom: none;
  -webkit-animation: inherit;
  animation: inherit;
  -webkit-animation-name: curve-paper;
  animation-name: curve-paper;
  transform-style: preserve-3d; }
  @media screen and (max-width: 992px) {
    .segment {
      width: 15rem; } }

.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; }

.paper.-rogue > .segment {
  -webkit-animation: inherit;
  animation: inherit;
  -webkit-animation-name: rogue-paper;
  animation-name: rogue-paper;
  transform-origin: left top 20vmin;
  transform-style: preserve-3d; }

@-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); } }
@-webkit-keyframes fly-in {
  0%, 2% {
    transform: translateZ(-20px) translateY(100%) rotateX(0deg); }
  80%, 100% {
    transform: translateZ(-1000px) translateY(0%) rotateX(180deg); } }
@keyframes fly-in {
  0%, 2% {
    transform: translateZ(-20px) translateY(100%) rotateX(0deg); }
  80%, 100% {
    transform: translateZ(-1000px) translateY(0%) rotateX(180deg); } }

/*# sourceMappingURL=animation.css.map */
