着色器渐变

你是一个着色器渐变（Shader Gradient）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 用静态渐变 PNG 或 CSS 关键帧假动画冒充实时着色器
- 不设 devicePixelRatio 上限（视网膜屏像素爆炸、掉帧）
- 离屏还在跑 requestAnimationFrame 循环
- 忽略 prefers-reduced-motion，或省略 WebGL 不可用回退
- 文字直接压渐变场不加玻璃面板 / scrim
- 满屏多块 canvas 或多支抢眼强调色
- 让 DOM 元素做位移 / 阴影动画抢着色器 GPU 预算

## 必须遵守

### 真实 WebGL 着色器（核心技法）
一个全屏 quad + 一次编译的 fragment shader，noise 驱动的流动场。可直接复用下面的骨架：

顶点着色器（全屏三角/矩形，直接透传坐标）：
attribute vec2 p; void main(){ gl_Position = vec4(p, 0.0, 1.0); }

片元着色器（fbm 域扭曲渐变，uniform: u_res / u_time / u_speed / u_blend / u_grain）：
precision highp float;
uniform vec2 u_res; uniform float u_time, u_speed, u_blend, u_grain;
vec2 hash2(vec2 p){ p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))); return fract(sin(p)*43758.5453)*2.0-1.0; }
float noise(vec2 p){ vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);
  return mix(mix(dot(hash2(i),f),dot(hash2(i+vec2(1,0)),f-vec2(1,0)),u.x),
             mix(dot(hash2(i+vec2(0,1)),f-vec2(0,1)),dot(hash2(i+vec2(1,1)),f-vec2(1,1)),u.x),u.y); }
float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<5;i++){ v+=a*noise(p); p*=2.0; a*=0.5; } return v; }
void main(){
  vec2 uv=gl_FragCoord.xy/u_res.xy; vec2 q=uv; q.x*=u_res.x/u_res.y;
  float t=u_time*0.05*u_speed;
  float f1=fbm(q*1.5+vec2(t,-t*0.5));
  float f2=fbm(q*2.0+vec2(f1*u_blend-t*0.3,f1+t*0.2));
  float f=fbm(q*1.2+f2*(0.6+u_blend));
  vec3 base=vec3(0.031,0.035,0.051), violet=vec3(0.486,0.361,1.0), cyan=vec3(0.133,0.827,0.933), magenta=vec3(0.956,0.447,0.714);
  vec3 col=base;
  col=mix(col,violet,smoothstep(0.15,0.75,f+0.35));
  col=mix(col,cyan,smoothstep(0.3,0.9,f2*0.5+0.5)*0.6);
  col=mix(col,magenta,smoothstep(0.4,1.0,f1*0.5+0.5)*0.45);
  float vig=smoothstep(1.2,0.2,length(uv-0.5)); col*=0.55+0.6*vig;
  col+=(fract(sin(dot(uv+t,vec2(12.9898,78.233)))*43758.5453)-0.5)*u_grain*0.12;
  gl_FragColor=vec4(col,1.0);
}

### 渲染循环与性能
- const dpr = Math.min(window.devicePixelRatio || 1, 2)
- resize: canvas.width = clientWidth*dpr; gl.viewport(0,0,w,h); 传 u_res
- IntersectionObserver 离屏 cancelAnimationFrame、进屏重启
- 只编译一次着色器，每帧只更新 uniform（u_time = performance.now()/1000）

### 降级链（关键）
- prefers-reduced-motion: 只 draw 一帧（t 固定），不 requestAnimationFrame
- gl 为 null（WebGL 不可用）: 保留 canvas 下方的 .sg-fallback CSS 静态渐变，直接 return
- 移动端可降采样（dpr=1）或直接静帧

### 视觉与内容层
- 近黑 #08090D 底；虹彩 violet #7C5CFF / cyan #22D3EE / magenta #F472B6
- 内容坐在 .sg-glass 冻毛玻璃面板：bg-white/[0.05] + backdrop-blur-2xl + border-white/10
- 文字压渐变加 scrim 或玻璃底，保证 4.5:1
- 唯一 UI 强调 violet #7C5CFF：主 CTA、焦点环 focus:ring-[#7C5CFF]/25、链接
- 所有 DOM 动效只碰 transform / opacity

### 无障碍与 CLS
- canvas aria-hidden="true"；显式容器高度（h-screen 等）防 CLS
- 内容层独立于 canvas，canvas 挂了页面照常可读

## 自检

1. 是真 WebGL fragment shader（全屏 quad + fbm 流动）而非假动画？
2. dpr 上限 2 + resize 处理 + IO 离屏暂停？
3. prefers-reduced-motion 单帧 + WebGL 不可用 CSS 回退？
4. 文字有玻璃面板 / scrim、对比达标？
5. 近黑底 + 唯一 violet 强调 + DOM 只动 transform/opacity？
6. canvas aria-hidden + 防 CLS？

/* Shader Gradient Global Styles */

:root {
  --sg-base: #08090D;
  --sg-surface: #12131A;
  --sg-paper: #EDEEF2;
  --sg-violet: #7C5CFF;
  --sg-cyan: #22D3EE;
  --sg-magenta: #F472B6;
}

/* Full-bleed shader canvas base */
.sg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* CSS static-gradient fallback (WebGL unavailable / under the canvas) */
.sg-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 28% 32%, rgba(124, 92, 255, 0.35), transparent 70%),
    radial-gradient(55% 55% at 74% 58%, rgba(34, 211, 238, 0.22), transparent 70%),
    radial-gradient(50% 60% at 55% 85%, rgba(244, 114, 182, 0.20), transparent 70%),
    #08090D;
}

/* Frosted-glass panel */
.sg-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 1rem;
}

/* Readability scrim under text over the gradient */
.sg-scrim {
  background: linear-gradient(to top, rgba(8, 9, 13, 0.7), rgba(8, 9, 13, 0.1) 55%, rgba(8, 9, 13, 0.35));
}

@media (prefers-reduced-motion: reduce) {
  /* the shader loop is not started by script; a single static frame stays */
  .sg-canvas { animation: none; }
}

{
  "border": {
    "width": "border",
    "color": "border-white/10",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_10px_rgba(0,0,0,0.4)]",
    "md": "shadow-[0_20px_60px_rgba(0,0,0,0.45)]",
    "lg": "shadow-[0_30px_90px_rgba(0,0,0,0.55)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_24px_70px_rgba(124,92,255,0.25)]",
    "focus": "focus-visible:ring-2 focus-visible:ring-[#7C5CFF]/40",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-out",
    "active": "active:scale-[0.98]",
    "hoverOpacity": "hover:bg-white/12"
  },
  "typography": {
    "heading": "font-semibold text-white tracking-tight",
    "body": "text-white/70 leading-relaxed",
    "mono": "font-mono text-[#7C5CFF] uppercase tracking-[0.25em]",
    "sizes": {
      "hero": "text-5xl md:text-7xl",
      "h1": "text-4xl md:text-6xl",
      "h2": "text-3xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-24 md:py-32",
    "container": "px-6 md:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-8",
      "lg": "gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#08090D]",
      "secondary": "bg-[#12131A]",
      "accent": [
        "bg-[#7C5CFF]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-white/70",
      "muted": "text-white/50"
    },
    "button": {
      "primary": "bg-[#7C5CFF] text-white",
      "secondary": "bg-white/8 backdrop-blur-xl text-white border border-white/12"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "from-indigo-600",
      "via-purple-600",
      "to-pink-500",
      "animate-pulse",
      "duration-100"
    ],
    "patterns": [
      "^bg-gradient-to-r$",
      "^animate-(pulse|bounce)$",
      "^duration-100$"
    ],
    "reasons": {
      "bg-gradient-to-r": "Motion and color come from the WebGL shader, not decorative CSS gradients",
      "from-indigo-600": "No AI-cliche gradient stops; the field is a real fbm shader over near-black",
      "animate-pulse": "Do not fake life with CSS keyframes; the living quality is the real shader",
      "duration-100": "The living gradient is calm and slow; snappy transitions break the premium feel"
    }
  },
  "required": {
    "button": [
      "rounded-xl",
      "transition-all duration-300",
      "active:scale-[0.98]"
    ],
    "card": [
      "bg-white/[0.06] backdrop-blur-2xl",
      "border border-white/10",
      "rounded-2xl"
    ],
    "input": [
      "bg-white/[0.06] backdrop-blur-xl",
      "border border-white/12",
      "rounded-xl",
      "text-white placeholder-white/40",
      "focus:outline-none focus:border-[#7C5CFF]/70 focus:ring-2 focus:ring-[#7C5CFF]/25",
      "transition-all duration-300"
    ]
  }
}