/* ============ 玄机阁 · 动效层（2026-10-30） ============
   原则：只用 transform / opacity，不触发重排；全部可被 prefers-reduced-motion 关闭。 */

/* ---- 滚动渐入（js/motion.js 为元素加 .reveal，进入视口后加 .in） ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--rd, 0ms); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; will-change: auto; }

/* ---- 首屏命格卡：轻浮动 + 金边流光 ---- */
@property --hs-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hero-sample { animation: hs-float 7s ease-in-out infinite; }
.hero-sample::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--hs-a), transparent 0 72%, rgba(232, 207, 122, 0.95) 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hs-ring 6s linear infinite;
}
.hero-sample:hover { animation-play-state: paused; }
@keyframes hs-float { 0%, 100% { transform: translateY(0) rotate(-0.4deg); } 50% { transform: translateY(-8px) rotate(0.4deg); } }
@keyframes hs-ring { to { --hs-a: 360deg; } }
.hero-sample .hs-title { background: linear-gradient(100deg, var(--gold-soft) 0 40%, #fff6d6 50%, var(--gold-soft) 60% 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hs-shine 6s ease-in-out infinite; }
@keyframes hs-shine { 0%, 60%, 100% { background-position: 100% 0; } 80% { background-position: 0 0; } }

/* ---- 金色按钮：悬停扫光 ---- */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255, 250, 230, 0.55), transparent); transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none; }
.btn-gold:hover::after { left: 130%; }
.btn { transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease; }
.btn:active { transform: translateY(1px) scale(0.99); }

/* ---- 导航与卡片的轻反馈 ---- */
.nav-link { transition: color 0.2s, background 0.2s, transform 0.2s; }
.nav-link:active { transform: scale(0.97); }
.feature-card .feature-icon svg, .price-card h3 { transition: transform 0.3s ease; }
.feature-card:hover .feature-icon svg { transform: translateY(-2px) scale(1.06); }

/* ---- 紫微：十二宫逐格点亮（仅排盘后首次渲染，.zw-anim 由 ziwei.js 加） ---- */
.zw-board.zw-anim .zw-cell { animation: zw-cell-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--d, 0ms); }
.zw-board.zw-anim .zw-center { animation: zw-center-in 0.7s ease 0.55s both; }
.zw-board.zw-anim .zw-cell.ming { animation-name: zw-cell-in, zw-ming-glow; animation-duration: 0.5s, 1.6s; animation-delay: var(--d, 0ms), 0.7s; animation-fill-mode: both, forwards; }
@keyframes zw-cell-in { from { opacity: 0; transform: scale(0.94) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes zw-center-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes zw-ming-glow { 0% { box-shadow: inset 0 0 0 0 rgba(212, 175, 55, 0); } 40% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 26px rgba(212, 175, 55, 0.45); } 100% { box-shadow: inset 0 0 0 0 rgba(212, 175, 55, 0); } }

/* ---- 紫微：命书生成进度 ---- */
.zw-ai-progress { text-align: center; padding: 18px 0 10px; }
.zw-ai-progress .zw-ai-orb { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.5); display: grid; place-items: center; color: var(--gold); font-size: 26px; position: relative; animation: zw-orb 2.4s ease-in-out infinite; }
.zw-ai-progress .zw-ai-orb::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(212, 175, 55, 0.35); animation: zw-spin 9s linear infinite; }
@keyframes zw-orb { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.25); } 50% { box-shadow: 0 0 24px 4px rgba(212, 175, 55, 0.25); } }
.zw-ai-progress .zw-ai-bar { height: 3px; max-width: 320px; margin: 0 auto 12px; border-radius: 2px; background: var(--ink-3); overflow: hidden; position: relative; }
.zw-ai-progress .zw-ai-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: zw-bar 1.6s ease-in-out infinite; }
@keyframes zw-bar { to { left: 100%; } }
.zw-ai-progress p { color: var(--text-dim); font-size: 14px; min-height: 1.6em; transition: opacity 0.3s; }
.zw-ai-progress p.swap { opacity: 0; }

/* ---- 命书正文逐段浮现 ---- */
.zw-ai-reading > * { animation: zw-para 0.5s ease both; }
.zw-ai-reading > *:nth-child(-n+14) { animation-delay: calc(var(--p, 0) * 70ms); }

@keyframes zw-para { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- 系统要求减少动态效果：全部关闭 ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-sample, .hero-sample::before, .hero-sample .hs-title, .zw-board.zw-anim .zw-cell, .zw-board.zw-anim .zw-center, .zw-ai-progress .zw-ai-orb, .zw-ai-progress .zw-ai-orb::after, .zw-ai-progress .zw-ai-bar::after, .zw-ai-reading > * { animation: none !important; }
  .hero-sample .hs-title { color: var(--gold-soft); background: none; -webkit-text-fill-color: initial; }
  .btn-gold::after { display: none; }
}