/* ============================================================
   高信新材料官网 · 动效类（IntersectionObserver 触发 .visible）
   ============================================================ */

[data-animate] {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-animate="fade-in"] { transform: translateY(30px); }
[data-animate="fade-in-left"] { transform: translateX(-46px); }
[data-animate="fade-in-right"] { transform: translateX(46px); }
[data-animate="scale-in"] { transform: scale(.9); }
[data-animate].visible { opacity: 1; transform: none; }

/* 错开延迟 */
.stagger-1 { transition-delay: .1s !important; }
.stagger-2 { transition-delay: .2s !important; }
.stagger-3 { transition-delay: .3s !important; }
.stagger-4 { transition-delay: .4s !important; }
.stagger-5 { transition-delay: .5s !important; }
.stagger-6 { transition-delay: .6s !important; }

/* 链接下划线动画 */
.u-link { position: relative; }
.u-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--duration-base) var(--ease-out);
}
.u-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* 轻微浮动（装饰） */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-soft { animation: float-soft 4.5s ease-in-out infinite; }

/* 播放按钮呼吸圈 */
@keyframes play-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
  70% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.video-play { animation: play-pulse 2.4s ease-out infinite; }

/* 返回顶部出现动画由 .show 控制，此处补充悬停 */
.back-top:active { transform: scale(.94); }

/* 页面载入时 header 淡入 */
@keyframes header-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.site-header { animation: header-in .7s var(--ease-out); }

/* ---------- Hero 轮播增强动效 ---------- */
/* Ken Burns：背景缓慢放大漂移（独立 scale/translate 属性，不与视差 transform 冲突） */
@keyframes gx-kenburns {
  from { scale: 1.02; translate: 0 0; }
  to { scale: 1.16; translate: -1.4% -1%; }
}
.hero-slide.active .hero-bg { animation: gx-kenburns 8s ease-out forwards; }

/* 指示点 5s 进度填充（与自动播放同步，悬停暂停） */
@keyframes gx-dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 滚动提示 */
.hero-scroll {
  position: absolute; right: 34px; bottom: 30px; z-index: 8;
  width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 14px;
}
.hero-scroll::before {
  content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 9px; margin-left: -2px;
  border-radius: 2px; background: var(--brand-primary-light);
  animation: gx-wheel 1.8s ease-in-out infinite;
}
@keyframes gx-wheel {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 0; transform: translateY(15px); }
}

/* 氛围光斑：缓慢漂移的红/白光晕，增加画面层次 */
.hero::before, .hero::after {
  content: ''; position: absolute; z-index: 2; border-radius: 50%;
  pointer-events: none; filter: blur(6px);
}
.hero::before {
  width: 380px; height: 380px; left: 6%; top: 16%;
  background: radial-gradient(circle, rgba(255, 64, 64, .22), transparent 70%);
  animation: gx-drift-a 12s ease-in-out infinite alternate;
}
.hero::after {
  width: 300px; height: 300px; right: 10%; bottom: 18%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
  animation: gx-drift-b 10s ease-in-out infinite alternate;
}
@keyframes gx-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes gx-drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-50px, -30px) scale(.95); } }

/* 移动端：关闭重动效保性能 */
@media (max-width: 767px) {
  .hero-slide.active .hero-bg { animation: none; }
  .hero::before, .hero::after, .hero-scroll { display: none; }
}

/* 减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-animate] { opacity: 1; transform: none; }
}