/* ==========================================================================
   第二屏 · 巨标题持续缩小 → 卡片自画外向中心聚拢成一摞
                → 舞台随页面上滚，Add / Send / Exchange 依次进入视口
   ========================================================================== */

.unify {
  position: relative;
  background: var(--bg);
}

/* 舞台的行程容器：多出来的高度就是"钉住"期间可滚动的距离 */
.unify__pin {
  height: 300svh;
}

.unify__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;              /* 卡片从视口边缘外滑入 */
}

/* ---------- 巨标题：全程可见，只是不断变小，最后被卡片盖住 ---------- */
.unify__title {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  font-size: clamp(56px, 15vw, 260px);
  font-weight: var(--fw-medium);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--c-primary);
  z-index: 1;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------- 卡片 ---------- */
.unify__cards {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.ucard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(158px, 14.4vw, 300px);
  min-height: 15em;              /* 各卡体量拉齐，聚拢后是一摞而不是长短不一 */
  border-radius: 1.15em;
  padding: 0.8em;
  display: grid;
  gap: 0.45em;
  align-content: space-between;
  font-size: clamp(11px, 0.92vw, 19px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  will-change: transform;
}

/* 卡内通用件（尺寸全部跟随卡片字号，整卡缩放时比例不变） */
.ucard__head {
  font-size: 0.92em;
  color: var(--fg-faint);
  letter-spacing: var(--ls-small);
  text-transform: uppercase;
}
.ucard__amts { display: grid; gap: 0.15em; }
.ucard__amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.55em;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ucard__sub { font-size: 0.88em; color: var(--fg-muted); }
.ucard__chip {
  justify-self: start;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: var(--raised);
  color: var(--fg-muted);
  font-size: 0.82em;
}
.ucard__panel {
  display: grid;
  gap: 0.3em;
  padding: 0.72em;
  border-radius: 0.72em;
  background: var(--raised);
}
.ucard__cur {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ls-small);
}
.ucard__value { font-size: 1.25em; font-weight: 500; line-height: 1.1; color: var(--fg); }
.ucard__bal { font-size: 0.82em; color: var(--fg-faint); }
.ucard__btn {
  display: grid; place-items: center;
  height: 2.4em; border-radius: 0.6em;
  background: var(--surf);
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: var(--ls-small);
}

/* 五张卡：三个市场是中性玻璃面，两枚代币各自带语义色。
   语义锁——XO 恒为绿，EXON 恒为紫，不得互换。 */
.ucard--capital,
.ucard--digital,
.ucard--real {
  background: rgba(18, 22, 21, 0.94);
  border: 1px solid var(--line);
  color: var(--fg);
}

.ucard--xo {
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.26), rgba(5, 150, 105, 0.14)), #0d1512;
  border: 1px solid rgba(5, 150, 105, 0.5);
}
.ucard--xo .ucard__cur,
.ucard--xo .ucard__btn { color: var(--c-primary-light); }

.ucard--exon {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.26), rgba(139, 92, 246, 0.14)), #120f1a;
  border: 1px solid rgba(139, 92, 246, 0.5);
}
.ucard--exon .ucard__cur,
.ucard--exon .ucard__btn { color: var(--c-accent); }

/* 聚拢前每张卡的出发方位与层序。
   --sx / --sy 是卡心相对视口中心的位置，单位：视口宽 % / 视口高 %；
   数值都超过半屏，保证第二屏刚进来时画面里只有大字，一张卡都看不到。
   --lag 让几张卡错开一点先后，进场不是齐刷刷一排。 */
.ucard--capital  { --sx: -26; --sy: -80; --lag: 0.06; z-index: 1; }
.ucard--real     { --sx:  63; --sy:  30; --lag: 0.04; z-index: 2; }
.ucard--digital  { --sx: -65; --sy:  -4; --lag: 0.00; z-index: 3; }
.ucard--xo       { --sx:  59; --sy: -66; --lag: 0.00; z-index: 4; }
.ucard--exon     { --sx:  -8; --sy:  78; --lag: 0.10; z-index: 5; }

/* ---------- 功能列表：三行各自 sticky，依次滚上来停在自己的位置 ---------- */
/* 三点讲究，缺一个都粘不住：
   ① 用块级布局——grid item 的 sticky 只在自己那一行里生效；
   ② 行距放在 margin-top 而不是 margin-bottom——sticky 元素的「外边距盒」
      必须留在容器内容盒里，尾部外边距会把可粘范围直接吃掉；
   ③ 停靠后的滞留距离用 ::after 撑在内容盒里，用 padding 同样不算数。 */
.unify__actions {
  display: block;
  margin: -6svh 0 0;
  padding: 0;
  list-style: none;
}
.unify__actions::after {
  content: "";
  display: block;
  height: 110svh;
}

.uact + .uact { margin-top: 30svh; }

/* 停靠位按实测：三行最终紧挨着落在视口 30% / 43.5% / 59% */
.uact:nth-child(1) { top: 30svh; }
.uact:nth-child(2) { top: 43.5svh; }
.uact:nth-child(3) { top: 59svh; }

.uact {
  position: sticky;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.22em;
  font-size: clamp(46px, 7.4vw, 165px);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.03em;
}

.uact__ico {
  width: 0.62em;
  aspect-ratio: 1;
  border-radius: 0.16em;
  position: relative;
  flex: 0 0 auto;
}
.uact__ico::before,
.uact__ico::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 0.02em;
}

/* + */
.uact__ico--anchor { background: var(--c-primary); }
.uact__ico--anchor::before { inset: 44% 22%; }
.uact__ico--anchor::after  { inset: 22% 44%; height: auto; }

/* 纸飞机 */
.uact__ico--circulate { background: var(--c-accent); }
.uact__ico--circulate::before {
  inset: 26%;
  border-radius: 0.03em;
  clip-path: polygon(100% 0, 0 42%, 42% 54%, 58% 100%);
}
.uact__ico--circulate::after { content: none; }

/* 双向箭头：上行朝右、下行朝左 */
.uact__ico--connect { background: var(--c-mint); }
.uact__ico--connect::before {
  inset: 33% 25% auto; height: 13%; border-radius: 0;
  clip-path: polygon(0 34%, 70% 34%, 70% 0, 100% 50%, 70% 100%, 70% 66%, 0 66%);
}
.uact__ico--connect::after {
  inset: auto 25% 33%; height: 13%; border-radius: 0;
  clip-path: polygon(100% 34%, 30% 34%, 30% 0, 0 50%, 30% 100%, 30% 66%, 100% 66%);
}

.uact[data-act="0"] { color: var(--c-primary-light); }
.uact[data-act="1"] { color: var(--c-accent); }
.uact[data-act="2"] { color: var(--c-mint); }
/* 薄荷底上的白色箭头看不见，压深一档 */
.uact__ico--connect::before,
.uact__ico--connect::after { background: var(--c-ink); }

@media (max-width: 743px) {
  .unify__pin { height: 260svh; }
  .ucard { width: clamp(126px, 33vw, 250px); font-size: clamp(10px, 2.5vw, 15px); }
  .ucard--capital  { --sx: -26; --sy: -72; }
  .ucard--real     { --sx:  80; --sy:  28; }
  .ucard--digital  { --sx: -82; --sy:  -4; }
  .ucard--xo       { --sx:  76; --sy: -60; }
  .ucard--exon     { --sx:  -6; --sy:  70; }
  .unify__actions::after { height: 40svh; }
  .uact + .uact { margin-top: 24svh; }
  .uact:nth-child(1) { top: 32svh; }
  .uact:nth-child(2) { top: 44svh; }
  .uact:nth-child(3) { top: 57svh; }
}