/* 第三批动效（参考 jayuestudio.com），逻辑在 js/motion.js。
   ① 大字随滚动逐字翻起  ② 链接悬停滚字  ③ 页尾索引栏 + 回到顶部  ④ 首屏幕布（hero-track[data-curtain]） */

/* ── ① 大字随滚动逐字翻起 ──
   职业历程下的总结语放大成一段「大字」，按字从上沿翻下来、由淡到实，进度跟着滚动走（往回滚会倒放）。
   拆字由 js/motion.js 做：英文按词包一层不断行，中文逐字。 */
.journey__coda[data-flip] {
  max-width: 980px;
  margin-top: 64px;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.62;
  color: var(--text-dim);
  opacity: 1;
  translate: 0 0;
  transition: none;
}
.journey__coda[data-flip] mark { border-bottom-width: 2px; }
.flip-w { display: inline-block; white-space: nowrap; perspective: 600px; }
.flip-c { display: inline-block; transform-origin: 50% 0%; will-change: transform, opacity; }
.flip-nb { white-space: nowrap; }

/* ── ② 链接悬停滚字 ──
   文字上滑出框、同一行字从下面顶上来（下面那行是 text-shadow 投出来的，不复制 DOM，读屏只念一遍）。
   结构由 js/motion.js 在第一次悬停时包上：.roll > .roll__in。 */
.roll {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
  line-height: 1.3em;
  vertical-align: top;
}
.roll__in {
  display: inline-block;
  text-shadow: 0 1.3em currentColor;
  /* 用对称的缓入缓出：站里通用的 expo-out 头 0.1s 就走完九成，滚字看不出过程 */
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.is-rolling .roll__in { transform: translateY(-1.3em); }

/* ── ③ 页尾索引栏 ──
   接在结案签字下面：中间各区块索引、右边回到顶部，版权照旧居中放在下一行。
   参考 jayuestudio 页尾的「导航 + Back to top」，排成一行细栏，不打破页尾居中的构图。 */
.contact-end__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-end__index { display: flex; gap: 22px; }
.contact-end__index a,
.contact-end__top {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.25s ease;
}
.contact-end__index a:hover,
.contact-end__top:hover { color: var(--accent); }
.contact-end__top { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.contact-end__top i { font-style: normal; color: var(--accent); }
@media (max-width: 860px) {
  .contact-end__bar { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .contact-end__bar > span:first-child { display: none; }
  .contact-end__index { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
  .contact-end__top { justify-self: center; }
}

/* ── ④ 首屏幕布 ──
   镜头推进照旧占 2 屏；推完后画面再钉住 1 屏，作品区像幕布一样从下面盖上来（参考 jayuestudio 首屏）。
   原来的收尾是淡成页面底色再交棒，开了幕布就不淡，改成被盖住时画面逐渐压暗（js/hero-scene.js）。
   不减少动效时生效。原来只在宽屏开，手机上推进收尾是淡成黑，再滚将近一屏纯黑才到作品区，像没加载出来；
   2026-10-29 本人要手机同步，手机也开（手机推进段 260vh，加幕布那一屏是 360vh）。 */
@media (prefers-reduced-motion: no-preference) {
  .hero-track[data-curtain] { height: 400vh; }
  .hero-track[data-curtain] + #works {
    position: relative;
    z-index: 2;
    margin-top: -100vh;
    background: var(--bg);
    box-shadow: 0 -36px 80px rgba(0, 0, 0, 0.7);
  }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .hero-track[data-curtain] { height: 360vh; }
}

@media (prefers-reduced-motion: reduce) {
  .roll__in { transition: none; }
}
.contact-end__bar + .contact-end__foot { margin-top: 22px; }
/* 手机上 3D 入口常驻右下角（约 106px 高），页尾最底下的回到顶部 / 版权会被它压住，底部留出这段高度 */
@media (max-width: 768px) {
  .contact-end { padding-bottom: 128px; }
}