/* ============================================================
   CRC-30 · 星域视觉层（Orbit）
  ============================================================
   只作用于 index.html 的 #mint-card，是继 crc30.css（墨绿工具风）、
   crc30-v2.css（两列布局）之后的第三层：把铸造台从"表单"改造成
   "观测窗"—— 深空底、星野、三条倾斜轨道、一颗缓慢呼吸的星核。

   三条铁律（与 crc30.css 的分离思路一致）：
     1. 纯装饰：所有元素 pointer-events:none + aria-hidden，
        不新增任何被 JS 引用的 id / class，功能选择器一个不改。
     2. 只动合成层：动画全部是 transform / opacity，不触发布局，
        滚动时不掉帧。
     3. 可一键回滚：删掉 index.html 里这一行 <link> 即完全还原，
        不存在"改回去漏了一处"。

   为什么用香槟金而不是品牌绿做装饰色：
     绿色在站内被语义化为"可操作 / 进行中"（按钮、进度、秒位）。
     装饰如果也用绿，用户会把"背景在动"误读成"这里有东西可以点"。
     金色与功能色完全解耦 —— 未开始态倒计时借金色表示"等待"，
     开放态立刻回归绿色表示"可以进行"，颜色本身承担状态语言。
   ============================================================ */

:root{
  --gold:#d9b877;                 /* 主装饰色：香槟金 */
  --gold-hi:#f2dba4;              /* 高光：轨道节点、天数数字 */
  --gold-dim:rgba(217,184,119,.36);
  --gold-faint:rgba(217,184,119,.16);
  --gold-wash:rgba(217,184,119,.055);
}

/* ---------- 卡片变成"观测窗" ----------
   position:relative 给装饰层提供定位上下文（不影响布局）。
   ⚠️ 绝不能加 overflow:hidden：.cost 是 position:sticky，
      卡片一旦成为滚动容器，粘性定位会失效（右侧栏不再钉住）；
      资产下拉 .dd-menu 也会被裁掉。装饰的裁剪由 .orbit 自己负责。 */
#mint-card{
  position:relative;
  background:
    radial-gradient(115% 85% at 74% 34%, var(--gold-wash), transparent 56%),
    linear-gradient(168deg,#0b1210 0%,#080d0b 46%,#050908 100%);
}
/* 卡片顶边一道金色发丝线：像观测窗的上框。
   z-index:2 压过内容（含横幅），否则会被 .cd 的半透明底遮住。 */
#mint-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-dim) 18%,var(--gold-dim) 82%,transparent);
}

/* 内容层全部抬到装饰之上。
   position:relative 不产生任何位移，只是把静态节点变成定位节点，
   从而让 z-index 生效 —— 否则绝对定位的 .orbit 会盖住文字。 */
#mint-card > .cd,#mint-card > .fld-row,#mint-card > .pxd,#mint-card > .avail,
#mint-card > .cost,#mint-card > .act,#mint-card > .msg,#mint-card > .receipt,
#mint-card > .prog,#mint-card > .swap-note,#mint-card > .selftest{
  position:relative;z-index:1;
}

/* ============================================================
   装饰容器
   ============================================================ */
.orbit{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* ---------- 星野：三层视差 ----------
   用 radial-gradient 平铺出星点，比 DOM 节点便宜（零个元素开销）。
   三层尺寸/密度/速度各不同，缓慢漂移产生视差；
   st3 额外叠加一次明暗呼吸，让最亮的几颗"闪烁"。 */
.orbit-star{position:absolute;inset:0;background-repeat:repeat;will-change:transform}
.orbit-star.st1{
  background-image:
    radial-gradient(1.4px 1.4px at 18px 24px,rgba(255,255,255,.60),transparent 62%),
    radial-gradient(1px 1px at 128px 78px,rgba(255,255,255,.34),transparent 62%),
    radial-gradient(1.2px 1.2px at 246px 156px,rgba(242,219,164,.52),transparent 62%),
    radial-gradient(1px 1px at 322px 40px,rgba(255,255,255,.26),transparent 62%);
  background-size:380px 200px;
  animation:starDriftA 110s ease-in-out infinite alternate;
}
.orbit-star.st2{
  background-image:
    radial-gradient(1.8px 1.8px at 62px 112px,rgba(255,255,255,.30),transparent 60%),
    radial-gradient(1.5px 1.5px at 214px 28px,rgba(205,228,255,.26),transparent 60%),
    radial-gradient(1.6px 1.6px at 352px 182px,rgba(255,255,255,.20),transparent 60%);
  background-size:430px 245px;
  animation:starDriftB 155s ease-in-out infinite alternate;
}
.orbit-star.st3{
  background-image:
    radial-gradient(2.2px 2.2px at 92px 58px,rgba(242,219,164,.72),transparent 60%),
    radial-gradient(2px 2px at 302px 198px,rgba(255,255,255,.48),transparent 60%),
    radial-gradient(2px 2px at 178px 262px,rgba(255,255,255,.38),transparent 60%);
  background-size:530px 305px;
  animation:starTwinkle 5.5s ease-in-out infinite alternate,
            starDriftA 195s ease-in-out infinite alternate;
}
@keyframes starDriftA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-22px,16px,0)}}
@keyframes starDriftB{from{transform:translate3d(0,0,0)}to{transform:translate3d(28px,-20px,0)}}
@keyframes starTwinkle{from{opacity:.42}to{opacity:1}}

/* ---------- 星核：轨道环绕的中心 ----------
   位于右侧结果栏后方（cost 面板的位置），低亮度暖光。
   它是装饰的视觉锚点：三条轨道都绕着它转。 */
.orbit-core{
  position:absolute;left:74%;top:36%;width:300px;height:300px;margin:-150px 0 0 -150px;
  border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(242,219,164,.17),rgba(217,184,119,.06) 38%,transparent 68%);
  animation:corePulse 8s ease-in-out infinite alternate;
}
@keyframes corePulse{from{opacity:.62;transform:scale(1)}to{opacity:1;transform:scale(1.07)}}

/* ---------- 轨道系统 ----------
   每个 .orbit-sys 是一个被倾斜的圆环（rotateX 让圆环在屏幕上
   投影成椭圆，形成"侧视的轨道平面"），环上的节点由两层动画
   反向叠加而成：
     .orbit-ring  自转（节点被带着沿椭圆走）
     ::before     反着转（抵消父级全部旋转，节点永远是正的圆点）
   两者的关键帧角度必须严格互逆，且 --dur 一致 —— 起始时间相同、
   线性无限循环，永不失步。
   ⚠️ 反旋转变换必须是 [rotateZ(-tz) rotateX(-tx) rotateZ(-spin)]
      三步：前两步抵消 .orbit-sys 的静态倾斜，第三步抵消环的自转。
      少任何一步，节点就会被拉扁成椭圆（倾斜是加在节点身上的）。 */
.orbit-sys{position:absolute;border-radius:50%;transform:rotateX(var(--tx)) rotateZ(var(--tz))}
.orbit-sys .orbit-ring{
  position:absolute;inset:0;border:1px solid var(--gold-faint);border-radius:50%;
  animation:orbitSpin var(--dur) linear infinite;will-change:transform;
}
.orbit-sys .orbit-ring::before{
  content:'';position:absolute;left:50%;top:-2.5px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 9px 2px rgba(217,184,119,.5),0 0 3px 1px rgba(242,219,164,.9);
  animation:nodeHold var(--dur) linear infinite;
}
.orbit-sys.rev .orbit-ring{animation-direction:reverse}
.orbit-sys.rev .orbit-ring::before{animation-name:nodeHoldRev}
@keyframes orbitSpin{from{transform:rotateZ(0deg)}to{transform:rotateZ(360deg)}}
@keyframes nodeHold{
  from{transform:rotateZ(calc(-1 * var(--tz))) rotateX(calc(-1 * var(--tx))) rotateZ(0deg)}
  to{transform:rotateZ(calc(-1 * var(--tz))) rotateX(calc(-1 * var(--tx))) rotateZ(-360deg)}
}
@keyframes nodeHoldRev{
  from{transform:rotateZ(calc(-1 * var(--tz))) rotateX(calc(-1 * var(--tx))) rotateZ(-360deg)}
  to{transform:rotateZ(calc(-1 * var(--tz))) rotateX(calc(-1 * var(--tx))) rotateZ(0deg)}
}
/* 三条轨道：半径 / 倾角 / 周期 / 方向都不同，避免"整齐得像图表" */
.orbit-sys.s1{left:74%;top:36%;width:880px;height:880px;margin:-440px 0 0 -440px;
  --tx:66deg;--tz:-14deg;--dur:34s}
.orbit-sys.s1 .orbit-ring{border-color:var(--gold-dim)}
.orbit-sys.s2{left:74%;top:36%;width:620px;height:620px;margin:-310px 0 0 -310px;
  --tx:71deg;--tz:9deg;--dur:23s}
.orbit-sys.s2 .orbit-ring{border-style:dashed;border-color:rgba(217,184,119,.22)}
.orbit-sys.s3{left:74%;top:36%;width:400px;height:400px;margin:-200px 0 0 -200px;
  --tx:61deg;--tz:24deg;--dur:15s}

/* ---------- 流星 ----------
   一条斜向光带周期性划过卡片。19 秒一轮、只在 6%~18% 进度可见，
   其余时间 opacity:0 等待 —— 低频率才"点睛"，高频率就是噪点。 */
.orbit-comet{
  position:absolute;top:14%;left:-8%;width:170px;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(242,219,164,.75),transparent);
  transform:rotate(22deg);will-change:transform,opacity;
  animation:comet 19s linear infinite;
}
@keyframes comet{
  0%{transform:translate(0,0) rotate(22deg);opacity:0}
  5%{opacity:.85}
  17%{transform:translate(780px,320px) rotate(22deg);opacity:0}
  100%{transform:translate(780px,320px) rotate(22deg);opacity:0}
}

/* ---------- 四角取景框 ----------
   金色角标把卡片收成"观测窗"。用 8 段 linear-gradient 画角，
   不引入额外 DOM；角标长短 13px，与卡片 1px 边框错开 9px。 */
.orbit-frame{
  position:absolute;inset:9px;pointer-events:none;
  background:
    linear-gradient(var(--gold-dim),var(--gold-dim)) left top/13px 1px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) left top/1px 13px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) right top/13px 1px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) right top/1px 13px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) left bottom/13px 1px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) left bottom/1px 13px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) right bottom/13px 1px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) right bottom/1px 13px no-repeat;
}

/* ============================================================
   倒计时横幅：未开始态从品牌绿切换到"金色等待"
   ============================================================
   语义：绿 = 可以进行，金 = 还在等。开放态保持原样不动。 */
.cd.is-before{
  background:linear-gradient(90deg,rgba(217,184,119,.11),transparent 60%);
  box-shadow:inset 2px 0 0 var(--gold);
}
.cd.is-before .cd-pip{position:relative;background:var(--gold-hi)}
/* 呼吸点外加一圈细环：一颗带环的小行星，点明"轨道"母题 */
.cd.is-before .cd-pip::after{
  content:'';position:absolute;inset:-5px;border:1px solid var(--gold-dim);border-radius:50%;
}
.cd.is-before .cd-t{color:var(--gold)}
.cd.is-before .cd-at{color:rgba(217,184,119,.62)}
/* 天位是未开始态最大的数字（还有好几天），用金色高光 */
.cd.is-before .cd-grid .cd-seg:first-child b{color:var(--gold-hi)}
.cd.is-before .cd-x{color:rgba(217,184,119,.34)}
/* 秒位保持品牌绿：无论哪种状态，"正在跳的那一格"永远是抓眼的 */

/* ============================================================
   细节点缀
   ============================================================ */
/* 步骤序号 01/02/03：方章描金 */
#mint-card .step-n{border-color:var(--gold-dim);color:var(--gold)}
/* "你可铸造"的大数字：拿到手的那一串是金色的 */
#mint-card .cost-get{color:var(--gold)}
/* K 线放进深色玻璃面板：图表背景是透明的，
   不给它一块压暗的底，星点会从蜡烛后面透出来干扰读数。 */
#mint-card .kline-wrap{
  background:linear-gradient(180deg,rgba(5,9,7,.78),rgba(5,9,7,.58));
  border:1px solid var(--line-soft);padding:10px 10px 2px;
}
/* 总量进度条：金色渐变表示"已入库的份额" */
#mint-card .prog-bar i{background:linear-gradient(90deg,var(--gold-dim),var(--gold))}

/* ============================================================
   响应式：单列时轨道整体缩小并移到卡片中上部
   ============================================================ */
@media(max-width:900px){
  .orbit-sys.s1{left:52%;top:30%;width:600px;height:600px;margin:-300px 0 0 -300px}
  .orbit-sys.s2{left:52%;top:30%;width:430px;height:430px;margin:-215px 0 0 -215px}
  .orbit-sys.s3{left:52%;top:30%;width:280px;height:280px;margin:-140px 0 0 -140px}
  .orbit-core{left:52%;top:30%;width:230px;height:230px;margin:-115px 0 0 -115px}
}
@media(max-width:640px){
  .orbit-sys.s1{width:460px;height:460px;margin:-230px 0 0 -230px}
  .orbit-sys.s2{width:330px;height:330px;margin:-165px 0 0 -165px}
  .orbit-sys.s3{width:215px;height:215px;margin:-107px 0 0 -107px}
  .orbit-core{width:180px;height:180px;margin:-90px 0 0 -90px}
  .orbit-comet{width:120px}
}

/* ---------- 减少动态效果 ----------
   系统级偏好必须尊重：关掉所有循环动画，装饰退化为静态星图。 */
@media (prefers-reduced-motion: reduce){
  .orbit-star,.orbit-core,.orbit-comet,
  .orbit-sys .orbit-ring,.orbit-sys .orbit-ring::before,
  .cd.is-before .cd-pip{animation:none!important}
  .orbit-comet{opacity:0}
}

/* ============================================================
   星域角色（AI 生成资源，放在原本空白的区域）
   ============================================================
   三个角色共用一套配色语言（墨绿 + 香槟金），与轨道、横幅同族。
   全部 pointer-events:none + aria-hidden；动画只用 transform/opacity。
   资源在 site/assets/，已裁掉生成水印并按 alpha 裁边。 */

/* ---------- hero：小星球 + 小卫星 ----------
   hero 原本是 static，给一个定位上下文（不影响布局）。
   内容两侧抬 z-index，装饰压在内容下面。 */
.hero{position:relative}
.hero-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-l,.hero-r{position:relative;z-index:1}

/* 落点：hero 文案段（.lede）右侧的空白矩形 —— 实测该区域
   x≈600-1150 / y≈360-560（1180×986 的 hero 内），两个角色一高一低。 */
.deco-planet{
  position:absolute;right:7%;top:37%;width:148px;height:156px;
  background:url('assets/mascot-planet.webp') center/contain no-repeat;
  filter:drop-shadow(0 10px 26px rgba(217,184,119,.20));
  animation:decoBob 7.5s ease-in-out infinite alternate;
  will-change:transform;
}
.deco-sat{
  position:absolute;right:15%;top:21%;width:92px;height:97px;
  background:url('assets/mascot-sat.webp') center/contain no-repeat;
  filter:drop-shadow(0 8px 20px rgba(157,255,200,.14));
  animation:decoDrift 14s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes decoBob{
  from{transform:translateY(-7px) rotate(-2.5deg)}
  to{transform:translateY(7px) rotate(2.5deg)}
}
@keyframes decoDrift{
  from{transform:translate(0,0) rotate(-5deg)}
  to{transform:translate(-24px,16px) rotate(5deg)}
}

/* ---------- mint 卡：宇航员吉祥物 ----------
   作为 .cost 的第三个 flex 子项（**不是绝对定位**）：
   右栏是 flex + align-self:stretch，栏内内容只占上部，底部一块空白。
   吉祥物用 margin-top:auto 沉到栏底，把空白变成"角色站在栏底"。
   完全跟随布局流动 —— 语种长短、钱包连接、开关态都不会错位。
   （曾经用 absolute+bottom 负偏移挂在栏沿：.cost 是 static
    （第五层·第三修正主动放弃了 sticky），定位上下文跑到卡片，
   吉祥物直接掉到卡片外面。flex 子项方案与定位方式解耦，没这个坑。） */
.cost-mascot{
  margin-top:auto;align-self:center;flex:0 0 auto;
  width:158px;height:167px;
  background:url('assets/mascot-astro.webp') center/contain no-repeat;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.5));
  animation:mascotFloat 5.5s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes mascotFloat{
  from{transform:translateY(-6px) rotate(-2deg)}
  to{transform:translateY(6px) rotate(2deg)}
}
/* 吉祥物背后一团暖光，让它从星野里"浮"出来 */
.cost-mascot::before{
  content:'';position:absolute;left:50%;top:50%;width:230px;height:230px;
  margin:-115px 0 0 -115px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(217,184,119,.13),rgba(217,184,119,.05) 45%,transparent 68%);
  animation:corePulse 6s ease-in-out infinite alternate;
}

/* ---------- 响应式 ----------
   移动端 hero 是单列堆叠、文字全宽，没有桌面那种"文案右侧空白"，
   硬塞角色会压文字。卫星缩小后放到标题行右侧（标题文字短、右侧是空的），
   行星在移动端隐藏（桌面 hero 才有它的落点）。 */
@media(max-width:900px){
  .deco-sat{right:7%;top:23%;width:64px;height:68px}
  .deco-planet{display:none}
}
@media(max-width:640px){
  .deco-sat{width:56px;height:59px}
  .cost-mascot{width:126px;height:133px}
}

/* 减少动态效果时，角色也静止（保留静态形象） */
@media (prefers-reduced-motion: reduce){
  .deco-planet,.deco-sat,.cost-mascot,.cost-mascot::before{animation:none!important}
}