@charset "utf-8";
/**** 阻尼动效层（Damping Layer）—— js/damping.js 配套 ****/

:root {
  /* 阻尼收尾曲线：先快后慢，末段长尾 */
  --ease-damp: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 缓入缓出（对称，用于需要双向的场景） */
  --ease-damp-io: cubic-bezier(0.65, 0, 0.35, 1);
  /* 轻微欠阻尼回弹（约 3% 过冲） */
  --ease-spring: cubic-bezier(0.22, 1.16, 0.36, 1);

  --damp-dist: 26px;
  --damp-dur: 0.86s;
}

/* ------------------------------------------------------------------
   1) 入场阻尼
   隐藏态只在 html.damp-on 下生效：脚本没跑起来也不会整站留白
   ------------------------------------------------------------------ */
html.damp-on .damp-in {
  opacity: 0;
  transform: translate3d(0, var(--damp-dist), 0);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition:
    opacity var(--damp-dur) var(--ease-damp),
    transform var(--damp-dur) var(--ease-spring);
}

html.damp-on .damp-in.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 收尾：清掉 transform，避免 transform 祖先影响区块内 fixed / sticky 元素 */
html.damp-on .damp-in.is-done {
  transform: none;
  will-change: auto;
  transition: opacity var(--damp-dur) var(--ease-damp);
}

/* 方向变体：data-damp-dir="left|right|scale|fade" */
html.damp-on .damp-in[data-damp-dir="left"] { transform: translate3d(-34px, 0, 0); }
html.damp-on .damp-in[data-damp-dir="right"] { transform: translate3d(34px, 0, 0); }
html.damp-on .damp-in[data-damp-dir="scale"] { transform: scale(0.965); }
html.damp-on .damp-in[data-damp-dir="fade"] { transform: none; }
html.damp-on .damp-in[data-damp-dir="left"].is-in,
html.damp-on .damp-in[data-damp-dir="right"].is-in,
html.damp-on .damp-in[data-damp-dir="scale"].is-in { transform: translate3d(0, 0, 0) scale(1); }

/* ------------------------------------------------------------------
   2) 滚动阻尼
   引入自定义 wheel 补间后必须关掉原生 smooth，否则会二次插值卡顿
   ------------------------------------------------------------------ */
html.damp-scroll-on,
html.damp-scroll-on body {
  scroll-behavior: auto;
}

/* 阻尼滚动中给 <html> 标记，页面可在滚动时降低装饰动效的频率（提升滚动流畅度） */
html.damp-busy .case-card img,
html.damp-busy .project-slide img,
html.damp-busy .pd6-card img {
  transition-duration: 0.9s;
}

/* 锚点落点：有固定头部时给标题留白，避免被头部压住 */
[data-damp-anchor] {
  scroll-margin-top: 96px;
}

/* ------------------------------------------------------------------
   3) 降级：降低动效偏好 / 触屏窄屏不做位移，只保留极短的淡入
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html.damp-on .damp-in,
  html.damp-on .damp-in.is-in,
  html.damp-on .damp-in.is-done {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}

@media (max-width: 768px) {
  :root {
    --damp-dist: 18px;
    --damp-dur: 0.7s;
  }
}