/* ============================================
   炫酷效果样式 · fx.css
   V2 文字扫光 / V3 Hero 星云 / V6 故障闪烁 / S2 静音开关
   ============================================ */

/* ============ V2 文字扫光 ============ */
.fx-shine {
  background: linear-gradient(
    90deg,
    #FFFFFF 0%,
    #FFFFFF 35%,
    #00B4FF 50%,
    #FFFFFF 65%,
    #FFFFFF 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fxShine 3.2s linear infinite;
}
@keyframes fxShine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ============ V3 Hero 星云 ============ */
.fx-nebula {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* hero 内容容器需要在 fx-nebula 之上 */
.hero > .container { position: relative; z-index: 1; }
.fx-nebula::before,
.fx-nebula::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.fx-nebula::before {
  width: 480px;
  height: 480px;
  top: -120px;
  left: 12%;
  background: radial-gradient(circle, rgba(0,180,255,0.50) 0%, transparent 70%);
  animation: fxNebulaA 9s ease-in-out infinite alternate;
}
.fx-nebula::after {
  width: 360px;
  height: 360px;
  bottom: -80px;
  right: 8%;
  background: radial-gradient(circle, rgba(230,0,18,0.30) 0%, transparent 70%);
  animation: fxNebulaB 11s ease-in-out infinite alternate;
}
@keyframes fxNebulaA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes fxNebulaB {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-40px, -30px) scale(1.1); }
}

/* ============ V6 故障闪烁 ============ */
.fx-glitch {
  position: relative;
  display: inline-block;
  color: var(--accent);
}
.fx-glitch::before,
.fx-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.fx-glitch::before {
  color: var(--brand);
  animation: fxGlitchA 5s infinite;
  clip-path: inset(0 0 0 0);
}
.fx-glitch::after {
  color: #00FFC8;
  animation: fxGlitchB 5s infinite;
  clip-path: inset(0 0 0 0);
}
@keyframes fxGlitchA {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  90% { transform: translate(-2px, 1px); opacity: 0.8; }
  92% { transform: translate(-1px, 0); opacity: 0.6; }
}
@keyframes fxGlitchB {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  91% { transform: translate(2px, -1px); opacity: 0.7; }
  93% { transform: translate(1px, 0); opacity: 0.5; }
}

/* ============ V4 粒子背景容器 ============ */
.fx-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

/* ============ V5 卡片 3D 倾斜 ============ */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              background 0.25s ease;
  will-change: transform;
}
.fx-tilt.fx-tilt-active {
  transition: transform 0.1s ease-out,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
  border-color: var(--border-accent) !important;
  background: var(--bg-card-hover) !important;
  box-shadow:
    0 8px 32px rgba(0, 180, 255, 0.20),
    0 0 0 1px rgba(0, 180, 255, 0.30) inset,
    var(--shadow-md);
}
/* 让卡片内的图标在 hover 时浮起来 + 发光 + 轻微旋转 */
.fx-tilt.fx-tilt-active .product-icon,
.fx-tilt.fx-tilt-active .industry-icon,
.fx-tilt.fx-tilt-active .tech-col-icon,
.fx-tilt.fx-tilt-active .process-icon,
.fx-tilt.fx-tilt-active .story-icon,
.fx-tilt.fx-tilt-active .info-icon,
.fx-tilt.fx-tilt-active .channel-icon {
  transform: translateZ(20px) scale(1.12) rotate(-3deg);
  filter: brightness(1.3) drop-shadow(0 0 12px rgba(0, 180, 255, 0.45));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.25s ease;
}

/* hover 时标题加蓝色 accent glow */
.fx-tilt.fx-tilt-active h3 {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0, 180, 255, 0.30);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.fx-tilt h3 {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* 兜底:hover 视觉反馈即使在 JS 失效时也保留(浏览器原生 :hover,无 JS 依赖)
   - 顺序在 .fx-tilt-active 之后,被它覆盖(JS 路径优先级更高)
   - 只在 reduced 模式才用 :hover(避免和 full 模式 transform 抢优先级时闪烁) */
.fx-mode-reduced .fx-tilt:hover,
.fx-mode-off .fx-tilt:hover {
  border-color: var(--border-accent);
  background: var(--bg-card-hover);
  box-shadow:
    0 8px 32px rgba(0, 180, 255, 0.20),
    0 0 0 1px rgba(0, 180, 255, 0.30) inset,
    var(--shadow-md);
}
.fx-mode-reduced .fx-tilt:hover h3,
.fx-mode-off .fx-tilt:hover h3 {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0, 180, 255, 0.30);
}
/* reduced 模式:hover 图标浮起(无 rotate,只 scale + translateZ) */
.fx-mode-reduced .fx-tilt:hover .product-icon,
.fx-mode-reduced .fx-tilt:hover .industry-icon,
.fx-mode-reduced .fx-tilt:hover .tech-col-icon,
.fx-mode-reduced .fx-tilt:hover .process-icon,
.fx-mode-reduced .fx-tilt:hover .story-icon,
.fx-mode-reduced .fx-tilt:hover .info-icon,
.fx-mode-reduced .fx-tilt:hover .channel-icon {
  transform: translateZ(12px) scale(1.08);
  filter: brightness(1.25) drop-shadow(0 0 10px rgba(0, 180, 255, 0.40));
  transition: transform 0.2s ease, filter 0.2s ease;
}
/* off 模式:hover 图标更轻(只微亮,不浮起) */
.fx-mode-off .fx-tilt:hover .product-icon,
.fx-mode-off .fx-tilt:hover .industry-icon,
.fx-mode-off .fx-tilt:hover .tech-col-icon,
.fx-mode-off .fx-tilt:hover .process-icon,
.fx-mode-off .fx-tilt:hover .story-icon,
.fx-mode-off .fx-tilt:hover .info-icon,
.fx-mode-off .fx-tilt:hover .channel-icon {
  filter: brightness(1.1);
  transition: filter 0.2s ease;
}

/* ============ S2 静音开关 ============ */
.fx-mute {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 17, 22, 0.85);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: all 0.25s ease;
}
.fx-mute:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 180, 255, 0.30);
}
.fx-mute.is-muted {
  color: var(--text-3);
  border-color: var(--border);
}
.fx-mute.is-muted::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(230, 0, 18, 0.60);
}

/* ============ V1 数字容器(占位) ============ */
.fx-counter {
  font-variant-numeric: tabular-nums;
}

/* ============ V7 nav logo hover 反应(2026-09-04 姚工要求) ============ */
/* 鼠标移到 nav logo:小角度抖动(wiggle) + 微微放大 + 蓝色发光
   - animation 用 forwards 让最后一帧保持(微微倾斜静止)
   - 离开 hover 后,transition 让 transform 平滑回到原值
   - 不响声音(logo 是 nav 元素,和卡片的 hover 嗡声区分)
   - 3 档模式都生效(reduced 模式仍保留轻量反馈) */
.logo-img {
  display: block;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.25s ease;
  transform-origin: center center;
  will-change: transform, filter;
}
.logo-img:hover {
  animation: fxLogoWiggle 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 180, 255, 0.55));
}
@keyframes fxLogoWiggle {
  0%   { transform: rotate(0deg)   scale(1);    }
  15%  { transform: rotate(-12deg) scale(1.15); }
  30%  { transform: rotate(9deg)   scale(1.13); }
  45%  { transform: rotate(-6deg)  scale(1.10); }
  60%  { transform: rotate(4deg)   scale(1.08); }
  80%  { transform: rotate(-2deg)  scale(1.08); }
  100% { transform: rotate(-3deg)  scale(1.08); }
}
/* reduced 模式:抖动幅度更小,不发光(尊重 reduced-motion) */
.fx-mode-reduced .logo-img:hover {
  animation: fxLogoWiggleReduced 0.4s ease forwards;
}
@keyframes fxLogoWiggleReduced {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1.05); }
}
/* off 模式:静态放大(无 wiggle) */
.fx-mode-off .logo-img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* ============ 全局可访问性(fx-compat.js 已接管,这里删掉) ============ */
/* 旧的 reduced-motion 媒体查询已删除,统一由 fx-compat.js + body.fx-mode-* 控制 */

@media (max-width: 768px) {
  .fx-particles { display: none; }
  .fx-glitch::before, .fx-glitch::after { display: none; }
  /* 移动端 hover 不稳 — 改用 tap 反馈(用 :active) */
  .logo-img:active {
    transform: scale(1.1) rotate(-5deg);
    filter: brightness(1.15);
  }
}