/* ==========================================================================
   visuals.css — 程序化工业视觉：熔炉辉光、噪点材质、等距工艺图、装饰层
   全站零照片，视觉重量由这些图形 + 排版 + 数据表承担。
   ========================================================================== */

/* ---------- 装饰层通用容器 ---------- */
.deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.deco > * { position: absolute; }

/* ---------- 熔炉辉光（电弧炉意象） ----------
   三个模糊色团 + screen 混合 + 40s 极慢位移。只动 transform，不重绘。 */
.glow {
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  will-change: transform;
}
.glow--a {
  width: 62vw; height: 62vw;
  max-width: 820px; max-height: 820px;
  top: -22vw; right: -12vw;
  background: radial-gradient(circle, rgba(196,112,31,.55) 0%, rgba(196,112,31,0) 68%);
  animation: glow-drift-a 44s var(--ease-in-out) infinite alternate;
}
.glow--b {
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  bottom: -18vw; left: -10vw;
  background: radial-gradient(circle, rgba(224,140,58,.34) 0%, rgba(224,140,58,0) 70%);
  animation: glow-drift-b 56s var(--ease-in-out) infinite alternate;
}
.glow--c {
  width: 40vw; height: 40vw;
  max-width: 520px; max-height: 520px;
  top: 24%; left: 34%;
  background: conic-gradient(from 210deg, rgba(20,144,122,.30), rgba(138,70,20,.34), rgba(20,144,122,.30));
  opacity: .55;
  animation: glow-spin 90s linear infinite;
}
@keyframes glow-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-5%, 6%, 0) scale(1.10); }
}
@keyframes glow-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(7%, -5%, 0) scale(.94); }
}
@keyframes glow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- 分形噪点：磨料材质颗粒感 ----------
   内联 SVG feTurbulence 作 data URI，零外部请求。 */
.noise {
  inset: 0;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.noise--strong { opacity: .11; }

/* ---------- 细网格（工程图纸意象） ---------- */
.gridlines {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}
.gridlines--light {
  background-image:
    linear-gradient(to right, rgba(10,13,16,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,13,16,.05) 1px, transparent 1px);
}

/* ---------- 颗粒场 Canvas ---------- */
.grain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
}
.grain-canvas--hero { opacity: .5; will-change: transform; }

/* ---------- 琥珀渐变边框（CTA 条） ----------
   padding-box / border-box 双背景技巧，无需额外 DOM。 */
.ember-frame {
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background:
    linear-gradient(var(--ink-800), var(--ink-800)) padding-box,
    linear-gradient(120deg, var(--ember-600), rgba(20,144,122,.5) 55%, var(--ember-500)) border-box;
}

/* ---------- 细分隔线 ---------- */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, var(--line), transparent);
  margin-block: var(--sp-7);
}

/* ==========================================================================
   等距工艺流程图（11 步）
   ========================================================================== */
.flow { display: grid; gap: var(--sp-3); counter-reset: step; min-width: 0; }
.flow__step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-3) 0;
  /* 未点亮时只降到 .78：再低正文对比度就跌破 WCAG AA 了。
     「点亮」的视觉差异主要靠下面立方体与序号的换色来表达。 */
  opacity: .78;
  transition: opacity var(--dur-4) var(--ease-out);
}
.flow__step > * { min-width: 0; }
.flow__step.is-lit { opacity: 1; }
.js .flow__step { opacity: .78; }
/* 无 JS 时全部点亮（不靠动画传达信息） */
html:not(.js) .flow__step { opacity: 1; }
html:not(.js) .flow__cube { color: var(--ember-500); }

.flow__cube {
  width: 48px; height: 48px; flex: none;
  color: var(--ink-600);
  transition: color var(--dur-4) var(--ease-out);
}
.flow__step.is-lit .flow__cube { color: var(--ember-500); }
.flow__cube svg { width: 100%; height: 100%; }

.flow__no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--steel-500);
  letter-spacing: .1em;
  transition: color var(--dur-4) var(--ease-out);
}
.flow__step.is-lit .flow__no { color: var(--ember-500); }
html:not(.js) .flow__no { color: var(--ember-500); }
.flow__name { font-size: 1.0625rem; font-weight: 700; color: var(--white); margin-top: 2px; }
.flow__desc { font-size: var(--fs-sm); color: var(--steel-400); line-height: 1.6; margin-top: 4px; }

/* ---------- 描线动画（应用领域图标） ---------- */
.js .draw-line {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset var(--dur-5) var(--ease-out);
}
.js .appcard:hover .draw-line,
.js .appcard:focus-within .draw-line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .draw-line { stroke-dashoffset: 0; }
}

/* ---------- 视差（仅桌面 + 非 reduced-motion，由 site.js 决定是否写 --sy） ---------- */
.parallax { transform: translate3d(0, calc(var(--sy, 0) * -0.055px), 0); }
.parallax--slow { transform: translate3d(0, calc(var(--sy, 0) * -0.028px), 0); }
@media (max-width: 1023px) {
  .parallax, .parallax--slow { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .parallax, .parallax--slow { transform: none; }
  .glow--a, .glow--b, .glow--c { animation: none; }
}

/* ---------- 大号水印文字（栏目装饰） ---------- */
.watermark {
  position: absolute;
  right: calc(var(--gutter) * -.2);
  bottom: -.12em;
  font-size: clamp(5rem, 16vw, 13rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.03em;
  color: rgba(255, 255, 255, .028);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.watermark--light { color: rgba(10, 13, 16, .04); }