/* 赛璞科技官网 - 质感层
 *
 * 这一层只做"观感"，不承担任何布局职责——整份文件删掉，站点依然是完整可用的，
 * 只是变素。所以它排在 style.css / blocks.css 之后加载，且不引入新的结构依赖。
 *
 * 浅深两套主题走的是不同手法，这是刻意的：
 *   深色 —— 背后有 js/orbit.js 的星轨可糊，毛玻璃才成立
 *   浅色 —— 白叠白 blur 出来还是白，只会让文字发灰，一律不做毛玻璃，
 *            改用柔光 + 彩色描边 + 阴影拉层级
 *
 * 所有动效都在 prefers-reduced-motion: reduce 下关停，见文件末尾。
 */

/* ========== 星轨画布：只有首页有，深色时由 js/orbit.js 打开 ========== */
#orbit {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: none; opacity: .78;
}

/* ========== 卡片：鼠标跟随柔光 ==========
 * --mx / --my 由 js/effects.js 在 mousemove 时写到当前 hover 的卡上。
 * 柔光颜色取各卡自己的 --card-accent（产品卡）或 --hero-accent（产品页特性卡），
 * 都没有就退回品牌色，所以八个产品的卡 hover 起来是八种颜色。
 */
.product-card, .capability-card, .feature-card, .job-card, .about-value,
.loop-step, .recent-item {
  --glow: var(--card-accent, var(--hero-accent, var(--brand)));
}
.product-card::before, .capability-card::before, .feature-card::before,
.job-card::before, .about-value::before,
.loop-step::before, .recent-item::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--glow) 15%, transparent), transparent 64%);
}
.product-card:hover::before, .capability-card:hover::before, .feature-card:hover::before,
.job-card:hover::before, .about-value:hover::before,
.loop-step:hover::before, .recent-item:hover::before { opacity: 1; }

/* 卡片内容要压在柔光之上，否则文字会被盖住一层色膜 */
.product-card > *, .capability-card > *, .feature-card > *, .job-card > *,
.about-value > *, .loop-step > *, .recent-item > * { position: relative; z-index: 1; }

/* recent-item 原本没建立定位上下文，柔光需要（loop-step 已有 position:relative） */
.recent-item { position: relative; }

/* ========== 卡片：彩色描边 + 一圈活力色微光 ==========
 * 没用 border-image 做真渐变边——它在圆角上会失效，而且 background-image
 * 不能过渡，hover 会硬切。这里用可过渡的 border-color + 双层 box-shadow
 * 合成出同样的"边缘被点亮"观感。
 */
.product-card:hover, .capability-card:hover, .feature-card:hover,
.job-card:hover, .about-value:hover, .loop-step:hover, .recent-item:hover {
  border-color: color-mix(in srgb, var(--glow) 52%, transparent);
  box-shadow: var(--shadow-lift),
              0 0 0 1px color-mix(in srgb, var(--vivid) 24%, transparent);
}
.loop-step, .recent-item { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s; }
.loop-step:hover { transform: translateY(-3px); }

/* ========== 首页 hero：缓慢呼吸的品牌色光晕 ==========
 * z-index:1 是必须的——#orbit 是 z-index:0 的 fixed 元素，
 * 不给 hero 建层叠上下文的话，星轨会盖在标题上面。
 * style.css 里 .hero/.section 那一组已经有这一条，.home-hero 是新版式漏网的。
 */
/* overflow-x:clip 是给下面那个光晕兜底的：它宽 110%、呼吸动画还会放大到 1.06，
 * 窄屏下横向顶出视口三十来像素，整页跟着能左右拖。光晕是纯装饰，
 * 径向渐变的边缘本来就是透明的，横向裁掉看不出来。
 * 用 clip 不用 hidden——hidden 会把纵向也变成滚动容器，光晕 top:-80px 的部分会被切掉。 */
.home-hero { position: relative; z-index: 1; overflow-x: clip; }
.home-hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: min(920px, 110%); height: 460px; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
              color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%);
  opacity: .48;
  animation: sypro-breathe 9s ease-in-out infinite;
}
@keyframes sypro-breathe {
  0%, 100% { opacity: .40; transform: translateX(-50%) scale(1); }
  50%      { opacity: .62; transform: translateX(-50%) scale(1.06); }
}

/* ========== 数字滚动：等宽数字，滚的时候宽度不跳 ========== */
.fact .n, .metric .value { font-variant-numeric: tabular-nums; }

/* 错峰入场不需要新样式：js/effects.js 直接给 [data-stagger] 的子元素
 * 叠一个 inline transition-delay，吃的是 style.css 里 .fade-in 现成的过渡。
 * 延迟用完即清，不会常驻拖慢 hover。 */

/* ========== 深色专属：卡片毛玻璃 ==========
 * 半透明卡片 + backdrop-filter，糊的是 #orbit 的星轨。浅色分支一个字都不写。
 */
:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .capability-card,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .job-card,
:root[data-theme="dark"] .about-value,
:root[data-theme="dark"] .loop-step,
:root[data-theme="dark"] .recent-item,
:root[data-theme="dark"] .footer {
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .product-card,
  :root:not([data-theme]) .capability-card,
  :root:not([data-theme]) .feature-card,
  :root:not([data-theme]) .job-card,
  :root:not([data-theme]) .about-value,
  :root:not([data-theme]) .loop-step,
  :root:not([data-theme]) .recent-item,
  :root:not([data-theme]) .footer {
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
  }
}

/* 深色下分区底色也要半透明，否则 section-secondary 会挡死整片星轨 */
:root[data-theme="dark"] .section-secondary {
  background: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .section-secondary {
    background: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
  }
}

/* ========== 降低动效：动的全停，静态观感保留 ========== */
@media (prefers-reduced-motion: reduce) {
  .home-hero::before { animation: none; opacity: .3; }
  #orbit { opacity: .4; }
  .product-card::before, .capability-card::before, .feature-card::before,
  .job-card::before, .about-value::before,
  .loop-step::before, .recent-item::before { transition: none; }
  .loop-step:hover { transform: none; }
}

/* ========== 响应式：窄屏收一下光晕的尺寸 ========== */
@media (max-width: 900px) {
  .home-hero::before { height: 340px; top: -50px; }
}