/* 共享样式：四个中转页 */
:root{
  --paper:#FBFCFD;
  --ink:#0B1B33;
  --navy:#0A2A5E;
  --mute:#5C6B80;
  --line:rgba(11,27,51,.13);
  --line-soft:rgba(11,27,51,.07);
  --cyan:#2FD4D8;
  --sans:"MiSans","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(22px, 4.2vw, 56px);
  --maxw:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 600px at 84% 0%, rgba(47,212,216,.12), transparent 62%),
    radial-gradient(700px 480px at 2% 0%, rgba(31,111,224,.08), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#FAFCFE 48%,#F4F7FB 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
::selection{background:var(--cyan);color:var(--navy)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}

/* 顶栏：居中胶囊 */
.mark{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap}
.mark::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(47,212,216,.16)}
.mark span{display:none}
.menu{display:flex;align-items:center;gap:2px}
.menu a{font-size:12.5px;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background .3s ease,color .3s ease}
.menu a{
  transition:transform .3s cubic-bezier(.22,.61,.36,1), color .3s ease;
  transform-origin:50% 55%;
}
.menu a:hover{transform:scale(1.09)}
  .menu a:active{background:transparent}
.menu a.on{font-weight:600; color:var(--navy)}
.menu a.cta{background:transparent;border:0;color:var(--navy)}
.menu a.cta:hover{color:var(--navy)}

/* 页面容器 */
.page{max-width:var(--maxw);margin:0 auto;padding:clamp(120px,16vh,168px) var(--pad) clamp(60px,9vh,100px)}
.kicker{
  display:flex;align-items:center;gap:12px;
  font-size:12.5px;color:var(--mute);margin-bottom:20px;
}
.kicker::before{content:"";width:30px;height:1px;background:var(--navy);opacity:.45}
h1{font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-.03em;font-weight:600;color:var(--ink)}
.lede{max-width:52ch;margin-top:18px;font-size:15px;line-height:1.85;color:var(--mute)}
.meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,36px);
  margin-top:30px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--mute);
}
.meta b{display:block;font-size:19px;font-weight:600;color:var(--navy);letter-spacing:-.01em}

/* 区块标题 */
.sec-head{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:clamp(48px,8vh,84px) 0 clamp(20px,3vh,32px);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.sec-head h2{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.sec-head p{font-size:12px;color:var(--mute);letter-spacing:.05em}
.sec-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--navy);opacity:.5;transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .1s;
}
body.loaded .sec-head::after{transform:scaleX(1)}

/* 作品 / 素材：白卡 + 缓动放大 + 阴影层 + 揭幕帘（与首页作品墙一致） */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,34px)}
.piece{display:block}

.piece .frame,.thumbs figure{
  position:relative; margin:0; background:#fff;
  padding:clamp(8px,1vw,14px); border:1px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(11,27,51,.05);
  transition:border-color .55s cubic-bezier(.22,.61,.36,1);
}
.piece .frame::after,.thumbs figure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:0 26px 46px -22px rgba(11,27,51,.4);
  opacity:0; transition:opacity .6s cubic-bezier(.22,.61,.36,1);
}
.piece:hover .frame::after,.thumbs figure:hover::after{opacity:1}
.piece:hover .frame,.thumbs figure:hover{border-color:var(--line)}

.shot{position:relative; overflow:hidden; background:#E8EDF5}
.shot img{
  width:100%; height:auto; display:block;
  transform:scale(1);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}
.piece:hover .shot img,.thumbs figure:hover .shot img{transform:scale(1.045)}

/* 揭幕帘：进入视口时向上收走，和首页一致 */
.shot::after{
  content:""; position:absolute; inset:0; background:#FBFCFD;
  transform:scaleY(1); transform-origin:top;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1) .08s;
}
.rise.in .shot::after{transform:scaleY(0)}

.piece .cap{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:12px}
.piece .cap b{font-size:17px; font-weight:500; color:var(--navy)}
.piece .cap span{font-size:12px; color:var(--mute)}

/* 素材缩略：两列，同款卡片 */
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,34px)}
.thumbs figcaption{margin-top:10px;font-size:12px;color:var(--mute)}

/* 分类列表 */
.rows{border-top:1px solid var(--line-soft)}
.rows .row{
  display:grid;grid-template-columns:56px 1fr 120px;gap:clamp(12px,2vw,24px);align-items:baseline;
  padding:20px 4px;border-bottom:1px solid var(--line-soft);
  transition:background .45s cubic-bezier(.22,.61,.36,1),border-color .45s cubic-bezier(.22,.61,.36,1);
}
.rows .row > *{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.rows .row:hover{background:linear-gradient(90deg,rgba(47,212,216,.07),transparent 70%)}
.rows .row:hover > *{transform:translateX(14px)}
.rows .n{font-size:12.5px;color:rgba(11,27,51,.42);letter-spacing:.04em}
.rows h3{font-size:16px;font-weight:500;color:var(--navy)}
.rows p{font-size:12.5px;color:var(--mute);margin-top:2px}
.rows .count{justify-self:end;font-size:12px;color:var(--mute);white-space:nowrap}

/* 字体样本 */
.spec{
  display:grid;grid-template-columns:200px 1fr;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(20px,3vh,30px) 4px;
  border-bottom:1px solid var(--line-soft);
  transition:background .4s ease,padding-left .4s var(--ease);
}
.spec:hover{background:rgba(47,212,216,.05);padding-left:14px}
.spec .name{font-size:12.5px;color:var(--mute);letter-spacing:.03em}
.spec .name b{display:block;font-size:14px;font-weight:500;color:var(--navy);margin-bottom:2px;font-family:var(--sans)}
.spec .sample{
  font-size:clamp(28px,3.4vw,46px);line-height:1.15;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 结尾 CTA */
.more-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(44px,7vh,72px);
  padding:clamp(22px,3.4vh,30px) clamp(22px,3vw,32px);
  border:1px solid var(--navy);border-radius:2px;
  color:var(--navy);
  transition:background .4s ease,color .4s ease;
}
.more-cta:hover{background:var(--navy);color:#fff}
.more-cta .t{display:block;font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:-.01em}
.more-cta .s{display:block;margin-top:4px;font-size:12.5px;opacity:.62}
.more-cta svg{width:22px;height:22px;flex:none;transition:transform .4s var(--ease)}
.more-cta:hover svg{transform:translate(3px,-3px)}

.note{max-width:72ch;margin:16px 0 0;font-size:12.5px;line-height:1.85;color:var(--mute)}
.prose{max-width:62ch;display:grid;gap:16px}
.prose p{font-size:15px;line-height:1.95;color:var(--mute)}
.prose p:first-child{color:var(--ink)}

/* 背景光晕：固定层，滚动时比内容慢，形成层级差 */
.aura{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.aura i{
  position:absolute; display:block; border-radius:50%;
  will-change:transform;
}
.aura .g1{
  width:min(70vw, 900px); height:min(70vw, 900px);
  right:-14vw; top:-16vh;
  background:radial-gradient(circle at 50% 50%, rgba(47,212,216,.30), rgba(47,212,216,0) 62%);
}
.aura .g2{
  width:min(60vw, 760px); height:min(60vw, 760px);
  left:-16vw; top:26vh;
  background:radial-gradient(circle at 50% 50%, rgba(31,111,224,.20), rgba(31,111,224,0) 64%);
}
.aura .g3{
  width:min(52vw, 640px); height:min(52vw, 640px);
  right:6vw; bottom:-22vh;
  background:radial-gradient(circle at 50% 50%, rgba(120,86,220,.16), rgba(120,86,220,0) 66%);
}
.page{position:relative; z-index:1}

/* 页脚 */
footer{background:#06182F;color:#fff;margin-top:clamp(40px,8vh,90px)}
.foot{
  max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vh,64px) var(--pad) 36px;
  display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,.7fr));gap:clamp(24px,4vw,48px);
}
.foot .sign{font-size:15px;font-weight:600}
.foot .sign span{display:block;margin-top:10px;font-size:13px;font-weight:400;color:rgba(255,255,255,.55);max-width:26ch;line-height:1.7}
.foot h4{margin:0 0 14px;font-size:11.5px;color:rgba(255,255,255,.42);letter-spacing:.1em;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot li a{font-size:13px;color:rgba(255,255,255,.72);transition:color .3s}
.foot li a:hover{color:#fff}
.copy{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 32px;
  font-size:11.5px;color:rgba(255,255,255,.32);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* 入场 */
 .rise{opacity:0; translate:0 30px}
.rise.in{
  animation-name:riseFade, riseMove;
  animation-duration:.95s, 1.35s;
  animation-timing-function:cubic-bezier(.33,0,.2,1), cubic-bezier(.22,1.3,.36,1);
  animation-delay:var(--d,0ms), var(--d,0ms);
  animation-fill-mode:both, both;
}
@keyframes riseFade{from{opacity:0} to{opacity:1}}
@keyframes riseMove{from{translate:0 30px} to{translate:0 0}}

@media (max-width:820px){
  .rise{translate:0 26px}
  .rise.in{animation-duration:1.15s, 1.6s}
  .menu a{font-size:12px;padding:7px 11px}
  .page{padding-top:104px}
  .spec{grid-template-columns:1fr;gap:8px}
  .thumbs{grid-template-columns:1fr}
  .rows .row{grid-template-columns:36px 1fr;row-gap:2px}
  .rows .count{justify-self:start;grid-column:2}
  .foot{grid-template-columns:1fr 1fr;gap:26px}
  .foot .sign{grid-column:1/-1}
}
@media (max-width:430px){
  .menu{gap:10px}
  .menu a{font-size:12px}
  :root{--pad:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rise{opacity:1;translate:none}
}

  /* ---------------- 底部胶囊：点击横向展开（毛玻璃） ---------------- */
  .top{
    position:fixed; left:50%; bottom:22px; top:auto; right:auto; z-index:60;
    transform:translateX(-50%);
    display:flex; align-items:center;
    padding:5px 6px; border-radius:999px;
    max-width:calc(100vw - 24px);
    background:rgba(255,255,255,.5);
    background-image:linear-gradient(180deg, rgba(10,42,94,.035), rgba(10,42,94,.015));
    border:0;
    box-shadow:
      0 26px 60px -30px rgba(11,27,51,.7),
      0 8px 22px -12px rgba(11,27,51,.28),
      0 1px 2px rgba(11,27,51,.08);
    -webkit-backdrop-filter:blur(26px) saturate(200%);
    backdrop-filter:blur(26px) saturate(200%);
    transition:background .4s ease, box-shadow .5s ease;
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .top{background:rgba(255,255,255,.95)}
    body.nav-open .top{background:rgba(255,255,255,.98)}
  }

  .nav-ball{
    position:relative; left:auto; right:auto; bottom:auto; top:auto; transform:none;
    height:40px; padding:0 15px; border-radius:999px; flex:none;
    display:flex; align-items:center; gap:9px;
    background:transparent; border:0; color:var(--navy);
    font-size:13px; letter-spacing:.04em; font-weight:500; white-space:nowrap;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:background .35s ease, color .35s ease,
               padding .42s cubic-bezier(.33,0,.2,1),
               gap .42s cubic-bezier(.33,0,.2,1);
  }
  .nav-ball:hover{background:rgba(10,42,94,.07)}
  /* 展开时收成一个正圆，× 居中 */
  body.nav-open .nav-ball{
    background:var(--navy); color:#fff;
    padding:0 12px; gap:0;
  }
  .nav-text{display:inline-block; max-width:4em; overflow:hidden; white-space:nowrap;
    transition:max-width .42s cubic-bezier(.33,0,.2,1), opacity .28s ease}
  body.nav-open .nav-text{max-width:0; opacity:0}

  .nav-icon{display:flex; flex-direction:column; justify-content:center; width:15px; height:14px}
  .nav-icon i{
    display:block; height:1.5px; width:100%; border-radius:2px; background:currentColor;
    transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  }
  .nav-icon i + i{margin-top:3.5px}
  body.nav-open .nav-icon i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  body.nav-open .nav-icon i:nth-child(2){opacity:0}
  body.nav-open .nav-icon i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

  /* 轨道：恰好三个项宽 + 两侧箭头 22px */
  .nav-track{
    --navw:78px;
    position:relative;
    display:flex; align-items:center;
    padding:0 20px; margin:0 -20px;  /* 收起时把两侧留白抵掉，胶囊只剩按钮 */
    max-width:0; opacity:0; overflow:hidden;
    transition:max-width .58s cubic-bezier(.25,.85,.35,1),
               margin .58s cubic-bezier(.25,.85,.35,1),
               opacity .34s ease;
  }
  body.nav-open .nav-track{
    max-width:calc(var(--navw) * 3 + 40px);
    margin:0;
    opacity:1;
  }
  /* 边缘只做透明度渐隐，按滚动位置决定哪一侧需要 */
  .nav-track[data-edge="start"] .menu{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
  }
  .nav-track[data-edge="end"] .menu{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 100%);
  }
  .nav-track[data-edge="both"] .menu{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  }

  /* 箭头绝对定位：出现与否都不改变胶囊宽度，避免点击瞬间跳一帧 */
  .nav-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:20px; height:30px; border:0; background:transparent; color:var(--navy);
    cursor:pointer; font-size:15px; line-height:1; padding:0;
    display:grid; place-items:center;
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  .nav-arrow.prev{left:0}
  .nav-arrow.next{right:0}
  body.nav-open .top.is-scrollable .nav-arrow{opacity:.45; pointer-events:auto}
  .nav-arrow:hover{opacity:1}
  .nav-arrow[disabled]{opacity:.08; cursor:default}

  .top.is-animating .menu{scroll-snap-type:none}
  .menu{
    display:flex; align-items:center; gap:0;
    overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .menu::-webkit-scrollbar{display:none}
  .menu a{
    flex:0 0 var(--navw); width:var(--navw);
    text-align:center; scroll-snap-align:start; scroll-snap-stop:always;
  }

  @media (max-width:820px){
    .top{bottom:18px}
    .nav-track{--navw:74px}
    body.nav-open .nav-track{max-width:calc(var(--navw) * 3 + 40px); margin:0}
  }

/* 禁止双击缩放（保留双指缩放） */
html, body, a, button, input, textarea, select, label{touch-action:manipulation}

/* 去掉移动端点按时的系统高亮底 */
a, button, .menu a, .nav-ball, .nav-arrow{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}