<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>感叹号音画--那些日子--</title>
<style>
  @layer reset, layout, fx, lyrics;

  /* ================================================================
     RESET
     ================================================================ */
  @layer reset {
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
  }

  /* ================================================================
     LAYOUT — 1024px 参考画布，居中自适应缩放
     ================================================================ */
  @layer layout {
    /* 外层：全屏居中容器 */
    .stage {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
    }

    /* 内层：1024×600 画布，图片和歌词都放里面 */
    .canvas {
      position: relative;
      width: 1024px;
      height: 600px;
      overflow: hidden;
      flex-shrink: 0;
      /* 小屏幕自动缩放 */
      transform-origin: center center;
    }

    /* 背景层 */
    .bg-layer {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: #000 url('hua2.jpg') center center / cover no-repeat;
    }

    /* 标题 —— 参数由 JS 中 TITLE_CONFIG 统一控制 */
    .title {
      position: absolute;
      top: var(--t-top,    15px);
      left: var(--t-left,   50%);
      transform: translateX(-50%);
      z-index: 20;
      font-family: var(--t-font,  "STXinwei", "华文新魏", "STKaiti", "楷体", serif);
      font-size:   var(--t-size,  20px);
      color:       var(--t-color, rgb(255 255 255 / 0.45));
      opacity:     var(--t-opacity, 1);
      letter-spacing: var(--t-spacing, 8px);
      text-shadow:    var(--t-shadow,  0 0 12px rgb(0 0 0 / 0.8));
      pointer-events: none;
      animation: titleFloat var(--t-float-dur, 6s) ease-in-out infinite;
    }

    /* 图片容器 — 所有图片绝对定位在这层 */
    .img-layer {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
    }

    /* 单张图片 */
    .img-item {
      position: absolute;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .img-item img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: fill;
    }

    /* 歌词层 */
    .lyrics-layer {
      position: absolute;
      bottom: 60px;
      left: 0; right: 0;
      z-index: 10;
      pointer-events: none;
    }

    .lyric-zone {
      position: absolute;
      top: 0;
      height: 70px;
      display: flex;
      align-items: center;
      font-family: "STXinwei", "华文新魏", "STKaiti", "楷体", serif;
      font-size: 26px;
      letter-spacing: 3px;
      white-space: nowrap;
    }

    .lyric-zone.left  { left: 120px; justify-content: flex-start; }
    .lyric-zone.right { right: 120px; justify-content: flex-end; }

    /* 开始遮罩 */
    .start-overlay {
      position: fixed; inset: 0; z-index: 100;
      background: rgb(0 0 0 / 0.88);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      cursor: pointer;
      transition: opacity .8s ease, visibility .8s ease;
    }
    .start-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

    .start-btn {
      font-family: "STXinwei", "华文新魏", serif;
      font-size: 26px; color: rgb(255 255 255 / .9);
      padding: 22px 60px;
      border: 1px solid rgb(255 255 255 / .25);
      border-radius: 10px;
      background: rgb(255 255 255 / .06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      letter-spacing: 8px;
      transition: all .3s;
      animation: pulse 2.5s ease-in-out infinite;
    }
    .start-btn:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .5); scale: 1.04; }
    .start-hint { margin-top: 20px; font-size: 13px; color: rgb(255 255 255 / .35); letter-spacing: 3px; }

    .replay-btn {
      display: none;
      position: fixed; bottom: 24px; left: 50%; translate: -50% 0; z-index: 50;
      font-family: "STXinwei", "华文新魏", serif; font-size: 16px;
      color: rgb(255 255 255 / .6); cursor: pointer;
      padding: 8px 24px; border: 1px solid rgb(255 255 255 / .2);
      border-radius: 6px; background: transparent;
      letter-spacing: 4px; transition: all .3s;
    }
    .replay-btn.visible { display: inline-block; }
    .replay-btn:hover { color: rgb(255 255 255 / .9); border-color: rgb(255 255 255 / .4); }
  }

  /* ================================================================
     LYRICS
     ================================================================ */
  @layer lyrics {
    .lyric-text { position: relative; display: inline-block; }

    .lyric-base {
      color: #fff;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                   0 0 6px rgb(0 0 0 / .8), 0 0 12px rgb(0 0 0 / .5);
      white-space: nowrap;
    }

    .lyric-cover {
      position: absolute; top: 0; left: 0; width: 0%; overflow: hidden;
      color: #0ff;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
                   0 0 8px rgb(255 34 34 / .8), 0 0 16px rgb(255 34 34 / .4);
      white-space: nowrap;
    }
    .lyric-zone.preview .lyric-base { opacity: .95; }
  }

  /* ================================================================
     TRANSITION EFFECTS (CSS clip-path / mask)
     ================================================================ */
  @layer fx {
    .fx-fade-in  { animation: fxFadeIn  var(--td,3s) ease forwards; }
    .fx-fade-out { animation: fxFadeOut var(--td,4s) ease forwards; }

    .fx-wipe-in  { animation: fxWipeIn  var(--td,4s) linear forwards; }
    .fx-radial-in { animation: fxRadialIn var(--td,4s) ease forwards; }
    .fx-iris-plus-in  { animation: fxIrisPlusIn  var(--td,4s) ease forwards; }
    .fx-iris-cross-in { animation: fxIrisCrossIn var(--td,4s) ease forwards; }
    .fx-strips-r-in { animation: fxStripsRIn var(--td,4s) ease forwards; }
    .fx-strips-l-in { animation: fxStripsLIn var(--td,4s) ease forwards; }
    .fx-inset-in  { animation: fxInsetIn  var(--td,3s) ease forwards; }

    @keyframes fxFadeIn  { to { opacity: 1; } }
    @keyframes fxFadeOut { to { opacity: 0; } }

    @keyframes fxWipeIn {
      0%   { opacity: 0; mask-image: linear-gradient(to right, transparent 0%, black 0%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 0%); }
      5%   { opacity: 1; }
      100% { opacity: 1; mask-image: linear-gradient(to right, transparent 0%, black 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%); }
    }

    @keyframes fxRadialIn {
      0%   { opacity: 1; clip-path: circle(0% at 50% 50%); }
      100% { opacity: 1; clip-path: circle(100% at 50% 50%); }
    }

    @keyframes fxIrisPlusIn {
      0%   { opacity: 1; clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
      100% { opacity: 1; clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%); }
    }

    @keyframes fxIrisCrossIn {
      0%   { opacity: 1; clip-path: polygon(50% 0%, 50% 0%, 100% 50%, 100% 50%, 50% 100%, 50% 100%, 0% 50%, 0% 50%); }
      100% { opacity: 1; clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%, 0% 0%); }
    }

    @keyframes fxStripsRIn {
      0%   { opacity: 1; clip-path: inset(0 100% 100% 0); }
      100% { opacity: 1; clip-path: inset(0 0% 0% 0); }
    }

    @keyframes fxStripsLIn {
      0%   { opacity: 1; clip-path: inset(0 0 100% 100%); }
      100% { opacity: 1; clip-path: inset(0 0% 0% 0); }
    }

    @keyframes fxInsetIn {
      0%   { opacity: 1; clip-path: inset(45%); scale: .8; }
      100% { opacity: 1; clip-path: inset(0%);  scale: 1; }
    }

    /* 标题浮动 */
    @keyframes titleFloat {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(-4px); }
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 20px rgb(255 255 255 / .08); }
      50%      { box-shadow: 0 0 40px rgb(255 255 255 / .15); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fx-fade-in, .fx-fade-out, .fx-wipe-in, .fx-radial-in,
    .fx-iris-plus-in, .fx-iris-cross-in, .fx-strips-r-in,
    .fx-strips-l-in, .fx-inset-in { animation-duration: 0.01s !important; }
  }
</style>
</head>
<body>

<!-- 舞台 -->
<div class="stage" id="stage">
  <div class="canvas" id="canvas">
    <!-- 背景 -->
    <div class="bg-layer"></div>
    <!-- 标题 -->
    <div class="title">感叹号音画--那些日子--</div>
    <!-- 图片层（JS动态插入） -->
    <div class="img-layer" id="imgLayer"></div>
    <!-- 歌词层 -->
    <div class="lyrics-layer">
      <div id="lyricLeft"  class="lyric-zone left"></div>
      <div id="lyricRight" class="lyric-zone right"></div>
    </div>
  </div>
</div>

<!-- 音频 -->
<audio id="audio" src="wnsg.mp3" preload="auto"></audio>

<!-- 重播 -->
<button class="replay-btn" id="replayBtn">重 新 播 放</button>

<!-- 开始遮罩 -->
<div class="start-overlay" id="startOverlay">
  <div class="start-btn" id="startBtn">▶ 点击开始</div>
  <div class="start-hint">感叹号音画</div>
</div>

<script>
// ╔══════════════════════════════════════════════════════════════╗
// ║  标题水印配置 —— 改这里调标题的大小、位置、颜色、透明度等    ║
// ╚══════════════════════════════════════════════════════════════╝

const TITLE_CONFIG = {
  top:     '15px',                              // 距顶部距离
  size:    '30px',                              // 字号
  color:   'rgb(255 255 255 / 0.55)',           // 颜色
  opacity: 1,                                   // 整体透明度 0~1
  spacing: '16px',                               // 字间距
  shadow:  '0 0 12px rgb(0 0 0 / 0.8)',        // 文字阴影
  floatDur:'6s',                                // 浮动动画周期
};

// 写入 CSS 变量
const root = document.documentElement;
root.style.setProperty('--t-top',       TITLE_CONFIG.top);
root.style.setProperty('--t-size',      TITLE_CONFIG.size);
root.style.setProperty('--t-color',     TITLE_CONFIG.color);
root.style.setProperty('--t-opacity',   TITLE_CONFIG.opacity);
root.style.setProperty('--t-spacing',   TITLE_CONFIG.spacing);
root.style.setProperty('--t-shadow',    TITLE_CONFIG.shadow);
root.style.setProperty('--t-float-dur', TITLE_CONFIG.floatDur);

// ╔══════════════════════════════════════════════════════════════╗
// ║  图片配置区 —— 改这里的 TOP / LEFT / WIDTH / HEIGHT 即可调位置 ║
// ║  坐标系：以 1024×600 画布为参考                                ║
// ╚══════════════════════════════════════════════════════════════╝

const IMAGE_CONFIG = [
  /* ── 开场画面 ──
    src          图片文件名
    begin        开始时间(秒)
    dur          持续时长(null=播完即隐)
    top          距画布顶部(px)  ← 改这里调上下
    left         距画布左边(px)  ← 改这里调左右
    width        宽度(px)        ← 改这里调宽窄
    height       高度(px)        ← 改这里调高矮
    fx           进场转场
    fxDur        转场时长(秒)
    fxOut        退场转场
    fxDurOut     退场时长
    fxOutOff     退场偏移(从begin起算,null=到dur结束)              */
  { src:'h2.jpg',  begin:2,   dur:18,    top:70, left:0,   width:1024, height:460, fx:'fade',   fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:null },
  { src:'wenzi.jpg',begin:8, dur:18,   top:70, left:0,   width:574, height:261, fx:'wipe',   fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:14 },

  /* ── 第一批 2×2 GIF (Inset 效果，30s-65s) ── */
  { src:'1-1.gif',begin:30,  dur:35,   top:70,  left:0,   width:512, height:230, fx:'inset',  fxDur:3,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'1-2.gif',begin:30,  dur:35,   top:70,  left:512, width:512, height:230, fx:'inset',  fxDur:3,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'1-3.gif',begin:30,  dur:35,   top:300, left:0,   width:512, height:230, fx:'inset',  fxDur:3,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'1-4.gif',begin:30,  dur:35,   top:300, left:512, width:512, height:230, fx:'inset',  fxDur:3,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },

  /* ── 第二批 2×2 GIF (RadialWipe，63s-98s) ── */
  { src:'2-1.gif',begin:63,  dur:35,   top:70,  left:0,   width:512, height:230, fx:'radial', fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'2-2.gif',begin:63,  dur:35,   top:70,  left:512, width:512, height:230, fx:'radial', fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'2-3.gif',begin:63,  dur:35,   top:300, left:0,   width:512, height:230, fx:'radial', fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'2-4.gif',begin:63,  dur:35,   top:300, left:512, width:512, height:230, fx:'radial', fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },

  /* ── 第三批 2×2 GIF (Iris plus，93s-128s) ── */
  { src:'3-1.gif',begin:93,  dur:35,   top:70,  left:0,   width:512, height:230, fx:'irisP',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'3-2.gif',begin:93,  dur:35,   top:70,  left:512, width:512, height:230, fx:'irisP',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'3-3.gif',begin:93,  dur:35,   top:300, left:0,   width:512, height:230, fx:'irisP',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'3-4.gif',begin:93,  dur:35,   top:300, left:512, width:512, height:230, fx:'irisP',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },

  /* ── 第四批 2×2 GIF (Iris PLUS，125s-160s) ── */
  { src:'4-1.gif',begin:125, dur:35,   top:70,  left:0,   width:512, height:230, fx:'irisP',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'4-2.gif',begin:125, dur:35,   top:70,  left:512, width:512, height:230, fx:'irisP',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'4-3.gif',begin:125, dur:35,   top:300, left:0,   width:512, height:230, fx:'irisP',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'4-4.gif',begin:125, dur:35,   top:300, left:512, width:512, height:230, fx:'irisP',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },

  /* ── 第五批 2×2 GIF (Strips rightdown，157s-192s) ── */
  { src:'5-1.gif',begin:157, dur:35,   top:70,  left:0,   width:512, height:230, fx:'stripsR',fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'5-2.gif',begin:157, dur:35,   top:70,  left:512, width:512, height:230, fx:'stripsR',fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'5-3.gif',begin:157, dur:35,   top:300, left:0,   width:512, height:230, fx:'stripsR',fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'5-4.gif',begin:157, dur:35,   top:300, left:512, width:512, height:230, fx:'stripsR',fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },

  /* ── 第六批 2×2 GIF (Strips leftdown，189s-224s) ── */
  { src:'6-1.gif',begin:189, dur:35,   top:70,  left:0,   width:512, height:230, fx:'stripsL',fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'6-2.gif',begin:189, dur:35,   top:70,  left:512, width:512, height:230, fx:'stripsL',fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'6-3.gif',begin:189, dur:35,   top:300, left:0,   width:512, height:230, fx:'stripsL',fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'6-4.gif',begin:189, dur:35,   top:300, left:512, width:512, height:230, fx:'stripsL',fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },

  /* ── 第七批 2×2 GIF (Iris cross，221s-256s) ── */
  { src:'7-1.gif',begin:221, dur:35,   top:70,  left:0,   width:512, height:230, fx:'irisC',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'7-2.gif',begin:221, dur:35,   top:70,  left:512, width:512, height:230, fx:'irisC',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'7-3.gif',begin:221, dur:35,   top:300, left:0,   width:512, height:230, fx:'irisC',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
  { src:'7-4.gif',begin:221, dur:35,   top:300, left:512, width:512, height:230, fx:'irisC',  fxDur:4,  fxOut:'fade', fxDurOut:4, fxOutOff:31 },
];



// ── 转场类型 → CSS class 映射 ──────────────────────────────────
const FX_MAP = {
  'fade':    ['fx-fade-in',  'fx-fade-out'],
  'wipe':    ['fx-wipe-in',  'fx-fade-out'],
  'radial':  ['fx-radial-in','fx-fade-out'],
  'irisP':   ['fx-iris-plus-in', 'fx-fade-out'],
  'irisC':   ['fx-iris-cross-in','fx-fade-out'],
  'stripsR': ['fx-strips-r-in','fx-fade-out'],
  'stripsL': ['fx-strips-l-in','fx-fade-out'],
  'inset':   ['fx-inset-in', 'fx-fade-out'],
};

// ── LRC 歌词数据 ────────────────────────────────────────────────
const LRC_TEXT = [
    '[00:03.90] 只为祭奠我们那些无悔的青春。。。。。。',
    '[00:22.80]',
    '[00:25.80]音画制作：感叹号',
    '[00:30.80]那时候空气中弥漫着花香',
    '[00:36.60]',
    '[00:36.60]',
    '[00:37.60]阳光拂过我的脸庞',
    '[00:41.70]',
    '[00:41.70]',
    '[00:43.70]你温暖臂膀像大树一样',
    '[00:49.20]',
    '[00:49.20]',
    '[00:49.40]多少风雨为我遮挡',
    '[00:54.90]',
    '[00:54.90]',
    '[00:57.30]那时候生活中也总有迷惘',
    '[01:03.10]',
    '[01:03.10]',
    '[01:04.10]而你始终在我身旁',
    '[01:08.20]',
    '[01:08.20]',
    '[01:10.20]你柔软目光让我心坚强',
    '[01:15.70]',
    '[01:15.70]',
    '[01:16.00]多少日子因你而芬芳',
    '[01:21.90]',
    '[01:21.90]',
    '[01:23.20]时间过去了这么多年',
    '[01:28.40]',
    '[01:28.40]',
    '[01:29.00]你是否还记得我模样',
    '[01:34.90]',
    '[01:34.90]',
    '[01:36.00]你我生命中那最纯真时光',
    '[01:43.00]',
    '[01:43.00]',
    '[01:43.40]无可挽回却永生难忘',
    '[01:49.00]',
    '[01:49.00]',
    '[01:50.70]歌词编辑：感叹号',
    '[01:57.10]',
    '[01:57.10]',
    '[02:07.10]那时候空气中弥漫着花香',
    '[02:12.90]',
    '[02:12.90]',
    '[02:13.90]阳光拂过我的脸庞',
    '[02:18.20]',
    '[02:18.20]',
    '[02:19.90]你温暖臂膀像大树一样',
    '[02:25.40]',
    '[02:25.40]',
    '[02:25.60]多少风雨为我遮挡',
    '[02:31.40]',
    '[02:31.40]',
    '[02:33.50]那时候生活中也总有迷茫',
    '[02:39.60]',
    '[02:39.60]',
    '[02:40.30]而你始终在我身旁',
    '[02:44.70]',
    '[02:44.70]',
    '[02:46.40]你柔软目光让我心坚强',
    '[02:52.00]',
    '[02:52.00]',
    '[02:52.40]多少日子因你而芬芳',
    '[02:58.30]',
    '[02:58.30]',
    '[02:59.60]时间过去了这么多年',
    '[03:04.80]',
    '[03:04.80]',
    '[03:05.50]你是否还记得我模样',
    '[03:11.40]',
    '[03:11.40]',
    '[03:12.50]你我生命中那最纯真时光',
    '[03:19.50]',
    '[03:19.50]',
    '[03:19.90]无可挽回却永生难忘',
    '[03:25.50]',
    '[03:25.50]',
    '[03:26.00]时间过去了这么多年',
    '[03:31.50]',
    '[03:31.50]',
    '[03:31.90]你是否还记得我模样',
    '[03:38.50]',
    '[03:38.50]',
    '[03:39.70]你我生命中那最纯真时光',
    '[03:46.70]',
    '[03:46.70]',
    '[03:47.10]无可挽回 却永生难忘',
    '[03:52.70]',
    '[03:52.70]',
    '[03:53.30]无可挽回却永生难。。。  忘',
    '[04:02.00]',
    '[04:02.00]',
    '[04:02.40]O(∩_∩)O谢谢欣赏',
    '[04:07.40]'

].join('\n');

// ================================================================
//  ENGINE
// ================================================================

// ── 工具 ────────────────────────────────────────────────────────
const h = str => { const d = document.createElement('div'); d.appendChild(document.createTextNode(str)); return d.innerHTML; };

const parseLRC = text => {
  const lines = [];
  for (const line of text.split('\n')) {
    const m = line.match(/\[(\d{2}):(\d{2}\.\d{2})\]\s?(.*)/);
    if (m) lines.push({ time: parseInt(m[1])*60 + parseFloat(m[2]), text: m[3].trim() });
  }
  return lines.sort((a,b) => a.time - b.time);
};

// ── 歌词引擎 ────────────────────────────────────────────────────
class Lyrics {
  #lines; #L; #R; #idx = -1;
  constructor(text, L, R) { this.#lines = parseLRC(text); this.#L = L; this.#R = R; }

  update(t) {
    let i = -1;
    for (let j=0; j<this.#lines.length; j++) { if (t<this.#lines[j].time) break; i=j; }
    if (i===-1||i===this.#idx) { if(i!==-1) this.#cover(i,t); return; }
    this.#idx = i;
    const cur = i%2===0?this.#L:this.#R, nxt = i%2===0?this.#R:this.#L;
    this.#write(cur, this.#lines[i].text, true);
    if(i<this.#lines.length-1) this.#write(nxt, this.#lines[i+1].text, false);
    else this.#clear(nxt);
    this.#cover(i,t);
  }

  #cover(i,t) {
    const a=this.#lines[i], b=this.#lines[i+1], end=b?b.time:a.time+5,
          p = (t-a.time)/(end-a.time)||0;
    const side=i%2===0?this.#L:this.#R, c=side.querySelector('.lyric-cover');
    if(c) c.style.width = Math.min(1,Math.max(0,p))*100+'%';
  }

  #write(z, txt, cur) {
    if(!txt?.trim()) return this.#clear(z);
    const ex=z.querySelector('.lyric-base');
    if(ex&&ex.dataset.text===txt){ z.classList.toggle('preview',!cur); if(cur){const c=z.querySelector('.lyric-cover');if(c)c.style.width='0%';} return; }
    z.innerHTML=`<div class="lyric-text"><div class="lyric-base" data-text="${h(txt)}">${h(txt)}</div><div class="lyric-cover">${h(txt)}</div></div>`;
    z.classList.toggle('preview',!cur);
  }
  #clear(z){ z.innerHTML=''; z.classList.remove('preview'); }
  reset(){ this.#idx=-1; this.#clear(this.#L); this.#clear(this.#R); }
}

// ── 图片引擎 ────────────────────────────────────────────────────
class Slideshow {
  #layer; #cfg; #active = new Map();

  constructor(cfg, layer) {
    this.#cfg = [...cfg].sort((a,b)=>a.begin-b.begin);
    this.#layer = layer;
  }

  update(t) {
    for (const item of this.#cfg) {
      const key = item.src+'@'+item.begin, end = item.begin+(item.dur??9999);

      if (t>=item.begin && t<end && !this.#active.has(key)) this.#show(item,key,end);
      if (item.fxOutOff != null) {
        const outT = item.begin+item.fxOutOff, a = this.#active.get(key);
        if (a && t>=outT && !a.fading) this.#fadeOut(key,item);
      }
    }
    for (const [k,a] of this.#active) { if (t>=a.end && !a.fading) this.#remove(k); }
  }

  #show(item, key, end) {
    const el = document.createElement('div');
    el.className = 'img-item';
    el.style.top  = item.top  + 'px';
    el.style.left = item.left + 'px';
    el.style.width  = item.width  + 'px';
    el.style.height = item.height + 'px';
    el.style.setProperty('--td', (item.fxDur??3)+'s');
    el.dataset.key = key;

    const img = document.createElement('img');
    img.src = item.src; img.alt = '';
    el.appendChild(img);

    const [fxIn] = FX_MAP[item.fx]||FX_MAP['fade'];
    el.classList.add(fxIn);

    this.#layer.appendChild(el);
    this.#active.set(key, { el, end, fading: false });
  }

  #fadeOut(key, item) {
    const a = this.#active.get(key); if(!a) return;
    a.fading = true;
    const el = a.el, [_, fxOut] = FX_MAP[item.fx]||FX_MAP['fade'];
    el.style.setProperty('--td', (item.fxDurOut??4)+'s');
    el.classList.add(fxOut);
    el.addEventListener('animationend', ()=>{
      this.#remove(key);
    }, {once:true});
  }

  #remove(key) {
    const a = this.#active.get(key); if(!a) return;
    this.#active.delete(key); a.el.remove();
  }

  reset() {
    for (const [,a] of this.#active) a.el.remove();
    this.#active.clear();
  }
}

// ── 画布自适应缩放 ──────────────────────────────────────────────
function fitCanvas() {
  const canvas = document.getElementById('canvas');
  const W = window.innerWidth, H = window.innerHeight;
  const scale = Math.min(W/1024, H/600, 1.5); // 最大1.5倍
  canvas.style.transform = `scale(${scale})`;
}

// ── 主程序 ──────────────────────────────────────────────────────
const audio  = document.getElementById('audio');
const startO = document.getElementById('startOverlay');
const startB = document.getElementById('startBtn');
const replayB = document.getElementById('replayBtn');

const lyrics = new Lyrics(LRC_TEXT, document.getElementById('lyricLeft'), document.getElementById('lyricRight'));
const slides = new Slideshow(IMAGE_CONFIG, document.getElementById('imgLayer'));

let started = false, raf = null;

function loop() {
  if (!started) return;
  const t = audio.currentTime;
  lyrics.update(t);
  slides.update(t);
  raf = requestAnimationFrame(loop);
}

function onReady() {
  started = true;
  startO.classList.add('hidden');
  loop();
}

// 事件
startO.addEventListener('click', ()=>{
  audio.play().then(onReady).catch(()=>{ startB.textContent='▶ 点击播放'; });
});

audio.addEventListener('ended', ()=>{
  replayB.classList.add('visible');
  started = false;
  if(raf) cancelAnimationFrame(raf);
});

replayB.addEventListener('click', ()=>{
  audio.currentTime = 0;
  lyrics.reset();
  slides.reset();
  replayB.classList.remove('visible');
  audio.play().then(()=>{ started=true; loop(); });
});

audio.addEventListener('error', ()=>{
  startB.textContent = '音频加载失败';
  startB.style.borderColor='rgb(255 80 80 / .4)';
  startB.style.color='rgb(255 120 120 / .8)';
  startO.querySelector('.start-hint').textContent = '请确认 wnsg.mp3 文件存在';
});

// 自适应 + 自动播放
window.addEventListener('resize', fitCanvas);
fitCanvas();
window.addEventListener('load', ()=>{
  audio.play().then(onReady).catch(()=>{ startO.classList.remove('hidden'); startB.textContent='▶ 点击播放'; });
});
</script>
</body>
</html>