/* ============================================================
   motion-enhance.css  (v14)
   全站交互动效增强层 —— 详情页错落入场 + 全站微交互 + 滚动揭示
   缓动统一: cubic-bezier(.16,1,.3,1) (ease-out-expo, 不回弹)
   安全: 所有"初始隐藏"都靠 CSS animation(挂载即播放) 或 JS 加类触发,
        绝无"opacity:0 且无触发"的永久卡死; reduced-motion 直接显示。
   ============================================================ */

/* ---------- 1. 项目详情: 内容错落入场 (detailRise) ----------
   仅作用于 .detail-inner / .gallery-masonry 的"直接子元素",
   排除由 React IntersectionObserver 单独管理的 .detail-section,
   避免与既有滚动揭示冲突。CSS animation 挂载即播放, 无外部触发依赖。 */
@keyframes detailRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.detail-inner > .detail-hero,
.detail-inner > .detail-meta,
.detail-inner > .detail-highlights,
.detail-inner > .detail-metrics,
.detail-inner > .detail-tags,
.detail-inner > .detail-overview {
  opacity: 0;
  transform: translateY(18px);
  animation: detailRise .55s cubic-bezier(.16,1,.3,1) both;
  will-change: opacity, transform;
}
.detail-inner > .detail-hero       { animation-delay: .04s; }
.detail-inner > .detail-meta       { animation-delay: .12s; }
.detail-inner > .detail-highlights { animation-delay: .20s; }
.detail-inner > .detail-metrics    { animation-delay: .28s; }
.detail-inner > .detail-tags       { animation-delay: .36s; }
.detail-inner > .detail-overview   { animation-delay: .44s; }

/* hero 内部文字错落 (year/title/cat 为稳定普通 div, 无 framer 内联样式冲突) */
.detail-hero > * {
  opacity: 0;
  transform: translateY(14px);
  animation: detailRise .5s cubic-bezier(.16,1,.3,1) both;
}
.detail-hero > .detail-hero-year  { animation-delay: .10s; }
.detail-hero > .detail-hero-title { animation-delay: .18s; }
.detail-hero > .detail-hero-cat   { animation-delay: .26s; }

/* 画廊版 (_w 组件) 同样错落 */
.gallery-masonry > * {
  opacity: 0;
  transform: translateY(16px);
  animation: detailRise .5s cubic-bezier(.16,1,.3,1) both;
}
.gallery-masonry > *:nth-child(1) { animation-delay: .05s; }
.gallery-masonry > *:nth-child(2) { animation-delay: .11s; }
.gallery-masonry > *:nth-child(3) { animation-delay: .17s; }
.gallery-masonry > *:nth-child(4) { animation-delay: .23s; }
.gallery-masonry > *:nth-child(5) { animation-delay: .29s; }
.gallery-masonry > *:nth-child(6) { animation-delay: .35s; }
.gallery-masonry > *:nth-child(7) { animation-delay: .41s; }
.gallery-masonry > *:nth-child(8) { animation-delay: .47s; }

/* ---------- 2. 全站滚动揭示 (.reveal-on-scroll) ----------
   初始隐藏态 ONLY 在 JS 给元素加上 .reveal-on-scroll 后才生效;
   若 JS 未运行, 元素永不被标记 -> 保持可见 (安全底线)。 */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-inview {
  opacity: 1;
  transform: none;
}

/* ---------- 3. 微交互增强 (additive, 不与 framer 冲突) ----------
   仅作用于明确的"可交互"类; 不碰 .project-card (framer 控制其 transform)。 */
.btn,
button:not(.detail-close):not(.projects-nav),
.nav-link,
a.nav-link,
.detail-tag,
.tag {
  transition: transform .25s cubic-bezier(.16,1,.3,1),
              box-shadow .25s cubic-bezier(.16,1,.3,1),
              background-color .25s cubic-bezier(.16,1,.3,1),
              border-color .25s cubic-bezier(.16,1,.3,1),
              color .25s cubic-bezier(.16,1,.3,1);
}
.btn:hover,
button:not(.detail-close):not(.projects-nav):hover,
.nav-link:hover,
a.nav-link:hover {
  transform: translateY(-2px);
}
.btn:active,
button:not(.detail-close):not(.projects-nav):active,
.nav-link:active,
a.nav-link:active {
  transform: translateY(0) scale(.98);
}
.detail-tag:hover,
.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}

/* ---------- 4. 顶部整页滚动进度条 ---------- */
.page-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent, #7c5cff), #ffffff);
  z-index: 3000;
  pointer-events: none;
  opacity: .9;
  transition: transform .08s linear;
}

/* ---------- 5. 无障碍: reduced-motion 直接显示, 保持可读 ---------- */
@media (prefers-reduced-motion: reduce) {
  .detail-inner > .detail-hero,
  .detail-inner > .detail-meta,
  .detail-inner > .detail-highlights,
  .detail-inner > .detail-metrics,
  .detail-inner > .detail-tags,
  .detail-inner > .detail-overview,
  .detail-hero > *,
  .gallery-masonry > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .page-scroll-progress { display: none !important; }
  html { scroll-behavior: auto !important; }
}