/* ==========================================================
 * 文件: quant-ai-dark/landing-s2.css
 * 版本: 0.1.0 · 更新: 2026-10-23 · 作者: Claude（为李泓锐）
 * 用途: 落地页第 2 屏「100+ 策略」：3D 卡阵 + 底部策略代号跑马灯
 *   视觉延续首屏：近黑底、冰蓝点缀、白字三档透明度；卡片是很淡的玻璃，前 21 名描冰蓝边
 * ========================================================== */

.s2 {
  background: radial-gradient(70% 60% at 68% 52%, rgba(28, 41, 107, 0.35), transparent 70%), #05060f;
}

/* 文字压在左侧，卡阵在右侧 */
.s2 .story__inner { pointer-events: none; }
.s2 .story__title {
  max-width: 9.2em;
  font-size: clamp(40px, 5vw, 80px);
}

/* 卡阵伸到文字下面的部分压暗，文字保持干净 */
.s2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #05060f 0%, rgba(5, 6, 15, 0.92) 26%, rgba(5, 6, 15, 0) 52%);
}
.s2 .story__sub { max-width: 30em; }

/* —— 3D 卡阵 —— */
.cards3d {
  position: absolute;
  top: 46%;
  left: 70%;
  z-index: 1;
  width: 0;
  height: 0;
  perspective: 1600px;
  perspective-origin: 0 -20%;
  pointer-events: none;
}

.cards3d__plane {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-32deg) scale(var(--cards-scale, 0.68));
}

.cardx {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  width: 112px;
  height: 72px;
  padding: 8px 9px 7px;
  border: 1px solid rgba(143, 184, 255, 0.14);
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(40, 58, 140, 0.32), rgba(10, 14, 38, 0.55));
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-num);
  opacity: 0;
  transform: var(--scatter);
  transition:
    transform 1400ms var(--ease-expo) var(--delay, 0ms),
    opacity 700ms var(--ease-expo) var(--delay, 0ms),
    border-color var(--hover) var(--ease-hover),
    background-color var(--hover) var(--ease-hover);
  pointer-events: auto;
  backface-visibility: hidden;
}

.cardx.is-top {
  border-color: rgba(143, 184, 255, 0.55);
  box-shadow: 0 0 18px rgba(61, 107, 255, 0.25);
}

.cards3d.is-built .cardx {
  opacity: 1;
  transform: var(--pos) translateZ(var(--lift, 0px));
}

/* 悬停抬起（只在聚好之后）；transition 不再等 delay */
.cards3d.is-built .cardx:hover {
  --lift: 28px;
  border-color: rgba(255, 255, 255, 0.8);
  transition-delay: 0ms;
  transition-duration: 300ms;
}

.cards3d.is-static .cardx { transition: none; }

.cardx__id {
  grid-column: 1 / -1;
  overflow: hidden;
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cardx__family {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
}

.cardx__spark {
  align-self: end;
  width: 62px;
  height: 16px;
  overflow: visible;
}

.cardx__spark path {
  fill: none;
  stroke: rgba(143, 184, 255, 0.75);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.cardx.is-top .cardx__spark path { stroke: #ffffff; }

.cardx__sharpe {
  align-self: end;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

/* —— 底部策略代号跑马灯（同首屏的样子） —— */
.s2__strip {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
}

/* 中等屏幕：卡阵缩小 */
@media (max-width: 1279px) {
  .cards3d { --cards-scale: 0.62; }
}

/* 手机 / 竖屏：卡阵退到文字后面当背景 */
@media (max-width: 1023px) {
  .cards3d {
    top: 34%;
    left: 50%;
    --cards-scale: 0.5;
    opacity: 0.55;
  }
  .s2 .story__inner { padding-bottom: 64px; }
}

/* —— 本周夏普前 5 小榜（真实可读的数据 + 会员遮罩示意） —— */
.board {
  width: min(500px, 100%);
  margin-top: 40px;
  pointer-events: auto;
}

.board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.board__note {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.board__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.board__table th {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-3);
}

.board__table td {
  height: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--ink-2);
}

.board__rank {
  width: 36px;
  font-family: var(--font-num);
  color: var(--ink-3);
}

.board__name a,
.board__name > span {
  font-family: var(--font-num);
  color: #ffffff;
  text-decoration: none;
  transition: color var(--hover) var(--ease-hover);
}

.board__name a:hover { color: var(--violet); }

.board__name small {
  margin-left: 8px;
  font-size: 11px;
  color: var(--ink-3);
}

.board__num {
  text-align: right !important;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.board__table td.board__num:nth-child(3) { color: #ffffff; }

/* 会员行：模糊 + 渐隐，下面压一条解锁入口 */
.board__table tr.is-locked td {
  filter: blur(4px);
  opacity: 0.55;
  user-select: none;
}

.board__table tr.is-locked:last-child td { opacity: 0.25; }

.board__lock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -38px;
  padding: 12px 14px;
  border: 1px solid rgba(143, 184, 255, 0.22);
  border-radius: 6px;
  background: rgba(8, 11, 30, 0.82);
  backdrop-filter: blur(6px);
  font-size: 13px;
  color: var(--ink-2);
}

.board__lock-icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.4;
}

.board__btn {
  flex: none;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 4px;
  background: #ffffff;
  color: #05060f;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--hover) var(--ease-hover);
}

.board__btn:hover { background: #dfe8ff; }

/* 矮屏：标题和副标题之间收紧，给小榜让位 */
@media (max-height: 920px) and (min-width: 1024px) {
  .s2 .story__sub { margin-top: 20px; }
  .board { margin-top: 28px; }
  .board__table td { height: 30px; }
}