/* ============================================================
   加强版式层
   目标：明暗交替拉开层次、加大字号对比、作品图全彩、
        入场/悬停/滚动反馈更明显。
   原则：只做视觉增强，不改动效脚本依赖的类名与 DOM 结构；
        遵守 prefers-reduced-motion；不遮挡文字、不大幅晃动。
   ============================================================ */

/* ---------- 1. 首屏：通栏墨蓝，反白大标题 ---------- */
.hero-wrap{background:#171c2b;color:var(--white)}
.hero{position:relative;isolation:isolate;min-height:min(76vh,700px);padding-block:96px 112px;background:transparent;color:inherit}
.hero::before{background:radial-gradient(circle at 12% 72%,#d6e1c82e,transparent 34%),radial-gradient(circle at 88% 18%,#eca36f2b,transparent 30%)}
.hero .eyebrow{color:#aeb7ae}
.hero h1{color:var(--white);font-size:clamp(50px,6.2vw,96px);line-height:1.14;letter-spacing:-.05em}
.hero h1 em{color:var(--coral)}
.hero .hero-intro{color:#c6ccd3;font-size:19px;line-height:1.85;max-width:520px}
.hero .eyebrow-line{background:var(--coral)}
.hero .button-primary{background:var(--coral);color:#171c2b;border-radius:999px;gap:14px;padding:18px 30px;transition:transform .28s ease,background .28s ease,box-shadow .28s ease}
.hero .button-primary:hover{background:#f3b781;transform:translateY(-3px);box-shadow:0 16px 30px #eca36f3d}
.hero .text-link{color:#e8ebe6}
.hero .text-link:hover{color:var(--coral)}

/* 环形卡片区在深色底上的适配 */
.hero .hero-stage::before{border-color:#f4f4f224}
.hero .orbit-controls{color:#dfe4e0}
.hero .orbit-arrow{border-color:#4d566b;background:#212840;color:#f4f4f2;transition:transform .25s ease,background .25s ease,color .25s ease}
.hero .orbit-arrow:hover{background:var(--coral);color:#171c2b;border-color:var(--coral);transform:scale(1.12)}
.hero .orbit-card{border-color:#2c3446;box-shadow:0 30px 60px #0000005c}

/* ---------- 2. 作品区：通栏墨蓝，画作全彩 ---------- */
.work-wrap{background:#171c2b;color:var(--white)}
.work-section{background:transparent;color:inherit;padding-block:104px 116px}
.work-section .section-heading{border-top:1px solid #ffffff1f;padding-top:30px}
.work-section .section-index{color:#98a2ad}
.work-section h2{color:var(--white);font-size:clamp(36px,4.6vw,66px)}
.accordion-gallery{background:#ffffff0a;border-color:#ffffff17;padding:10px;gap:10px;height:520px;border-radius:18px}
.gallery-panel{border-radius:10px}
.gallery-panel.is-active{box-shadow:0 34px 60px #00000066}
.gallery-media img{filter:grayscale(0) brightness(.74) saturate(1.05);transform:scale(1.03);transition:transform .8s cubic-bezier(.18,.75,.2,1),filter .6s ease}
.gallery-panel.is-active .gallery-media img{filter:grayscale(0) brightness(1) saturate(1.1);transform:scale(1.1)}
.gallery-panel::after{background:linear-gradient(transparent 28%,#171c2bf2)}

/* ---------- 3. 经历区：纸白底 + 墨蓝叠卡，层次拉开 ---------- */
.experience-section{background:var(--paper);border-block:1px solid var(--line);padding-block:110px 140px}
.stack-card{background:#171c2b;color:var(--white);border-color:#171c2b;box-shadow:0 34px 64px #1a1e2d38;border-radius:12px}
.stack-card:nth-child(3n+2){background:#1f2537}
.stack-card:nth-child(3n+3){background:#242b40}
.stack-card h3{color:var(--white)}
.stack-card p{color:#c4cad1}
.stack-number{color:var(--coral)}

/* ---------- 4. 字号与标题对比 ---------- */
.section-heading h2{font-size:clamp(36px,4.4vw,64px);line-height:1.22}
.contact-section h2{font-size:clamp(38px,4.9vw,72px)}
.contact-section{padding-block:112px}

/* ---------- 5. 滚动进度条：加粗 + 渐变 ---------- */
.scroll-progress{height:6px;background:linear-gradient(90deg,var(--coral),#d6e1c8);box-shadow:0 2px 14px #eca36f5c}

/* ---------- 6. 入场动效：位移更大、时长更长 ---------- */
.motion-ready .reveal{opacity:0;transform:translateY(46px);transition:opacity .9s ease,transform .9s cubic-bezier(.18,.75,.2,1)}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}

/* 首屏逐个上升 */
.motion-ready .hero-copy>*{animation:rise-in .95s both cubic-bezier(.18,.75,.2,1)}
.motion-ready .hero-copy>*:nth-child(1){animation-delay:.06s}
.motion-ready .hero-copy>*:nth-child(2){animation-delay:.18s}
.motion-ready .hero-copy>*:nth-child(3){animation-delay:.32s}
.motion-ready .hero-copy>*:nth-child(4){animation-delay:.44s}
@keyframes rise-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* 章节标题分批入场 */
.motion-ready .section-heading.is-visible .section-index{animation:rise-in .8s both .06s cubic-bezier(.18,.75,.2,1)}
.motion-ready .section-heading.is-visible h2{animation:rise-in .9s both .18s cubic-bezier(.18,.75,.2,1)}

/* 联系区入场 */
.motion-ready .contact-grid.is-visible .section-index{animation:rise-in .8s both .06s cubic-bezier(.18,.75,.2,1)}
.motion-ready .contact-grid.is-visible h2{animation:rise-in .9s both .18s cubic-bezier(.18,.75,.2,1)}

/* ---------- 7. 悬停反馈 ---------- */
.button-primary{transition:transform .28s ease,background .28s ease,box-shadow .28s ease}
.button-primary:hover{transform:translateY(-3px)}
.work-card{transition:transform .3s ease,box-shadow .3s ease}
.work-card:hover{transform:translateY(-6px);box-shadow:0 26px 52px #1a1e2d33}
nav a{transition:color .25s ease,background .25s ease}
.site-footer{color:var(--ink-soft)}

/* ---------- 8. 响应式修正 ---------- */
@media(max-width:800px){
  .hero{min-height:auto;padding-block:70px 78px}
  .work-section{padding-block:76px 84px}
  .accordion-gallery{height:560px;flex-direction:column}
  .experience-section{padding-block:76px 96px}
  .contact-section{padding-block:80px}
}
@media(max-width:480px){
  .hero{padding-block:56px 64px}
  .hero h1{font-size:44px}
  .work-section{padding-block:64px 70px}
}

/* ---------- 9. 减少动态效果：全部关掉 ---------- */
@media(prefers-reduced-motion:reduce){
  .motion-ready .hero-copy>*,
  .motion-ready .section-heading.is-visible .section-index,
  .motion-ready .section-heading.is-visible h2,
  .motion-ready .contact-grid.is-visible .section-index,
  .motion-ready .contact-grid.is-visible h2{animation:none;opacity:1;transform:none}
  .scroll-progress{display:none}
  .button-primary:hover,.work-card:hover,.hero .orbit-arrow:hover{transform:none}
}