/* =========================================================
 * 温州晟成科技 · 前端视觉增强（fx）
 * ① 全站固定粒子层  ② hero 极光  ③ 滚动转场  ④ 动态文字
 * 由 js/fx.js 自动触发，无依赖。
 * ========================================================= */

/* ---------- ① 全站固定粒子层（挂 body，屏幕混合，不挡交互） ---------- */
#fx-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
  mix-blend-mode: screen;   /* 深色区发光、浅色区近乎透明，不伤可读性 */
}

/* ---------- ② hero 极光流光层（注入首屏 hero 内，纯 CSS 氛围） ---------- */
.fx-aurora {
  position: absolute;
  inset: -12%;
  z-index: 1;               /* 压在 hero 自有背景/轮播(slides z0)之上 */
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 16% 26%, rgba(201,168,76,.50), transparent 68%),
    radial-gradient(36% 46% at 84% 64%, rgba(229,57,53,.32), transparent 70%),
    radial-gradient(34% 44% at 52% 90%, rgba(201,168,76,.36), transparent 72%),
    radial-gradient(30% 38% at 60% 16%, rgba(42,42,78,.55), transparent 74%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: fxAurora 14s ease-in-out infinite alternate;
}
@keyframes fxAurora {
  0%   { transform: translate(-5%, -3%) scale(1); }
  100% { transform: translate(5%, 4%) scale(1.18); }
}

/* hero 内容必须压在极光/粒子之上。
   注意：绝不可覆盖 .hero-panel 的定位——首页 hero 是轮播，
   非 active 的 .hero-panel 依赖 style.css 的 position:absolute 隐藏，
   一旦被强制为 relative 会在 flex 中占位、撑乱整屏布局。 */
.hero .hero-content,
.page-hero .page-hero-content,
.page-hero-content { position: relative; z-index: 3; }
.hero .hero-slides { z-index: 0; }

/* ---------- ③ 滚动转场（内容区，非 hero） ---------- */
.fx-reveal {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.fx-reveal.fx-in { opacity: 1; transform: none; }
.fx-reveal.fx-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.fx-reveal.fx-stagger.fx-in > * { opacity: 1; transform: none; }

/* ---------- ④ 动态文字：h1 逐字淡入 + 标题流光 + 数字滚动 + 关键词轮换 ---------- */
.fx-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em) rotate(2deg);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.fx-char.fx-in { opacity: 1; transform: none; }

.fx-shimmer {
  background: linear-gradient(100deg, #fff 22%, var(--color-accent, #C9A84C) 45%, #F0D98A 55%, #fff 78%);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fxShimmer 4.5s linear infinite;
}
@keyframes fxShimmer { to { background-position: 240% center; } }

.fx-rotate { display: inline-block; }
.fx-rotate-item {
  display: inline-block;
  background: linear-gradient(100deg, var(--color-accent, #C9A84C), #F0D98A, var(--color-accent, #C9A84C));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fxShimmer 3.5s linear infinite;
}

.fx-count { font-variant-numeric: tabular-nums; }

/* ---------- 降级：尊重减弱动态偏好（仍保留可见装饰，不丢内容） ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none; }
  .fx-reveal.fx-stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
  .fx-char { opacity: 1 !important; transform: none !important; transition: none; }
  .fx-shimmer, .fx-rotate-item { animation: none; color: var(--color-accent, #C9A84C); -webkit-text-fill-color: var(--color-accent, #C9A84C); }
  .fx-aurora { animation: none; }
}