@import url("./title-screen-base.css");

/*
 * moup world ブランドロゴアニメーション
 *
 * 10秒周期:
 *   0〜2秒   worldで待機
 *   2〜5秒   world → moupへ変化
 *   5〜7秒   moupで待機
 *   7〜10秒  moup → worldへ変化
 *
 * worl はX軸回転、dはZ軸回転のみを行う。
 */
.title-brand-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.title-brand-logo__word {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  font-size: 0 !important;
  opacity: 1 !important;
  backface-visibility: visible !important;
  transform-style: preserve-3d;
}

.title-brand-logo__word::before,
.title-brand-logo__word::after {
  display: inline-block;
  color: inherit;
  font-size: clamp(15px, 1.65vw, 20px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
}

.title-brand-logo__word--world {
  animation: title-brand-flip-main 10s ease-in-out infinite !important;
  transform-origin: center center;
}

.title-brand-logo__word--world::before {
  content: "wor";
}

.title-brand-logo__word--world::after {
  content: "l";
  margin-left: -.18em;
}

.title-brand-logo__word--moup {
  margin-left: 0;
  animation: title-brand-rotate-d 10s ease-in-out infinite !important;
  transform-origin: center center;
}

.title-brand-logo__word--moup::before {
  content: "d";
}

.title-brand-logo__word--moup::after {
  content: none;
}

@keyframes title-brand-flip-main {
  0%, 20% {
    transform: rotateX(0deg);
  }
  50%, 70% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes title-brand-rotate-d {
  0%, 20% {
    transform: rotateZ(0deg);
  }
  50%, 70% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@media (max-width: 600px) {
  .title-brand-logo__word::before,
  .title-brand-logo__word::after {
    font-size: 15px;
  }

  .title-brand-logo__word--world::after {
    margin-left: -.16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-brand-logo__word--world,
  .title-brand-logo__word--moup {
    animation: none !important;
    transform: none !important;
  }
}