/* ============================================================
 * transition.css — 三瓶问道 · 演算之幕（全屏过渡动画）v1.0
 * 深色演算剧场：三瓶悬于五行生克环 · 五步真演算 · 五音和鸣
 * 独立沉浸层：z-index 500 · 剧场式深色（不随主题切换）
 * ============================================================ */

/* ---------- 幕布 ---------- */
.trans-overlay {
  position: fixed; inset: 0; z-index: 500;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 62% 48% at 50% 44%, rgba(94, 178, 168, .12) 0%, transparent 62%),
    radial-gradient(ellipse 95% 75% at 50% 40%, #243f3a 0%, #152220 52%, #0b110f 100%);
  color: #f2ead8;
  opacity: 0;
  transition: opacity .5s ease;
  cursor: default;
}
.trans-overlay.show { opacity: 1; }
.trans-overlay.fade-out { opacity: 0; pointer-events: none; }

/* ---------- 顶部进度条 ---------- */
.tx-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, .05); z-index: 6; }
.tx-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #4e968e, #c9a86a);
  box-shadow: 0 0 12px rgba(201, 168, 106, .6);
  transition: width .55s cubic-bezier(.22, .9, .36, 1);
}

/* ---------- 背景数据雨 ---------- */
.tx-rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

/* ---------- 题字 ---------- */
.tx-head { position: absolute; top: 40px; left: 0; right: 0; text-align: center; z-index: 3; }
.tx-head h2 {
  font-family: var(--serif); font-size: 21px; font-weight: 700;
  letter-spacing: 10px; text-indent: 10px;
  color: #ead9b5; text-shadow: 0 0 18px rgba(201, 168, 106, .28);
}
.tx-head p { margin-top: 6px; font-size: 12.5px; letter-spacing: 5px; text-indent: 5px; color: rgba(232, 220, 192, .55); }

/* ---------- HUD ---------- */
.tx-hud-top {
  position: absolute; top: 30px; left: 30px; z-index: 3;
  font-family: Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: 2px;
  color: rgba(133, 201, 190, .55); line-height: 2;
}
.tx-hud-data {
  position: absolute; top: 30px; right: 30px; z-index: 3;
  font-family: Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: 1px;
  color: rgba(201, 168, 106, .72); text-align: right; max-width: 42vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-hud-data::before { content: '\226B\00A0'; color: rgba(133, 201, 190, .5); }

/* ---------- 中央舞台 ---------- */
.tx-stage { position: relative; width: 680px; height: 350px; z-index: 2; flex: none; }

/* 连线 + 五行环（SVG） */
.tx-svg { position: absolute; inset: 0; z-index: 1; }
.tx-svg .lk { stroke: rgba(201, 168, 106, .38); stroke-width: 1; stroke-dasharray: 5 9; animation: tx-dash 1.5s linear infinite; }
@keyframes tx-dash { to { stroke-dashoffset: -28; } }
.tx-svg .ring { fill: none; stroke: rgba(201, 168, 106, .26); stroke-width: 1; stroke-dasharray: 3 9; }
.tx-svg .spin-g { transform-origin: 340px 175px; animation: tx-spin 38s linear infinite; }
@keyframes tx-spin { to { transform: rotate(360deg); } }
.tx-svg .wx {
  font-family: var(--serif); font-size: 21px;
  fill: rgba(232, 220, 192, .38);
  text-anchor: middle; dominant-baseline: central;
  transition: fill .6s ease, font-size .6s ease;
}
.tx-svg .wx.lit { fill: #ecd9a8; font-size: 25px; }
.tx-svg .core { font-size: 15px; fill: rgba(232, 220, 192, .6); text-anchor: middle; dominant-baseline: central; animation: tx-breathe 2.6s ease-in-out infinite; }
@keyframes tx-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }

/* 三瓶 */
.tx-bottles { position: absolute; inset: 0; z-index: 2; }
.tx-bottle { position: absolute; width: 118px; text-align: center; }
.tx-bottle img {
  height: 118px; max-width: none; margin: 0 auto;
  filter: drop-shadow(0 0 15px var(--c, rgba(201, 168, 106, .5))) drop-shadow(0 12px 24px rgba(0, 0, 0, .55));
}
.tx-bottle b {
  display: block; margin-top: 7px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 3px;
  color: rgba(242, 234, 216, .92); text-shadow: 0 1px 5px rgba(0, 0, 0, .65);
}

/* 三瓶位置（弧形：中高旁低） */
.tx-b1 { left: 51px;  top: 98px; }
.tx-b2 { left: 281px; top: 28px; }
.tx-b3 { left: 511px; top: 98px; }

/* 入场：三方向飞入 */
.tx-b1 { animation: tx-in-l .8s cubic-bezier(.18, .8, .26, 1) both, tx-fl1 4.4s ease-in-out 1s infinite alternate; }
.tx-b2 { animation: tx-in-t .8s cubic-bezier(.18, .8, .26, 1) .12s both, tx-fl2 4.8s ease-in-out 1.1s infinite alternate; }
.tx-b3 { animation: tx-in-r .8s cubic-bezier(.18, .8, .26, 1) .24s both, tx-fl3 5.2s ease-in-out 1.25s infinite alternate; }
@keyframes tx-in-l { from { transform: translate(-170px, 34px) rotate(-15deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tx-in-t { from { transform: translateY(-95px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tx-in-r { from { transform: translate(170px, 34px) rotate(15deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* 悬浮呼吸（入场后接管，无缝衔接） */
@keyframes tx-fl1 { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes tx-fl2 { from { transform: translateY(0); } to { transform: translateY(-11px); } }
@keyframes tx-fl3 { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* 高潮：三瓶向中心合璧 */
.tx-bottles.merge .tx-bottle { animation: none; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.tx-bottles.merge .tx-b1 { transform: translateX(88px) scale(1.12); }
.tx-bottles.merge .tx-b2 { transform: translateY(24px) scale(1.18); }
.tx-bottles.merge .tx-b3 { transform: translateX(-88px) scale(1.12); }

/* 光爆 */
.tx-burst {
  position: absolute; left: 340px; top: 175px;
  width: 70px; height: 70px; margin: -35px 0 0 -35px;
  border-radius: 50%; z-index: 4; pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 249, 230, .95) 0%,
    rgba(201, 168, 106, .55) 32%,
    rgba(201, 168, 106, .12) 55%,
    transparent 72%);
  transform: scale(0); opacity: 0;
}
.trans-overlay.burst .tx-burst { animation: tx-burst .95s ease-out both; }
@keyframes tx-burst {
  0% { transform: scale(.15); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: scale(8.5); opacity: 0; }
}

/* ---------- 演算步骤（左下） ---------- */
.tx-steps {
  position: absolute; left: 6vw; bottom: 11vh; z-index: 3;
  display: flex; flex-direction: column; gap: 13px; max-width: 30vw;
}
.tx-step { display: flex; align-items: center; gap: 10px; opacity: .3; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease; }
.tx-step .lamp { flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: background .5s, box-shadow .5s; }
.tx-step .t { font-size: 15.5px; font-weight: 700; letter-spacing: 2.5px; color: #efe6d0; white-space: nowrap; }
.tx-step .d { font-family: Consolas, "Courier New", monospace; font-size: 12px; color: rgba(201, 168, 106, .8); letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-step.on { opacity: 1; transform: translateX(0); }
.tx-step.on .lamp { background: #c9a86a; box-shadow: 0 0 11px rgba(201, 168, 106, .9); animation: tx-pulse 1s ease-in-out infinite alternate; }
@keyframes tx-pulse { from { box-shadow: 0 0 6px rgba(201, 168, 106, .5); } to { box-shadow: 0 0 15px rgba(201, 168, 106, 1); } }
.tx-step.ok { opacity: .88; }
.tx-step.ok .lamp { background: #4e968e; box-shadow: 0 0 8px rgba(78, 150, 142, .8); animation: none; }
.tx-step.ok .t::before { content: '\2713\00A0'; color: #6cb3a8; }

/* ---------- 百分比（右下） ---------- */
.tx-meter { position: absolute; right: 6vw; bottom: 10vh; z-index: 3; text-align: right; }
.tx-pct {
  font-family: Consolas, "Courier New", monospace;
  font-size: 62px; font-weight: 700; line-height: 1;
  color: #ecd9a8; text-shadow: 0 0 26px rgba(201, 168, 106, .38);
}
.tx-pct small { font-size: 26px; }
.tx-meter .cap { margin-top: 9px; font-size: 12px; letter-spacing: 4px; color: rgba(232, 220, 192, .55); }

/* ---------- 跳过 ---------- */
.tx-skip {
  position: absolute; right: 26px; bottom: 22px; z-index: 7;
  background: none; border: 1px solid rgba(232, 220, 192, .24);
  color: rgba(232, 220, 192, .58); font-size: 12px; letter-spacing: 2px;
  padding: 6px 15px; border-radius: 999px; cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.tx-skip:hover { color: #f6efdd; border-color: rgba(232, 220, 192, .6); background: rgba(232, 220, 192, .07); }

/* ---------- 响应式 ---------- */
@media (max-width: 1060px) {
  .tx-stage { transform: scale(.82); margin: -28px 0; }
  .tx-steps { max-width: 26vw; }
  .tx-step .d { font-size: 11px; }
}
@media (max-width: 780px) {
  .tx-stage { transform: scale(.56); margin: -72px 0; }
  .tx-steps { left: 5vw; bottom: 15vh; gap: 9px; max-width: 52vw; }
  .tx-step .t { font-size: 13.5px; letter-spacing: 1.5px; }
  .tx-step .d { display: none; }
  .tx-meter { right: 5vw; bottom: 6.5vh; }
  .tx-pct { font-size: 44px; }
  .tx-pct small { font-size: 19px; }
  .tx-hud-data { display: none; }
  .tx-hud-top { display: none; }
  .tx-head { top: 30px; }
  .tx-head h2 { font-size: 17px; letter-spacing: 6px; text-indent: 6px; }
  .tx-head p { font-size: 11px; letter-spacing: 3px; }
}