/* ============================================================
   hero-title.css — Hero 主标题逐字入场（增量增强）
   ------------------------------------------------------------
   设计约束（重要）：
     · 不修改 core.js 的 Hero 渲染逻辑，纯运行时包装
     · .gn-title .accent 使用 background-clip:text 渐变，
       必须整体保留，否则渐变会按「单字」裁剪而碎裂
     · 只动画 transform / opacity（合成器友好）
     · 播完即停（both + 固定 delay），不常驻 will-change
     · 尊重 prefers-reduced-motion / html.eng-weak / html.no-anim
   ============================================================ */

/* 逐字单元：默认不可见，动画播完停在终态 */
.ez-ht-u {
  display: inline-block;
  white-space: pre;          /* 保留词间空格 */
  opacity: 0;
  transform: translate3d(0, .42em, 0) rotateX(-38deg);
  transform-origin: 50% 100%;
  animation: ezHeroIn .62s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes ezHeroIn {
  from {
    opacity: 0;
    transform: translate3d(0, .42em, 0) rotateX(-38deg);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
  }
}

/* 动画结束后释放 will-change，避免常驻合成层 */
.ez-ht-u.ez-ht-done { will-change: auto; }

/* 让父级有 3D 上下文，rotateX 才有透视感 */
.ez-ht-3d { perspective: 620px; }
.ez-ht-3d .line { transform-style: preserve-3d; }

/* 渐变强调字：作为整体保留，避免渐变被逐字裁剪 */
.ez-ht-u.accent { white-space: nowrap; }

/* ---------- 降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ez-ht-u {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }
}
html.no-anim .ez-ht-u,
html.eng-weak .ez-ht-u {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}