/**
 * 中華系スプラッシュ（Cinzel 固定）
 */

#splash-a.splash-a--script {
  pointer-events: none;
}
.splash-a__script-wrap {
  pointer-events: none;
}

/* ---------- 中華ビジュアル共通 ---------- */
.splash-a--oriental.splash-a--script {
  background: #f8f7fd;
}
.splash-a--oriental.splash-a--script .splash-a__vignette {
  background: radial-gradient(
    circle at 50% 45%,
    transparent 0%,
    rgba(248, 247, 253, 0) 48%,
    rgba(211, 194, 219, 0.12) 72%,
    rgba(159, 145, 202, 0.08) 100%
  );
}
.splash-a--oriental .splash-stop-a {
  stop-color: #9f91ca;
}
.splash-a--oriental .splash-stop-b {
  stop-color: #323339;
}
.splash-a--oriental .splash-stop-c {
  stop-color: #a62932;
}
.splash-a--oriental.splash-a--drawn .splash-a__name--stroke {
  opacity: 0.28;
  transition: opacity 1.15s ease 0.5s;
}
.splash-a--oriental.splash-a--script .splash-a__name--fill.is-visible {
  animation:
    splashFillReveal 3.05s cubic-bezier(0.28, 0.82, 0.18, 1) 0.32s 1 normal both,
    splashOrientalPulse 5.8s ease-in-out 3.37s infinite normal none;
}
@keyframes splashFillReveal {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}
@keyframes splashOrientalPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

.splash-a--oriental .splash-a__name--stroke {
  filter: none !important;
  transition: opacity 0.85s ease 0.25s;
}
.splash-a--oriental.splash-a--script .splash-a__name--fill {
  opacity: 1;
  filter: drop-shadow(0 3px 22px rgba(159, 145, 202, 0.35)) !important;
  transition: filter 2.4s ease;
}
.splash-a--oriental.splash-a--script .splash-a__name--fill:not(.is-visible) {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}

/* 墨にじみ（1波目・2波目で「広がり始め」のタイミングを分離） */
.splash-a--oriental .splash-a__ink {
  display: block;
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 0;
  width: 140vmin;
  height: 140vmin;
  margin: -70vmin 0 0 -70vmin;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(0.55px);
}

.splash-a--oriental .splash-a__ink--wave1 {
  background:
    radial-gradient(circle at 42% 48%, rgba(159, 145, 202, 0.52) 0%, transparent 44%),
    radial-gradient(circle at 58% 52%, rgba(50, 51, 57, 0.16) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(159, 145, 202, 0.32) 0%, transparent 56%);
  transform: scale(0.08);
  opacity: 0;
  animation: splashInkWave1 5.6s ease-in-out infinite;
}

.splash-a--oriental .splash-a__ink--wave2 {
  background:
    radial-gradient(circle at 56% 44%, rgba(166, 41, 50, 0.14) 0%, transparent 38%),
    radial-gradient(circle at 36% 56%, rgba(159, 145, 202, 0.48) 0%, transparent 46%),
    radial-gradient(circle at 50% 50%, rgba(50, 51, 57, 0.1) 0%, transparent 54%);
  transform: scale(0.06);
  opacity: 0;
  animation: splashInkWave2 5.6s ease-in-out infinite;
}

@keyframes splashInkWave1 {
  0% {
    transform: scale(0.07);
    opacity: 0.08;
  }
  17% {
    transform: scale(0.5);
    opacity: 0.46;
  }
  32% {
    transform: scale(0.44);
    opacity: 0.36;
  }
  40%,
  46% {
    transform: scale(0.43);
    opacity: 0.34;
  }
  100% {
    transform: scale(0.88);
    opacity: 0.52;
  }
}

@keyframes splashInkWave2 {
  0%,
  43% {
    transform: scale(0.06);
    opacity: 0;
  }
  46% {
    opacity: 0.12;
  }
  66% {
    transform: scale(1.02);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.34);
    opacity: 0.72;
  }
}

/* 名前ブロック（SVG + その直下の帯にだけ赤紐） */
.splash-a--oriental .splash-a__name-block {
  position: relative;
  z-index: 4;
  width: 100%;
  margin: 0 auto;
}

.splash-a--oriental .splash-a__name-block .splash-a__svg {
  position: relative;
  z-index: 2;
  display: block;
}

/* 赤い紐（ロゴ文字の下の狭い帯だけを横切る） */
.splash-a--oriental .splash-a__cords {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(28px, 5.5vw, 40px);
  margin-top: clamp(-14px, -2.2vw, -8px);
  pointer-events: none;
  overflow: hidden;
}

.splash-a--oriental .splash-a__cord {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  transform-origin: 50% 50%;
}

.splash-a--oriental .splash-a__cord--1 {
  top: 18%;
  transform: rotate(-4deg);
}

.splash-a--oriental .splash-a__cord--2 {
  top: 52%;
  transform: rotate(2.5deg);
}

.splash-a--oriental .splash-a__cord--3 {
  top: 36%;
  transform: rotate(-6deg);
}

.splash-a--oriental .splash-a__cord-line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 46%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(166, 41, 50, 0) 12%,
    rgba(166, 41, 50, 0.75) 50%,
    rgba(166, 41, 50, 0) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 14px rgba(166, 41, 50, 0.35),
    0 0 28px rgba(166, 41, 50, 0.12);
  animation: splashCordDrift1 8.4s ease-in-out infinite;
}

.splash-a--oriental .splash-a__cord--2 .splash-a__cord-line {
  width: min(48vw, 420px);
  height: 1.5px;
  animation: splashCordDrift2 9.6s ease-in-out infinite;
  animation-delay: -2.4s;
  opacity: 0.92;
}

.splash-a--oriental .splash-a__cord--3 .splash-a__cord-line {
  width: min(36vw, 320px);
  height: 1px;
  animation: splashCordDrift3 7.1s ease-in-out infinite;
  animation-delay: -4.2s;
  opacity: 0.78;
}

@keyframes splashCordDrift1 {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  52% {
    transform: translateX(240%);
    opacity: 0.55;
  }
  100% {
    transform: translateX(280%);
    opacity: 0;
  }
}

@keyframes splashCordDrift2 {
  0% {
    transform: translateX(-140%);
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  48% {
    transform: translateX(220%);
    opacity: 0.5;
  }
  100% {
    transform: translateX(300%);
    opacity: 0;
  }
}

@keyframes splashCordDrift3 {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  58% {
    transform: translateX(260%);
    opacity: 0.4;
  }
  100% {
    transform: translateX(320%);
    opacity: 0;
  }
}

/* ---------- ロゴ書体（Cinzel 固定） ---------- */
.splash-a--oriental .splash-a__svg text.splash-a__name {
  font-family: "Cinzel", "Times New Roman", Georgia, serif;
  font-size: 54px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.splash-a--oriental .splash-a__svg text.splash-a__name--stroke {
  stroke-width: 1.05;
}

@media (prefers-reduced-motion: reduce) {
  .splash-a--oriental .splash-a__ink {
    animation: none !important;
    transform: scale(1.1);
    opacity: 0.5;
  }
  .splash-a--oriental .splash-a__ink--wave2 {
    opacity: 0.35;
    transform: scale(1.05);
  }
  .splash-a--oriental .splash-a__cord-line {
    animation: none !important;
    transform: translateX(40%);
    opacity: 0.35;
  }
  .splash-a--oriental .splash-a__name--fill,
  .splash-a--oriental .splash-a__name--fill.is-visible {
    -webkit-clip-path: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}