.section-characters {
  background: url('../img/bg-section-1.jpg') repeat center top;
  padding: 140px 0;
}
.character-icon {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
}
.character-icon img {
  position: absolute;
}
.character-icon:hover {
  box-shadow: 0 0 30px #ffdc00;
  animation: glow 0.5s forwards ease;
  cursor: pointer;
}
@keyframes glow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.09);
  }
}

.character-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.character-out {
  position: absolute;
  width: 100%;
  height: 100%;
}
.z1 {
  z-index: 1;
}
.z2 {
  z-index: 2;
}
/*==========PAGE INTRO ONE==========*/

.intro-one.frame-1 .character {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('../img/intro-page/f1/bg-clouds-loop.webp') repeat-x;
  animation: bg-musashi 30s infinite linear;
  border-radius: 50%;
}
.intro-one.frame-1 .character-circle-bg {
  border: 0.3vw solid #000000;
  background-image: linear-gradient(-30deg, #61596e, #8299e9);
  box-sizing: border-box;
}
.intro-one.frame-1 .character-out img:nth-child(1) {
  width: 33%;
  height: auto;
  right: -6%;
  top: 10%;
  transform-origin: left top;
  animation: musashi-hear 3s infinite ease;
}
.intro-one.frame-1 .character-out img:nth-child(2) {
  width: 64%;
  height: auto;
  top: -14%;
  right: 8%;
  transform-origin: center center;
  animation: musashi-had 3s infinite ease;
}
.intro-one.frame-1 .character-out img:nth-child(3) {
  width: auto;
  height: 67%;
  left: -32%;
  bottom: -2%;
  transform-origin: right bottom;
  animation: musashi-katana 3s infinite ease;
  z-index: 1;
}
.intro-one.frame-1 .character-out img:nth-child(4) {
  width: 100%;
  height: auto;
  bottom: -5%;
  left: -67%;
  mix-blend-mode: screen;
  animation: musashi-flare 3s infinite ease;
  z-index: 1;
}
.intro-one.frame-1 .character .character-inner img:nth-child(1) {
  width: 28%;
  height: auto;
  right: 41.5%;
  top: 33%;
  transform-origin: right center;
  animation: musashi-katana-left 3s infinite ease;
}
.intro-one.frame-1 .character .character-inner img:nth-child(2) {
  width: 50%;
  height: auto;
  top: 21%;
  left: 41%;
  animation: musashi-body 3s infinite ease;
}
.intro-one.frame-1 .character .character-inner img:nth-child(3) {
  width: 53%;
  height: auto;
  bottom: 0;
  left: 28%;
}
.intro-one.frame-1 .character .character-inner img:nth-child(4) {
  width: auto;
  height: 170%;
  bottom: -15%;
  left: 0;
  animation: orc-death-dust-2 10s infinite ease;
  opacity: 0;
}
@keyframes bg-musashi {
  0% {
    background-position: 50% bottom;
  }
  100% {
    background-position: -50% bottom;
  }
}
@keyframes musashi-flare {
  10%,
  100% {
    transform: rotate(0deg);
    opacity: 0;
  }
  0% {
    transform: rotate(360deg);
    opacity: 1;
  }
  80% {
    transform: rotate(720deg);
    opacity: 0;
  }
}
@keyframes musashi-hear {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(-6deg) rotate(-6deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes musashi-had {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes musashi-katana {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2%);
  }
}
@keyframes musashi-katana-left {
  0% {
    transform: translateY(-5%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5%);
  }
}
@keyframes musashi-body {
  0% {
    transform: scale(1) translateY(-2%);
  }
  50% {
    transform: scale(0.99) translateY(0);
  }
  100% {
    transform: scale(1) translateY(-2%);
  }
}

/*==========PAGE INTRO SECOND==========*/

.intro-second.frame-2 .character {
  width: 100%;
  height: 100%;
  position: absolute;
}
.intro-second.frame-2 .character-circle-bg {
  border: 0.3vw solid #000000;
  background-image: linear-gradient(20deg, #854738, #cfaa59);
  box-sizing: border-box;
}
.intro-second.frame-2 .character-out img:nth-child(1) {
  width: 89%;
  height: auto;
  right: -30%;
  top: 36%;
  transform-origin: left top;
  animation: annie-gun-left 5s infinite ease;
}
.intro-second.frame-2 .character-out img:nth-child(2) {
  width: 113%;
  height: auto;
  top: 34%;
  right: -44%;
  transform-origin: center center;
  animation: annie-gun 5s infinite ease;
  z-index: 1;
}
.intro-second.frame-2 .character-out img:nth-child(3) {
  width: 59%;
  height: auto;
  left: -12%;
  top: 24%;
  transform-origin: right top;
  animation: annie-hear 5s infinite ease;
}
.intro-second.frame-2 .character-out img:nth-child(4) {
  width: 70%;
  height: auto;
  top: 7%;
  left: 8%;
  animation: annie-had 5s infinite ease;
}
.intro-second.frame-2 .character .character-inner img:nth-child(1) {
  width: 11%;
  height: auto;
  right: 37.5%;
  top: 29%;
  transform-origin: left top;
  animation: annie-hear 5s infinite ease;
}
.intro-second.frame-2 .character .character-inner img:nth-child(2) {
  width: 52%;
  height: auto;
  top: 40%;
  left: 24%;
  animation: annie-body 5s infinite ease;
}
.intro-second.frame-2 .character .character-inner img:nth-child(3) {
  width: 49%;
  height: auto;
  bottom: 0;
  left: 13%;
  transform-origin: left top;
  animation: annie-bag 5s infinite ease;
}
@keyframes annie-had {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes annie-hear {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(-6deg) rotate(-6deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes annie-gun {
  0% {
    transform: translateY(-4%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4%);
  }
}
@keyframes annie-gun-left {
  0% {
    transform: translateY(-5%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5%);
  }
}
@keyframes annie-body {
  0% {
    transform: scale(1) translateY(-1%);
  }
  50% {
    transform: scale(0.99) translateY(0);
  }
  100% {
    transform: scale(1) translateY(-1%);
  }
}
@keyframes annie-bag {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(0deg);
  }
}
.action-lines-annie {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  background: linear-gradient(to bottom, #854738 0%, #cfaa59 50%, #834738 100%);
  transform: rotate(180deg);
  border-radius: 50%;
}
@keyframes action-lines {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/*==========PAGE INTRO THIRD==========*/

.intro-third.frame-3 .character {
  width: 100%;
  height: 100%;
  position: absolute;
}
.intro-third.frame-3 .character-circle-bg {
  border: 0.3vw solid #000000;
  background-image: linear-gradient(-30deg, #63794f, #c6df99);
  box-sizing: border-box;
}
.intro-third.frame-3 .character-out img:nth-child(1) {
  width: 39%;
  height: auto;
  right: 17%;
  top: -21%;
  transform-origin: left top;
  animation: kiharoa-hear 4s infinite ease;
}
.intro-third.frame-3 .character-out img:nth-child(2) {
  width: 47%;
  height: auto;
  top: -10%;
  right: 23%;
  transform-origin: center center;
  animation: kiharoa-had 4s infinite ease;
  z-index: 1;
}
.intro-third.frame-3 .character-out img:nth-child(3) {
  width: 60%;
  height: auto;
  left: -17%;
  bottom: 3%;
  transform-origin: right bottom;
  animation: kiharoa-left 4s infinite ease;
}
.intro-third.frame-3 .character-out img:nth-child(4) {
  width: 48%;
  height: auto;
  bottom: 2%;
  right: -7%;
  transform-origin: right center;
  animation: kiharoa-right 4s infinite ease;
  z-index: 2;
}
.intro-third.frame-3 .character-out img:nth-child(5) {
  width: 71%;
  height: auto;
  right: 11.5%;
  bottom: -3%;
  transform-origin: top center;
  animation: kiharoa-body 4s infinite ease;
}
.intro-third.frame-3 .character .character-inner img:nth-child(1) {
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  transform-origin: center center;
  animation: bg-kiharoa 4s infinite linear;
  mix-blend-mode: overlay;
}
@keyframes bg-kiharoa {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes musashi-flare {
  10%,
  100% {
    transform: rotate(0deg);
    opacity: 0;
  }
  0% {
    transform: rotate(360deg);
    opacity: 1;
  }
  80% {
    transform: rotate(720deg);
    opacity: 0;
  }
}
@keyframes kiharoa-hear {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(-6deg) rotate(-6deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes kiharoa-had {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes kiharoa-right {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2%);
  }
}
@keyframes kiharoa-left {
  0% {
    transform: translateY(-4%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4%);
  }
}
@keyframes kiharoa-body {
  0% {
    transform: scale(1) translateY(-2%);
  }
  50% {
    transform: scale(0.99) translateY(0);
  }
  100% {
    transform: scale(1) translateY(-2%);
  }
}

/*==========PAGE INTRO FOURTH==========*/

.intro-fourth.frame-4 .character {
  width: 100%;
  height: 100%;
  position: absolute;
}
.intro-fourth.frame-4 .character-circle-bg {
  border: 0.3vw solid #000000;
  background-image: linear-gradient(136deg, #e59b4f, #7c3e2e);
  box-sizing: border-box;
}
.intro-fourth.frame-4 .character-out img:nth-child(1) {
  width: 32%;
  height: auto;
  left: 16%;
  bottom: -1%;
  transform-origin: left top;
  animation: flamma-rigth 4.5s infinite ease;
  z-index: 3;
}
.intro-fourth.frame-4 .character-out img:nth-child(2) {
  width: 100%;
  height: auto;
  top: 8%;
  right: -21%;
  transform-origin: bottom left;
  animation: flamma-rigth-arm 4.5s infinite ease;
  z-index: 2;
}
.intro-fourth.frame-4 .character .character-inner img:nth-child(1) {
  width: 45%;
  height: auto;
  right: -3%;
  top: 19%;
  transform-origin: center center;
  animation: flamma-arm 4.5s infinite ease;
}
.intro-fourth.frame-4 .character .character-inner img:nth-child(2) {
  width: 53%;
  height: auto;
  bottom: -2%;
  left: 29%;
  animation: flamma-body 4.5s infinite ease;
  z-index: 1;
}
.intro-fourth.frame-4 .character .character-inner img:nth-child(3) {
  width: 29%;
  height: auto;
  top: 7%;
  left: 38%;
  transform-origin: left top;
  animation: flamma-had 4.5s infinite ease;
  z-index: 1;
}
.light-sword {
  opacity: 0.5;
  filter: blur(10px);
  width: 60%;
  height: 59%;
  position: absolute;
  top: 18%;
  right: -22%;
  background-color: wheat;
  clip-path: polygon(85% 6%, 81% 6%, 36% 87%, 41% 86%);
  transform-origin: bottom left;
  animation: flamma-rigth-arm 4.5s infinite ease;
  blend-mode: soft-light;
}
@keyframes flamma-parallax {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes flamma-had {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes flamma-arm {
  0% {
    transform: translateY(-4%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4%);
  }
}
@keyframes flamma-rigth {
  0% {
    transform: translateY(-3%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3%);
  }
}
@keyframes flamma-rigth-arm {
  0% {
    transform: translateY(-3%) rotate(0deg);
  }
  50% {
    transform: translateY(0) rotate(4deg);
  }
  100% {
    transform: translateY(-3%) rotate(0deg);
  }
}
@keyframes flamma-body {
  0% {
    transform: scale(1) translateY(-1%);
  }
  50% {
    transform: scale(0.99) translateY(0);
  }
  100% {
    transform: scale(1) translateY(-1%);
  }
}
.smoke-images-blur {
  width: 50%;
  height: 100%;
  left: 37%;
  bottom: 0;
  position: absolute;
}
.smoke-images-blur img {
  position: absolute;
  top: inherit;
  bottom: -30%;
  left: 50%;
  margin-left: -50%;
  height: 60%;
  width: 100%;
  opacity: 0;
  transform: scale(0.2);
  filter: blur(20px);
}

@keyframes smokeL {
  0% {
    opacity: 0;
    transform: scale(0.2) translate(0, 0);
  }
  5% {
    opacity: 1;
    transform: scale(0.2) translate(0, -5%) rotate(0);
  }
  100% {
    opacity: 0;
    transform: scale(1) translate(-20%, -130%) rotate(90deg);
  }
}

@keyframes smokeR {
  0% {
    transform: scale(0.2) translate(0, 0);
  }
  5% {
    opacity: 1;
    transform: scale(0.2) translate(0, -5%) rotate(0);
  }
  100% {
    opacity: 0;
    transform: scale(1) translate(20%, -130%) rotate(90deg);
  }
}

.smoke-images-blur .s0 {
  animation: smokeL 10s 0s infinite !important;
  z-index: 1;
}
.smoke-images-blur .s1 {
  animation: smokeR 10s 1s infinite !important;
}
.smoke-images-blur .s2 {
  animation: smokeL 10s 2s infinite !important;
}
.smoke-images-blur .s3 {
  animation: smokeR 10s 3s infinite !important;
}
.smoke-images-blur .s4 {
  animation: smokeL 10s 4s infinite !important;
}
.smoke-images-blur .s5 {
  animation: smokeR 10s 5s infinite !important;
}
.smoke-images-blur .s6 {
  animation: smokeL 10s 6s infinite !important;
}
.smoke-images-blur .s7 {
  animation: smokeR 10s 7s infinite !important;
}
.smoke-images-blur .s8 {
  animation: smokeL 10s 8s infinite !important;
}
.smoke-images-blur .s9 {
  animation: smokeR 10s 9s infinite !important;
}
.smoke-flamma-blur {
  width: 100%;
  height: 100%;
  left: 3%;
  bottom: -10%;
  position: absolute;
}
.smoke-flamma-blur img {
  position: absolute;
  top: inherit;
  bottom: 0%;
  left: 41%;
  margin-left: -50%;
  height: 60%;
  width: 100%;
  opacity: 0;
  transform: scale(0.2);
  filter: blur(20px);
}
@keyframes smokeL {
  0% {
    opacity: 0;
    transform: scale(0.2) translate(0, 0);
  }
  5% {
    opacity: 1;
    transform: scale(0.2) translate(0, -5%) rotate(0);
  }
  100% {
    opacity: 0;
    transform: scale(1) translate(-20%, -130%) rotate(90deg);
  }
}
@keyframes smokeR {
  0% {
    transform: scale(0.2) translate(0, 0);
  }
  5% {
    opacity: 1;
    transform: scale(0.2) translate(0, -5%) rotate(0);
  }
  100% {
    opacity: 0;
    transform: scale(1) translate(20%, -130%) rotate(90deg);
  }
}
.smoke-flamma-blur .s0 {
  animation: smokeL 4s 0s infinite !important;
}
.smoke-flamma-blur .s1 {
  animation: smokeR 4s 1s infinite !important;
}
.smoke-flamma-blur .s2 {
  animation: smokeL 4s 2s infinite !important;
}
.smoke-flamma-blur .s3 {
  animation: smokeR 4s 3s infinite !important;
}
.smoke-flamma-blur .s4 {
  animation: smokeL 4s 4s infinite !important;
}
.smoke-flamma-blur .s5 {
  animation: smokeR 3s 5s infinite !important;
}
.smoke-flamma-blur .s6 {
  animation: smokeL 3s 6s infinite !important;
}
.smoke-flamma-blur .s7 {
  animation: smokeR 3s 7s infinite !important;
}
.smoke-flamma-blur .s8 {
  animation: smokeL 3s 8s infinite !important;
}
.smoke-flamma-blur .s9 {
  animation: smokeR 3s 9s infinite !important;
}

/*==========PAGE INTRO FIFTH ==========*/

.intro-fifth.frame-5 .character {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url('../img/intro-page/f5/bg-ching.webp') repeat-x;
  animation: bg-ching 30s infinite linear;
  border-radius: 50%;
  background-size: 200% auto;
}
.intro-fifth.frame-5 .character-circle-bg {
  border: 0.3vw solid #000000;
  background-image: linear-gradient(165deg, #9f6858, #7d6a65);
  box-sizing: border-box;
}
.ching-face {
  width: 40%;
  height: 30%;
  position: absolute;
  left: 21%;
  top: 10%;
}
.intro-fifth.frame-5 .character-out img:nth-child(1) {
  width: 44%;
  height: auto;
  right: -15%;
  bottom: 13%;
  transform-origin: bottom left;
  animation: ching-right-gum 3.5s infinite ease;
  z-index: 1;
}
.intro-fifth.frame-5 .character-out img:nth-child(2) {
  width: 34%;
  height: auto;
  left: 7%;
  bottom: 23%;
  transform-origin: left top;
  animation: ching-hear 3.5s infinite ease;
}
.intro-fifth.frame-5 .character .character-inner img:nth-child(1) {
  position: absolute;
  top: -10%;
  animation: bg-ching 3.5s infinite linear;
  /* 	mix-blend-mode: Overlay; */
}
.intro-fifth.frame-5 .character .character-inner img:nth-child(2) {
  width: 14%;
  height: auto;
  left: 19%;
  bottom: 1%;
  transform-origin: right bottom;
  animation: ching-left 3.5s infinite ease;
}
.intro-fifth.frame-5 .character .character-inner img:nth-child(3) {
  width: 57%;
  height: auto;
  left: 19%;
  bottom: -2%;
  transform-origin: top center;
  animation: ching-body 3.5s infinite ease;
}
.intro-fifth.frame-5 .character .character-inner img:nth-child(4) {
  width: 29.5%;
  height: auto;
  right: 17%;
  bottom: 1%;
  transform-origin: right bottom;
  animation: ching-left 3.5s infinite ease;
}
.intro-fifth.frame-5 .character .character-inner .ching-face img:nth-child(1) {
  width: 55%;
  height: auto;
  left: 19%;
  top: -4%;
  transform-origin: right bottom;
  animation: ching-face-head 3.5s infinite ease;
}
.intro-fifth.frame-5 .character .character-inner .ching-face img:nth-child(2) {
  width: 10%;
  height: auto;
  left: 17%;
  bottom: 9%;
  animation: ching-earring 3.5s infinite ease;
  transform-origin: top right;
}
.intro-fifth.frame-5 .character .character-inner .ching-face img:nth-child(3) {
  width: 10%;
  height: auto;
  left: 66%;
  bottom: 6%;
  animation: ching-earring 3.5s infinite ease;
  transform-origin: top right;
}
.intro-fifth.frame-5 .character .character-inner .ching-face img:nth-child(4) {
  width: 9%;
  height: auto;
  left: 28%;
  top: 12%;
  animation: hair-06 3.5s infinite ease;
  transform-origin: top left;
}
.intro-fifth.frame-5 .character .character-inner .ching-face img:nth-child(5) {
  width: auto;
  height: 55%;
  right: 31%;
  top: 15.5%;
  animation: hair-06 3.5s infinite ease;
  transform-origin: top left;
}
@keyframes bg-ching {
  0% {
    background-position: 100% 250%;
  }
  100% {
    background-position: -100% 250%;
  }
}
@keyframes hair-face {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ching-earring {
  0% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(1deg);
  }
}
@keyframes ching-hear {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(-8deg) rotate(6deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes character-ching-head {
  0% {
    transform: translateY(0%) rotate(1deg);
  }
  50% {
    transform: translateY(3%) rotate(0deg);
  }
  100% {
    transform: translateY(0%) rotate(1deg);
  }
}
@keyframes ching-face-head {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes ching-right {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2%);
  }
}
@keyframes ching-right-gum {
  0% {
    transform: translateY(-3%);
  }
  50% {
    transform: translateY(0) rotate(-6deg);
  }
  100% {
    transform: translateY(-3%);
  }
}
@keyframes ching-left {
  0% {
    transform: translateY(-4%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4%);
  }
}
@keyframes ching-body {
  0% {
    transform: scale(1) translateY(-2%);
  }
  50% {
    transform: scale(0.99) translateY(0) scale(0.99);
  }
  100% {
    transform: scale(1) translateY(-2%);
  }
}

/*==========PAGE INTRO SIXTH==========*/

.intro-sixth.frame-6 .character {
  width: 100%;
  height: 100%;
  position: absolute;
}
.intro-sixth.frame-6 .character-circle-bg {
  border: 0.3vw solid #000000;
  background-image: linear-gradient(175deg, #88c0e7, #6672b1);
  box-sizing: border-box;
}
.intro-sixth.frame-6 .character-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background-image: url('../img/intro-page/f6/bg-nakano.webp');
  background-size: 120% auto;
  background-position: 55%;
}
.intro-sixth.frame-6 .character-out img:nth-child(1) {
  width: 50%;
  height: auto;
  right: 23%;
  top: -24%;
  transform-origin: left top;
  animation: nakano-had 5s infinite ease;
}
.intro-sixth.frame-6 .character-out img:nth-child(2) {
  width: 75%;
  height: auto;
  left: 23%;
  bottom: 3%;
  transform-origin: center bottom;
  animation: nakano-katana 5s infinite ease;
}
.intro-sixth.frame-6 .character .character-inner img:nth-child(1) {
  width: 33%;
  height: auto;
  bottom: 1%;
  left: 6%;
  transform-origin: bottom left;
  animation: nakano-left 5s infinite ease;
}
.intro-sixth.frame-6 .character .character-inner img:nth-child(2) {
  width: 30%;
  height: auto;
  bottom: 2%;
  right: 5%;
  transform-origin: right bottom;
  animation: nakano-right 5s infinite ease;
}
.intro-sixth.frame-6 .character .character-inner img:nth-child(3) {
  width: 52%;
  height: auto;
  right: 22%;
  bottom: -3%;
  animation: musashi-body 5s infinite ease;
}
.intro-sixth.frame-6 .character .character-inner img:nth-child(4) {
  width: 33%;
  height: auto;
  top: 20%;
  left: 32%;
  transform-origin: top center;
  animation: nakano-hear 5s infinite ease-in-out;
}
.intro-sixth.frame-6 .character .character-inner img:nth-child(5) {
  width: 29%;
  height: auto;
  top: 7%;
  left: 37%;
  transform-origin: left top;
  animation: nakano-had 5s infinite ease;
}
.intro-sixth.frame-6 .character .character-inner img:nth-child(6) {
  width: 22%;
  height: auto;
  top: 18%;
  left: 41%;
  transform-origin: top center;
  animation: nakano-braids 5s infinite ease-in-out;
}

@keyframes nakano-right {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2%);
  }
}
@keyframes nakano-left {
  0% {
    transform: translateY(-4%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4%);
  }
}
@keyframes nakano-braids {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(3deg) rotate(1deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes nakano-hear {
  0% {
    transform: skew(8deg) rotate(3deg);
  }
  50% {
    transform: skew(-11deg) rotate(-11deg);
  }
  100% {
    transform: skew(8deg) rotate(3deg);
  }
}
@keyframes nakano-had {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(1deg) translateX(1%);
  }
  100% {
    transform: rotate(0deg) translateX(0);
  }
}
@keyframes nakano-katana {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2%);
  }
}
@keyframes nakano-body {
  0% {
    transform: scale(1) translateY(-2%);
  }
  50% {
    transform: scale(0.99) translateY(0);
  }
  100% {
    transform: scale(1) translateY(-2%);
  }
}
/*==========PAGE  INTRO SIXTH==========*/

.intro-seventh.frame-7 .character {
  width: 100%;
  height: 100%;
  position: absolute;
}
.intro-seventh.frame-7 .character-circle-bg {
  border: 0.3vw solid #000000;
  background-image: linear-gradient(136deg, #e59b4f, #7c3e2e);
  box-sizing: border-box;
}
.intro-seventh.frame-7 .character-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background-size: 120% auto;
  background-position: 55%;
}
.intro-seventh.frame-7 .character-out img:nth-child(1) {
  width: 55%;
  height: auto;
  right: 23%;
  top: -17%;
  z-index: 9;
  transform-origin: 50% 0%;
  animation: jannette-had 4.5s infinite ease;
}
.intro-seventh.frame-7 .character-out img:nth-child(2) {
  width: 55%;
  height: auto;
  right: 24%;
  top: 0%;
  z-index: 9;
  transform-origin: left top;
  animation: jannette-had 4.5s infinite ease;
}
.intro-seventh.frame-7 .character-out img:nth-child(3) {
  width: 43%;
  height: auto;
  bottom: -28%;
  right: -13%;
  z-index: 10;
  transform-origin: right bottom;
  animation: jeannette-right 4.5s infinite ease;
}
.intro-seventh.frame-7 .character .character-inner img:nth-child(1) {
  width: 43%;
  height: auto;
  bottom: -32%;
  left: -5%;
  transform-origin: bottom left;
  animation: jannette-left 4.5s infinite ease;
}
.intro-seventh.frame-7 .character .character-inner img:nth-child(2) {
  width: 75%;
  height: auto;
  right: 7%;
  bottom: -31%;
  transform-origin: top;
  animation: jannette-body 4.5s infinite ease;
}

@keyframes jeannette-right {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2%);
  }
}
@keyframes jannette-left {
  0% {
    transform: translateY(-4%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4%);
  }
}
@keyframes nakano-braids {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(3deg) rotate(1deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes jannette-had {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(1deg) translateX(1%);
  }
  100% {
    transform: rotate(0deg) translateX(0);
  }
}
@keyframes jannette-body {
  0% {
    transform: scale(1) translateY(-2%);
  }
  50% {
    transform: scale(0.99) translateY(0);
  }
  100% {
    transform: scale(1) translateY(-2%);
  }
}

/*==========PAGE INTRO eighth==========*/

.intro-eighth.frame-8 .character {
  width: 100%;
  height: 100%;
  position: absolute;
}
.intro-eighth.frame-8 .character-circle-bg {
  border: 0.3vw solid #000000;
  background: url('../img/intro-page/f11/fondo.jpg') repeat-x;
  box-sizing: border-box;
  background-size: auto 100%;
}
.intro-eighth.frame-8 .character-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background-size: 120% auto;
  background-position: 55%;
}
.intro-eighth.frame-8 .character-out img:nth-child(1) {
  width: 59%;
  height: auto;
  bottom: 32%;
  right: -12%;
  z-index: 2;
  transform-origin: left bottom;
  animation: andrew-right 4s infinite ease;
}
.intro-eighth.frame-8 .character-out img:nth-child(2) {
  width: 29%;
  height: auto;
  right: 35%;
  top: -14%;
  z-index: 9;
  transform-origin: bottom;
  animation: andrew-had 4s infinite ease;
}
.intro-eighth.frame-8 .character .character-inner img:nth-child(1) {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 30%;
  left: 0;
  animation: andrew-fogloop 10s infinite linear;
}
.intro-eighth.frame-8 .character .character-inner img:nth-child(2) {
  width: 17%;
  height: auto;
  bottom: 8px;
  left: 13%;
  transform-origin: top right;
  animation: andrew-left 4s infinite ease;
}
.intro-eighth.frame-8 .character .character-inner img:nth-child(3) {
  width: 51%;
  height: auto;
  right: 23%;
  bottom: -5%;
  transform-origin: top center;
  animation: andrew-body 4s infinite ease;
}
@keyframes andrew-fogloop {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(100%);
  }
}
@keyframes andrew-right {
  0% {
    transform: translateY(-1%) rotate(-2deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(-1%) rotate(-2deg);
  }
}
@keyframes andrew-left {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2%);
  }
}
@keyframes andrew-braids {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(3deg) rotate(1deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes andrew-had {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(1deg) translateX(1%);
  }
  100% {
    transform: rotate(0deg) translateX(0);
  }
}
@keyframes andrew-body {
  0% {
    transform: scale(1) translateY(-1%);
  }
  50% {
    transform: scale(0.99) translateY(0);
  }
  100% {
    transform: scale(1) translateY(-1%);
  }
}

/*==========FX==========*/

#cherry-blossom {
  position: absolute;
  top: -50%;
  width: 100%;
  right: 0;
  text-align: right;
  height: 160%;
}
#cherry-blossom i {
  display: inline-block;
  width: 200px;
  height: 150px;
  background: linear-gradient(to bottom right, #ffb7bd, #bc81a7);
  transform: skew(20deg);
  border-radius: 5% 40% 70%;
  /*     box-shadow: inset 0px 0px 1px #ff9abf; */
  border: 1px solid #ff9abf;
  z-index: 1;
  -webkit-animation: falling 5s 0s infinite;
}

#cherry-blossom i:nth-of-type(2n) {
  -webkit-animation: falling2 5s 0s infinite;
}
#cherry-blossom i:nth-of-type(3n) {
  -webkit-animation: falling3 5s 0s infinite;
}

#cherry-blossom i:before {
  position: absolute;
  content: '';
  top: 117px;
  right: 9px;
  height: 27px;
  width: 32px;
  transform: rotate(49deg);
}

#cherry-blossom i:after {
  content: '';
  height: 125px;
  width: 10px;
  background: linear-gradient(to right, #ffb7bd, #bc81a7);
  display: block;
  transform: rotate(125deg);
  position: absolute;
  left: 85px;
  border-radius: 50%;
}

#cherry-blossom i:nth-of-type(n) {
  height: 23px;
  width: 30px;
}
#cherry-blossom i:nth-of-type(n):before {
  width: 7px;
  height: 5px;
  top: 17px;
  right: 1px;
}
#cherry-blossom i:nth-of-type(n):after {
  width: 2px;
  height: 17px;
  left: 12px;
  top: 0px;
}

#cherry-blossom i:nth-of-type(2n + 1) {
  height: 11px;
  width: 16px;
}
#cherry-blossom i:nth-of-type(2n + 1):before {
  width: 4px;
  height: 3px;
  top: 7px;
  right: 0px;
}
#cherry-blossom i:nth-of-type(2n + 1):after {
  width: 2px;
  height: 6px;
  left: 5px;
  top: 1px;
}

#cherry-blossom i:nth-of-type(3n + 2) {
  height: 17px;
  width: 23px;
}
#cherry-blossom i:nth-of-type(3n + 2):before {
  height: 4px;
  width: 4px;
  top: 12px;
  right: 1px;
}
#cherry-blossom i:nth-of-type(3n + 2):after {
  height: 10px;
  width: 2px;
  top: 1px;
  left: 8px;
}

#cherry-blossom i:nth-of-type(n) {
  -webkit-animation-delay: 1.9s;
}
#cherry-blossom i:nth-of-type(2n) {
  -webkit-animation-delay: 3.9s;
}
#cherry-blossom i:nth-of-type(3n) {
  -webkit-animation-delay: 2.3s;
}
#cherry-blossom i:nth-of-type(4n) {
  -webkit-animation-delay: 4.4s;
}
#cherry-blossom i:nth-of-type(5n) {
  -webkit-animation-delay: 5s;
}
#cherry-blossom i:nth-of-type(6n) {
  -webkit-animation-delay: 3.5s;
}
#cherry-blossom i:nth-of-type(7n) {
  -webkit-animation-delay: 2.8s;
}
#cherry-blossom i:nth-of-type(8n) {
  -webkit-animation-delay: 1.5s;
}
#cherry-blossom i:nth-of-type(9n) {
  -webkit-animation-delay: 3.3s;
}
#cherry-blossom i:nth-of-type(10n) {
  -webkit-animation-delay: 2.5s;
}
#cherry-blossom i:nth-of-type(11n) {
  -webkit-animation-delay: 1.2s;
}
#cherry-blossom i:nth-of-type(12n) {
  -webkit-animation-delay: 4.1s;
}
#cherry-blossom i:nth-of-type(13n) {
  -webkit-animation-delay: 1s;
}
#cherry-blossom i:nth-of-type(14n) {
  -webkit-animation-delay: 4.7s;
}
#cherry-blossom i:nth-of-type(15n) {
  -webkit-animation-delay: 3s;
}

#cherry-blossom i:nth-of-type(n) {
  background: linear-gradient(to bottom right, #ffb7bd, #bc81a7);
}
#cherry-blossom i:nth-of-type(2n + 2) {
  background: linear-gradient(to bottom right, #ffb7bd, #bc81a7);
}
#cherry-blossom i:nth-of-type(4n + 1) {
  background: linear-gradient(to bottom right, #ffb7bd, #bc81a7);
}

#cherry-blossom i:nth-of-type(n) {
  opacity: 1;
}
#cherry-blossom i:nth-of-type(3n + 1) {
  opacity: 1;
}
#cherry-blossom i:nth-of-type(3n + 2) {
  opacity: 1;
}

#cherry-blossom i:nth-of-type(n) {
  transform: rotate(180deg);
}

#cherry-blossom i:nth-of-type(n) {
  -webkit-animation-timing-function: ease-in-out;
}

@media screen and (min-width: 360px) {
  #cherry-blossom i:nth-of-type(n) {
    height: 6px;
    width: 9px;
  }
  #cherry-blossom i:nth-of-type(n):before {
    width: 7px;
    height: 5px;
    top: 17px;
    right: 1px;
  }
  #cherry-blossom i:nth-of-type(n):after {
    width: 1px;
    height: 1px;
    left: 1px;
    top: 0px;
  }

  #cherry-blossom i:nth-of-type(2n + 1) {
    height: 2.5px;
    width: 5px;
  }
  #cherry-blossom i:nth-of-type(2n + 1):before {
    width: 4px;
    height: 3px;
    top: 7px;
    right: 0px;
  }
  #cherry-blossom i:nth-of-type(2n + 1):after {
    width: 1px;
    height: 1px;
    left: 1px;
    top: 1px;
  }

  #cherry-blossom i:nth-of-type(3n + 2) {
    height: 8.5px;
    width: 9.5px;
  }
  #cherry-blossom i:nth-of-type(3n + 2):before {
    height: 4px;
    width: 4px;
    top: 12px;
    right: 1px;
  }
  #cherry-blossom i:nth-of-type(3n + 2):after {
    height: 1px;
    width: 1px;
    top: 1px;
    left: 1px;
  }
}
@media screen and (min-width: 640px) {
  #cherry-blossom i:nth-of-type(n) {
    height: 10px;
    width: 20px;
  }
  #cherry-blossom i:nth-of-type(n):before {
    width: 7px;
    height: 5px;
    top: 17px;
    right: 1px;
  }
  #cherry-blossom i:nth-of-type(n):after {
    width: 2px;
    height: 17px;
    left: 12px;
    top: 0px;
  }

  #cherry-blossom i:nth-of-type(2n + 1) {
    height: 11px;
    width: 16px;
  }
  #cherry-blossom i:nth-of-type(2n + 1):before {
    width: 4px;
    height: 3px;
    top: 7px;
    right: 0px;
  }
  #cherry-blossom i:nth-of-type(2n + 1):after {
    width: 2px;
    height: 6px;
    left: 5px;
    top: 1px;
  }

  #cherry-blossom i:nth-of-type(3n + 2) {
    height: 17px;
    width: 23px;
  }
  #cherry-blossom i:nth-of-type(3n + 2):before {
    height: 4px;
    width: 4px;
    top: 12px;
    right: 1px;
  }
  #cherry-blossom i:nth-of-type(3n + 2):after {
    height: 10px;
    width: 2px;
    top: 1px;
    left: 8px;
  }
}

@media screen and (min-width: 1000px) {
  #cherry-blossom i:nth-of-type(n) {
    height: 7px;
    width: 10px;
  }
  #cherry-blossom i:nth-of-type(n):before {
    width: 7px;
    height: 5px;
    top: 17px;
    right: 1px;
  }
  #cherry-blossom i:nth-of-type(n):after {
    width: 2px;
    height: 17px;
    left: 12px;
    top: 0px;
  }

  #cherry-blossom i:nth-of-type(2n + 1) {
    height: 11px;
    width: 16px;
  }
  #cherry-blossom i:nth-of-type(2n + 1):before {
    width: 4px;
    height: 3px;
    top: 7px;
    right: 0px;
  }
  #cherry-blossom i:nth-of-type(2n + 1):after {
    width: 2px;
    height: 6px;
    left: 5px;
    top: 1px;
  }

  #cherry-blossom i:nth-of-type(3n + 2) {
    height: 17px;
    width: 23px;
  }
  #cherry-blossom i:nth-of-type(3n + 2):before {
    height: 4px;
    width: 4px;
    top: 12px;
    right: 1px;
  }
  #cherry-blossom i:nth-of-type(3n + 2):after {
    height: 10px;
    width: 2px;
    top: 1px;
    left: 8px;
  }
}
@-webkit-keyframes falling {
  0% {
    -webkit-transform: translate3d(300, 0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate3d(-350px, 700px, 0) rotate(90deg);
  }
}
@-webkit-keyframes falling3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(-20deg);
  }
  100% {
    -webkit-transform: translate3d(-230px, 640px, 0) rotate(-70deg);
  }
}
@-webkit-keyframes falling2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(90deg);
  }
  100% {
    -webkit-transform: translate3d(-400px, 680px, 0);
  }
}
/*Action LInes*/

.lines {
  width: 100%;
  height: 40%;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  z-index: 1;
  animation: lines 0.5s linear infinite;
  background-blend-mode: multiply;
  opacity: 0;
}
.lines:nth-child(1) {
  animation-delay: 0.2s;
}
.lines:nth-child(2) {
  animation-delay: 0.3s;
}
.lines:nth-child(3) {
  animation-delay: 0.6s;
}
.lines:nth-child(4) {
  bottom: 0;
  top: auto;
}
.lines:nth-child(5) {
  bottom: 0;
  top: auto;
  animation-delay: 0.2s;
}
.lines:nth-child(6) {
  bottom: 0;
  top: auto;
  animation-delay: 0.3s;
}
.lines:nth-child(7) {
  bottom: 0;
  top: auto;
  animation-delay: 0.6s;
}
.speed-lines {
  background-color: #ffffff;
  width: 20%;
  height: 0.5%;
  position: absolute;
  animation: speed-lines 0.5s linear infinite;
  z-index: 1;
}
.speed-lines:nth-child(8) {
  top: 5%;
  width: 20%;
  animation-duration: 0.3s;
  border-radius: 2%;
}
.speed-lines:nth-child(9) {
  top: 8%;
  animation-duration: 0.7s;
}
.speed-lines:nth-child(10) {
  top: 13%;
  animation-duration: 0.8s;
}
.speed-lines:nth-child(11) {
  top: 20%;
  animation-duration: 0.2s;
}
.speed-lines:nth-child(12) {
  bottom: 20%;
  animation-duration: 0.2s;
}
.speed-lines:nth-child(13) {
  bottom: 13%;
  animation-duration: 0.7s;
}
.speed-lines:nth-child(14) {
  bottom: 8%;
  animation-duration: 0.6s;
}
.speed-lines:nth-child(15) {
  bottom: 5%;
  animation-duration: 0.2s;
}
@keyframes lines {
  0% {
    height: 20%;
    opacity: 1;
  }
  50% {
    height: 40%;
    opacity: 1;
  }
  100% {
    height: 20%;
    opacity: 1;
  }
}
@keyframes speed-lines {
  from {
    transform: translateX(800%);
  }
  to {
    transform: translateX(-100%);
  }
}