/* portfolio-polish.css — 全站视觉与动效增强层（visual 布局方案 × 主线程动效合并版 2026-09-08）
   加载于页面内联样式之后：布局修复 + 进度条/光晕/划线/浮现/倾斜；尊重 prefers-reduced-motion 与触屏降级。 */

/* ── 基础与排版 ── */
:root { --polish-shadow: 0 2px 5px rgba(16,16,18,.025), 0 20px 50px -28px rgba(16,16,18,.19); }
html { scroll-padding-top: 160px; }
.shell :is(h1,h2,h3,h4) { text-wrap: balance; overflow-wrap: anywhere; }
.shell .display { line-height: 1.18; letter-spacing: -.035em; }
.shell .lead { line-height: 1.85; text-wrap: pretty; }
.shell :is(.hero-grid,.about-grid,.capabilities-grid,.cta-grid,.project-grid,.ops-card,.foot-grid) > * { min-width: 0; }
.hero:not([data-od-id='hero']) { min-height: 0; }
.hero:not([data-od-id='hero']) > .container { width: 100%; }
.hero h1 { line-height: 1.18; }
.hero[data-od-id='hero'] { min-height: 0; padding-bottom: 48px; }
.hero-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; gap: clamp(32px,5vw,80px); }
.hero-copy { padding: 32px 0; }
.hero-copy .label { flex-wrap: wrap; line-height: 1.8; gap: 8px; }
.hero-art { width: 100%; max-width: 400px; }
.page-hero { padding: clamp(64px,8vw,112px) 0 64px; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 60ch; }
.hero-stats { flex-wrap: wrap; gap: 12px; }
.hero-stats .stat { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 14px; }
.about .about-stats-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.about .about-stat { padding: 22px 8px; border: 1px solid var(--line-soft); border-radius: 16px; }
.about .about-stat .big { font-size: clamp(32px,4.5vw,56px); }
.about .about-stat .small { letter-spacing: .08em; overflow-wrap: anywhere; }

/* ── 卡片与图片统一质感 ── */
.shell :is(.card,.project-card,.ops-card,.plat-card,.strip-card,.work-card) { box-shadow: var(--polish-shadow), inset 0 0 0 1px var(--line-soft); border-radius: 22px; }
.shell :is(.project-card,.ops-card) { padding: clamp(24px,3vw,40px); }
.project-card h3 { padding-right: 0; line-height: 1.4; }
.ops-card h3 { line-height: 1.35; }
.ops-card .card-badge,.project-card .card-badge { position: static; display: inline-block; margin-bottom: 18px; max-width: 100%; line-height: 1.7; background: var(--ink); }
.project-card .detail-item,.ops-card .detail-item { line-height: 1.85; overflow-wrap: anywhere; }
.project-card .card-subtitle { line-height: 1.8; }
.project-card .skill-tag { opacity: 1; }
.ops-stat { padding: 40px 20px; border-radius: 18px; background: var(--paper-warm); min-width: 0; }
.proj-head h2 { line-height: 1.4; }
.proj-head h2 em { display: block; font-size: .65em; margin-top: 6px; }
.timeline-head h2 { font-size: clamp(30px,4vw,56px); }
.shell :is(.placeholder-img,.lab-img,.img) { border-radius: 22px; }
.shell img { max-width: 100%; height: auto; }
.cta h2 { font-size: clamp(38px,4.8vw,68px); }
.cta-art { width: 100%; }
.cta-art .placeholder-img { background: radial-gradient(circle at 65% 30%,rgba(224,83,47,.09),transparent 60%),var(--paper-warm); }
.cta-actions,.cta-foot,.hero-foot,.foot-bottom,.foot-bottom .right { flex-wrap: wrap; gap: 16px; }

/* ── 可访问性 ── */
.shell :is(a,button):focus-visible { outline: 2px solid var(--coral); outline-offset: 5px; }
.nav:focus-within { transform: none; pointer-events: auto; }
.nav-links a { display: inline-flex; min-height: 40px; align-items: center; }

/* ── 滚动进度条（JS 注入 .portfolio-progress） ── */
.portfolio-progress { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, #e0532f, #101012 72%); transform: scaleX(0);
  transform-origin: left; pointer-events: none; }

/* ── 卡片指针光晕（JS 注入 .portfolio-card-glow） ── */
.portfolio-glow-host { position: relative; isolation: isolate; }
.portfolio-card-glow { position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(260px circle at var(--glow-x,50%) var(--glow-y,50%),rgba(224,83,47,.075),transparent 75%);
  pointer-events: none; opacity: 0; transition: opacity 240ms ease; z-index: 2; }
.portfolio-glow-host:hover > .portfolio-card-glow { opacity: 1; }

/* ── 导航链接下划线滑入 ── */
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--coral); transition: right .32s cubic-bezier(.22,1,.36,1); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }

/* ═══ 动效层（合并自主线程方案）═══ */
@media (prefers-reduced-motion: no-preference) {
  /* 分节标尺划线入场 */
  .sec-rule, .work-strip-rule { transform-origin: 0 50%; }
  .pw-draw { animation: pw-draw .9s cubic-bezier(.22,1,.36,1) both; }
  @keyframes pw-draw { from { transform: scaleX(0); } }

  /* 主标题整体模糊浮现（不拆分文本节点，兼容 i18n 词典切换） */
  .pw-hero { animation: pw-hero 1s cubic-bezier(.22,1,.36,1) .08s both; }
  @keyframes pw-hero { from { opacity: 0; filter: blur(10px); translate: 0 18px; }
    to { opacity: 1; filter: blur(0); translate: 0 0; } }

  /* 主标题一次性行掠高光（fonts.ready 后加类，动画结束移除还原纯色） */
  .pw-shimmer { background: linear-gradient(100deg, #101012 0%, #101012 40%, #e0532f 50%, #101012 60%, #101012 100%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
    color: transparent; animation: pw-shimmer 1.5s ease .5s; }
  @keyframes pw-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* 卡片轻量 3D 倾斜：覆盖原 hover transform 组合旋转，角度变量默认 0deg 安全回退 */
  .project-card:hover { transform: translateY(-4px) perspective(900px)
    rotateX(var(--pw-rx, 0deg)) rotateY(var(--pw-ry, 0deg)); }
  .strip-card:hover { transform: translateY(-4px) perspective(900px)
    rotateX(var(--pw-rx, 0deg)) rotateY(var(--pw-ry, 0deg)); }
  .ops-card:hover { transform: perspective(1300px)
    rotateX(var(--pw-rx, 0deg)) rotateY(var(--pw-ry, 0deg)); }
}

/* ── 响应式布局修正 ── */
@media (min-width:881px) { .nav-inner { gap: 20px; } .nav-links { position: static; transform: none; gap: 28px; } }
@media (max-width:1080px) and (min-width:881px) { .hero h1 { font-size: clamp(38px,4.8vw,56px); } }
@media (max-width:880px) {
  .nav-inner { gap: 0; justify-content: space-between; }
  .nav-inner > nav { order: 3; flex: 0 0 100%; min-width: 0; }
  .nav-links { margin-top: 10px; padding: 4px 0; gap: 0; justify-content: space-between; }
  .nav-links li { flex: 1; min-width: 0; text-align: center; }
  .nav-links a { justify-content: center; width: 100%; font-size: 13px; }
  .nav-side { margin-left: auto; }
  .nav-cta { min-height: 40px; }
  .pills-strip { position: relative; top: auto; margin-bottom: 24px; }
  .pills-strip .pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .pills-strip .pill { flex-shrink: 0; white-space: nowrap; }
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .hero-art { margin: 0 auto; }
  .hero h1,.page-hero h1 { font-size: clamp(34px,7vw,58px); }
  .topbar-inner { letter-spacing: .08em; }
  .topbar-inner .right { flex-wrap: wrap; gap: 10px; }
  .topbar-inner > span,.topbar-inner .right > a { white-space: normal; }
  .hero-actions { flex-wrap: wrap !important; }
  .foot-bottom { align-items: flex-start; line-height: 1.8; }
  .about .footer-row { flex-wrap: wrap; }
  .about .stamp { margin-left: 0; align-items: flex-start; }
  .cta-grid { gap: 36px; }
  .tl-head { gap: 12px; grid-template-columns: 18px minmax(0,1fr) 32px; }
  .tl-date { white-space: normal; }
}
@media (max-width:560px) {
  .container { padding-inline: 20px; }
  .hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .hero-stats .stat { flex-direction: column; align-items: flex-start; white-space: normal; padding: 12px 8px; }
  .hero-stats .stat-label { overflow-wrap: anywhere; line-height: 1.5; }
  .sec-rule .meta-grp { flex-wrap: wrap; gap: 8px 14px; }
  .sec-rule { margin-bottom: 30px; }
  .brand { gap: 8px; font-size: 16px; }
  .nav-cta { padding: 8px 12px; font-size: 11px; }
  .shell .display { line-height: 1.25; }
  .about h2,.capabilities-copy h2,.cta h2 { font-size: clamp(32px,8vw,44px); }
  .ops-stat .big-num { font-size: 72px; }
  .cta-actions { width: 100%; }
  .cta-actions > a { justify-content: center; }
  .cta-art { max-width: 280px; margin-inline: auto; }
}
@media (hover:none),(pointer:coarse) { .portfolio-card-glow { display: none; } }

/* ── 减少动效：全面降级 ── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto !important; }
  .portfolio-progress,.portfolio-card-glow,.cursor-dot { display: none !important; }
  .shell .marquee-track,.shell .pulse,.shell .wire-pulse { animation: none !important; }
  .shell [data-reveal] { opacity: 1 !important; translate: none !important; scale: 1 !important; }
  .shell :is(.btn,.nav-cta) { transform: none !important; }
  .shell *,.shell *::before,.shell *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}