/* ============================================================
   coin.css — 铜钱卦三枚铜钱：实物质感 + 重量感翻转动画
   只做外观与动画，不改 buildCoins()/coinFaceSvg()/起卦 JS 逻辑。
   层约定（同 style.css 第666行）：
     外层 .coin   → 本文件用 CSS 动画写 transform（起卦落定 coinLand）
     内层 .coin-in → 仍由 JS 写 rotateX 翻面（一行未动）
   本文件在 style.css 之后加载，选择器优先级更高以覆盖旧观感。
   ============================================================ */

/* ---- 1. 币面两层压印（外亮边 + 内暗边）---- */
.coins-visual .coin-face {
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),            /* 外圈窄边高光 */
    inset 0 -2px 4px rgba(89, 76, 62, .35);            /* 内圈暗边（钱郭凹槽） */
}

/* ---- 2. 极轻铜绿/包浆：偏色径向渐变，压在 SVG 上但不盖字 ----
   透明度仅 .10，深墨字（#4A4030）依旧清晰可读 */
.coins-visual .coin-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
              rgba(122, 92, 46, .10), rgba(122, 92, 46, .04) 42%,
              transparent 62%);
  pointer-events: none;
}

/* ---- 3. 底部投影：柔和暖棕（覆盖 style.css 那条生硬的黑阴影）---- */
.coins-visual .coin-face svg {
  filter: drop-shadow(0 6px 10px rgba(89, 76, 62, .28));
}

/* ---- 4. 悬停：整枚上浮 2px + 边缘高光增强（0.2s 过渡）----
   用独立的 translate 属性，不与外层 transform 动画抢写入方 */
.coins-visual .coin {
  transition: opacity .3s ease, translate .2s ease, box-shadow .2s ease;
}
.coins-visual .coin:hover {
  translate: 0 -2px;
}
.coins-visual .coin:hover .coin-face {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -2px 4px rgba(89, 76, 62, .45),
    0 0 0 1px rgba(255, 255, 255, .22);
}

/* ---- 5. 起卦落定翻转：先向上 → 再翻 → 再落，三段 ----
   触发条件：龟壳场景散去（.casting 移除）后，铜钱重新可见那一刻。
   三枚错峰 90ms；单次 1.5s；cubic-bezier(.35,.9,.3,1) 收尾带重量。
   both 填充：落定后停在 100%（translateY(0)），不再浮沉。 */
/* 2026-11-01 换方案二「独立散掷」（Gemini M09 C 段）：三枚各飞各的，不整齐地一起弹。
   位移一律用 vmin，390 宽自动缩；三枚错峰 0 / 80 / 150ms。 */
.coins-visual.just-cast .coin:nth-child(2) {
  animation: coinTossLeft 1.35s cubic-bezier(.25,1,.5,1) both;
}
.coins-visual.just-cast .coin:nth-child(3) {
  animation: coinTossCenter 1.42s cubic-bezier(.25,1,.5,1) 80ms both;
}
.coins-visual.just-cast .coin:nth-child(4) {
  animation: coinTossRight 1.5s cubic-bezier(.25,1,.5,1) 150ms both;
}
@keyframes coinTossLeft {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  35%  { transform: translate(-3vmin,-7vmin) rotate(-28deg) scale(1.08); }
  65%  { transform: translate(0,0) rotate(6deg) scale(.96); }
  82%  { transform: translate(-.5vmin,-1.2vmin) rotate(-2deg); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}
@keyframes coinTossCenter {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-9vmin) scale(1.12); }
  70%  { transform: translateY(0) scale(.94); }
  85%  { transform: translateY(-1.5vmin); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes coinTossRight {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  38%  { transform: translate(3vmin,-6.5vmin) rotate(32deg) scale(1.07); }
  68%  { transform: translate(0,0) rotate(-4deg) scale(.95); }
  84%  { transform: translate(.6vmin,-1vmin) rotate(1deg); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}
/* 兼容老兜底路径（coinTossLegacy 内联 animation: coinToss ...）：
   把旧 coinToss 关键帧也换成同一套重量感曲线 */
@keyframes coinToss {
  0%   { transform: translateY(0)    scale(.97) rotate(0deg); }
  30%  { transform: translateY(-16%) scale(1.04) rotate(-3.5deg); }
  60%  { transform: translateY(-20%) scale(1.05) rotate(3deg); }
  100% { transform: translateY(0)    scale(1)    rotate(0deg); }
}

/* ---- 6. 减弱动态效果：不翻转，直接淡入结果 ----
   铜钱的淡入仍由既有 .coins-visual .coin { transition: opacity .3s } 承担 */
@media (prefers-reduced-motion: reduce) {
  .coins-visual.just-cast .coin {
    animation: none !important;
  }
  .coins-visual .coin,
  .coins-visual .coin:hover {
    translate: 0 0;
    transition: opacity .3s ease !important;
  }
  .coins-visual .coin-face::after { display: none; }
}

/* 2026-11-01 用户：打开页面铜钱就在上下弹（旧 coinBob 待机浮动），既不自然也像没做完。
   非「刚起卦」状态下把铜钱的 animation 全部关掉，静止待机；起卦时才走 coinLand。 */
.coins-visual:not(.just-cast):not(.casting) .coin {
  animation: none !important;
}