<body>

  <!-- 第一层：雨 -->
  <canvas id="rain"></canvas>

  <!-- 第二层：环境光晕 -->
  <div class="ambient"></div>

  <!-- 第五层：全页玻璃碎片（用 SVG 画） -->
  <div class="glass-layer">
    <svg viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid slice">
      <g id="shardGroup"></g>
    </svg>
  </div>

  <!-- 第六、七层：光带与噪点 -->
  <div class="sheen"></div>
  <div class="grain"></div>

  <!-- 第八层：点击破碎画布 -->
  <canvas id="crackCanvas"></canvas>

  <!-- 进度条 -->
  <div class="progress"><span id="bar"></span></div>

  <!-- 内容（唯一会被搜索引擎读到的一层） -->
  <main>
    <section class="hero">...</section>
    <section class="chapter">...</section>
    ...
  </main>

</body>

/* 所有装饰层的共同特征 */
.deco-layer {
  position: fixed;        /* 固定在视口，不随滚动移动 */
  inset: 0;               /* top/right/bottom/left 全为 0 = 铺满 */
  z-index: 5;             /* 层级 */
  pointer-events: none;   /* 鼠标穿透，绝不挡点击 */
}

/* 玻璃层额外需要：发光叠加 */
.glass-layer {
  mix-blend-mode: screen; /* 与下方叠加时变亮 */
}

// 1. 拿到画布和画笔
const canvas = document.getElementById('rain');
const ctx = canvas.getContext('2d');

// 2. 设置画布尺寸（注意 devicePixelRatio，否则高分屏会糊）
const dpr = Math.min(window.devicePixelRatio || 1, 2);
canvas.width  = window.innerWidth  * dpr;
canvas.height = window.innerHeight * dpr;
canvas.style.width  = window.innerWidth  + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(dpr, dpr);   // 之后所有坐标都按 CSS 像素算

// 3. 画一条线
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(10, 40);
ctx.strokeStyle = 'rgba(205,169,93,0.5)';
ctx.lineWidth = 1;
ctx.stroke();

function makeDrop(initial) {
  return {
    x: Math.random() * (W + 260) - 130,   // 横向位置（略宽于屏幕）
    y: initial ? Math.random() * H         // 初始时随机散布
               : -Math.random() * 280 - 20,// 之后从顶部之外出现
    len:   Math.random() * 22 + 8,         // 雨丝长度
    speed: Math.random() * 6.5 + 4,        // 下落速度
    alpha: Math.random() * 0.30 + 0.05,    // 透明度
    width: Math.random() < 0.82 ? 1 : 1.7  // 粗细（多数细，少数粗）
  };
}

function drawRain() {
  ctx.clearRect(0, 0, W, H);      // 每帧先清屏

  for (let i = 0; i < drops.length; i++) {
    const d = drops[i];

    // 画一条斜线（略微倾斜 = 有风的雨）
    ctx.beginPath();
    ctx.moveTo(d.x, d.y);
    ctx.lineTo(d.x - d.len * 0.16, d.y + d.len);
    ctx.strokeStyle = `rgba(148,184,226,${d.alpha})`;
    ctx.lineWidth = d.width;
    ctx.stroke();

    // 移动
    d.y += d.speed;
    d.x -= d.speed * 0.16;

    // 出屏后回收再利用（避免频繁创建对象）
    if (d.y > H + 30) {
      const nd = makeDrop(false);
      Object.assign(d, nd);
    }
  }

  requestAnimationFrame(drawRain);   // 预约下一帧
}

// 极坐标 → 直角坐标
const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;

// 例：围绕中心画 16 个点
for (let i = 0; i < 16; i++) {
  const angle = (i / 16) * Math.PI * 2;   // 均匀分角
  const x = cx + Math.cos(angle) * 200;
  const y = cy + Math.sin(angle) * 200;
  // 在这里画点
}

const RINGS = [16, 62, 138, 236, 356, 502, 680, 902, 1180]; // 每圈半径
const SEG   = 16;                                            // 每圈切几段

// 第一步：算出所有网格顶点
const grid = [];
for (let r = 0; r < RINGS.length; r++) {
  const row = [];
  const baseR = RINGS[r];
  const twist = (Math.random() - 0.5) * 0.55;   // 每圈整体错开一点

  for (let i = 0; i < SEG; i++) {
    // 基础角度 + 随机抖动
    const a0 = (i / SEG) * Math.PI * 2 + twist;
    const da = (Math.random() - 0.5) * (Math.PI * 2 / SEG) * 1.05;
    // 基础半径 + 随机抖动
    const dr = baseR * (Math.random() - 0.5) * 0.34;
    const rr = Math.max(4, baseR + dr);
    const aa = a0 + da;

    row.push([cx + Math.cos(aa) * rr, cy + Math.sin(aa) * rr]);
  }
  grid.push(row);
}

// 第二步：相邻四个顶点 → 一块碎片
for (let ri = 0; ri < grid.length - 1; ri++) {
  for (let si = 0; si < SEG; si++) {
    const sj = (si + 1) % SEG;    // 环形，末尾接回开头

    const p1 = grid[ri][si];       // 内圈当前
    const p2 = grid[ri][sj];       // 内圈下一个
    const p3 = grid[ri + 1][sj];   // 外圈下一个
    const p4 = grid[ri + 1][si];   // 外圈当前

    // 这四个点组成一块碎片（一个多边形）
    // 画出来就是一块玻璃
  }
}

x = 16 · sin³(t)

y = 13 · cos(t) − 5 · cos(2t) − 2 · cos(3t) − cos(4t)

const N = 70;   // 采样点数量，越大越平滑

ctx.beginPath();
for (let i = 0; i <= N; i++) {
  const t = (i / N) * Math.PI * 2;

  const sx = Math.sin(t);
  const xx = 16 * sx * sx * sx;              // 16·sin³(t)
  const yy = 13 * Math.cos(t)
           - 5  * Math.cos(2 * t)
           - 2  * Math.cos(3 * t)
           -      Math.cos(4 * t);

  // 缩放并移动到目标位置
  const px = cx + xx * scale;
  const py = cy - yy * scale;   // 注意 y 轴向下，所以取负

  if (i === 0) ctx.moveTo(px, py);
  else         ctx.lineTo(px, py);
}
ctx.closePath();
ctx.stroke();

const py = cy + (-yy - 6) * scale;
//               ^^^^^^^ 让心居中

// 一个碎片从起点飞到终点
const t = elapsed / duration;          // 原始进度 0 → 1
const e = 1 - Math.pow(1 - t, 2.2);    // easeOut 缓动

// 用缓动后的进度插值
const x = startX + (endX - startX) * e;
const y = startY + (endY - startY) * e;

{
  x: 100, y: 200,          // 起点
  tx: 250, ty: 80,         // 终点
  rot: 0.5,                // 初始旋转角
  vr: 3.2,                 // 旋转速度
  gravity: 32,             // 重力系数
  delay: 40,               // 延迟出现（毫秒）
  verts: [...]             // 多边形顶点（碎片形状）
}

const sp = (age - p.delay) / 760;      // 进度 0 → 1
if (sp <= 0 || sp >= 1) continue;

const e = 1 - Math.pow(1 - sp, 2.2);   // easeOut 缓动

// 位置：起点 → 终点 插值
const x = p.x + (p.tx - p.x) * e;

// y 加个二次项 = 模拟重力下坠
const y = p.y + (p.ty - p.y) * e + e * e * p.gravity;

// 旋转
const rot = p.rot + p.vr * e;

// 透明度：从 1 淡到 0
const alpha = 1 - sp;

const verts = [];
const n = 3 + Math.floor(Math.random() * 3);   // 3~5 个顶点

for (let v = 0; v < n; v++) {
  const a = (v / n) * Math.PI * 2 + rand(-0.5, 0.5);  // 角度抖动
  const r = size * rand(0.5, 1.2);                     // 半径抖动
  verts.push({
    x: Math.cos(a) * r,
    y: Math.sin(a) * r
  });
}

function makeBranch(sx, sy, angle, scale, tier) {
  const points = [{ x: sx, y: sy }];   // 起点

  let px = sx, py = sy;
  let a = angle;

  // 一级裂纹段数多，二级、三级更少
  const segs = tier === 0 ? 5 + Math.floor(Math.random() * 4)
             : tier === 1 ? 3 + Math.floor(Math.random() * 3)
             :              2 + Math.floor(Math.random() * 3);

  // 一级裂纹更长
  let len = (tier === 0 ? 34 + Math.random() * 58
           : tier === 1 ? 22 + Math.random() * 36
           :              14 + Math.random() * 22) * scale;

  for (let s = 0; s < segs; s++) {
    a += (Math.random() - 0.5) * 0.85;   // 方向随机偏
    px += Math.cos(a) * len;
    py += Math.sin(a) * len;
    points.push({ x: px, y: py });
    len *= 0.64 + Math.random() * 0.30;  // 越走越短
  }

  return { points, ... };
}

// 从父分支倒数第一个或第二个点分叉
const idx  = parent.points.length - 1 - Math.floor(Math.random() * 2);
const p    = parent.points[idx];
const prev = parent.points[idx - 1];

// atan2 求两点之间的方向
const dir = Math.atan2(p.y - prev.y, p.x - prev.x);

// 方向左右随机偏 1.3 弧度（约 75°）
const subAngle = dir + (Math.random() - 0.5) * 2.6;

// 生成子分支
const sub = makeBranch(p.x, p.y, subAngle, 0.7, 1);

let actx = null;

function initAudio() {
  if (!actx) {
    const AC = window.AudioContext || window.webkitAudioContext;
    actx = new AC();
  }
  // 浏览器策略：必须由用户交互后才能播放
  if (actx.state === 'suspended') actx.resume();
}

const dur = 0.26;
const sr  = actx.sampleRate;
const n   = Math.floor(sr * dur);

// 创建一个缓冲区，填入随机数
const buf  = actx.createBuffer(1, n, sr);
const data = buf.getChannelData(0);

for (let i = 0; i < n; i++) {
  const t = i / n;
  //        随机值 (-1 ~ 1)      ×      衰减
  data[i] = (Math.random() * 2 - 1) * Math.pow(1 - t, 2.4);
}

const src = actx.createBufferSource();
src.buffer = buf;

// 带通滤波器：只留下 3800~6600Hz 的声音
const bp = actx.createBiquadFilter();
bp.type = 'bandpass';
bp.frequency.value = 5000;
bp.Q.value = 0.75;

// 高通滤波器：滤掉 1500Hz 以下
const hp = actx.createBiquadFilter();
hp.type = 'highpass';
hp.frequency.value = 1500;

// 音量包络：瞬间拉起，快速衰减
const g = actx.createGain();
const now = actx.currentTime;
g.gain.setValueAtTime(0.0001, now);
g.gain.exponentialRampToValueAtTime(0.085, now + 0.004);
g.gain.exponentialRampToValueAtTime(0.0001, now + dur);

// 连接起来
src.connect(bp);
bp.connect(hp);
hp.connect(g);
g.connect(actx.destination);

src.start(now);
src.stop(now + dur);

const lo = actx.createOscillator();
lo.type = 'sine';
lo.frequency.setValueAtTime(190, now);
lo.frequency.exponentialRampToValueAtTime(48, now + 0.13);

const lg = actx.createGain();
lg.gain.setValueAtTime(0.07, now);
lg.gain.exponentialRampToValueAtTime(0.0001, now + 0.15);

lo.connect(lg);
lg.connect(actx.destination);
lo.start(now);
lo.stop(now + 0.16);

let downX = 0, downY = 0, downTime = 0;

window.addEventListener('pointerdown', e => {
  downX = e.clientX;
  downY = e.clientY;
  downTime = Date.now();
});

window.addEventListener('pointerup', e => {
  // 位移距离
  const dist = Math.hypot(e.clientX - downX, e.clientY - downY);
  // 按下时长
  const dt = Date.now() - downTime;

  // 位移小 + 时间短 = 真点击
  if (dist < 12 && dt < 900) {
    spawnCrack(e.clientX, e.clientY);
  }
});

let ticking = false;

function onScroll() {
  if (ticking) return;
  ticking = true;

  requestAnimationFrame(() => {
    const max = document.body.scrollHeight - window.innerHeight;
    const p = max > 0 ? window.scrollY / max : 0;   // 0 → 1 的进度

    // 进度条宽度
    bar.style.width = (p * 100) + '%';

    // 玻璃层淡出
    const hp = Math.min(window.scrollY / (window.innerHeight * 0.9), 1);
    glassLayer.style.opacity = (1 - hp * 0.94).toFixed(3);

    ticking = false;
  });
}

window.addEventListener('scroll', onScroll, { passive: true });

const io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('in');    // 触发 CSS 过渡
      io.unobserve(entry.target);          // 触发一次就取消监听
    }
  });
}, {
  threshold: 0.15,
  rootMargin: '0px 0px -8% 0px'
});

document.querySelectorAll('.lines').forEach(el => io.observe(el));

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  /* 所有依赖动画出现的元素，直接显示 */
  .lines p,
  .final,
  .sign {
    opacity: 1 !important;
    transform: none !important;
  }
  /* 关闭纯装饰的动画层 */
  #rain, .sheen {
    display: none;
  }
}

const reduceMotion =
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!reduceMotion) {
  initRain();
  requestAnimationFrame(drawRain);
}
// 否则不启动动画