/* ============ 玄机阁 · 摇卦动效升级（2026-10-30） ============
   覆盖 style.css 里的龟壳/铜钱/爻线动画，加入：壳身发力与金光、铜钱抛物翻转落地回弹与地面涟漪、
   落定后的金属扫光、爻线水墨描画与动爻呼吸、六爻成卦的金色流光、卦象揭示。全部可被 reduced-motion 关闭。 */

.cast-left { position: relative; }
.cast-left .cast-fx { position: absolute; inset: -40px -60px -20px -60px; width: calc(100% + 120px); height: calc(100% + 60px); pointer-events: none; z-index: 3; }

/* ---- 龟壳：更有分量的摇动 + 发光 ---- */
.shell-wrap { transform-origin: 50% 88%; }
.shell-wrap.shaking { animation: shell-shake2 1.15s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
/* 发光：伪元素 opacity 动画，不动 filter（filter 逐帧重栅格化会卡死渲染） */
.shell-wrap::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(232,207,122,0.55), rgba(232,207,122,0) 68%); opacity: 0; pointer-events: none; z-index: -1; }
.shell-wrap.shaking::before { animation: shell-glow2 1.15s ease-out; }
@keyframes shell-glow2 { 0%, 50% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shell-shake2 {
  0%   { transform: rotate(0) translateY(0) scale(1); }
  8%   { transform: rotate(-11deg) translate(-3px, -8px) scale(1.03); }
  18%  { transform: rotate(10deg) translate(3px, -4px) scale(1.03); }
  28%  { transform: rotate(-13deg) translate(-4px, -10px) scale(1.04); }
  38%  { transform: rotate(12deg) translate(4px, -5px) scale(1.04); }
  48%  { transform: rotate(-9deg) translate(-2px, -7px) scale(1.03); }
  58%  { transform: rotate(6deg) translate(2px, -2px) scale(1.02); }
  70%  { transform: rotate(28deg) translate(6px, 6px) scale(1); }
  82%  { transform: rotate(20deg) translate(4px, 4px); }
  92%  { transform: rotate(-3deg) translate(0, 1px); }
  100% { transform: rotate(0) translate(0, 0); }
}

/* ---- 铜钱：抛物线 + 双轴翻转 + 落地压扁回弹 ---- */
.coins { perspective: 1100px; }
.coin { overflow: visible; }
.coin-inner.pouring { animation: coin-pour2 0.95s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
@keyframes coin-pour2 {
  0%   { transform: translate(var(--fx, 0), -96px) rotateX(70deg) rotateY(0) rotateZ(-30deg) scale(0.38); opacity: 0; }
  8%   { opacity: 1; }
  30%  { transform: translate(calc(var(--fx, 0) * 0.62), -70px) rotateX(420deg) rotateY(380deg) rotateZ(12deg) scale(0.9); }
  58%  { transform: translate(calc(var(--fx, 0) * 0.14), -14px) rotateX(700deg) rotateY(720deg) rotateZ(6deg) scale(1.04); }
  72%  { transform: translate(0, 7px) rotateX(720deg) rotateY(930deg) rotateZ(-2deg) scale(1.1, 0.9); }
  82%  { transform: translate(0, -7px) rotateX(720deg) rotateY(1020deg) scale(0.98, 1.03); }
  90%  { transform: translate(0, 2px) rotateX(720deg) rotateY(1062deg) scale(1.02, 0.98); }
  100% { transform: translate(0, 0) rotateX(720deg) rotateY(1080deg) rotateZ(0) scale(1); }
}
/* 地面影子随高度收缩，落地时涟漪 */
.coin::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -7px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%); z-index: -1; }
.coin:has(.coin-inner.pouring)::before { animation: coin-shadow 0.95s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
@keyframes coin-shadow { 0% { transform: translateX(var(--fx, 0)) scale(0.35); opacity: 0.2; } 58% { transform: translateX(calc(var(--fx, 0) * 0.14)) scale(0.75); opacity: 0.45; } 72%, 100% { transform: scale(1); opacity: 0.6; } }
.coin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(232,207,122,0.9); transform: translate(-50%, 50%) scale(0); opacity: 0; pointer-events: none; }
.coin:has(.coin-inner.pouring)::after { animation: coin-ripple 0.7s ease-out 0.7s both; }
@keyframes coin-ripple { 0% { transform: translate(-50%, 50%) scale(0.2) scaleY(0.4); opacity: 0.9; } 100% { transform: translate(-50%, 50%) scale(9) scaleY(0.4); opacity: 0; } }
/* 落定：金属扫光一次（由 cast-fx.js 加 .landed） */
/* 落定：一圈金光由内向外淡出（只动 opacity/transform） */
.coin-inner.landed::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,246,214,0.9); animation: coin-landed-ring 0.6s ease-out both; pointer-events: none; }
@keyframes coin-landed-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---- 爻线：水墨描画 + 动爻呼吸 ---- */
.yao .seg { position: relative; overflow: hidden; }
.yao-new { animation: yao-grow2 0.55s cubic-bezier(0.2, 0.8, 0.3, 1); }
.yao-new .seg { animation: yao-draw 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) both, yao-glow 1.8s ease-out; }
.yao-new .bar .seg:nth-child(2) { animation-delay: 0.12s, 0.12s; }
.yao-new span { animation: yao-text 0.6s ease 0.35s both; }
@keyframes yao-grow2 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes yao-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes yao-text { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.yao.moving .seg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,210,200,0.45), transparent); transform: translateX(-100%); animation: yao-breathe-sweep 2.6s ease-in-out infinite; }
.yao.moving .seg { animation: yao-breathe 2.6s ease-in-out infinite; }
.yao.moving.yao-new .seg { animation: yao-draw 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) both, yao-glow-moving 1.8s ease-out, yao-breathe 2.6s ease-in-out 1.8s infinite; }
@keyframes yao-breathe { 0%, 100% { box-shadow: 0 0 6px rgba(192,72,60,0.55); } 50% { box-shadow: 0 0 14px rgba(226,109,90,0.95); } }
@keyframes yao-breathe-sweep { 0%, 30% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }

/* ---- 六爻成卦：自下而上金色流光，整组微微发光 ---- */
.lines-built.complete .yao:not(.yao-ghost) .seg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,246,214,0.95), transparent); transform: translateX(-120%); animation: yao-sweep 0.9s ease-out both; }
.lines-built.complete .yao:nth-child(1) .seg::before { animation-delay: 0.05s; }
.lines-built.complete .yao:nth-child(2) .seg::before { animation-delay: 0.17s; }
.lines-built.complete .yao:nth-child(3) .seg::before { animation-delay: 0.29s; }
.lines-built.complete .yao:nth-child(4) .seg::before { animation-delay: 0.41s; }
.lines-built.complete .yao:nth-child(5) .seg::before { animation-delay: 0.53s; }
.lines-built.complete .yao:nth-child(6) .seg::before { animation-delay: 0.65s; }
@keyframes yao-sweep { to { transform: translateX(120%); } }
.lines-built.complete { animation: lines-bloom 1.6s ease-out 0.3s; border-radius: 12px; }
@keyframes lines-bloom { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,0); } 40% { box-shadow: 0 0 40px 6px rgba(212,175,55,0.28); } 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); } }

/* ---- 卦象揭示 ---- */
#hexagram-result .hex-glyph { animation: hex-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; text-shadow: 0 0 24px rgba(212,175,55,0.45); }
#hexagram-result .hex-name { animation: hex-fade 0.6s ease 0.45s both; }
#hexagram-result .hex-ci { animation: hex-fade 0.6s ease 0.6s both; }
#hexagram-result .hex-arrow { animation: hex-arrow 1.8s ease-in-out 0.8s infinite; }
#hexagram-result .hex-pair > div:nth-child(3) .hex-glyph { animation-delay: 0.5s; }
@keyframes hex-rise { from { opacity: 0; transform: translateY(14px) scale(0.7); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hex-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hex-arrow { 0%, 100% { transform: translateX(0); opacity: 0.6; } 50% { transform: translateX(6px); opacity: 1; } }

/* ---- 摇卦按钮：进行中流光 ---- */
.btn-gold.casting { background: linear-gradient(110deg, #b8912a 0%, #d4af37 35%, #f1dfa3 50%, #d4af37 65%, #b8912a 100%); background-size: 220% 100%; animation: cast-shimmer 1.1s linear infinite; opacity: 1; }
@keyframes cast-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .shell-wrap.shaking, .shell-wrap.shaking::before, .coin-inner.pouring, .coin:has(.coin-inner.pouring)::before, .coin:has(.coin-inner.pouring)::after,
  .coin-inner.landed::after, .yao-new, .yao-new .seg, .yao-new span, .yao.moving .seg, .yao.moving .seg::after,
  .lines-built.complete, .lines-built.complete .yao .seg::before, #hexagram-result .hex-glyph, #hexagram-result .hex-name, #hexagram-result .hex-ci, #hexagram-result .hex-arrow, .btn-gold.casting { animation: none !important; }
  .yao-new .seg { clip-path: none; }
  .cast-left .cast-fx { display: none; }
}

/* ---- 鎏金龟甲（Seedream 生成，webp 透明底） ---- */
.shell-wrap { width: 150px; margin-bottom: -4px; position: relative; }
.shell-wrap .shell-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.55)); transform-origin: 50% 50%; }
.shell-wrap::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%); z-index: -1; }

@media (max-width: 720px) { .shell-wrap { width: 124px; } }

/* ---- 摇卦前：铜钱飞入壳中；壳内敲击 ---- */
.coin:nth-child(1) { --fx: 96px; } .coin:nth-child(2) { --fx: 0px; } .coin:nth-child(3) { --fx: -96px; }
.coin.gather { animation: coin-gather 0.38s cubic-bezier(0.5, 0, 0.8, 0.4) both; }
@keyframes coin-gather { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--fx, 0), -98px) scale(0.3); opacity: 0; } }
.coin.gather::before, .coin.gather::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .coin.gather, .shell-wrap.shaking::before, .coin-inner.landed::after { animation: none !important; } }