/* ============ 召唤动画 ============ */
.summon-stage {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.summon-stage.active { display: flex; }

/* === 武评(P5R风) === */
.summon-stage.wu {
  background:
    radial-gradient(circle at 50% 50%, rgba(230, 0, 18, 0.4) 0%, var(--wu-black) 70%),
    var(--wu-black);
}
/* === 文评(P3R风) === */
.summon-stage.wen {
  background:
    radial-gradient(circle at 50% 50%, rgba(192, 216, 255, 0.3) 0%, #050818 70%),
    #050818;
}

/* === 旋转的放射光线层(背景) === */
.summon-rays {
  position: absolute;
  width: 200vmax; height: 200vmax;
  pointer-events: none;
  animation: raysRotate 20s linear infinite;
}
.summon-stage.wu .summon-rays {
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 8deg,
    rgba(230, 0, 18, 0.18) 8deg 12deg,
    transparent 12deg 24deg,
    rgba(230, 0, 18, 0.10) 24deg 30deg
  );
}
.summon-stage.wen .summon-rays {
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 6deg,
    rgba(192, 216, 255, 0.12) 6deg 10deg,
    transparent 10deg 20deg,
    rgba(192, 216, 255, 0.06) 20deg 26deg
  );
  animation: raysRotate 30s linear infinite;
}
@keyframes raysRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === 旋转能量弧(P5R标志性元素) === */
.summon-arc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid transparent;
}
.summon-arc-1 {
  width: 480px; height: 480px;
  border-top-color: currentColor;
  border-right-color: currentColor;
  animation: arcSpin 4s linear infinite;
}
.summon-arc-2 {
  width: 380px; height: 380px;
  border-bottom-color: currentColor;
  border-left-color: currentColor;
  animation: arcSpin 2.5s linear infinite reverse;
}
.summon-stage.wu .summon-arc {
  color: var(--wu-gold);
  filter: drop-shadow(0 0 20px var(--wu-gold));
}
.summon-stage.wen .summon-arc {
  color: var(--wen-cyan);
  filter: drop-shadow(0 0 20px var(--wen-cyan));
}
@keyframes arcSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === 三层圆环 === */
.summon-shape { position: absolute; border-radius: 50%; }
.summon-stage.wu .summon-shape-1 {
  width: 320px; height: 320px;
  border: 3px dashed var(--wu-red);
  animation: ringSpin 8s linear infinite, ringPulse 2s ease-in-out infinite;
  box-shadow: 0 0 80px var(--wu-red), inset 0 0 30px rgba(230, 0, 18, 0.4);
}
.summon-stage.wu .summon-shape-2 {
  width: 200px; height: 200px;
  border: 2px solid var(--wu-gold);
  animation: ringSpin 5s linear infinite reverse;
  box-shadow: 0 0 30px var(--wu-gold), inset 0 0 15px rgba(255, 215, 0, 0.3);
}
.summon-stage.wu .summon-shape-3 {
  width: 100px; height: 100px;
  border: 1px dotted #fff;
  animation: ringSpin 2s linear infinite, ringPulse 1.2s ease-in-out infinite;
}
.summon-stage.wen .summon-shape-1 {
  width: 320px; height: 320px;
  border: 1px solid var(--wen-silver);
  animation-name: wenRingPulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.summon-stage.wen .summon-shape-2 {
  width: 200px; height: 200px;
  border: 1px solid var(--wen-cyan);
  animation-name: wenRingPulse;
  animation-duration: 3s;
  animation-delay: 0.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.summon-stage.wen .summon-shape-3 {
  width: 100px; height: 100px;
  background: radial-gradient(circle, var(--wen-silver) 0%, transparent 70%);
  animation-name: breath;
  animation-duration: 2.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes wenRingPulse {
  0% { transform: scale(0.85); opacity: 0.4; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.4; }
}
@keyframes ringSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 80px var(--wu-red), inset 0 0 30px rgba(230, 0, 18, 0.4); }
  50% { box-shadow: 0 0 120px var(--wu-red), inset 0 0 50px rgba(230, 0, 18, 0.7); }
}
@keyframes ripple {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes breath {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* === 中心核心(脉冲光球) === */
.summon-core {
  position: absolute;
  width: 50px; height: 50px;
  border-radius: 50%;
  pointer-events: none;
  animation: corePulse 1.5s ease-in-out infinite;
}
.summon-stage.wu .summon-core {
  background: radial-gradient(circle, #fff 0%, var(--wu-gold) 30%, transparent 70%);
  box-shadow: 0 0 40px var(--wu-gold), 0 0 80px var(--wu-red);
}
.summon-stage.wen .summon-core {
  background: radial-gradient(circle, #fff 0%, var(--wen-silver) 40%, transparent 70%);
  box-shadow: 0 0 40px var(--wen-silver), 0 0 80px var(--wen-cyan);
}
@keyframes corePulse {
  0%, 100% { transform: scale(0.7); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* === 标题大字(SUMMONING) === */
.summon-text {
  position: absolute;
  top: calc(50% - 200px);  /* 圆环上方,留间距 */
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 18px;
  z-index: 5;
  font-family: 'Bebas Neue', sans-serif;
  animation: textGlitch 2s infinite;
  white-space: nowrap;
}
.summon-stage.wu .summon-text {
  color: #fff;
  text-shadow:
    3px 3px 0 var(--wu-red),
    6px 6px 0 var(--wu-red-dark),
    0 0 30px var(--wu-red);
}
.summon-stage.wen .summon-text {
  color: var(--wen-silver);
  text-shadow: 0 0 25px var(--wen-cyan), 0 0 50px var(--wen-cyan);
  font-family: 'Cinzel', serif;
  font-style: italic;
  letter-spacing: 12px;
}
@keyframes textGlitch {
  0%, 90%, 100% { opacity: 1; transform: translateX(0); }
  92% { opacity: 0.6; transform: translateX(-2px); }
  94% { opacity: 1; transform: translateX(2px); }
  96% { opacity: 0.8; transform: translateX(0); }
}

/* === 副标题(灵魂凝聚中·Xs) === */
.summon-subtext {
  position: absolute;
  top: calc(50% + 180px);  /* 圆环下方,与SUMMONING分离 */
  font-size: 16px;
  letter-spacing: 6px;
  z-index: 5;
  text-align: center;
  white-space: nowrap;
  animation: subtextBreath 2s ease-in-out infinite;
}
.summon-stage.wu .summon-subtext {
  color: var(--wu-gold);
  font-family: 'Bebas Neue', 'WuCN', sans-serif;
  text-shadow: 0 0 12px var(--wu-gold), 2px 2px 0 var(--wu-black);
  font-weight: 900;
}
.summon-stage.wen .summon-subtext {
  color: #fff;
  text-shadow: 0 0 15px var(--wen-cyan);
  font-family: 'Cinzel', 'WenCN', serif;
  font-style: italic;
  letter-spacing: 8px;
}
@keyframes subtextBreath {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* === 屏幕角落装饰(P5R风) === */
.summon-corner {
  position: absolute;
  font-size: 28px;
  font-weight: 900;
  z-index: 4;
  animation: cornerBlink 0.8s ease-in-out infinite;
}
.summon-stage.wu .summon-corner {
  color: var(--wu-red);
  text-shadow: 0 0 20px var(--wu-red);
}
.summon-stage.wen .summon-corner {
  color: var(--wen-silver);
  text-shadow: 0 0 15px var(--wen-cyan);
  opacity: 0.5;
}
.summon-corner-tl { top: 30px; left: 30px; }
.summon-corner-tr { top: 30px; right: 30px; }
.summon-corner-bl { bottom: 30px; left: 30px; }
.summon-corner-br { bottom: 30px; right: 30px; }
@keyframes cornerBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}
.summon-stage.wu .summon-corner-tr,
.summon-stage.wu .summon-corner-bl { animation-delay: 0.4s; }
.summon-stage.wen .summon-corner-tr,
.summon-stage.wen .summon-corner-bl { animation-delay: 0.4s; }