/* ============================================================
   ScrollExpand · 原生移植（React Bits / JavaScript + CSS）
   ------------------------------------------------------------
   舞台固定（sticky）在视口顶部，画框用 clip-path 由小开到大；
   内容层只在画框铺满后出现，文字压在照片下三分之一。
   配色沿用站点 token：黑底、品牌红、思源黑体。
   ============================================================ */

.scroll-expand{position:relative;width:100%}
.scroll-expand__track{position:relative;width:100%}
.scroll-expand__stage{
  position:sticky;top:0;width:100%;height:100vh;overflow:hidden;
  isolation:isolate;background:var(--bg,#171719);
}

/* ---------------------------- 画框 ---------------------------- */
.scroll-expand__frame{
  position:absolute;inset:0;overflow:hidden;background:#141416;
  clip-path:inset(21% 29% 21% 29% round 24px);
  will-change:clip-path;cursor:default;
}
.scroll-expand__frame.is-live{cursor:pointer}
/* 静止时那一圈很细的玻璃边：随展开淡出，铺满后不留边框 */
.scroll-expand__frame::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:var(--se-ring,1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.22);
}

.se-media{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.se-slide{position:absolute;inset:0;opacity:0;will-change:opacity;background:#141416;isolation:isolate}
/* 同图柔雾底：整幅作品按原比例居中时，四周用放大的模糊画面填充，
   既不像 cover 那样裁切，也不留两块死黑边。 */
.se-slide::before{
  content:'';position:absolute;inset:-14%;z-index:0;pointer-events:none;
  background-image:var(--se-bg);background-size:cover;background-position:center;
  filter:blur(40px) brightness(.4) saturate(.9);opacity:.9;
}
/* 展开态一律 contain：六张封面都是 1.41–2.0 的横版，铺满 16:10 屏幕必被裁。
   上下留出余量，让顶部导航与底部项目文案不压住作品主体。 */
.se-slide img{
  position:relative;z-index:1;box-sizing:border-box;
  width:100%;height:100%;
  padding:clamp(46px,6vh,72px) clamp(18px,3vw,44px) clamp(96px,13vh,132px);
  object-fit:contain;object-position:50% 50%;background:transparent;
  user-select:none;-webkit-user-drag:none;
}
.se-slide img[data-fit="cover"],
.se-slide img[data-fit="contain"]{object-fit:contain;background:transparent}

/* 底部压暗 + 左侧压暗 + 顶部一条浅压暗：保证中文小字在任何作品图上都能读 */
.scroll-expand__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:
    linear-gradient(to top,rgba(8,8,10,.92) 0%,rgba(8,8,10,.66) 26%,rgba(8,8,10,.2) 52%,rgba(8,8,10,0) 74%),
    linear-gradient(100deg,rgba(8,8,10,.74) 0%,rgba(8,8,10,.28) 42%,rgba(8,8,10,0) 68%),
    linear-gradient(to bottom,rgba(8,8,10,.5) 0%,rgba(8,8,10,0) 16%);
}

/* ---------------------------- 内容层 ---------------------------- */
.scroll-expand__overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(86px,11vh,118px) clamp(20px,4.6vw,64px) clamp(26px,4.4vh,52px);
  opacity:0;visibility:hidden;pointer-events:none;
  will-change:opacity,transform;
}
.se-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.56);font-weight:600;
}
.se-top__label{display:inline-flex;align-items:center;gap:10px}
.se-top__label::before{content:'';width:22px;height:1px;background:var(--accent,#ff5145)}
.se-top__count{font-variant-numeric:tabular-nums;letter-spacing:.12em;color:rgba(255,255,255,.42)}
.se-top__count b{font-size:13px;letter-spacing:.06em;color:#fff;font-weight:700}
.se-top__count i{margin:0 5px;font-style:normal;opacity:.45}

.se-body{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,56px);
}

/* ---------------------------- 项目文案 ---------------------------- */
.se-copy{max-width:min(600px,54vw);will-change:transform}
.se-copy__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.se-copy__cat{
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:99px;
  font-size:11px;letter-spacing:.1em;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.se-copy__year{font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.se-copy__title{
  margin-top:16px;color:#fff;font-size:clamp(28px,3.9vw,56px);font-weight:800;
  letter-spacing:-.045em;line-height:1.08;text-wrap:balance;
  text-shadow:0 6px 40px rgba(0,0,0,.45);
}
.se-copy__en{
  margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.58);font-weight:500;
}
.se-copy__desc{
  margin-top:14px;font-size:13.5px;line-height:1.85;color:rgba(255,255,255,.82);
  max-width:470px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
/* 整幅作品完整显示后，浅色封面会让小字发灰；补一层极轻阴影保证可读性 */
.se-copy__cat,.se-copy__year,.se-copy__en,.se-copy__desc{
  text-shadow:0 1px 10px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.65);
}
.se-copy__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.se-copy__tags li{
  font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.74);
  padding:5px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
}
.se-copy__cta{
  margin-top:24px;display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:99px;background:var(--white,#fafafa);color:#171719;
  font-size:13.5px;font-weight:650;letter-spacing:.01em;pointer-events:auto;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 12px 34px rgba(0,0,0,.36);
}
.se-copy__cta span{color:var(--accent,#ff5145);transition:transform .3s var(--ease)}
.se-copy__cta:hover{background:var(--accent,#ff5145);color:#fff;transform:translateY(-2px)}
.se-copy__cta:hover span{color:#fff;transform:translate(2px,-2px)}

/* 换项目时文字再次入场（滚动驱动，不是常驻动画） */
.se-copy.is-in > *{animation:seCopyIn .55s var(--ease) both}
.se-copy.is-in > *:nth-child(2){animation-delay:.04s}
.se-copy.is-in > *:nth-child(3){animation-delay:.08s}
.se-copy.is-in > *:nth-child(4){animation-delay:.12s}
.se-copy.is-in > *:nth-child(5){animation-delay:.16s}
.se-copy.is-in > *:nth-child(6){animation-delay:.2s}
@keyframes seCopyIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------------------------- 项目索引 ---------------------------- */
.se-rail{display:flex;flex-direction:column;align-items:flex-end;gap:1px;pointer-events:none;padding-bottom:4px}
.se-rail__item{
  display:flex;align-items:center;gap:10px;padding:7px 0;pointer-events:auto;
  color:rgba(255,255,255,.42);font-size:12px;line-height:1.2;
  transition:color .3s var(--ease);
}
.se-rail__item::before{
  content:'';width:16px;height:1px;background:currentColor;opacity:.4;
  transition:width .35s var(--ease),opacity .3s var(--ease),background .3s var(--ease);
}
.se-rail__no{font-size:10.5px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.se-rail__name{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width .45s var(--ease),opacity .35s var(--ease);
}
.se-rail__item:hover{color:#fff}
.se-rail__item:hover .se-rail__name{max-width:190px;opacity:.85}
.se-rail__item.is-active{color:#fff}
.se-rail__item.is-active::before{width:30px;opacity:1;background:var(--accent,#ff5145)}
.se-rail__item.is-active .se-rail__no{color:var(--accent,#ff5145)}
.se-rail__item.is-active .se-rail__name{max-width:210px;opacity:1}

/* ---------------------------- 静止态标题 & 提示 ---------------------------- */
.scroll-expand__title{
  position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  padding:0 8%;text-align:center;pointer-events:none;
  font-size:clamp(26px,4.2vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1.1;
  color:#fff;text-shadow:0 6px 44px rgba(0,0,0,.6);
  will-change:opacity,transform;
}
.scroll-expand__title::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;
  width:min(760px,94%);height:190px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(8,8,10,.6),rgba(8,8,10,0) 72%);
}
.scroll-expand__hint{
  position:absolute;left:0;right:0;bottom:clamp(22px,3.6vh,38px);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:600;will-change:opacity,transform;
}
.scroll-expand__hint::after{
  content:'';width:1px;height:22px;
  background:linear-gradient(to bottom,rgba(255,255,255,.5),rgba(255,255,255,0));
}

/* ---------------------------- 收起态：六宫格缩略图（作品六部分） ---------------------------- */
/* 3 列 × 2 行，整体比单张大画框更小巧；每张图为主、粗体大标题压在下缘，比例参照参考图。 */
.se-thumbs{
  position:absolute;inset:0;z-index:7;width:min(1000px,94%);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);align-content:start;
  padding:clamp(56px,7vh,82px) 0 clamp(30px,4vh,52px);
  box-sizing:border-box;will-change:opacity;
}
.se-thumb{
  /* 3:2 贴近封面原图（1.41–2.0），配合 contain 让整张图完整可见、不裁切 */
  position:relative;display:block;width:100%;aspect-ratio:3 / 2;border:0;padding:0;
  border-radius:14px;overflow:hidden;cursor:pointer;background:#141416;color:#fff;text-align:left;
  box-shadow:0 10px 30px rgba(0,0,0,.35);outline:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.se-thumb:hover,.se-thumb:focus-visible{transform:translateY(-4px);box-shadow:0 18px 46px rgba(0,0,0,.52)}
.se-thumb:focus-visible{box-shadow:0 0 0 2px var(--accent,#ff5145),0 18px 46px rgba(0,0,0,.52)}
.se-thumb__media{position:absolute;inset:0}
/* 统一 contain：六张封面都完整显示；深色底填充比例差产生的留白 */
.se-thumb__media img,
.se-thumb__media img[data-fit="cover"],
.se-thumb__media img[data-fit="contain"]{
  width:100%;height:100%;object-fit:contain;background:#141416;display:block;
  transition:transform .55s var(--ease);
}
.se-thumb:hover .se-thumb__media img{transform:scale(1.05)}
/* 下缘压暗，保证大标题与编号在任何作品图上都读得清 */
.se-thumb__veil{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(8,8,10,.86) 0%,rgba(8,8,10,.34) 38%,rgba(8,8,10,0) 66%)}
.se-thumb__no{position:absolute;top:12px;left:14px;font-size:11px;letter-spacing:.16em;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.74);font-weight:600}
.se-thumb__title{position:absolute;left:16px;right:16px;bottom:30px;
  font-size:clamp(17px,1.7vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.12;
  text-shadow:0 4px 22px rgba(0,0,0,.5)}
.se-thumb__hint{position:absolute;right:14px;bottom:13px;display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600}
.se-thumb__hint i{font-style:normal;color:var(--accent,#ff5145)}

/* ---------------------------- 自适应 ---------------------------- */
/* 画框铺满期间，页面右下角的「回顶」按钮正好压在项目索引上，先收起来 */
body:has(.scroll-expand.is-expanded) .back-top{opacity:0 !important;pointer-events:none;transform:translateY(12px)}

@media (max-width:860px){
  .scroll-expand__overlay{padding:clamp(76px,10vh,96px) 20px clamp(22px,3.4vh,34px)}
  .se-body{flex-direction:column;align-items:flex-start;gap:16px}
  .se-copy{max-width:100%}
  .se-copy__title{font-size:clamp(26px,7vw,38px);margin-top:12px}
  .se-copy__desc{-webkit-line-clamp:2;font-size:12.5px;line-height:1.8;margin-top:11px}
  .se-copy__tags{margin-top:13px;gap:6px}
  .se-copy__tags li{font-size:10.5px;padding:4px 9px}
  .se-copy__cta{margin-top:16px;padding:11px 18px;font-size:12.5px}
  .se-rail{flex-direction:row;align-items:center;gap:14px;padding:0;margin-top:2px}
  .se-rail__item{padding:4px 0;gap:0}
  .se-rail__item::before{display:none}
  .se-rail__name{display:none}
  .se-rail__item.is-active .se-rail__no{font-size:12px}
  .scroll-expand__title{font-size:clamp(22px,6.4vw,34px)}
  .scroll-expand__title::before{height:130px}
  .se-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));width:min(620px,92%);gap:14px;
    padding:clamp(70px,9vh,92px) 0 clamp(46px,6vh,66px)}
  .se-thumb{border-radius:12px}
  .se-thumb__title{bottom:24px;font-size:clamp(15px,4.6vw,19px)}
}

@media (max-height:680px){
  .se-copy__desc{display:none}
  .se-copy__tags{display:none}
  .se-copy__title{font-size:clamp(24px,3.4vw,40px)}
  .scroll-expand__overlay{padding-top:72px;padding-bottom:18px}
}

@media (prefers-reduced-motion:reduce){
  .se-copy.is-in > *{animation:none}
  .scroll-expand__title,.scroll-expand__hint,.scroll-expand__overlay,
  .se-media,.se-slide{will-change:auto}
}