/* v3.css — 设计稿 v3 的视觉原语（Landing / Dashboard / 广场共用）
 *
 * ⚠️⚠️ 这些不是我发明的样式，是从 `NFT制作工厂系统设计 (2)/*.dc.html` 里**照抄**的。
 *    改之前先看那几张稿 —— 它们是设计的来源，这个文件只是实现。
 *
 * ⚠️ 配色和字体**不在这里定义** —— `app.css` 里已经有一整套（`--lime` / `--ink` /
 *    Archivo / IBM Plex Mono），而且和设计稿的取值完全一致（`#7A9B1E` = `--lime-deep`）。
 *    在这里再造一份变量的下场是两套颜色慢慢分叉。
 *
 * ⚠️ 这一套的招牌动作是**药丸 + 轻微旋转 + 柠檬色**。旋转角度都很小（1~3 度）：
 *    再大就从「手工感」变成「歪了」。
 */

/* ═══════════════════════════════ 动效 ═══════════════════════════════
 * ⚠️ 全部 CSS keyframes，不用 JS。GSAP 只负责**进场**（`usePop`）——
 *    持续性的循环动画交给 CSS，浏览器能在合成层上跑，不占主线程。
 * ⚠️ 一律尊重 `prefers-reduced-motion`：这些是装饰，不是信息。
 */
@keyframes v3-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
@keyframes v3-spin   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes v3-marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes v3-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 231, 80, .5); }
  70%      { box-shadow: 0 0 0 16px rgba(201, 231, 80, 0); }
}
/* 眨眼。⚠️ 92% 之前完全不动 —— 一直眨会变成抽搐。 */
@keyframes v3-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

@media (prefers-reduced-motion: reduce) {
  .v3-float, .v3-spin, .v3-mq > *, .v3-dot, .v3-eye { animation: none !important; }
}

/* ═══════════════════════════════ 排版 ═══════════════════════════════ */
/* ⚠️ 62px 不是随手写的大 —— 设计稿就是这个数，配 1.02 的行高和 -0.025em 的字距。
 *    这三个值是一组：只放大字号不收字距，字母之间会散开成一片。 */
.v3-h1 { font-size: clamp(34px, 6.4vw, 62px); line-height: 1.02; font-weight: 800;
         letter-spacing: -.025em; margin: 22px 0 0; text-wrap: balance; }
.v3-h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin: 0;
         letter-spacing: -.02em; text-wrap: balance; }
.v3-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 22px 0 0;
           max-width: 470px; font-weight: 500; text-wrap: pretty; }

/* ⚠️⚠️ **整套设计里最认得出来的一个动作。** 高亮词套一个柠檬色药丸再歪一点点。
 *    `display:inline-block` 不能省 —— 行内元素上 `transform` 无效，
 *    而那种失效是静默的：字还在，只是没歪，没人会注意到少了什么。 */
.v3-hl { background: var(--lime); border-radius: 16px; padding: 0 14px;
         display: inline-block; transform: rotate(-2deg); }
.v3-hl.r { transform: rotate(1.5deg); border-radius: 14px; padding: 0 12px; }

.v3-mono { font-family: var(--mono); font-weight: 600; letter-spacing: .06em; }

/* ═══════════════════════════════ 药丸 ═══════════════════════════════ */
/* 白药丸里套一排药丸链接 —— 顶栏导航 */
.v3-nav { display: flex; align-items: center; gap: 6px; background: var(--white);
          border: 1px solid var(--line-s); border-radius: 999px; padding: 6px; }
.v3-nav a { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
            color: var(--muted-d); text-decoration: none; transition: background .14s ease; }
.v3-nav a:hover, .v3-nav a[aria-current] { background: var(--lime-soft); color: var(--ink); }

/* 黑药丸 + 柠檬圆箭头。⚠️ 左右内边距不对称（18 / 8）—— 右边那个圆自己占位置。 */
.v3-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--ink);
          color: var(--paper); border: none; border-radius: 999px;
          padding: 9px 8px 9px 18px; font-size: 13.5px; font-weight: 700;
          text-decoration: none; cursor: pointer; font-family: inherit;
          transition: transform .16s ease; }
.v3-cta:hover { transform: translateY(-2px); }
.v3-cta > i { width: 28px; height: 28px; border-radius: 50%; background: var(--lime);
              color: var(--ink); display: inline-flex; align-items: center;
              justify-content: center; font-size: 12px; font-style: normal; }

/* 状态药丸（白底 + 会呼吸的点） */
.v3-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: var(--white);
              border: 1px solid var(--line-s); border-radius: 999px; padding: 7px 15px;
              font-family: var(--mono); font-size: 10.5px; font-weight: 600;
              letter-spacing: .1em; color: var(--muted-d); text-transform: uppercase; }
.v3-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
          display: inline-block; animation: v3-pulse 2.4s ease-out infinite; }

.v3-chip { font-family: var(--mono); font-size: 10.5px; font-weight: 600;
           background: var(--white); border: 1px solid var(--line-s);
           border-radius: 999px; padding: 6px 12px; color: var(--muted-d); }

/* ═══════════════════════════════ 拼贴 ═══════════════════════════════
 * ⚠️ 首屏右边那块。绝对定位的装饰件 —— **信息一个都别放在这里**：
 *    窄屏时整块要能直接隐藏，隐藏掉不该丢任何内容。
 */
/* ⚠️⚠️ 高度必须**装得下最低那张卡**。照抄设计稿的 480px 但卡片比稿子高
 *    （我们的卡是 168 的脸 + 元信息 + 内边距 ≈ 235），第三张 330+235=565
 *    直接从容器底穿出去 —— 而下面紧接着是黑色跑马灯，于是那张卡被黑条
 *    拦腰切断，看起来像**页面渲染坏了**。
 *    ⚠️ `overflow:hidden` 不是解法：那会把卡切平，同样难看，只是换个切法。
 *    ⇒ 容器高度按内容给，卡片的 `top` 也一起收，留出底部余量。 */
.v3-collage { position: relative; height: 560px; }
/* 四角星（clip-path 画的，不是图片 —— 省一个请求，而且跟着变量换色） */
.v3-star { position: absolute; width: 150px; height: 150px; background: var(--lime);
           clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }
.v3-orb { position: absolute; width: 118px; height: 118px; border-radius: 50%;
          background: var(--white); border: 1px solid var(--line);
          display: flex; align-items: center; justify-content: center; }
.v3-orb > div { width: 92px; height: 92px; border-radius: 50%; background: var(--lime-soft);
                display: flex; flex-direction: column; align-items: center;
                justify-content: center; }

/* 浮动的卡片。⚠️ `--rot` 用自定义属性传角度 —— `v3-float` 的关键帧里要用它，
 *    不然浮动动画会把旋转覆盖掉（transform 只有一个值）。 */
.v3-fcard { position: absolute; width: min(218px, 42%); background: var(--white);
            border: 1px solid var(--line); border-radius: 20px; padding: 12px;
            box-shadow: 0 18px 40px rgba(var(--sh), .10);
            transform: rotate(var(--rot, 0deg));
            animation: v3-float 6s ease-in-out infinite; }

/* ═══════════════════════════════ 卡片预览 ═══════════════════════════
 * 设计稿里那个「会眨眼的脸」。⚠️ 用 div 画而不是放图 ——
 * 落地页不该依赖任何一个具体项目的产物：那些图会被删、会换、会属于某个客户。
 */
.v3-face { height: 168px; border-radius: 13px; position: relative; overflow: hidden; }
.v3-eyes { position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
           display: flex; gap: 24px; }
.v3-eye { width: 30px; height: 30px; border-radius: 50%; background: var(--white);
          display: flex; align-items: center; justify-content: center;
          animation: v3-blink 4s infinite; }
.v3-eye:nth-child(2) { animation-duration: 5.2s; }
.v3-eye > b { width: 12px; height: 12px; border-radius: 50%; background: var(--ink);
              position: relative; display: block; }
.v3-eye > b::after { content: ''; position: absolute; top: 2px; left: 2px; width: 4px;
                     height: 4px; border-radius: 50%; background: var(--white); }
.v3-mouth { position: absolute; top: 100px; left: 50%; transform: translateX(-50%);
            width: 30px; height: 15px; border-radius: 0 0 26px 26px; background: var(--ink); }
.v3-badge { position: absolute; bottom: 8px; left: 8px; font-family: var(--mono);
            font-size: 9.5px; font-weight: 600; background: rgba(255, 255, 255, .82);
            border-radius: 999px; padding: 3px 8px; color: var(--ink); }
.v3-cmeta { display: flex; justify-content: space-between; align-items: center;
            margin-top: 10px; padding: 0 4px; }
.v3-cname { font-size: 13px; font-weight: 800; }
.v3-tier { font-family: var(--mono); font-size: 9px; font-weight: 700;
           border-radius: 999px; padding: 3px 7px; }

/* ═══════════════════════════════ 跑马灯 ═══════════════════════════
 * ⚠️ 内容必须**重复两遍**，`translateX(-50%)` 才能无缝循环。
 *    只放一遍的话跑到一半会出现空白 —— 那种 bug 只在动画走完一圈时才看得见。
 */
.v3-mq { background: var(--ink); overflow: hidden; padding: 14px 0; }
.v3-mq > div { display: flex; width: max-content; animation: v3-marquee 24s linear infinite; }
.v3-mq span { font-size: 14px; font-weight: 700; color: var(--paper); white-space: nowrap;
              padding: 0 20px; letter-spacing: .04em; text-transform: uppercase; }
.v3-mq span em { color: var(--lime); font-style: normal; margin-left: 36px; }

/* ═══════════════════════════════ 步骤卡 ═══════════════════════════ */
.v3-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.v3-step { background: var(--white); border: 1px solid var(--line); border-radius: 20px;
           padding: 24px; display: flex; flex-direction: column; gap: 14px;
           transition: transform .18s ease, box-shadow .18s ease; }
.v3-step:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(var(--sh), .08); }
.v3-step .n { width: 44px; height: 44px; border-radius: 50%; display: inline-flex;
              align-items: center; justify-content: center; font-weight: 800;
              background: var(--lime-soft); color: var(--lime-deep); }
.v3-step .t { font-size: 19px; font-weight: 800; }
.v3-step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted);
             font-weight: 500; text-wrap: pretty; }

/* ═══════════════════════════════ 版心 ═══════════════════════════════ */
/* ⚠️⚠️ **`width: 100%` 不能省。** 满幅骨架 `.plainin` 是纵向 flex 容器，横向是
 *    交叉轴；交叉轴上的 `margin: auto` **优先级高于 `align-self: stretch`**，
 *    于是「`max-width` + `margin: 0 auto`」不会先撑满再夹到 1280，而是
 *    **收缩到内容宽** —— 实测 1440px 视口下只剩 593px，肉眼就是「左右挤成一条」。
 *    这个错不报错、不溢出、截图看着还「居中」，只有量出来才知道。 */
.v3-wrap { max-width: 1280px; width: 100%; margin: 0 auto;
           padding: 0 32px; box-sizing: border-box; }
.v3-sec { padding-top: 84px; }

/* ⚠️ 窄屏：拼贴整块隐藏（里面没有信息），三栏变一栏，跑马灯留着。 */
@media (max-width: 900px) {
  .v3-steps { grid-template-columns: 1fr; }
  .v3-collage { display: none; }
  .v3-wrap { padding: 0 18px; }
  .v3-sec { padding-top: 52px; }
}

/* ═══════════════════════ 工作台 / 面板语言 ═══════════════════════
 * 从 `Dashboard v3.dc.html` 抄的。
 *
 * ⚠️ 设计稿左边那排 96px 竖排导航是 `JOB / WIZ / GATE / CA / EXP` ——
 *    **那是我们流水线的阶段名，对客户没有意义**。所以这里只采纳它的视觉语言
 *    （大圆角面板、斜条纹、双色叠字、带箭头的数据 chip），不照搬那排导航；
 *    客户的导航在顶栏。
 */

/* 整屏套一个大圆角面板 + 长投影。⚠️ 阴影很大（80px 模糊）是刻意的 ——
 * 它让面板浮在纸色背景上，是这套设计的空间感来源。 */
.v3-panel { background: var(--paper); border-radius: 26px;
            box-shadow: 0 30px 80px rgba(var(--sh), .12); padding: 26px 30px 34px; }

/* ⚠️⚠️ 斜条纹是这套设计的**招牌纹理**（设计稿里头像、进度块都用它）。
 *    45 度、5px 一道。两个颜色用自定义属性传，别为每种配色各写一条规则。 */
.v3-stripe { background: repeating-linear-gradient(45deg,
             var(--s1, #C9E750), var(--s1, #C9E750) 5px,
             var(--s2, #17190F) 5px, var(--s2, #17190F) 10px); }

/* 双色叠字标题：上面一行浅灰细体，下面一行黑色粗体。
 * ⚠️ 300 和 800 两个字重差得很远是刻意的 —— 差小了会看起来像没对齐。 */
.v3-title { line-height: 1.06; }
.v3-title .a { font-size: clamp(22px, 3vw, 34px); font-weight: 300; color: var(--faint); }
.v3-title .b { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; color: var(--ink);
               letter-spacing: -.01em; }

/* 数据块。`↗ 16%` 那种 chip 挂在数字旁边。 */
.v3-stat { background: var(--white); border: 1px solid var(--line); border-radius: 18px;
           padding: 18px 20px; }
.v3-stat .n { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.02em;
              line-height: 1; }
.v3-stat .l { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--faint);
              letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }
.v3-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono);
            font-size: 10px; font-weight: 700; border-radius: 999px; padding: 3px 8px;
            background: var(--lime-soft); color: var(--lime-deep); margin-left: 8px;
            vertical-align: middle; }

/* 圆形徽标 + 右下角小角标（设计稿里那个 52px 柠檬圆 + 黑色小圆） */
.v3-orbit { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.v3-orbit > .c { width: 52px; height: 52px; border-radius: 50%; background: var(--lime);
                 display: flex; align-items: center; justify-content: center;
                 font-weight: 800; font-size: 17px; }
.v3-orbit > .p { position: absolute; bottom: -4px; right: -6px; width: 24px; height: 24px;
                 border-radius: 50%; background: var(--ink); color: var(--paper);
                 display: flex; align-items: center; justify-content: center;
                 font-size: 11px; font-weight: 700; }

/* 一行可点的条目（待办 / 批次）。⚠️ 整行可点 —— 只让箭头可点手机上很难命中。 */
.v3-row { display: grid; align-items: center; gap: 12px; background: var(--white);
          border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px;
          text-decoration: none; color: inherit;
          transition: border-color .14s ease, transform .14s ease; }
.v3-row:hover { border-color: var(--ink); transform: translateY(-1px); }
.v3-row.warn { border-color: var(--warn-bd); background: var(--warn-bg); }

/* 条纹进度块（设计稿 Progress 那块） */
.v3-prog { width: 92px; height: 92px; border-radius: 16px; flex-shrink: 0; }

/* ═══════════════════ 落地页 / 广场的骨架（不套内页面板）═══════════════════
 * ⚠️⚠️ 内页用 `.wrap > .shell`（1180px 圆角面板 + `overflow:hidden`）。
 *    落地页套进去会**比设计稿窄 100px**，左右挤成一条，而且跑马灯没法通栏 ——
 *    设计稿里它是压满整个视口的黑条。客户第一眼的原话是「感觉被截断了」。
 * ⚠️ 顶栏共用（`.top` 那套），只是外框换掉：品牌 / 连钱包 / 语言不该有两份实现。
 */
/* ⚠️ 底色是**斜向渐变**，不是平色 —— 照抄设计稿的
 *    `linear-gradient(135deg,#E6E8E1,#F2F3EE 55%,#E9EBE4)`。
 *    平色少了那点空间层次，整页会显得死板；这是第一眼就能感觉到、
 *    但很难指出来的那种差别。
 * ⚠️ 值写死而不是走变量：`app.css` 的 `--page` 是内页那层纸的平色，
 *    两者用途不同，共用一个名字迟早互相改坏。 */
.plain { min-height: 100vh;
         background: linear-gradient(135deg, #E6E8E1, #F2F3EE 55%, #E9EBE4); }
.plainin { width: 100%; display: flex; flex-direction: column; }
/* 顶栏在满幅里也要跟着 1280 的版心对齐，不然它会贴到屏幕边上 */
.plain > .plainin > .top { max-width: 1280px; width: 100%; margin: 0 auto;
                           padding: 22px 32px 0; border-bottom: none;
                           box-sizing: border-box; }
/* ⚠️ 首屏和分节都用 1280 版心；跑马灯**不**加版心 —— 它要通栏。 */
.plain .v3-hero, .plain .v3-sec, .plain .sc-top, .plain .sc-series {
  max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto;
  padding-left: 32px; padding-right: 32px; box-sizing: border-box;
}
@media (max-width: 900px) {
  .plain > .plainin > .top { padding: 16px 18px; }
  .plain .v3-hero, .plain .v3-sec, .plain .sc-top, .plain .sc-series {
    padding-left: 18px; padding-right: 18px;
  }
}