.movie__ribbon {
  display: block;
  width: 100%;
  height: var(--movie-ribbon-height, min(5.9895833333vw, 44px));
  overflow: hidden;
  background-image: url("/static/mga/feature/ringojam_10th_ksa9ahsJa0k/assets/images/ribbon.png");
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: min(286.4583333333vw, 2200px) min(5.9895833333vw, 44px);
  animation: ribbon-loop 60s linear infinite;
  will-change: background-position;
}
.movie__ribbon img {
  display: none;
}
.movie__ribbon:last-child {
  animation-direction: reverse;
}
@keyframes ribbon-loop {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: max(-286.4583333333vw, -2200px);
  }
}

.message__inner {
  animation: bgmove 12s linear infinite;
  background-repeat: repeat;
}
.app__inner {
  animation: bgmove2 12s linear infinite;
  background-repeat: repeat;
}

@keyframes bgmove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 384px 384px;
  }
}

@keyframes bgmove2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 251px 231px;
  }
}

.feature__character img,
.news__character img {
  animation: vibeltor 3s infinite;
  transform-origin: 50% 80%;
}
@keyframes vibeltor {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

.feature01__decor--05 {
  animation: feature01-balloon-float 5.9s ease-in-out 0.8s infinite;
  will-change: transform;
}

@keyframes feature01-balloon-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

.message__decor--01 {
  opacity: 0;
  transform: translateY(30%);
  transition:
    transform 0.7s 0.9s,
    opacity 0.7s 0.9s;
}
.feature__decor--02,
.feature01__decor--02 {
  opacity: 0;
  transform: translateY(-50%) rotate(10deg);
  transition:
    transform 0.5s 0.3s,
    opacity 0.5s 0.3s;
}

.on.message__decor--01 {
  opacity: 1;
  transform: none;
}

.on.feature__decor--02,
.on.feature01__decor--02 {
  opacity: 1;
  transform: rotate(40deg);
}

.app__library-decor,
.app__library-decor-02,
.app__tv-decor,
.app__tv-decor-02 {
  animation: app-star-soft-blink 3.8s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.app__library-decor-02,
.app__tv-decor-02 {
  animation-delay: 1.4s;
}

@keyframes app-star-soft-blink {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.news__decor--01,
.news__decor--03 {
  display: block;
  transition:
    transform 0.7s 0.3s,
    opacity 0.3s 0.3s;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 10% 100%;
  transition-timing-function: cubic-bezier(0.68, 0.24, 0.57, 1.36);
}
.news__decor--03 {
  transform-origin: 90% 100%;
}
.news__decor--01.on,
.news__decor--03.on {
  opacity: 1;
  transform: scale(1);
}

.feature {
  overflow: hidden;
}

/*confetti */

#confetti {
  --confetti-ribbon-height: min(5.9895833333vw, 44px);
  --confetti-movie-video-height: min(102.8645833333vw, 790px);
  --confetti-message-height: min(188.8020833333vw, 1450px);
  --confetti-fall-height: calc(var(--confetti-movie-video-height) + var(--confetti-message-height) + var(--confetti-ribbon-height) + var(--confetti-ribbon-height) + var(--confetti-ribbon-height) + var(--confetti-ribbon-height) + var(--confetti-ribbon-height));
  height: 0px;
  width: 100%;
  position: relative;
  overflow: visible;
  z-index: 2;
}
#confetti .confetti__inner {
  pointer-events: none;
  position: absolute;
  top: calc(0px - var(--confetti-ribbon-height) - var(--confetti-ribbon-height) - var(--confetti-ribbon-height));
  width: min(768px, 100vw);

  height: var(--confetti-fall-height);
  /*background:rgba(255,0,0,0.5);*/

  -webkit-mask-image:
    linear-gradient(to right, black 0%, black 10%, transparent 20%, transparent 80%, black 90%, black 100%),
    linear-gradient(
      to bottom,
      black 0%,
      transparent 10%,

      transparent 100%
    );

  mask-composite: source-out;

  mask-image:
    linear-gradient(to right, black 0%, black 10%, transparent 20%, transparent 80%, black 90%, black 100%),
    linear-gradient(
      to bottom,
      black 0%,
      transparent 10%,

      transparent 100%
    );
  -webkit-mask-composite: source-out;
}

@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, var(--confetti-fall-height), 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, var(--confetti-fall-height), 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, var(--confetti-fall-height), 0) rotateX(10deg) rotateY(250deg);
  }
}

.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}

.confetti--animation-slow {
  animation: confetti-slow 10s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 7s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 5s linear 1 forwards;
}

.app__mga__visual {
  transform: translateX(0);
  transition: transform 0.35s ease-out;
}

.app__mga__symbol__01,
.app__mga__symbol__02,
.app__mga__symbol__03 {
  transition: opacity 0.4s ease-out;
}

.app__mga.on .app__mga__visual {
  transform: translateX(calc(min(8.984375cqw, 69px) * -1));
  transition-delay: 0.7s;
}

.app__mga.on .app__mga__decor__character {
  animation: mga-character-pyoko 0.7s cubic-bezier(0.25, 1.4, 0.5, 1) 0.7s forwards;
  animation-delay: 1.1s;
}

.app__mga.on .app__mga__symbol__03 {
  opacity: 1;
  transition-delay: 1.9s;
}

.app__mga.on .app__mga__symbol__02 {
  opacity: 1;
  transition-delay: 2.2s;
}

.app__mga.on .app__mga__symbol__01 {
  opacity: 1;
  transition-delay: 2.5s;
}

.app__tv-character {
  opacity: 0;
  transform: translateX(-30%);
  transition:
    transform 0.7s 0.9s,
    opacity 0.7s 0.9s;
  will-change: opacity, transform;
}

.app__tv-character.on {
  opacity: 1;
  transform: none;
}

@keyframes mga-character-pyoko {
  from {
    opacity: 0;
    transform: translateX(min(32.5520833333cqw, 250px)) rotate(-90deg);
  }

  to {
    opacity: 1;
    transform: translateX(min(14.9739583333cqw, 115px)) rotate(0deg);
  }
}