/* OSHNENG (中适能) — FX Layer 全站动效氛围层
   仅增强动效与氛围，不改变任何布局/内容/显隐逻辑。
   所有效果在 prefers-reduced-motion 下归零；光标类效果仅 pointer:fine 启用。 */

/* ── 1. 顶部滚动进度条（导航 --z-nav:1000 之下） ─────────────── */
.fx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: calc(var(--z-nav) - 2);
  pointer-events: none;
}

/* ── 2. .reveal 入场增强：spring 缓动 + 位移/缩放/模糊退场感 ──
   只覆盖 transition 参数与隐藏态姿态，显隐逻辑仍由 app.js 的
   .visible 类与 style.css 的 !important 规则控制。
   注意不设置 transition-delay，保留 app.js data-delay 的行内延迟。 */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  transition-property: opacity, transform, filter !important;
  transition-duration: 0.55s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 隐藏态：比 app.js 行内 translateY(20px) 更丰富的入场起点 */
.reveal:not(.visible) {
  transform: translateY(24px) scale(0.98) !important;
}

/* ── 3. 卡片 hover 立体感 ─────────────────────────────────────
   style.css 中 .reveal.visible 的 transform 带 !important，会压住
   hover/行内 transform；这里用自定义属性 --fx-ty 打通 hover 位移，
   用 --fx-rx/--fx-ry 打通 JS 3D tilt，入口终态与原来完全一致。 */
.card,
.pain-card,
.result-card,
.faq-item,
.solution-card,
.trust-card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease,
              background 0.25s ease;
}

.card:hover,
.pain-card:hover,
.result-card:hover,
.faq-item:hover,
.solution-card:hover,
.trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-primary-rgb), 0.35);
  box-shadow: 0 8px 24px rgba(11,43,69, 0.10),
              0 18px 44px rgba(11,43,69, 0.08);
}

/* 无抬升变体保持原样 */
.card-flat:hover {
  transform: none;
}

/* reveal 卡片的 hover/tilt 通道（ specificity 高于 style.css 的
   .reveal.visible !important 规则；终态 var 缺省为 0，与原先一致） */
.reveal.visible:is(.card, .pain-card, .result-card, .faq-item, .solution-card, .trust-card) {
  transform: perspective(900px)
             rotateX(var(--fx-rx, 0deg))
             rotateY(var(--fx-ry, 0deg))
             translateY(var(--fx-ty, 0px)) !important;
}

.reveal.visible:is(.card, .pain-card, .result-card, .faq-item, .solution-card, .trust-card):hover {
  --fx-ty: -4px;
}

/* tilt 交互期间加快跟随（JS 在 pointerenter/leave 时切换 fx-tilt-hot） */
.reveal.visible.fx-tilt-hot {
  transition-duration: 0.12s !important;
  transition-timing-function: ease-out !important;
}

/* ── 4. 磁吸按钮与 3D tilt 基样式 ───────────────────────────── */
.btn,
.navbar-cta {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease,
              background 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease;
  will-change: transform;
}

.fx-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

/* 非 reveal 卡片（如 roi.html 的 .result-card）的 tilt 通道；
   置于 hover 规则之后，同优先级下由它接管 transform */
:is(.card, .pain-card, .result-card).fx-tilt {
  transform: perspective(900px)
             rotateX(var(--fx-rx, 0deg))
             rotateY(var(--fx-ry, 0deg))
             translateY(var(--fx-ty, 0px));
}

.fx-tilt-hot {
  transition-duration: 0.12s !important;
  transition-timing-function: ease-out !important;
}

/* tilt 高光层（JS 动态创建，--mx/--my 由 JS 写入） */
.fx-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0,194,209, 0.10), transparent 62%);
  z-index: 1;
}

/* ── 5. 跟随光晕光标（不隐藏原生光标；仅 pointer:fine） ────── */
.fx-cursor-glow,
.fx-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: calc(var(--z-toast) + 1);
}

.fx-cursor-glow {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  background: radial-gradient(circle,
              rgba(var(--color-primary-rgb), 0.38) 0%,
              rgba(var(--color-primary-rgb), 0) 70%);
  transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease,
              margin 0.2s ease, transform 0.18s ease-out;
}

.fx-cursor-dot {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--color-primary);
  transition: opacity 0.3s ease, transform 0.05s linear;
}

body.fx-cursor-on .fx-cursor-glow,
body.fx-cursor-on .fx-cursor-dot {
  opacity: 1;
}

.fx-cursor-glow.fx-cursor-hover {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
}

/* ── 6. 能量雾氛围层（固定全屏微光，不动布局） ─────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 52% at 88% -4%, rgba(var(--color-primary-rgb), 0.05), transparent 62%),
    radial-gradient(52% 44% at -4% 104%, rgba(100, 116, 139, 0.05), transparent 60%);
}

/* ── 7. technology.html SCOP 曲线图容器（JS 动态创建） ─────── */
.fx-scop-wrap {
  margin-top: var(--space-2xl);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  background: var(--dark-bg-card);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}

.fx-scop-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.fx-scop-caption {
  margin-top: var(--space-sm);
  font-size: 12px;
  color: var(--dark-text-muted);
  text-align: right;
}

/* ── 8. process.html 垂直进度线（JS 动态创建，移动端隐藏） ─── */
.fx-flow-line {
  position: absolute;
  left: 6px;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--dark-border);
  pointer-events: none;
  overflow: hidden;
}

.fx-flow-line-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
  border-radius: inherit;
}

@media (max-width: 900px) {
  .fx-flow-line {
    display: none;
  }
}

/* ── 9. 触屏与减弱动效：光标类效果不启用 ───────────────────── */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .fx-cursor-glow,
  .fx-cursor-dot {
    display: none !important;
  }
}

/* ── 10. prefers-reduced-motion 全部归零 ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-scroll-progress {
    transition: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal.visible,
  .reveal-left.visible,
  .reveal-right.visible,
  .reveal-scale.visible {
    transition: none !important;
    filter: none !important;
  }

  .card,
  .pain-card,
  .result-card,
  .faq-item,
  .solution-card,
  .trust-card,
  .btn,
  .navbar-cta,
  .fx-tilt,
  .fx-glare {
    transition: none !important;
  }

  .card:hover,
  .pain-card:hover,
  .result-card:hover,
  .faq-item:hover,
  .solution-card:hover,
  .trust-card:hover {
    transform: none;
  }

  body::before {
    display: none;
  }
}

/* ── 表单控件品牌色：range/checkbox/radio 原生渲染跟随主色 ── */
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
}

/* ── 11. 内页 Hero 场景画布（assets/zsn-scenes.js 驱动） ────────
   画布绝对定位于 hero 容器：.page-header 在 style.css 中已具备
   position:relative + overflow:hidden；.section-hero 在此补齐同样的上下文。
   层叠秩序：背景网格/光晕 < 画布 < 文案（z-index:2），画布不响应指针。 */
.page-hero-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-header-content {
  position: relative;
  z-index: 2;
}

.section-hero {
  position: relative;
  overflow: hidden;
}

.section-hero .container {
  position: relative;
  z-index: 2;
}

/* 横屏：canvas 左侧 45% 文案区加渐变遮罩，向页面背景淡出，文字保持清晰 */
@media (min-width: 768px) {
  .page-hero-anim {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 24%, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 24%, #000 45%);
  }
}

/* 竖屏/窄屏：整体降透明度，文案优先 */
@media (max-width: 767px) {
  .page-hero-anim {
    opacity: 0.5;
  }
}

@media print {
  .page-hero-anim {
    display: none !important;
  }
}