/* ═══════════════════════════════════════════════════
   divination-immersive.css — 六爻三幕沉浸式交互
   凝神 → 摇卦 → 揭卦 · 分幕递进叙事体验
   ═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   一、三幕容器系统
   ══════════════════════════════════════════════════ */

/* 沉浸式三幕容器 */
.immersive-acts {
  position: relative;
  overflow: hidden;
  min-height: 75vh;
}

/* 每一幕 */
.immersive-act {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.8s;
  pointer-events: none;
  will-change: opacity, transform;
}

.immersive-act.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* 幕退出动画 */
.immersive-act.exit-up {
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity 0.6s ease-in, transform 0.6s ease-in;
}

/* ══════════════════════════════════════════════════
   二、第一幕「凝神」— 焚香祈愿场景
   ══════════════════════════════════════════════════ */

/* 凝神场景全屏容器 */
.act1-meditation {
  padding: 20px 16px 40px;
  width: 100%;
  max-width: 480px;
}

/* 焚香场景容器 — 初始即可见 */
.meditation-incense-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 24px;
  opacity: 1;
  transform: none;
}

/* 焚香场景标题 */
.meditation-incense-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--rt-text-gold, #9a6c1e);
  letter-spacing: 6px;
  margin-bottom: 16px;
  opacity: 0;
  animation: meditationTitleFade 1.5s ease 0.5s forwards;
  text-shadow: 0 0 20px rgba(201, 135, 58, 0.15);
  position: relative;
  z-index: 2;
}
@keyframes meditationTitleFade {
  0% { opacity: 0; letter-spacing: 12px; }
  100% { opacity: 0.85; letter-spacing: 6px; }
}

/* ═══════════════════════════════════
   V3 — 仪式舞台（空灵发光风格）
   ═══════════════════════════════════ */
.med-ritual-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
  padding: 20px 0 8px;
  z-index: 1;
}

/* ═══════════════════════════════════
   浮空烛台 — SVG蜡烛 + CSS流体火焰
   ═══════════════════════════════════ */
.med-float-candle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

/* 烛光大范围光晕 */
.med-fc-glow {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 160, 40, 0.18) 0%,
    rgba(255, 120, 20, 0.08) 40%,
    transparent 70%);
  animation: fcGlowPulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fcGlowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

/* 火焰容器 — 关键：filter 流体技术 */
.med-fc-flame-wrap {
  position: relative;
  width: 20px;
  height: 32px;
  margin-bottom: -3px;
  z-index: 3;
  /* 核心：blur + contrast 产生流体融合效果 */
  filter: blur(0.6px) contrast(1.4) brightness(1.2);
}

/* 外焰 — 橙金色 */
.med-fc-flame {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14px;
  height: 28px;
  background: radial-gradient(ellipse at 50% 85%,
    rgba(255, 200, 50, 0.95) 0%,
    rgba(255, 140, 0, 0.7) 30%,
    rgba(255, 80, 0, 0.3) 55%,
    transparent 75%);
  border-radius: 50% 50% 48% 48% / 65% 65% 35% 35%;
  transform: translateX(-50%);
  animation: fcFlame 0.35s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fcFlame {
  0% { transform: translateX(-50%) scaleY(1) scaleX(1) rotate(-1.5deg); height: 28px; }
  50% { transform: translateX(-50%) scaleY(1.08) scaleX(0.92) rotate(1deg); height: 30px; }
  100% { transform: translateX(-50%) scaleY(0.95) scaleX(1.05) rotate(-0.5deg); height: 27px; }
}

/* 内焰 — 亮白核心 */
.med-fc-flame.inner {
  width: 6px;
  height: 18px;
  background: radial-gradient(ellipse at 50% 85%,
    #fff 0%,
    #fffbe0 20%,
    #ffe066 40%,
    rgba(255, 180, 0, 0.5) 65%,
    transparent 85%);
  animation: fcFlameInner 0.3s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes fcFlameInner {
  0% { transform: translateX(-50%) scaleY(1) rotate(0.5deg); }
  100% { transform: translateX(-50%) scaleY(0.92) rotate(-0.8deg); }
}

/* SVG 蜡烛体 */
.med-fc-body {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

/* ═══════════════════════════════════
   中央香炉区
   ═══════════════════════════════════ */
.med-censer-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

/* 流体烟雾 */
.med-smoke-fluid {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 90px;
  pointer-events: none;
  z-index: 10;
}
.med-sf-wisp {
  position: absolute;
  bottom: 0;
  left: var(--w-left, 50%);
  width: 8px;
  height: 70px;
  background: linear-gradient(to top,
    rgba(180, 170, 195, 0.3),
    rgba(180, 170, 195, 0.12) 35%,
    rgba(180, 170, 195, 0.04) 65%,
    transparent);
  border-radius: 50%;
  filter: blur(3.5px);
  transform-origin: bottom center;
  opacity: 0;
  animation: sfWispRise var(--w-dur, 5s) ease-out var(--w-delay, 0s) infinite;
}
.med-sf-wisp.sm {
  width: 4px;
  filter: blur(2.5px);
}
@keyframes sfWispRise {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scaleX(1) rotate(0deg);
  }
  12% {
    opacity: 0.55;
    transform: translateY(-10px) translateX(calc(var(--w-drift, 10px) * 0.2)) scaleX(1.4) rotate(2deg);
  }
  35% {
    opacity: 0.35;
    transform: translateY(-30px) translateX(calc(var(--w-drift, 10px) * -0.5)) scaleX(2.2) rotate(-3deg);
  }
  65% {
    opacity: 0.15;
    transform: translateY(-55px) translateX(calc(var(--w-drift, 10px) * 0.8)) scaleX(3.5) rotate(2.5deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) translateX(calc(var(--w-drift, 10px) * -0.3)) scaleX(5) rotate(-1deg);
  }
}

/* 香炉上方光晕 */
.med-cz-halo {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 50px;
  background: radial-gradient(ellipse at 50% 80%,
    rgba(201, 135, 58, 0.1),
    rgba(201, 135, 58, 0.03) 50%,
    transparent 80%);
  animation: czHaloPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}
@keyframes czHaloPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleY(0.85); }
  50% { opacity: 1; transform: translateX(-50%) scaleY(1.15); }
}

/* 浮空发光粒子 */
.med-cz-particles {
  position: absolute;
  inset: -30px -20px;
  pointer-events: none;
  z-index: 8;
}
.med-cz-particles span {
  position: absolute;
  left: var(--p-x, 50%);
  top: var(--p-y, 50%);
  width: var(--p-s, 2px);
  height: var(--p-s, 2px);
  border-radius: 50%;
  background: #ffe58a;
  box-shadow: 0 0 calc(var(--p-s, 2px) * 3) rgba(255, 200, 80, 0.5);
  opacity: 0;
  animation: czParticleFloat var(--p-dur, 4s) ease-in-out var(--p-delay, 0s) infinite;
}
@keyframes czParticleFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  30% { opacity: 0.8; transform: translateY(-8px) scale(1); }
  70% { opacity: 0.6; transform: translateY(-16px) scale(0.8); }
}

/* SVG 香炉 */
.med-censer-svg {
  position: relative;
  z-index: 6;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* 香炉底部映射光 */
.med-cz-base-glow {
  width: 110px;
  height: 16px;
  background: radial-gradient(ellipse,
    rgba(201, 135, 58, 0.08),
    transparent 70%);
  margin-top: -6px;
}

/* ── 焚香祈愿按钮 ── */
.meditation-pray-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  border: 2px solid var(--rt-gold, #b87d2e);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(201, 135, 58, 0.12), rgba(201, 135, 58, 0.06));
  color: var(--rt-text-gold, #9a6c1e);
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  opacity: 0;
  animation: prayBtnAppear 1s ease 1.2s forwards;
}
@keyframes prayBtnAppear {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.meditation-pray-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 34px;
  background: linear-gradient(135deg, var(--rt-gold, #b87d2e), rgba(108, 92, 231, 0.3), var(--rt-gold, #b87d2e));
  opacity: 0;
  transition: opacity 0.4s;
  z-index: -1;
}

/* 按钮呼吸光效 */
.meditation-pray-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 36px;
  background: transparent;
  box-shadow: 0 0 20px rgba(201, 135, 58, 0.15);
  animation: prayBtnPulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes prayBtnPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 135, 58, 0.1); }
  50% { box-shadow: 0 0 40px rgba(201, 135, 58, 0.25); }
}

.meditation-pray-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 36px rgba(201, 135, 58, 0.25);
  background: linear-gradient(135deg, rgba(201, 135, 58, 0.2), rgba(201, 135, 58, 0.12));
  border-color: var(--rt-gold-light, #d4950c);
}
.meditation-pray-btn:hover::before { opacity: 0.2; }
.meditation-pray-btn:active { transform: translateY(-1px) scale(0.98); }

/* 焚香提示文字 */
.meditation-hint {
  font-size: 12px;
  color: var(--rt-text-tertiary, #9ba3b5);
  letter-spacing: 2px;
  margin-top: 24px;
  opacity: 0;
  animation: meditationHintFade 1.5s ease 1.8s forwards;
}
@keyframes meditationHintFade {
  0% { opacity: 0; }
  100% { opacity: 0.5; }
}

/* ══════════════════════════════════════════════════
   三、第二幕「摇卦」— 龟壳居中，无底部按钮
   ══════════════════════════════════════════════════ */

/* 隐藏底部按钮区域 */
.immersive-mode .div-bottom-action-bar {
  display: none !important;
}

/* 隐藏竹简进度条 */
.immersive-mode .rt-bamboo-strip {
  display: none !important;
}

/* 龟壳放大为主角 */
.immersive-mode .turtle-shell-body {
  width: 116px;
  height: 140px;
  cursor: pointer;
  /* 增强呼吸感 */
  animation: immTurtleBreath 3.5s ease-in-out infinite;
}
@keyframes immTurtleBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

/* 龟壳hover增强 — 可点击暗示 */
.immersive-mode .turtle-shell-body:hover {
  animation: none;
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.22),
    inset 0 2px 4px rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(62, 44, 28, 0.5),
    0 0 32px rgba(62, 44, 28, 0.15);
}

/* 龟壳点击涟漪 */
.immersive-mode .turtle-shell-body:active {
  transform: translateY(-2px) scale(0.98);
  transition: transform 0.1s;
}

/* 龟壳提示文字 — 居中在龟壳下方 */
.turtle-tap-hint {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  color: var(--rt-text-tertiary, #9ba3b5);
  letter-spacing: 2px;
  white-space: nowrap;
  opacity: 0;
  animation: tapHintPulse 3s ease-in-out infinite;
}
@keyframes tapHintPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* ── 龟壳长按蓄力环 ── */
.turtle-charge-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s;
}
.turtle-charge-ring.active {
  opacity: 1;
}
.turtle-charge-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.turtle-charge-ring .charge-bg {
  fill: none;
  stroke: transparent;
  stroke-width: 3;
}
.turtle-charge-ring.active .charge-bg {
  stroke: rgba(212, 149, 12, 0.15);
}
.turtle-charge-ring .charge-fill {
  fill: none;
  stroke: url(#chargeGrad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transition: stroke-dashoffset 0.1s linear;
  filter: drop-shadow(0 0 6px rgba(212, 149, 12, 0.4));
}
.turtle-charge-ring .charge-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif SC', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--rt-text-gold, #e8c068);
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity 0.3s;
}
.turtle-charge-ring.active .charge-text {
  opacity: 1;
}

/* ── 摇卦顶部引导文字 ── */
/* 龟壳点击提示（移到引导文字上方） */
.turtle-tap-hint-top {
  text-align: center;
  margin-bottom: 4px;
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  color: var(--rt-text-gold, #c9873a);
  letter-spacing: 3px;
  animation: tapHintPulse 3s ease-in-out infinite;
}
.act2-guide-text {
  text-align: center;
  margin-bottom: 12px;
  min-height: 32px;
}
.act2-guide-text span {
  display: inline-block;
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  color: var(--rt-text-secondary, #636e83);
  letter-spacing: 3px;
  opacity: 0;
  transform: translateY(8px);
  animation: guideCharReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes guideCharReveal {
  to { opacity: 0.8; transform: translateY(0); }
}

/* 问事显示条 — 第二幕顶部简洁版 */
.act2-question-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 24px;
  background: rgba(201, 135, 58, 0.04);
  border: 1px solid rgba(201, 135, 58, 0.1);
  margin-bottom: 16px;
  max-width: 360px;
  width: 100%;
}
.act2-question-bar i {
  font-size: 14px;
  color: var(--rt-gold, #b87d2e);
  flex-shrink: 0;
}
.act2-question-bar span {
  font-size: 12px;
  color: var(--rt-text-secondary, #636e83);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ══════════════════════════════════════════════════
   四、幕间过渡特效
   ══════════════════════════════════════════════════ */

/* 全屏过渡遮罩 */
.act-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
}

/* 第一幕→第二幕：向上淡出 + 金色光幕 */
.act-transition-overlay.act1-to-act2 {
  background: radial-gradient(ellipse at center 40%,
    rgba(201, 135, 58, 0.15),
    rgba(10, 10, 20, 0.6) 60%,
    rgba(10, 10, 20, 0.8) 100%);
  animation: act1to2Transition 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes act1to2Transition {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════
   五、问事输入卡片（凝神阶段用）
   ══════════════════════════════════════════════════ */

/* 问事输入区 — 第一幕用 */
.act1-input-card {
  width: 100%;
  padding: 16px;
  border-radius: var(--rt-radius, 16px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.03);
  margin-bottom: 8px;
}

/* 仪式主题下的输入卡片 */
.ritual-theme .act1-input-card {
  background: rgba(26, 17, 40, 0.7);
  border-color: rgba(201, 135, 58, 0.12);
}

/* ══════════════════════════════════════════════════
   六、铜灯调整 — 向龟壳靠拢
   ══════════════════════════════════════════════════ */

/* 沉浸模式下，铜灯位置微调 */
.immersive-mode .div-hex-orbit {
  width: 310px;
  height: 310px;
}

/* ══════════════════════════════════════════════════
   七、响应式适配
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .immersive-mode .turtle-shell-body {
    width: 100px;
    height: 120px;
  }
  .immersive-mode .div-hex-orbit {
    width: 260px;
    height: 260px;
  }
  .med-ritual-stage {
    gap: 18px;
  }
  .med-censer-svg {
    width: 100px;
    height: 84px;
  }
  .med-fc-body {
    width: 20px;
    height: 50px;
  }
  .meditation-pray-btn {
    padding: 12px 32px;
    font-size: 14px;
    letter-spacing: 3px;
  }
  .turtle-charge-ring {
    width: 140px;
    height: 140px;
  }
  .act2-question-bar {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .immersive-mode .turtle-shell-body {
    width: 74px;
    height: 88px;
  }
  .immersive-mode .div-hex-orbit {
    width: 230px;
    height: 230px;
  }
  .med-ritual-stage {
    gap: 12px;
  }
  .med-censer-svg {
    width: 85px;
    height: 72px;
  }
  .med-fc-body {
    width: 16px;
    height: 42px;
  }
  .med-fc-glow {
    width: 60px;
    height: 60px;
  }
}

/* ══════════════════════════════════════════════════
   八、减弱动画模式
   ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .immersive-act {
    transition: opacity 0.2s, visibility 0.2s;
    transform: none !important;
  }
  .immersive-act.exit-up {
    transform: none !important;
  }
  .meditation-incense-scene {
    transition: opacity 0.2s;
    transform: none !important;
  }
  .meditation-pray-btn {
    animation: none;
    opacity: 1;
  }
  .meditation-incense-title {
    animation: none;
    opacity: 0.85;
  }
  .meditation-hint {
    animation: none;
    opacity: 0.5;
  }
  .turtle-tap-hint {
    animation: none;
    opacity: 0.5;
  }
  .immersive-mode .turtle-shell-body {
    animation: none;
  }
  .act-transition-overlay {
    animation: none !important;
  }
  /* V3 焚香场景动画禁用 */
  .med-fc-flame,
  .med-fc-flame.inner,
  .med-sf-wisp,
  .med-fc-glow,
  .med-cz-halo,
  .med-cz-particles span {
    animation: none !important;
  }
  .med-fc-flame { opacity: 0.8; }
  .med-sf-wisp { opacity: 0.2; }
  .med-fc-glow { opacity: 0.5; }
  .med-cz-particles span { opacity: 0.5; }
}