/**
 * ----------------------------------------
 * animation ink-transition
 * ----------------------------------------
 */
@-webkit-keyframes ink-transition {
  0% { background-position: 0% 0%; }

  100% {
    opacity: 0; background-position: 100% 0%;
  }
}

@keyframes ink-transition {
  0% { background-position: 0% 0%; }

  100% {
    opacity: 0; background-position: 100% 0%;
  }
}

/* TODO PC 样式 */
.foreword, .foreword-mobile {
  position: relative; z-index: 1; width: 100%; height: 100vh; height: 100dvh; overflow: hidden;
}

.foreword-before {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
  background: url("../images/foreword/1.png") top left / 100% 100%;
}

.foreword-before::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: url("../images/foreword/ink-transition-sprite.png") 0% 0% / 4000% 100% no-repeat;
}

.loaded .foreword-before { opacity: 1; }

.loaded .foreword-before::after {
  -webkit-animation: ink-transition 1s steps(39) forwards;
          animation: ink-transition 1s steps(39) forwards;
}

.foreword .foreword-inner, .foreword-mobile-inner {
  width: 100%; height: 100%; padding-top: 2.25%;
}

.foreword .foreword-inner .foreword-inner-font { overflow: hidden; }

.foreword .foreword-inner p {
  color: var(--text-color); font-size: var(--text-size); line-height: 2;
}

.foreword .jump-button, .foreword-mobile-inner .jump-button { opacity: 0; visibility: hidden; }

.loaded .foreword .jump-button {
  visibility: visible;
  -webkit-animation: text-focus-in 1s 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
	        animation: text-focus-in 1s 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.foreword .back-button {
  position: fixed; top: 4vw; left: 3vw;
  -webkit-transform: translate(0, 0); transform: translate(0, 0);
}

/* TODO 移动样式 */
.foreword-mobile-inner {
  position: relative; padding: 7.5% 7.633587% 0px; opacity: 0;
  background: url("../images/foreword/mobile/2.png") top left / 100% 100%;
}

.foreword-mobile .back-button {
  position: fixed; top: 6vmax; left: 15px;
  -webkit-transform: translate(0, 0); transform: translate(0, 0);
}

.loaded .foreword-mobile-inner { opacity: 1; }

.foreword-mobile-inner::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100vh; width: 100dvh; height: 100vw;
  background: url("../images/foreword/ink-transition-sprite.png") 0% 0% / 4000% 100% no-repeat;
  -webkit-transform: rotate(90deg); transform: rotate(90deg);
  -webkit-transform-origin: 50vw; transform-origin: 50vw; pointer-events: none;
}

.loaded .foreword-mobile-inner::after {
  -webkit-animation: ink-transition 1.5s steps(39) forwards;
          animation: ink-transition 1.5s steps(39) forwards;
}

.foreword-mobile-font__box { min-height: 61.625vmax; }

.foreword-mobile-inner p {
  text-align: center; line-height: 1.5;
  color: var(--text-color); font-size: var(--text-mobile-size);
}

.foreword-mobile-inner .jump-button {
  position: static; margin-top: 13.020833vw;
}

.loaded .foreword-mobile-inner .jump-button {
  visibility: visible;
  -webkit-animation: text-focus-in 1s 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
	        animation: text-focus-in 1s 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}