/* 其一 · 六爻专属动效层（motion-liuyao.css）
 *
 * 定位：摇卦仪式与卦象入场的克制式升级 —— 材质优先，光效只在仪式时刻出现一次。
 * 依赖：styles.css :root 设计令牌 + motion.css 的 --fx-* 令牌与 fx-* 工具类。
 * 纪律：
 * - 不引入任何新色相：铜钱取 --gold/--gold-ink/--gold-glow 同族低饱和黄铜；
 *   发光取 --fx-glow-gold（α≤0.28）；动爻朱砂取 --cinnabar
 * - 动画只用 transform / opacity / 一次性 filter；无循环动画、无循环 box-shadow
 * - 摇卦仪式贴合 --dur-ritual:820ms（铜钱错峰 80ms 落定）；位移 ≤8px
 * - 隐藏式入场动画一律以 .ly-fx-on 门控（liuyao-motion.js 注入），无 JS 内容可见
 * - 文末 prefers-reduced-motion 总闸：全部降级为直出
 */

/* ============ A. 卦纸：四角晕染加深 + 1px 金线内描边 ============ */
.yao-paper {
  box-shadow:
    inset 0 0 0 1px rgba(184, 134, 47, 0.3),          /* 1px 细金线描边 */
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 0 52px rgba(184, 134, 47, 0.07),
    0 12px 28px rgba(24, 35, 42, 0.1);
}
.yao-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(110px 84px at 0% 0%, rgba(138, 98, 25, 0.08), transparent 72%),
    radial-gradient(110px 84px at 100% 0%, rgba(138, 98, 25, 0.08), transparent 72%),
    radial-gradient(120px 92px at 0% 100%, rgba(138, 98, 25, 0.1), transparent 72%),
    radial-gradient(120px 92px at 100% 100%, rgba(138, 98, 25, 0.1), transparent 72%);
}

/* ============ B. 三枚铜钱（.coin-tray / .coin-cell / .coin3d） ============ */
/* 外观精修：方孔圆钱 —— 多层渐变金属明暗 + 外郭/内郭层次 + 阴刻字 + 币侧厚度；
 * 翻转机制/错峰时序不动，只换材质。全部为静态多层渐变与静态 box-shadow，无循环。 */
.coin-tray {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 16px;
  perspective: 560px;
}
.coin-cell {
  position: relative;
  width: 52px;
  height: 52px;
}
/* 落定瞬间的一次性极淡暖金微光（α 取自 --fx-glow-gold，≤0.28；低饱和币面下柔和不刺眼） */
.coin-cell::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fx-glow-gold) 0%, transparent 66%);
  opacity: 0;
  pointer-events: none;
}
.coin-cell.is-settled::after {
  animation: ly-coin-glow 420ms var(--ease) 1 both;
}
.coin3d {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--ly-coin-end, 0deg)); /* 静止面由编排层写入 */
}
/* 币侧（edge）：立起的一条深铜厚度条，翻转经过侧面时可见，赋予实体感 */
.coin3d::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #55390e, #8a6219 50%, #55390e);
  transform: rotateX(90deg);
}
.coin3d.is-tossing {
  animation: ly-coin-toss 560ms var(--ease) both;
  animation-delay: var(--ly-coin-delay, 0ms);   /* 三枚错峰 0/80/160ms */
}
.coin3d.is-settled {
  animation: ly-coin-settle 420ms var(--ease) 1 both;
}
.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(97, 68, 18, 0.66);
  /* 材质：氧化斑驳点缀 + 斜向明暗 + conic 周向柔光 + 球面底色（均为 --gold 同族低饱和） */
  background:
    radial-gradient(6px 5px at 24% 30%, rgba(90, 62, 16, 0.13), transparent 70%),
    radial-gradient(5px 5px at 76% 64%, rgba(90, 62, 16, 0.11), transparent 70%),
    radial-gradient(4px 4px at 60% 20%, rgba(90, 62, 16, 0.08), transparent 70%),
    linear-gradient(150deg, rgba(246, 225, 168, 0.55) 0%, rgba(246, 225, 168, 0) 46%),
    conic-gradient(from 220deg, rgba(246, 225, 168, 0.16), rgba(110, 76, 22, 0.22) 28%, rgba(246, 225, 168, 0.12) 52%, rgba(110, 76, 22, 0.18) 78%, rgba(246, 225, 168, 0.16)),
    radial-gradient(circle at 38% 32%, #d2a95c 0%, #b8862f 52%, #8f651c 78%, #77521a 100%);
  /* 外郭凸边 + 币面微凹 + 落影（静态多层，无循环） */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(70, 46, 10, 0.5),
    inset 0 0 0 3px rgba(226, 196, 132, 0.28),
    inset 0 0 0 4px rgba(97, 68, 18, 0.4),
    inset 0 0 14px rgba(97, 68, 18, 0.2),
    0 3px 6px rgba(24, 35, 42, 0.24),
    0 8px 14px rgba(24, 35, 42, 0.1);
}
/* 币面氧化包浆层（仅正面：极淡斑驳，克制不脏） */
.coin-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(9px 7px at 20% 70%, rgba(90, 62, 16, 0.1), transparent 70%),
    radial-gradient(7px 6px at 82% 32%, rgba(90, 62, 16, 0.08), transparent 70%),
    radial-gradient(5px 5px at 46% 12%, rgba(90, 62, 16, 0.06), transparent 70%),
    radial-gradient(6px 5px at 64% 86%, rgba(90, 62, 16, 0.07), transparent 70%);
}
.coin-back { transform: rotateX(180deg); }
/* 背面素纹：内郭细环（外郭由币面 inset 环承担） */
.coin-back::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(84, 56, 12, 0.3);
  box-shadow: inset 0 0 0 1px rgba(246, 225, 168, 0.12);
}
/* 「乾」字：阴刻观感 —— 字色略深于币面，顶缘投阴、底缘受光，像铸刻而非贴字 */
.coin-front-char {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: rgba(74, 50, 12, 0.95);
  text-shadow:
    0 1px 0 rgba(248, 228, 176, 0.5),
    0 -1px 1px rgba(60, 40, 8, 0.55);
}
/* 钱眼（方孔）：孔壁厚度 + 内凹深腔，孔边干净利落 */
.coin-hole {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 1.5px;
  border: 1px solid rgba(70, 46, 10, 0.72);
  background: linear-gradient(160deg, #55390e 0%, #2f2107 100%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 1px rgba(246, 225, 168, 0.3),
    0 1px 0 rgba(246, 225, 168, 0.3);
}

@keyframes ly-coin-toss {
  0%   { transform: translateY(0) rotateX(var(--ly-from, 0deg)); }
  42%  { transform: translateY(-7px) rotateX(var(--ly-mid, 180deg)); }
  74%  { transform: translateY(1px) rotateX(var(--ly-end, 360deg)); }
  100% { transform: translateY(0) rotateX(var(--ly-end, 360deg)); }
}
@keyframes ly-coin-settle {
  0%   { transform: rotateX(var(--ly-coin-end, 0deg)) scale(1); }
  38%  { transform: rotateX(var(--ly-coin-end, 0deg)) scale(1.045); }
  100% { transform: rotateX(var(--ly-coin-end, 0deg)) scale(1); }
}
@keyframes ly-coin-glow {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============ C. 爻位槽：真实爻线视觉（替代原 ::after 占位条） ============ */
.coin-panel .yao-slot::after { content: none; } /* 静默接管旧占位条 */

.yao-slot-line {
  display: inline-flex;
  gap: 10px;
  width: 64px;
  height: 8px;
  flex: 0 0 auto;
}
.yao-slot-line i {
  display: block;
  flex: 1 1 0;
  height: 8px;
  border-radius: 2px;
}
/* 待摇：灰色占位 */
.yao-slot-line.is-empty i {
  background: var(--line-strong);
  opacity: 0.5;
}
/* 阳线：整条（第二段隐藏） */
.yao-slot-line.is-yang i:last-child { display: none; }
/* 阴线：两段并出 */
.yao-slot-line.is-yin i:first-child { transform-origin: left center; }
.yao-slot-line.is-yin i:last-child { transform-origin: right center; }
.yao-slot-line.is-yang i { transform-origin: left center; }
/* 落定：自左/自外侧一次性画出（约 300ms） */
.yao-slot.done .yao-slot-line i {
  background: var(--accent);
  opacity: 1;
  transform: scaleX(0);
  animation: ly-yao-draw 300ms var(--ease) forwards;
}
/* 动爻（老阴/老阳）：朱砂色 */
.yao-slot.moving .yao-slot-line i { background: var(--cinnabar); }
/* 动爻落定后一次微脉冲即归于平静 */
.yao-slot.moving.just-landed .yao-slot-line {
  animation: ly-dong-pulse 420ms var(--ease) 320ms 1 both;
}

@keyframes ly-yao-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ly-dong-pulse {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.07); filter: drop-shadow(0 0 3px rgba(169, 58, 46, 0.3)); }
  100% { transform: scale(1); filter: none; }
}

/* ============ D. 卦象入场（.ly-fx-on 门控：无 JS 时静态直出） ============ */
/* 爻线自下而上阶梯浮现：--ly-i 由 guaSvg 注入（初爻=0 先现，每爻 +60ms） */
.ly-fx-on #ly-gua-box .ly-svg line.ly-fade {
  opacity: 0;
  animation: ly-line-in 360ms var(--ease) forwards;
  animation-delay: calc(var(--ly-i, 0) * 60ms);
}
@keyframes ly-line-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* 卦名：一次性淡墨渐显（模糊→清晰，不做乱码快闪） */
.ly-fx-on #ly-gua-box .ly-gua-name {
  animation: ly-ink-in var(--dur-soft, 600ms) var(--ease) both;
}
@keyframes ly-ink-in {
  from { opacity: 0; filter: blur(5px); }
  to   { opacity: 1; filter: blur(0); }
}

/* 卦卡入场：本卦先现、变卦随其后（--fx-delay 阶梯，仅入场一次） */
.ly-fx-on #ly-gua-box .ly-compare > .ly-gua-card {
  animation: fx-fade-up var(--dur-fx, 420ms) var(--ease) both;
}
.ly-fx-on #ly-gua-box .ly-compare > .ly-gua-card:nth-child(2) {
  animation-delay: 90ms;
}

/* ============ E. 墨夜（深墨，不用纯黑；发光更弱由 motion.css 令牌承担） ============ */
:root[data-theme="dark"] .coin-face {
  border-color: rgba(70, 46, 10, 0.78);
  /* 墨夜：底色略提亮、反光稍强，依旧克制 */
  background:
    radial-gradient(6px 5px at 24% 30%, rgba(40, 26, 6, 0.18), transparent 70%),
    radial-gradient(5px 5px at 76% 64%, rgba(40, 26, 6, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(240, 214, 150, 0.4) 0%, rgba(240, 214, 150, 0) 46%),
    conic-gradient(from 220deg, rgba(240, 214, 150, 0.2), rgba(50, 34, 8, 0.32) 28%, rgba(240, 214, 150, 0.16) 52%, rgba(50, 34, 8, 0.28) 78%, rgba(240, 214, 150, 0.2)),
    radial-gradient(circle at 38% 32%, #bb9350 0%, #96702a 52%, #7a5618 78%, #654515 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 2px rgba(15, 10, 2, 0.6),
    inset 0 0 0 3px rgba(214, 182, 118, 0.2),
    inset 0 0 0 4px rgba(50, 34, 8, 0.5),
    inset 0 0 14px rgba(20, 14, 4, 0.28),
    0 3px 6px rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28);
}
:root[data-theme="dark"] .coin-front::after {
  background:
    radial-gradient(9px 7px at 20% 70%, rgba(20, 14, 4, 0.16), transparent 70%),
    radial-gradient(7px 6px at 82% 32%, rgba(20, 14, 4, 0.12), transparent 70%);
}
:root[data-theme="dark"] .coin3d::before {
  background: linear-gradient(90deg, #2e1f08, #6b4c16 50%, #2e1f08);
}
:root[data-theme="dark"] .coin-front-char {
  color: rgba(40, 26, 6, 0.95);
  text-shadow:
    0 1px 0 rgba(240, 214, 150, 0.35),
    0 -1px 1px rgba(10, 6, 2, 0.6);
}
:root[data-theme="dark"] .coin-hole {
  border-color: rgba(20, 14, 4, 0.8);
  background: linear-gradient(160deg, #241804 0%, #0d0902 100%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    inset 0 -1px 1px rgba(240, 214, 150, 0.2),
    0 1px 0 rgba(240, 214, 150, 0.2);
}
:root[data-theme="dark"] .yao-paper::before {
  background:
    radial-gradient(110px 84px at 0% 0%, rgba(0, 0, 0, 0.16), transparent 72%),
    radial-gradient(110px 84px at 100% 0%, rgba(0, 0, 0, 0.16), transparent 72%),
    radial-gradient(120px 92px at 0% 100%, rgba(0, 0, 0, 0.2), transparent 72%),
    radial-gradient(120px 92px at 100% 100%, rgba(0, 0, 0, 0.2), transparent 72%);
}

/* 跟随系统暗色双路径（与 enhance.css 同范式）：默认未手动选主题时，
   暗色走 prefers-color-scheme + :root:not([data-theme="light"])，
   取值与上方手动暗色完全一致，特异性不变。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coin-face {
    border-color: rgba(70, 46, 10, 0.78);
    background:
      radial-gradient(6px 5px at 24% 30%, rgba(40, 26, 6, 0.18), transparent 70%),
      radial-gradient(5px 5px at 76% 64%, rgba(40, 26, 6, 0.15), transparent 70%),
      linear-gradient(150deg, rgba(240, 214, 150, 0.4) 0%, rgba(240, 214, 150, 0) 46%),
      conic-gradient(from 220deg, rgba(240, 214, 150, 0.2), rgba(50, 34, 8, 0.32) 28%, rgba(240, 214, 150, 0.16) 52%, rgba(50, 34, 8, 0.28) 78%, rgba(240, 214, 150, 0.2)),
      radial-gradient(circle at 38% 32%, #bb9350 0%, #96702a 52%, #7a5618 78%, #654515 100%);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.22),
      inset 0 -1px 2px rgba(15, 10, 2, 0.6),
      inset 0 0 0 3px rgba(214, 182, 118, 0.2),
      inset 0 0 0 4px rgba(50, 34, 8, 0.5),
      inset 0 0 14px rgba(20, 14, 4, 0.28),
      0 3px 6px rgba(0, 0, 0, 0.5),
      0 8px 14px rgba(0, 0, 0, 0.28);
  }
  :root:not([data-theme="light"]) .coin-front::after {
    background:
      radial-gradient(9px 7px at 20% 70%, rgba(20, 14, 4, 0.16), transparent 70%),
      radial-gradient(7px 6px at 82% 32%, rgba(20, 14, 4, 0.12), transparent 70%);
  }
  :root:not([data-theme="light"]) .coin3d::before {
    background: linear-gradient(90deg, #2e1f08, #6b4c16 50%, #2e1f08);
  }
  :root:not([data-theme="light"]) .coin-front-char {
    color: rgba(40, 26, 6, 0.95);
    text-shadow:
      0 1px 0 rgba(240, 214, 150, 0.35),
      0 -1px 1px rgba(10, 6, 2, 0.6);
  }
  :root:not([data-theme="light"]) .coin-hole {
    border-color: rgba(20, 14, 4, 0.8);
    background: linear-gradient(160deg, #241804 0%, #0d0902 100%);
    box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, 0.6),
      inset 0 -1px 1px rgba(240, 214, 150, 0.2),
      0 1px 0 rgba(240, 214, 150, 0.2);
  }
  :root:not([data-theme="light"]) .yao-paper::before {
    background:
      radial-gradient(110px 84px at 0% 0%, rgba(0, 0, 0, 0.16), transparent 72%),
      radial-gradient(110px 84px at 100% 0%, rgba(0, 0, 0, 0.16), transparent 72%),
      radial-gradient(120px 92px at 0% 100%, rgba(0, 0, 0, 0.2), transparent 72%),
      radial-gradient(120px 92px at 100% 100%, rgba(0, 0, 0, 0.2), transparent 72%);
  }
}

/* ============ G. 移动端：起卦方式下拉占满整行，选项文字不截断 ============
 * 背景：styles.css ≤720px 媒体内 .ly-form{grid-template-columns:1fr 1fr} 因文件序靠后，
 * 盖过了 .chart-form 的 1fr 单列，「时间起卦 · 按当前时刻成卦」在半列宽内被截断。
 * 仅收紧宽度与字号，不动颜色；桌面端（≥721px）不受影响。
 */
@media (max-width: 860px) {
  /* 「起卦方式」字段跨满整行，给长选项文字留足宽度 */
  .ly-form #method-field {
    grid-column: 1 / -1;
  }
  .ly-form #ly-method {
    width: 100%;
    font-size: 14px;
    text-overflow: clip; /* 宽度已够，防御性保留完整文字 */
  }
}

/* ============ F. prefers-reduced-motion 总闸：直出结果，不出翻转/流光 ============ */
@media (prefers-reduced-motion: reduce) {
  .coin3d.is-tossing,
  .coin3d.is-settled { animation: none; }
  .coin-cell.is-settled::after { animation: none; opacity: 0; }
  .yao-slot.done .yao-slot-line i { animation: none; transform: none; }
  .yao-slot.moving.just-landed .yao-slot-line { animation: none; }
  .ly-fx-on #ly-gua-box .ly-svg line.ly-fade { animation: none; opacity: 1; }
  .ly-fx-on #ly-gua-box .ly-gua-name { animation: none; }
  .ly-fx-on #ly-gua-box .ly-compare > .ly-gua-card { animation: none; }
}