/* 仅放 Tailwind 覆盖不到的全局规则，视觉 token 一律走 Tailwind class。 */

html {
  scroll-behavior: smooth;
}

/* 锚点定位时避开吸顶导航栏（h-12 = 3rem） */
section[id] {
  scroll-margin-top: 4rem;
}

/* Apple 风格的大标题换行更均衡 */
h1,
h2 {
  text-wrap: balance;
}

/* 子页面入场动画：路由切换后内容淡入上浮，避免「啪」地整页出现。
 * 只作用于子页面容器，不影响首页视差的 transform 读写。 */
@keyframes dg-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 视差节点专用：只淡入、不碰 transform（视差需要独占该属性） */
@keyframes dg-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dg-enter {
  animation: dg-rise-in 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.dg-enter-fade {
  animation: dg-fade-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

/* ---------------- 动态背景 ----------------
 * 全站背景是一层固定在视口上的元素（结构见 app.jsx 的 DynamicBackground）：
 * 底色随滚动在区块场景之间插值，雨滴由层内 canvas 绘制。
 * 这里不再需要按区块声明背景，相关样式已全部移入 JS 里的场景调色板。 */

/* 弹簧物理缓动是视觉标配，但仍尊重系统的减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}