/* =============================================================
 * web3d.css —— Web3D 点缀样式（v3.1.0 新增，最后加载）
 * -------------------------------------------------------------
 * 内容：
 *   1. canvas 定位：Hero 全息台 / CTA 光球 覆盖在区块上（不挡点击）；
 *   2. tilt3d 卡片 3D 倾斜：transform 组合用 !important 覆盖
 *      .card:hover 的位移，由 CSS 变量 --rx / --ry / --ty 驱动，
 *      JS（tilt.js）只负责更新 --rx / --ry；
 *   3. 全息台光晕：Hero frame 内叠加柔和光斑，增强 3D 悬浮感。
 * ============================================================= */

/* ---------- 1. Hero 全息台：canvas 覆盖在 frame 内图片之上 ---------- */
#web3d-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;                 /* 高于 img，低于外部 chips */
  pointer-events: none;       /* 不拦截任何点击 */
  opacity: 1;
}

/* ---------- 2. CTA / 深色区块光球 ---------- */
.web3d-orb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                 /* 在 container 之下做背景层 */
  pointer-events: none;
  opacity: 0.55;
}
/* 光球所在区块定位 + 容器上浮（保证文字在 canvas 之上） */
.cta-band,
.page-hero {
  position: relative;
  overflow: hidden;
}
.cta-band .container,
.on-dark > .container,
.page-hero .container,
.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* ---------- 3. tilt3d 卡片 3D 倾斜 ---------- */
.tilt3d {
  --rx: 0deg;
  --ry: 0deg;
  --ty: 0px;
  /* !important：覆盖 components.css 中 .card:hover / .case-card:hover 的
     translateY 位移，统一由 --ty 控制，避免 transform 互相覆盖 */
  transform: perspective(950px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateY(var(--ty, 0px)) !important;
  transition: opacity 0.75s var(--ease),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}
.tilt3d:hover {
  --ty: -6px;                 /* hover 上浮，替代原 .card:hover 位移 */
  box-shadow: 0 18px 44px rgba(79, 70, 229, 0.16), 0 4px 14px rgba(79, 70, 229, 0.10); /* v3.5.0 靛 */
}
/* 卡片内部元素随父级 3D 空间一起透视（文字更立体） */
.tilt3d > * { transform: translateZ(0); }

/* ---------- 4. Hero 全息台光晕（柔和光斑增强 3D 悬浮感） ---------- */
.hero .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;                 /* 在 3D canvas 之上，但 pointer-events 无 */
  pointer-events: none;
  background:
    radial-gradient(360px 260px at 24% 22%, rgba(79, 70, 229, 0.14), transparent 70%), /* v3.5.0 */
    radial-gradient(420px 300px at 78% 68%, rgba(124, 58, 237, 0.16), transparent 70%); /* v3.5.0 */
  mix-blend-mode: screen;
}

/* ---------- 5. 低配 / 减少动态降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  #web3d-hero,
  .web3d-orb { opacity: 0.35; }
  .tilt3d { transform: none !important; }
}