/* ============================================================
   TIANJI 天機 — 玄 · MYSTIC LAYER
   宣纸肌理 / 云雷纹 / 朱砂印 / 星宿 / 卷轴 / 烛火
   在 style.css 之后加载，只做叠加与增强
   ============================================================ */

:root{
  --xuan:#04050a;            /* 玄 */
  --cinnabar:#c1272d;        /* 朱砂 */
  --cinnabar-2:#e35b52;
  --gold-deep:#8f6f1f;
  --silk:#f2ead8;            /* 绢 */
  --jade-deep:#1f8f77;
  --indigo-deep:#101c36;
  --frame:rgba(212,175,55,.30);
}

/* ============================================================
   1. 全屏质感层：宣纸噪点 + 烛火暗角 + 香火
   ============================================================ */
.paper-grain,.candle-vignette{position:fixed;inset:0;pointer-events:none}

.paper-grain{
  z-index:400;opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* 绢丝细纹 */
.candle-vignette{
  z-index:399;
  background:
    radial-gradient(130% 95% at 50% 38%,transparent 40%,rgba(0,0,0,.62) 100%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.014) 0 1px,transparent 1px 5px);
  animation:candle 8.5s ease-in-out infinite;
}
@keyframes candle{
  0%,100%{opacity:.80}
  18%{opacity:.94}
  36%{opacity:.72}
  58%{opacity:.90}
  76%{opacity:.76}
}

/* ============================================================
   2. 星宿底图
   ============================================================ */
#starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.72}

/* 二十八宿 环 —— 用于 hero */
.sidereal{position:absolute;inset:-6% -6% -6% -6%;pointer-events:none;opacity:.5}
.sidereal svg{width:100%;height:100%}
.sidereal .tw{animation:tw 4.2s ease-in-out infinite}
.sidereal .tw.d1{animation-delay:1.1s}
.sidereal .tw.d2{animation-delay:2.3s}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}

/* ============================================================
   3. 云雷纹 / 回纹
   ============================================================ */
.fret-band{
  height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M1 8h6V2h6v12h6V2h6v12h6' fill='none' stroke='%23d4af37' stroke-width='1.1' opacity='.55'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:32px 16px;opacity:.55;
}
.fret-band.flip{transform:scaleY(-1)}

/* 云纹分隔 */
.cloud-div{
  height:34px;margin:0 auto;max-width:1180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 17h18c0-6 5-10 11-10s11 4 11 10c0-4 3-7 7-7s7 3 7 7c0-5 4-9 9-9s9 4 9 9' fill='none' stroke='%23c1272d' stroke-width='1' opacity='.4'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;opacity:.75;
}

/* ============================================================
   4. 角框 · 卷轴框
   ============================================================ */
.framed{position:relative}
.framed::before,.framed::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border:1px solid var(--frame);
}
.framed::before{top:8px;left:8px;border-right:0;border-bottom:0}
.framed::after{bottom:8px;right:8px;border-left:0;border-top:0}
.framed>.c3,.framed>.c4{position:absolute;width:22px;height:22px;pointer-events:none;border:1px solid var(--frame)}
.framed>.c3{top:8px;right:8px;border-left:0;border-bottom:0}
.framed>.c4{bottom:8px;left:8px;border-right:0;border-top:0}

/* 挂轴：上下木轴 */
.scroll-rod{
  height:14px;border-radius:99px;position:relative;
  background:linear-gradient(180deg,#3a2c12,#8a6a24 40%,#c9a544 52%,#5c451a);
  box-shadow:0 4px 14px rgba(0,0,0,.55);
}
.scroll-rod::before,.scroll-rod::after{
  content:"";position:absolute;top:-4px;width:12px;height:22px;border-radius:4px;
  background:linear-gradient(180deg,#c9a544,#6b5120);
}
.scroll-rod::before{left:-14px}
.scroll-rod::after{right:-14px}

/* ============================================================
   5. 朱砂印
   ============================================================ */
.seal{
  position:relative;display:grid;place-items:center;
  width:74px;height:74px;border-radius:7px;flex:none;
  background:linear-gradient(158deg,#d93a33,#a81c22 62%,#8c1418);
  color:#fff6f1;font-family:var(--serif);font-weight:700;font-size:19px;
  line-height:1.02;letter-spacing:.04em;text-align:center;
  box-shadow:0 8px 26px rgba(193,39,45,.42),inset 0 0 0 2px rgba(255,240,232,.32);
  transform:rotate(-6deg);
  writing-mode:vertical-rl;text-orientation:upright;padding:8px 0;
  overflow:hidden;isolation:isolate;
}
.seal i{font-style:normal;writing-mode:vertical-rl}
.seal::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23s)'/%3E%3C/svg%3E");
}
.seal.sm{width:52px;height:52px;font-size:13px;border-radius:5px}
.seal.lg{width:104px;height:104px;font-size:26px}
.seal.round{border-radius:50%;transform:rotate(0)}

/* 盖章动画 */
@keyframes stamp{
  0%{opacity:0;transform:rotate(-6deg) scale(2.6)}
  62%{opacity:1;transform:rotate(-6deg) scale(.94)}
  80%{transform:rotate(-6deg) scale(1.04)}
  100%{transform:rotate(-6deg) scale(1)}
}
.seal.stamp{animation:stamp .72s cubic-bezier(.2,.85,.3,1.1) both}

/* ============================================================
   6. 竖排 · 篆意标题
   ============================================================ */
.vtitle{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--serif);letter-spacing:.28em;
  color:var(--silk);opacity:.9;
}
.brush{
  font-family:var(--serif);
  background:linear-gradient(180deg,#fff8e2,#e8cd84 45%,#b8912f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 34px rgba(212,175,55,.28);
}
.brush-red{
  font-family:var(--serif);
  background:linear-gradient(180deg,#ff8a7e,#c1272d 55%,#8d1518);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   7. 卦象爻线
   ============================================================ */
.hex{display:flex;flex-direction:column;gap:5px;align-items:center}
.hex span{display:block;height:5px;width:34px;border-radius:2px;background:var(--gold-2);opacity:.85}
.hex span.yin{background:linear-gradient(90deg,var(--gold-2) 0 40%,transparent 40% 60%,var(--gold-2) 60% 100%)}

/* ============================================================
   8. 卡片 · 铜镜质感
   ============================================================ */
.card{
  position:relative;
  background:linear-gradient(168deg,rgba(246,236,214,.055),rgba(10,14,28,.5) 60%,rgba(4,5,10,.6));
  border-color:var(--frame);
  box-shadow:0 18px 46px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,248,226,.06);
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 80% at 50% -20%,rgba(212,175,55,.10),transparent 60%);
}
.gold-dust{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23d4af37'%3E%3Ccircle cx='12' cy='24' r='.9'/%3E%3Ccircle cx='88' cy='12' r='.7'/%3E%3Ccircle cx='140' cy='66' r='.8'/%3E%3Ccircle cx='44' cy='104' r='.6'/%3E%3Ccircle cx='118' cy='138' r='.9'/%3E%3Ccircle cx='24' cy='150' r='.6'/%3E%3Ccircle cx='72' cy='62' r='.5'/%3E%3C/g%3E%3C/svg%3E");
  animation:dust 14s linear infinite;
}
@keyframes dust{to{background-position:160px -160px}}

/* 香火/烛光点 */
.flame{position:relative}
.flame::before{
  content:"";position:absolute;left:50%;top:-9px;width:9px;height:14px;transform:translateX(-50%);
  border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 50% 72%,#fff3c4,#ffb43c 45%,rgba(255,90,40,.15) 78%);
  filter:blur(.4px);animation:flick 1.7s ease-in-out infinite;
}
@keyframes flick{
  0%,100%{transform:translateX(-50%) scale(1) rotate(0)}
  25%{transform:translateX(-52%) scale(1.08,.94) rotate(-3deg)}
  50%{transform:translateX(-48%) scale(.94,1.09) rotate(2deg)}
  75%{transform:translateX(-51%) scale(1.05,.97) rotate(-1deg)}
}

/* ============================================================
   9. 水墨晕染（用于 hero 背景与报告页首）
   ============================================================ */
.ink-blot{
  position:absolute;pointer-events:none;border-radius:50%;filter:blur(48px);opacity:.42;
  animation:blot 16s ease-in-out infinite alternate;
}
@keyframes blot{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.16) translate(2%,-3%)}
}

/* ============================================================
   10. 入场：门扉 / 卷轴展开
   ============================================================ */
#veil{
  position:fixed;inset:0;z-index:900;background:var(--xuan);
  display:grid;place-items:center;transition:opacity .8s ease,visibility .8s;
  animation:veilOut .9s ease 2.6s forwards;
}
@keyframes veilOut{to{opacity:0;visibility:hidden}}
#veil.gone{opacity:0;visibility:hidden}
#veil .m{
  text-align:center;font-family:var(--serif);
}
#veil .m b{
  display:block;font-size:56px;letter-spacing:.3em;color:transparent;
  background:linear-gradient(180deg,#fff6dc,#d4af37 55%,#8f6f1f);
  -webkit-background-clip:text;background-clip:text;
  animation:veilGlow 2.4s ease-in-out infinite;
}
#veil .m i{
  font-style:normal;display:block;margin-top:16px;font-size:11.5px;letter-spacing:.5em;
  color:rgba(244,241,232,.5);text-transform:uppercase;
}
@keyframes veilGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(212,175,55,.25))}50%{filter:drop-shadow(0 0 30px rgba(212,175,55,.6))}}

/* 滚动浮现（无 JS 时内容始终可见） */
.rise{transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rise{opacity:0;transform:translateY(26px)}
.js .rise.in{opacity:1;transform:none}

/* ============================================================
   11. 支付方式图标（币种）
   ============================================================ */
.chain-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:6px;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--ink-2);
}
.chain-badge.on{border-color:var(--gold);color:var(--gold-2);background:rgba(212,175,55,.12)}

/* ============================================================
   12. 移动端收敛
   ============================================================ */
@media(max-width:980px){
  .sidereal{display:none}
  .seal{width:62px;height:62px;font-size:16px}
  #veil .m b{font-size:40px}
}
@media(max-width:640px){
  .fret-band{height:12px;background-size:24px 12px}
  .scroll-rod::before,.scroll-rod::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .rise{opacity:1;transform:none}
}
@media print{
  .paper-grain,.candle-vignette,#starfield,#veil{display:none!important}
}