/* ===== 首页板块滚动叙事(仅 index.html 加载;引擎见 assets/scroll.js) ===== */

/* ---- 全局小件 ---- */
/* 顶部滚动进度条(鼠标用系统光标,与其他页一致) */
#scrollbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 45;
  background: linear-gradient(90deg, var(--accent-lime), var(--accent-orange), var(--accent-purple));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---- 板块通用 ---- */
.act { position: relative; overflow: hidden; padding: 7rem 1.5rem; }
.act .shell { position: relative; z-index: 1; }
/* 背景描边大字(视差:JS 写 --lagY) */
.act__word {
  position: absolute; left: 0; right: 0; top: 12%; text-align: center;
  font-size: clamp(7rem, 26vw, 20rem); font-weight: 700; line-height: 1; letter-spacing: .06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(26,38,29,.10);
  pointer-events: none; user-select: none; z-index: 0;
  transform: translateY(var(--lagY, 0));
}
/* 漂浮装饰(外层吃视差,内层吃浮动动画,互不打架) */
.act__deco { position: absolute; pointer-events: none; z-index: 0; transform: translateY(var(--lagY, 0)); }

/* 入场:上浮显现,组内依次(数据-stagger 由 JS 排 --d) */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), transform .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---- warp 标题显影(整块:裁切+模糊+斜压 → 弹开) ---- */
[data-warp] { position: relative; overflow: hidden; isolation: isolate; padding: .04em .08em; }
[data-warp] > .warp-c {
  display: block; transform-origin: 50% 100%;
  will-change: transform, filter, opacity, clip-path; backface-visibility: hidden;
}
[data-warp].is-pending > .warp-c {
  opacity: 0; clip-path: inset(100% -8% 0 -8%); filter: blur(16px);
  transform: translate3d(0, 34%, 0) scale3d(1.075, .68, 1) skewY(3deg);
}
[data-warp].is-in > .warp-c { animation: warp-in 1.35s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes warp-in {
  0%   { opacity: 0; clip-path: inset(100% -8% 0 -8%); filter: blur(16px); transform: translate3d(0, 34%, 0) scale3d(1.075, .68, 1) skewY(3deg); }
  38%  { opacity: 1; filter: blur(7px); transform: translate3d(0, 8%, 0) scale3d(.985, 1.08, 1) skewY(-1.2deg); }
  68%  { clip-path: inset(-8% -8% -8% -8%); filter: blur(1.5px); transform: translate3d(0, -1.5%, 0) scale3d(1.012, .988, 1) skewY(.25deg); }
  100% { opacity: 1; clip-path: inset(-8% -8% -8% -8%); filter: blur(0); transform: translate3d(0, 0, 0) scale3d(1, 1, 1) skewY(0deg); }
}

/* ---- 板块:名字(名字来自最喜欢的一首歌;右侧唱片旋转 = 「听到第多少遍」) ---- */
.act--name { background: var(--bg-cream); padding-top: 9rem; }
/* 两栏:左文案,右唱片 */
.name-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
/* 唱片:圆形裁剪 + 黑胶刻纹外圈 + 中心孔;持续慢转(转速即「一直循环」) */
.name-disc-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.name-disc {
  position: relative; width: min(21rem, 74vw); aspect-ratio: 1;
  border-radius: 50%; border: 2px solid #1A261D; overflow: hidden;
  animation: spin-slow 24s linear infinite;
}
/* 图本身就是黑胶盘面设计(自带纹理),只补一个居中主轴孔,不再叠刻纹 */
/* 盘面圆只占画布约 98%:微放大裁掉边缘白缝(独立 scale 属性,不与旋转动画的 transform 打架) */
.name-disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; scale: 1.06; }
/* 中心孔:奶油小点,盖住盘芯中心 */
.name-disc::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 2;
  background: var(--bg-cream); border: 2px solid #1A261D;
}
/* 唱片下的小注:转动中 = 正在听 */
.name-disc-note {
  font-family: 'Noto Sans SC', sans-serif; font-size: .78rem; letter-spacing: .14em;
  color: rgba(26,38,29,.5); display: inline-flex; align-items: center; gap: .5rem;
}
.name-disc-note iconify-icon { font-size: 1rem; color: var(--accent-orange); }
/* 故事便签:实线描边+硬阴影(原来的虚线占位框换成了成品便签) */
.name-note {
  margin-top: 2.6rem; max-width: 25rem; background: #fff;
  border: 2px solid #1A261D; border-radius: 1.1rem;
  padding: 1.7rem 1.6rem; transform: rotate(-1.5deg);
  box-shadow: 6px 6px 0 0 var(--accent-purple);
  font-family: 'Noto Serif SC', serif; color: rgba(26,38,29,.85); line-height: 2;
  display: flex; gap: .9rem; align-items: flex-start;
}
.name-note iconify-icon { font-size: 1.6rem; color: var(--accent-orange); flex-shrink: 0; margin-top: .25rem; }

/* ---- 板块:思路(三张死理贴纸:hover 散开供选择,点选换板块背景图,硬切+抖帧) ---- */
.act--creed { background: #E7EDD8; padding-top: 11rem; padding-bottom: 6rem; }
/* 描边大字压在背景图上:字号收小(5 字母),描边略加深保可读 */
.act--creed .act__word { top: 9%; font-size: clamp(5.5rem, 15vw, 11rem); -webkit-text-stroke-color: rgba(26,38,29,.14); }
/* 整块背景图:一句一张叠放,当前句 is-on 显示(切换无过渡 = 硬切);降饱和+奶绿罩保文字可读 */
.creed-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform: translateY(var(--lagY, 0)); }
.creed-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: grayscale(1) contrast(1.06); transform: scale(1.12); /* 放大留出视差边 */
}
.creed-bg img.is-on { opacity: .3; }
.creed-bg::after { /* 奶绿渐变罩 + 斜纹网:压住图,正文在上层始终可读 */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(231,237,216,.6), rgba(231,237,216,.92) 72%),
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(26,38,29,.05) 3px 6px);
}
/* 换图闪:steps 抖帧(粗野主义换印刷版的感觉) */
.act--creed.is-flash .creed-bg img.is-on { animation: creed-jump .45s steps(3); }
@keyframes creed-jump {
  33% { transform: scale(1.15) translate3d(-1.2%, .9%, 0); }
  66% { transform: scale(1.12) translate3d(1%, -1%, 0); }
}
.creed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.creed-stack {
  position: relative; height: 36rem; --fan: 1; --spread: 0; --mx: 0; --my: 0;
  transform: translateY(var(--lagY, 0));
}
.creed { /* 贴纸是 button:可点选择 */
  position: absolute; left: 50%; top: 50%; appearance: none; -webkit-appearance: none;
  border: 2px solid #1A261D; border-radius: 1rem; cursor: pointer; text-align: left;
  box-shadow: 6px 6px 0 0 var(--cs, #1A261D);
  padding: 1.7rem 1.8rem; font-family: 'Noto Serif SC', serif;
  transition: scale .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, opacity .35s ease;
}
.creed:focus-visible { outline: 3px solid #1A261D; outline-offset: 3px; }
.creed i { /* 编号 */
  display: block; font-style: normal; font-family: 'Space Grotesk', sans-serif;
  font-size: .85rem; font-weight: 600; letter-spacing: .22em; opacity: .55; margin-bottom: .7rem;
}
.creed b { font-size: 1.8rem; font-weight: 700; line-height: 1.55; }
/* 选中的立起:放大+阴影加深(scale 是独立属性,不跟 transform 打架);选过之后其余淡化 */
.creed.is-on { z-index: 6; scale: 1.06; box-shadow: 9px 9px 0 0 var(--cs, #1A261D); }
.creed-stack.is-picked .creed:not(.is-on) { opacity: .62; }
/* 三层:--spread 散开成山形三列(左中右均匀落位,中间升高正对,两侧微沉对称旋转;留几像素错位保手作感) */
.creed--1 {
  background: var(--accent-lime); --cs: #1A261D; width: min(17.5rem, 86%); z-index: 1;
  transform: translate(calc(-50% + var(--spread, 0) * -210px * var(--fan) - 34px + var(--mx) * -8px), calc(-50% + var(--spread, 0) * 100px * var(--fan) + 22px + var(--my) * -6px)) rotate(calc(var(--spread, 0) * -9deg - 5deg));
}
.creed--2 {
  background: #fff; --cs: var(--accent-orange); width: min(18rem, 88%); z-index: 2;
  transform: translate(calc(-50% + var(--spread, 0) * -30px * var(--fan) + 30px + var(--mx) * -14px), calc(-50% + var(--spread, 0) * -58px * var(--fan) - 12px + var(--my) * -10px)) rotate(calc(var(--spread, 0) * -2deg + 4deg));
}
.creed--3 {
  background: var(--accent-orange); --cs: #1A261D; width: min(19.5rem, 92%); z-index: 3;
  transform: translate(calc(-50% + var(--spread, 0) * 252px * var(--fan) + var(--mx) * -20px), calc(-50% + var(--spread, 0) * 105px * var(--fan) - 10px + var(--my) * -15px)) rotate(calc(var(--spread, 0) * 13deg - 1deg));
}


/* ---- 板块:一直在写(sticky 横向列车) ---- */
/* 注意:父级不能有 overflow:hidden,否则 sticky 失效(卡片的裁切由 .train-sticky 自己负责) */
.act--write { background: var(--bg-cream); padding: 0; overflow: visible; }
.train-sticky {
  position: sticky; top: 0; height: 100svh; min-height: 560px;
  display: flex; flex-direction: column; justify-content: center; gap: 1.8rem;
  padding: 3.5rem 0 2.5rem; overflow: hidden;
}
/* 头部极简:两侧虚线短线夹住居中的 kicker */
.train-head__in { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.train-rule { flex: 0 1 8.5rem; height: 2px; background: repeating-linear-gradient(90deg, rgba(26,38,29,.35) 0 7px, transparent 7px 13px); }
/* 背景描边大字(随 sticky 常驻,比通用版小、位置更靠上) */
.act__word--train { top: 1.5%; font-size: clamp(6rem, 17vw, 12rem); }
/* 底部:01/05 计数器 + 菱形点 */
.train-foot { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.train-count {
  font-family: 'Space Grotesk', sans-serif; font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; color: rgba(26,38,29,.55); min-width: 4.4rem; text-align: right;
}
.train-viewport { overflow: visible; }
/* track 左对齐:首卡靠左留边;唯一动效是 hover 图片慢推,卡片本身不再有抬起/缩放 */
.train-track { display: flex; align-items: stretch; gap: 1.4rem; width: max-content; padding: .6rem 5vw .8rem; will-change: transform; }
/* 照片卡(照参考页 gallery):整卡即一张大图,底部渐变压暗,编号+标题压图左下;仅展示 */
.train-card {
  flex: 0 0 auto; position: relative; width: min(34rem, 82vw); height: 24rem;
  overflow: hidden; margin: 0;
  background: #1A261D; border: 2px solid #1A261D; border-radius: 1.2rem;
  box-shadow: 8px 8px 0 0 var(--sc, var(--accent-orange));
}
.train-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.train-card:hover img { transform: scale(1.03); } /* 参考页数值:慢推 1.03,微妙的高级感 */
/* 底部墨色渐变(参考页 from-black 渐变),保证压图文字可读 */
.train-card__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,38,29,.85), rgba(26,38,29,.32) 36%, transparent 60%); }
.train-card__meta { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.35rem; }
.train-card__meta i { /* 编号/类别:小字大写字距,柠檬色(对应参考页浅青) */
  display: block; font-style: normal; font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-lime);
}
.train-card__meta b {
  display: block; margin-top: .5rem; font-family: 'Noto Serif SC', serif;
  font-size: 1.45rem; font-weight: 600; line-height: 1.4; color: #F2EFE9;
}
/* 菱形进度点(按钮,可点跳转) */
.train-dots { display: flex; gap: .65rem; justify-content: center; }
.train-dots button {
  width: .7rem; height: .7rem; border: 2px solid rgba(26,38,29,.4);
  transform: rotate(45deg); cursor: pointer; transition: all .2s ease; background: transparent; padding: 0;
  border-radius: 0; appearance: none; -webkit-appearance: none;
}
.train-dots button:hover { border-color: #1A261D; transform: rotate(45deg) scale(1.25); }
.train-dots button.is-on { background: var(--accent-orange); border-color: #1A261D; }

/* ---- 板块:碎碎念墙 + 收尾(深绿终章 + 粒子方点场;弹簧入场 + 3D 倾斜) ---- */
.act--journal { background: #3D6B4F; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.journal-wall { columns: 3 300px; column-gap: 1.6rem; max-width: 66rem; margin: 0 auto; }
.journal-note { break-inside: avoid; margin-bottom: 1.6rem; opacity: 0; transform: translateY(46px) rotate(var(--r, 0deg)) scale(.9); }
.journal-note.is-in { animation: note-pop .75s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * 90ms) both; }
@keyframes note-pop {
  from { opacity: 0; transform: translateY(46px) rotate(var(--r, 0deg)) scale(.9); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
}
.journal-note:nth-child(3n+1) { --r: -1.4deg; }
.journal-note:nth-child(3n+2) { --r: 1.1deg; }
.journal-note:nth-child(3n)   { --r: -.8deg; }
/* 内层吃倾斜(外层动画 fill 会锁 transform,分层互不覆盖) */
.journal-note__in {
  background: #fff; border: 2px solid #1A261D; border-radius: .9rem;
  padding: 1.4rem 1.4rem 1.2rem; box-shadow: 5px 5px 0 0 var(--accent-purple);
  transition: transform .18s ease;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.journal-note:nth-child(4n+2) .journal-note__in { box-shadow: 5px 5px 0 0 var(--accent-orange); }
.journal-note:nth-child(4n+3) .journal-note__in { box-shadow: 5px 5px 0 0 var(--accent-lime); }
.journal-note__date {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  background: #1A261D; color: #F2EFE9; border-radius: 99px; padding: .16rem .7rem; margin-bottom: .8rem;
}
.journal-note__in p { margin: 0; font-family: 'Noto Serif SC', serif; font-size: .95rem; line-height: 1.95; color: rgba(26,38,29,.85); }
.journal-empty {
  max-width: 24rem; margin: 0 auto; text-align: center; background: #fff;
  border: 2px dashed rgba(26,38,29,.4); border-radius: 1rem; padding: 2.2rem 1.6rem;
  font-family: 'Noto Serif SC', serif; color: rgba(26,38,29,.55); transform: rotate(-1deg);
}
/* 收尾区:金句 + 三个去向 + 注脚(原独立收尾板块并入) */
.journal-end {
  margin-top: 4.5rem; padding-top: 3.2rem; text-align: center;
  border-top: 1.5px dashed rgba(242,239,233,.28); position: relative; z-index: 1;
}
.journal-end__quote {
  margin: 0; font-size: clamp(1.7rem, 3.8vw, 2.5rem); font-weight: 700; line-height: 1.35; color: #F2EFE9;
}
.journal-end__quote span { font-family: 'Noto Serif SC', serif; color: var(--accent-lime); }
.journal-end__by {
  margin: .9rem 0 2rem; font-family: 'Noto Serif SC', serif; font-style: italic;
  font-size: .92rem; color: rgba(242,239,233,.55);
}
.journal-end__ctas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; text-align: left;
}
.journal-end__note { margin: 2.2rem 0 0; color: rgba(242,239,233,.6); font-size: .8rem; font-family: 'Noto Sans SC', sans-serif; }

/* 动画噪点:参考页 grain 特质,steps 跳帧(粗野主义胶片感) */
@keyframes grain-jump {
  25% { transform: translate3d(-2%, 1%, 0); }
  50% { transform: translate3d(1%, -2%, 0); }
  75% { transform: translate3d(2%, 1.5%, 0); }
}
.bg-noise { animation: grain-jump .5s steps(2) infinite; }

/* ---- 响应式 ---- */
@media (min-width: 640px) { .train-card { height: 30rem; } }
@media (max-width: 900px) {
  .creed-grid { grid-template-columns: 1fr; gap: 1rem; }
  .creed-stack { height: 30rem; --fan: .55; margin-top: 2rem; }
  .name-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .name-disc-wrap { margin-top: 1.5rem; }
  .name-disc { width: min(15.5rem, 66vw); }
}
@media (max-width: 760px) {
  .act { padding: 5rem 1.25rem; }
  /* 列车降级:原生横滑(JS 不再接管);82vw 卡 + 9vw 边 = 首卡居中 */
  .act--write { padding: 5rem 0; }
  .train-sticky { position: static; height: auto; min-height: 0; padding: 0; }
  .train-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .train-viewport::-webkit-scrollbar { display: none; }
  .train-track { padding: .6rem 9vw .8rem; }
  .train-card { height: 20rem; scroll-snap-align: center; }
  .train-foot { display: none; }
}

/* ---- 减动效:全部直接可见,列车已由 JS 转原生横滑 ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-warp] { overflow: visible; }
  [data-warp].is-pending > .warp-c, [data-warp].is-in > .warp-c { opacity: 1; clip-path: none; filter: none; transform: none; animation: none; }
  .journal-note { opacity: 1; transform: rotate(var(--r, 0deg)); animation: none !important; }
  .act__word, .act__deco { transform: none; }
  .creed { transition: none; }
  .bg-noise { animation: none; }
  .name-disc { animation: none; }
}