@include sp-layout {
  .end-animation {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 997;
  }

  /*** end-roll ***/
  .end-animation__end-roll {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: $theme-mint;

    .text-balls {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;

      .text-ball {
        position: absolute;
        width: 90px; height: 90px;
        border-radius: 50%;
        opacity: 0;

        .inner {
          position: absolute;
          top: 0; left: 0;
          width: 100%; height: 100%;
          background-color: #F0EFE7;
          border-radius: 50%;
          border: solid 5px #F0EFE7;
          box-sizing: border-box;
          overflow: hidden;

          .bg { width: 100%; height: 100%; }
          .bg div {
            width: 100%; height: 10%;
            background-color: #EBC1C7;
            margin-bottom: 10%;
            transform: translateX(-100%);
          }

          &::after {
            content: ""; display: block;
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-size: 60%;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0;
          }
        }
      }
      .text-ball:nth-child(1) {
        top: 25px; left: 25px;
        .inner:after { background-image: url(../images/end-animation/end-roll/1.png); }
      }
      .text-ball:nth-child(2) {
        top: 25px; right: 25px;
        .inner:after { background-image: url(../images/end-animation/end-roll/2.png); }
      }
      .text-ball:nth-child(3) {
        bottom: 25px; left: 25px;
        .inner:after { background-image: url(../images/end-animation/end-roll/3.png); }
      }
    }

    .paints {
      position: absolute;
      top: calc(50% - 40px); left: calc(50% - 40px);
      width: 80px; height: 80px;

      div {
        float: left;
        width: calc(50% - 5px); height: calc(50% - 5px);
        margin-right: 10px;
        border-radius: 50%;
        opacity: 0;
      }
      div:nth-child(1),
      div:nth-child(2) { margin-bottom: 10px; }
      div:nth-child(2n) { margin-right: 0; }
      div:nth-child(1) { background-color: $theme-pink; }
      div:nth-child(2) { background-color: $theme-light-purple; }
      div:nth-child(3) { background-color: $theme-purple; }
      div:nth-child(4) { background-color: $theme-light-pink; }
    }

    .window {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: $theme-bg;
      transform: translateY(-100%);
      perspective: 1500px;

      img {
        display: block;
        height: 100px;
        position: absolute;
        bottom: 30px; right: 0px;
        transform: rotateZ(-20deg);
      }

      &::before {
        content: ""; display: block;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-image: url(../images/bg.png);
        background-size: 15px;
        opacity: 0.6;
      }
    }
  }

  .end-animation[data-state="start"] {
    /*** end-roll ***/
    .end-animation__end-roll {
      animation:
        end-animation__end-roll-color-1 0.5s ease 1.2s forwards,
        end-animation__end-roll-color-2 0.5s ease 2.1s forwards,
        end-animation__end-roll-color-3 0.5s ease 3s forwards,
        end-animation__end-roll-color-4 0.5s ease 3.9s forwards;

      .text-balls {
        .text-ball:nth-child(1) {
          animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards;
          .inner {
            animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards;
            &::after { animation: fadein 0.5s ease 1.6s forwards; }
          }
          .bg div:nth-child(1) { animation: slide-right 0.3s ease 1.6s forwards; }
          .bg div:nth-child(2) { animation: slide-right 0.3s ease 1.65s forwards; }
          .bg div:nth-child(3) { animation: slide-right 0.3s ease 1.7s forwards; }
          .bg div:nth-child(4) { animation: slide-right 0.3s ease 1.75s forwards; }
          .bg div:nth-child(5) { animation: slide-right 0.3s ease 1.8s forwards; }
        }
        .text-ball:nth-child(2) {
          animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards;
          .inner {
            animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards;
            &::after { animation: fadein 0.5s ease 2.5s forwards; }
          }
          .bg div:nth-child(1) { animation: slide-right 0.3s ease 2.5s forwards; }
          .bg div:nth-child(2) { animation: slide-right 0.3s ease 2.55s forwards; }
          .bg div:nth-child(3) { animation: slide-right 0.3s ease 2.6s forwards; }
          .bg div:nth-child(4) { animation: slide-right 0.3s ease 2.65s forwards; }
          .bg div:nth-child(5) { animation: slide-right 0.3s ease 2.7s forwards; }
        }
        .text-ball:nth-child(3) {
          animation: end-animation__move-text-ball-3 0.4s ease 3s forwards;
          .inner {
            animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards;
            &::after { animation: fadein 0.5s ease 3.4s forwards; }
          }
          .bg div:nth-child(1) { animation: slide-right 0.3s ease 3.4s forwards; }
          .bg div:nth-child(2) { animation: slide-right 0.3s ease 3.45s forwards; }
          .bg div:nth-child(3) { animation: slide-right 0.3s ease 3.5s forwards; }
          .bg div:nth-child(4) { animation: slide-right 0.3s ease 3.55s forwards; }
          .bg div:nth-child(5) { animation: slide-right 0.3s ease 3.6s forwards; }
        }
      }

      .paints {
        div:nth-child(1) {
          animation:
            end-animation__show-paint 0.6s ease 0s forwards,
            scale0-1 0.5s ease-out 1.2s reverse forwards;
          }
        div:nth-child(2) {
          animation:
            end-animation__show-paint 0.4s ease 0.2s forwards,
            scale0-1 0.5s ease-out 2.1s reverse forwards;  
        }
        div:nth-child(3) {
          animation:
            end-animation__show-paint 0.4s ease 0.4s forwards,
            scale0-1 0.5s ease-out 3s reverse forwards;  
        }
        div:nth-child(4) { animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
      }

      .window {
        animation: end-animation__down-window 0.5s ease-out 4.2s forwards;
        img { animation: end-animation__end 0.5s ease 4.7s forwards; }
      }
    }
  }
}