/* ============================================
   五浊轮盘 (Toxic Wheel) — 归墟核心交互组件
   ============================================ */

.toxic-wheel-container {
  position: relative;
  width: 420px;
  height: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toxic-wheel {
  position: relative;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  animation: wheelRotate 60s linear infinite;
}

@keyframes wheelRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ——— 浊气背景 ——— */
.toxic-wheel-bg {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,75,126,0.12) 0%, rgba(42,31,46,0.06) 40%, transparent 70%);
  animation: toxicBreathe 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes toxicBreathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.04); }
}

/* ——— 中心核心 ——— */
.toxic-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, #3B2C3F, #0B0B10);
  border: 1px solid rgba(109,75,126,0.3);
  box-shadow: 0 0 40px rgba(109,75,126,0.2), 0 0 80px rgba(109,75,126,0.08), inset 0 0 30px rgba(42,31,46,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.6s ease;
}

.toxic-center.pulse {
  animation: centerPulse 0.8s ease-in-out;
}

@keyframes centerPulse {
  0% { box-shadow: 0 0 40px rgba(109,75,126,0.2), 0 0 80px rgba(109,75,126,0.08); }
  50% { box-shadow: 0 0 80px rgba(109,75,126,0.5), 0 0 120px rgba(109,75,126,0.2), inset 0 0 50px rgba(109,75,126,0.3); }
  100% { box-shadow: 0 0 40px rgba(109,75,126,0.2), 0 0 80px rgba(109,75,126,0.08); }
}

.toxic-center-text {
  font-family: var(--font-heading-cn);
  font-size: 16px;
  color: var(--color-void-light);
  letter-spacing: 0.06em;
  animation: wheelRotate 60s linear infinite reverse;
  pointer-events: none;
}

/* ——— 节点通用 ——— */
.toxic-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 94px;
  height: 94px;
  border-radius: 16px;
  cursor: pointer;
  z-index: 3;
  transform: translate(-50%, -50%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
  gap: 1px;
}

.toxic-node-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: wheelRotate 60s linear infinite reverse;
  gap: 1px;
}

.toxic-node-name {
  font-family: var(--font-heading-cn);
  font-size: 24px;
  color: var(--color-void-light);
  letter-spacing: 0.04em;
  pointer-events: none;
  transition: all 0.4s ease;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.toxic-node-envoy {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
  display: block;
}

.toxic-node-title {
  font-size: 9px;
  color: var(--color-void-text);
  pointer-events: none;
  letter-spacing: 0.08em;
  opacity: 0.6;
  transition: all 0.4s ease;
}

.toxic-node-desc {
  font-size: 9px;
  color: var(--color-void-text);
  pointer-events: none;
  transition: all 0.4s ease;
  letter-spacing: 0.04em;
  opacity: 0.5;
}

/* hover scale on node, not inner */
.toxic-node:hover .toxic-node-inner {
  transform: scale(1.15);
}

/* ——— 各毒配色 ——— */
.toxic-node-greed {
  background: radial-gradient(circle at 50% 30%, rgba(200,160,60,0.2), rgba(28,20,24,0.95));
  border: 1px solid rgba(180,140,60,0.25);
  box-shadow: 0 0 15px rgba(180,140,60,0.1);
}
.toxic-node-anger {
  background: radial-gradient(circle at 50% 30%, rgba(160,40,30,0.2), rgba(28,20,24,0.95));
  border: 1px solid rgba(160,50,40,0.25);
  box-shadow: 0 0 15px rgba(160,50,40,0.1);
}
.toxic-node-ignorance {
  background: radial-gradient(circle at 50% 30%, rgba(120,100,140,0.2), rgba(28,20,24,0.95));
  border: 1px solid rgba(120,100,140,0.25);
  box-shadow: 0 0 15px rgba(120,100,140,0.1);
}
.toxic-node-pride {
  background: radial-gradient(circle at 50% 30%, rgba(180,175,170,0.15), rgba(28,20,24,0.95));
  border: 1px solid rgba(180,175,170,0.2);
  box-shadow: 0 0 15px rgba(180,175,170,0.08);
}
.toxic-node-doubt {
  background: radial-gradient(circle at 50% 30%, rgba(100,60,120,0.2), rgba(28,20,24,0.95));
  border: 1px solid rgba(100,60,120,0.25);
  box-shadow: 0 0 15px rgba(100,60,120,0.1);
}

/* ——— Hover ——— */
.toxic-node:hover {
  z-index: 5;
}

.toxic-node-greed:hover {
  box-shadow: 0 0 35px rgba(180,140,60,0.35), 0 0 60px rgba(180,140,60,0.1);
  border-color: rgba(200,160,60,0.5);
}
.toxic-node-anger:hover {
  box-shadow: 0 0 35px rgba(200,50,40,0.35), 0 0 60px rgba(200,50,40,0.1);
  border-color: rgba(200,60,40,0.5);
}
.toxic-node-ignorance:hover {
  box-shadow: 0 0 35px rgba(130,110,150,0.3), 0 0 60px rgba(130,110,150,0.08);
  border-color: rgba(140,120,160,0.45);
}
.toxic-node-pride:hover {
  box-shadow: 0 0 30px rgba(190,185,180,0.25), 0 0 50px rgba(190,185,180,0.06);
  border-color: rgba(200,195,190,0.35);
}
.toxic-node-doubt:hover {
  box-shadow: 0 0 35px rgba(110,70,130,0.35), 0 0 60px rgba(110,70,130,0.1);
  border-color: rgba(120,80,140,0.5);
}

/* ——— Active (click animation) ——— */
.toxic-node.active {
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.6;
  filter: brightness(1.5);
  transition: all 0.3s ease-in;
}

/* ——— 连线 ——— */
.toxic-lines {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.toxic-lines svg {
  width: 100%;
  height: 100%;
}

.toxic-line {
  stroke: rgba(109,75,126,0.15);
  stroke-width: 0.5;
  fill: none;
  transition: stroke 0.4s ease;
}

.toxic-line.active-line {
  stroke: rgba(109,75,126,0.4);
  stroke-width: 1.5;
}

/* ——— 腐败层联动 ——— */
.corruption-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(109,75,126,0.15), transparent);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.corruption-flash.visible {
  opacity: 1;
  transition: opacity 0.6s ease-out;
}

/* ——— Click 动画：节点收缩 ——— */
.toxic-node.shrinking {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, -50%) scale(0.3) !important;
  opacity: 0.4;
}

.toxic-node.fading-out {
  transition: all 0.4s ease-in;
  transform: translate(-50%, -50%) scale(0.01) !important;
  opacity: 0;
}

/* ——— 黑洞扩大 ——— */
.toxic-center.expanding {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, -50%) scale(3.5);
  box-shadow: 0 0 120px rgba(11,11,16,1), 0 0 200px rgba(11,11,16,0.9), 0 0 300px rgba(0,0,0,1);
  background: radial-gradient(circle, #000 60%, rgba(11,11,16,0.95) 100%);
  border-color: transparent;
  z-index: 10;
}

.toxic-center.expanding .toxic-center-text {
  opacity: 0;
}

/* ——— 全屏黑雾过渡 ——— */
.void-transition {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(11,11,16,0.98) 60%, rgba(11,11,16,0.8) 100%);
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.void-transition.active {
  opacity: 1;
}

/* ——— Hover 雾气 ——— */
.void-haze {
  position: fixed;
  inset: 0;
  z-index: 9980;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.void-haze.greed-haze  { background: radial-gradient(ellipse at center, rgba(180,140,60,0.08), transparent 70%); }
.void-haze.anger-haze  { background: radial-gradient(ellipse at center, rgba(200,50,40,0.08), transparent 70%); }
.void-haze.delusion-haze { background: radial-gradient(ellipse at center, rgba(140,110,150,0.08), transparent 70%); }
.void-haze.pride-haze  { background: radial-gradient(ellipse at center, rgba(190,185,180,0.06), transparent 70%); }
.void-haze.doubt-haze  { background: radial-gradient(ellipse at center, rgba(120,80,140,0.08), transparent 70%); }

.void-haze.visible { opacity: 1; }

/* ——— 页面入场的黑雾清除 ——— */
.page-wake {
  animation: wakeFromVoid 1.2s ease-out forwards;
}

@keyframes wakeFromVoid {
  0%   { filter: brightness(0); }
  30%  { filter: brightness(0.05); }
  60%  { filter: brightness(0.3); }
  100% { filter: brightness(1); }
}

/* ——— 人物显现序列 ——— */
.reveal-silhouette {
  animation: revealSilhouette 0.8s ease-out 0.4s both;
}
@keyframes revealSilhouette {
  from { opacity: 0; filter: blur(20px) brightness(0.3); }
  to   { opacity: 1; filter: blur(0) brightness(1); }
}

.reveal-name {
  animation: revealName 0.6s steps(8) 1.2s both;
  overflow: hidden;
  white-space: nowrap;
}
@keyframes revealName {
  from { width: 0; }
  to   { width: 100%; }
}

/* ——— 响应式 ——— */
@media (max-width: 600px) {
  .toxic-wheel-container,
  .toxic-wheel {
    width: 320px;
    height: 320px;
  }
  .toxic-center {
    width: 90px;
    height: 90px;
  }
  .toxic-node {
    width: 72px;
    height: 72px;
  }
  .toxic-node-name {
    font-size: 18px;
  }
  .toxic-node-envoy {
    font-size: 9px;
  }
  .toxic-node-title {
    font-size: 7px;
  }
  .toxic-node-desc {
    font-size: 7px;
  }
}