<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>秋林 · 黄昏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #1a1410;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            overflow: hidden;
        }
        .scene {
            position: relative;
            width: 100vw;
            height: 100vh;
            max-width: 1200px;
            max-height: 800px;
            background: linear-gradient(180deg, #4a2a1a 0%, #7a4a2a 30%, #b87a4a 55%, #d4a86a 75%, #e8c88a 90%, #f0d8b0 100%);
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        }
        @media (max-width: 768px) {
            .scene {
                max-height: 100vh;
                border-radius: 0;
            }
        }
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 2;
        }
        .title-overlay {
            position: absolute;
            top: 5%;
            left: 0;
            width: 100%;
            text-align: center;
            z-index: 10;
            pointer-events: none;
            user-select: none;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        .title-overlay h1 {
            font-size: clamp(28px, 6vw, 56px);
            font-weight: 300;
            color: rgba(255, 240, 220, 0.85);
            letter-spacing: 12px;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: inline-block;
            padding: 8px 32px;
            border-radius: 40px;
            background: rgba(255, 240, 220, 0.06);
            border: 1px solid rgba(255, 240, 220, 0.08);
        }
        .title-overlay p {
            font-size: clamp(12px, 1.6vw, 18px);
            color: rgba(255, 240, 220, 0.4);
            margin-top: 6px;
            letter-spacing: 6px;
            font-weight: 300;
        }
        .footer {
            position: absolute;
            bottom: 3%;
            left: 0;
            width: 100%;
            text-align: center;
            z-index: 10;
            pointer-events: none;
            font-size: clamp(10px, 1vw, 14px);
            color: rgba(255, 240, 220, 0.15);
            letter-spacing: 4px;
            font-weight: 300;
        }
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            color: rgba(255, 240, 220, 0.2);
            font-size: 14px;
            letter-spacing: 4px;
            animation: pulse 2s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes pulse {
            0%,
            100% {
                opacity: 0.2;
            }
            50% {
                opacity: 0.8;
            }
        }
        .loading.hidden {
            opacity: 0;
            transition: opacity 1s ease;
        }
        @media (max-width: 480px) {
            .title-overlay h1 {
                letter-spacing: 6px;
                padding: 4px 16px;
                font-size: clamp(22px, 8vw, 32px);
            }
            .title-overlay p {
                letter-spacing: 3px;
                font-size: 11px;
            }
        }
    </style>
</head>
<body>
    <div class="scene" id="scene">
        <canvas id="canvas"></canvas>
        <div class="loading" id="loading">✦ 秋 · 暮 ✦</div>
        <div class="title-overlay">
            <h1>秋林</h1>
            <p>暮色 · 落叶 · 流金</p>
        </div>
        <div class="footer">✦ 每一片落叶 都藏着一个故事 ✦</div>
    </div>

    <script>
        (function() {
            'use strict';

            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const loadingEl = document.getElementById('loading');

            let W, H, dpr = 1;

            function resize() {
                const rect = canvas.parentElement.getBoundingClientRect();
                W = rect.width;
                H = rect.height;
                dpr = Math.min(window.devicePixelRatio || 1, 2);
                canvas.width = W * dpr;
                canvas.height = H * dpr;
                canvas.style.width = W + 'px';
                canvas.style.height = H + 'px';
                ctx.scale(dpr, dpr);
            }

            function lerp(a, b, t) { return a + (b - a) * t; }

            function rand(min, max) { return Math.random() * (max - min) + min; }

            function randInt(min, max) { return Math.floor(rand(min, max + 1)); }

            // ---- 秋树 ----
            const TREE_COUNT = 8;

            class AutumnTree {
                constructor(x, y, scale) {
                    this.x = x;
                    this.y = y;
                    this.scale = scale || (0.7 + rand(0, 0.5));
                    this.angle = rand(-0.06, 0.06);
                    this.growth = 0;
                    this.targetGrowth = 1;
                    this.speed = 0.006 + rand(0, 0.01);
                    this.branches = [];
                    this.leaves = [];
                    this.sway = rand(0, Math.PI * 2);
                    this.swaySpeed = 0.002 + rand(0, 0.005);
                    this.swayAmp = 0.003 + rand(0, 0.005);
                    this.colorVariant = rand(0.8, 1.2);
                    this.generateBranches();
                }

                generateBranches() {
                    const depth = 5;
                    const b = { x: 0, y: 0, angle: -Math.PI / 2, length: 0.65 * this.scale, depth: 0, children: [] };
                    this.buildBranch(b, depth);
                    this.branches = this.flattenBranch(b);
                    this.collectLeaves(b);
                }

                buildBranch(parent, maxDepth) {
                    if (parent.depth >= maxDepth) return;
                    const count = parent.depth === 0 ? 2 : (Math.random() < 0.6 ? 2 : 3);
                    const spread = parent.depth < 2 ? 0.8 : 0.5 + rand(0, 0.4);
                    const lenScale = 0.7 + rand(0, 0.15);
                    for (let i = 0; i < count; i++) {
                        const dir = (i === 0 ? -1 : 1) * (0.4 + rand(0, 0.35) * spread);
                        const child = {
                            x: parent.x + Math.cos(parent.angle + dir) * parent.length,
                            y: parent.y + Math.sin(parent.angle + dir) * parent.length,
                            angle: parent.angle + dir * (0.5 + rand(0, 0.3)),
                            length: parent.length * lenScale * (0.85 + rand(0, 0.25)),
                            depth: parent.depth + 1,
                            children: []
                        };
                        parent.children.push(child);
                        this.buildBranch(child, maxDepth);
                    }
                }

                flattenBranch(node) {
                    let list = [node];
                    node.children.forEach(c => { list = list.concat(this.flattenBranch(c)); });
                    return list;
                }

                collectLeaves(node) {
                    if (node.depth >= 3 && node.length < 0.25 * this.scale) {
                        this.leaves.push({
                            x: node.x,
                            y: node.y,
                            size: 0.05 + rand(0, 0.05) * this.scale,
                            phase: rand(0, Math.PI * 2)
                        });
                    }
                    node.children.forEach(c => this.collectLeaves(c));
                }

                update(time) {
                    this.sway += this.swaySpeed;
                    const s = Math.sin(this.sway) * this.swayAmp;
                    if (this.growth < this.targetGrowth) {
                        this.growth += this.speed * (0.8 + 0.4 * Math.sin(time * 0.001 + this.x));
                        if (this.growth > this.targetGrowth) this.growth = this.targetGrowth;
                    }
                    this.branches.forEach((b, i) => {
                        const depthFactor = 1 + b.depth * 0.15;
                        b._sway = s * depthFactor * (0.5 + 0.5 * Math.sin(time * 0.0008 + i * 0.3 + this.x));
                    });
                }

                draw(ctx, time) {
                    const g = this.growth;
                    if (g < 0.001) return;

                    // 树干/枝
                    this.branches.forEach(b => {
                        const len = b.length * g * (0.85 + 0.15 * Math.sin(time * 0.001 + b.depth * 0.5 + this.x));
                        if (len < 0.003) return;
                        const angle = b.angle + (b._sway || 0);
                        const x1 = this.x + b.x * g;
                        const y1 = this.y + b.y * g;
                        const x2 = this.x + (b.x + Math.cos(angle) * len) * g;
                        const y2 = this.y + (b.y + Math.sin(angle) * len) * g;
                        const width = 0.012 * this.scale * (1 - b.depth * 0.12) * g + 0.002;
                        const alpha = 0.5 + 0.5 * (1 - b.depth / 6);
                        ctx.beginPath();
                        ctx.moveTo(x1, y1);
                        ctx.lineTo(x2, y2);
                        ctx.strokeStyle = `rgba(60, 45, 35, ${alpha * 0.9})`;
                        ctx.lineWidth = Math.max(width * dpr, 0.5);
                        ctx.lineCap = 'round';
                        ctx.stroke();
                        // 高光
                        if (b.depth < 3 && len > 0.04) {
                            ctx.beginPath();
                            ctx.moveTo(x1 + 0.004, y1 - 0.004);
                            ctx.lineTo(x2 + 0.004, y2 - 0.004);
                            ctx.strokeStyle = `rgba(120, 95, 75, ${alpha * 0.15})`;
                            ctx.lineWidth = Math.max(width * 0.3, 0.2);
                            ctx.stroke();
                        }
                    });

                    // 秋叶（金黄/橙/红）
                    this.leaves.forEach(l => {
                        const leafG = g * (0.7 + 0.3 * Math.sin(time * 0.001 + l.phase + this.x));
                        if (leafG < 0.02) return;
                        const x = this.x + l.x * g;
                        const y = this.y + l.y * g + Math.sin(time * 0.001 + l.phase + this.x) * 0.004;
                        const size = l.size * g * (0.6 + 0.4 * Math.sin(time * 0.0015 + l.phase));
                        const bright = 0.3 + 0.7 * (l.y / 0.6 + 0.5);
                        const hue = 30 + 20 * this.colorVariant + 15 * (1 - l.y / 0.6 + 0.5);
                        const sat = 0.5 + 0.3 * (1 - Math.abs(l.x / 0.5));
                        const light = 0.5 + 0.4 * bright * this.colorVariant;
                        ctx.beginPath();
                        ctx.arc(x, y, Math.max(size * dpr * 1.2, 1.2), 0, Math.PI * 2);
                        ctx.fillStyle = `hsla(${hue}, ${sat * 80}%, ${light * 60}%, ${0.5 + 0.4 * bright * this.colorVariant * g})`;
                        ctx.fill();
                        // 光晕
                        if (size > 0.02) {
                            ctx.beginPath();
                            ctx.arc(x, y, Math.max(size * dpr * 2.5, 3), 0, Math.PI * 2);
                            ctx.fillStyle = `hsla(${hue + 20}, 50%, ${light * 50}%, 0.06)`;
                            ctx.fill();
                        }
                    });
                }
            }

            // ---- 红叶（飘落） ----
            class RedLeaf {
                constructor() {
                    this.reset(true);
                }
                reset(init) {
                    this.x = rand(0, W);
                    this.y = init ? rand(0, H) : -rand(0, H * 0.4);
                    this.size = rand(10, 22) * 0.6;
                    this.angle = rand(0, Math.PI * 2);
                    this.rotSpeed = rand(-0.02, 0.02);
                    this.driftX = rand(-0.5, 0.5);
                    this.driftY = rand(0.5, 1.2);
                    this.wobble = rand(0, Math.PI * 2);
                    this.wobbleSpeed = rand(0.02, 0.06);
                    this.wobbleAmp = rand(0.8, 2.2);
                    this.color = `hsla(${randInt(10, 40)}, ${randInt(70, 95)}%, ${randInt(50, 75)}%, 0.8)`;
                    this.color2 = `hsla(${randInt(20, 50)}, ${randInt(60, 85)}%, ${randInt(40, 65)}%, 0.5)`;
                    this.phase = rand(0, Math.PI * 2);
                    this.opacity = rand(0.5, 0.9);
                }
                update() {
                    this.x += this.driftX * 0.4 + Math.sin(this.wobble) * this.wobbleAmp * 0.25;
                    this.y += this.driftY * 0.5;
                    this.angle += this.rotSpeed;
                    this.wobble += this.wobbleSpeed;
                    this.phase += 0.02;
                    if (this.y > H + 20) { this.reset(false);
                        this.y = -rand(0, 30); }
                    if (this.x < -30) this.x = W + 20;
                    if (this.x > W + 30) this.x = -20;
                }
                draw(ctx) {
                    const s = this.size * (0.85 + 0.15 * Math.sin(this.phase));
                    ctx.save();
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.angle);
                    ctx.globalAlpha = this.opacity * (0.7 + 0.3 * Math.sin(this.phase * 0.5));
                    const grad = ctx.createRadialGradient(-s * 0.2, -s * 0.2, 0, 0, 0, s * 1.2);
                    grad.addColorStop(0, this.color);
                    grad.addColorStop(0.6, this.color2);
                    grad.addColorStop(1, 'rgba(200,100,50,0)');
                    ctx.beginPath();
                    // 枫叶形状（多个椭圆模拟）
                    ctx.ellipse(0, 0, s * 0.9, s * 0.5, 0, 0, Math.PI * 2);
                    ctx.fillStyle = grad;
                    ctx.fill();
                    // 叶脉线
                    ctx.globalAlpha *= 0.15;
                    ctx.beginPath();
                    ctx.moveTo(-s * 0.3, -s * 0.1);
                    ctx.quadraticCurveTo(0, -s * 0.3, s * 0.3, -s * 0.1);
                    ctx.strokeStyle = 'rgba(100,60,30,0.3)';
                    ctx.lineWidth = 0.5;
                    ctx.stroke();
                    ctx.restore();
                    ctx.globalAlpha = 1;
                }
            }

            // ---- 云朵 ----
            class Cloud {
                constructor() {
                    this.x = rand(-W * 0.2, W * 1.2);
                    this.y = rand(0, H * 0.45);
                    this.w = rand(80, 200) * 0.8;
                    this.h = rand(20, 50) * 0.8;
                    this.speed = rand(0.1, 0.4);
                    this.opacity = rand(0.08, 0.25);
                    this.phase = rand(0, Math.PI * 2);
                }
                update() {
                    this.x += this.speed * 0.5;
                    this.y += Math.sin(this.phase) * 0.02;
                    this.phase += 0.005;
                    if (this.x > W + this.w) this.x = -this.w * 1.5;
                }
                draw(ctx) {
                    const grad = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.w);
                    grad.addColorStop(0, `rgba(255, 220, 190, ${this.opacity * 1.2})`);
                    grad.addColorStop(0.6, `rgba(255, 200, 170, ${this.opacity * 0.8})`);
                    grad.addColorStop(1, 'rgba(255,200,170,0)');
                    ctx.fillStyle = grad;
                    ctx.beginPath();
                    ctx.ellipse(this.x, this.y, this.w, this.h, 0, 0, Math.PI * 2);
                    ctx.fill();
                    // 副云
                    ctx.beginPath();
                    ctx.ellipse(this.x - this.w * 0.4, this.y - this.h * 0.3, this.w * 0.6, this.h * 0.7, 0, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.ellipse(this.x + this.w * 0.5, this.y + this.h * 0.2, this.w * 0.5, this.h * 0.6, 0, 0, Math.PI * 2);
                    ctx.fill();
                }
            }

            // ---- 水面波光 ----
            class WaterRipple {
                constructor() {
                    this.x = rand(0, W);
                    this.y = rand(H * 0.75, H * 0.92);
                    this.radius = rand(2, 8);
                    this.life = 0;
                    this.maxLife = rand(80, 200);
                    this.speed = rand(0.01, 0.03);
                }
                update() {
                    this.life++;
                    this.radius += 0.02;
                }
                isDead() { return this.life > this.maxLife; }
                draw(ctx) {
                    const alpha = 1 - this.life / this.maxLife;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(255, 200, 120, ${alpha * 0.2})`;
                    ctx.lineWidth = 1.2;
                    ctx.stroke();
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius * 0.6, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(255, 220, 160, ${alpha * 0.15})`;
                    ctx.lineWidth = 0.8;
                    ctx.stroke();
                }
            }

            // ---- 初始化 ----
            let trees = [];
            let leaves = [];
            let clouds = [];
            let ripples = [];
            let time = 0;
            let frameId = null;

            function initScene() {
                trees = [];
                leaves = [];
                clouds = [];
                ripples = [];

                for (let i = 0; i < TREE_COUNT; i++) {
                    const x = W * (0.08 + (i + 0.5) / (TREE_COUNT + 1) * 0.84);
                    const y = H * (0.55 + rand(0, 0.2));
                    const scale = 0.7 + rand(0, 0.7) * (1 + 0.2 * (i % 3 === 0 ? 1 : 0));
                    const tree = new AutumnTree(x, y, scale);
                    tree.growth = rand(0, 0.3);
                    tree.targetGrowth = 1;
                    tree.speed = 0.005 + rand(0, 0.008);
                    trees.push(tree);
                }

                for (let i = 0; i < 50; i++) leaves.push(new RedLeaf());
                for (let i = 0; i < 8; i++) clouds.push(new Cloud());
                // 初始涟漪
                for (let i = 0; i < 10; i++) {
                    const r = new WaterRipple();
                    r.life = rand(0, r.maxLife);
                    ripples.push(r);
                }

                setTimeout(() => loadingEl.classList.add('hidden'), 400);
            }

            // ---- 背景绘制 ----
            function drawBackground(time) {
                const grad = ctx.createLinearGradient(0, 0, 0, H);
                grad.addColorStop(0, `rgb(60, 30, 15)`);
                grad.addColorStop(0.25, `rgb(100, 50, 25)`);
                grad.addColorStop(0.5, `rgb(150, 85, 45)`);
                grad.addColorStop(0.7, `rgb(190, 130, 70)`);
                grad.addColorStop(0.85, `rgb(220, 180, 110)`);
                grad.addColorStop(1, `rgb(240, 215, 170)`);
                ctx.fillStyle = grad;
                ctx.fillRect(0, 0, W, H);

                // 太阳光晕
                const cx = W * 0.7 + Math.sin(time * 0.00005) * 30;
                const cy = H * 0.2 + Math.sin(time * 0.00003) * 15;
                const grad2 = ctx.createRadialGradient(cx, cy, 0, cx, cy, H * 0.6);
                grad2.addColorStop(0, `rgba(255, 200, 120, 0.15)`);
                grad2.addColorStop(0.3, `rgba(255, 180, 100, 0.10)`);
                grad2.addColorStop(0.7, `rgba(200, 150, 80, 0.05)`);
                grad2.addColorStop(1, 'rgba(200,150,80,0)');
                ctx.fillStyle = grad2;
                ctx.fillRect(0, 0, W, H);

                // 远山
                for (let layer = 0; layer < 3; layer++) {
                    const yBase = H * (0.3 + layer * 0.15);
                    const amp = 20 + layer * 30;
                    const freq = 0.003 + layer * 0.002;
                    const alpha = 0.05 + layer * 0.04;
                    ctx.beginPath();
                    ctx.moveTo(0, H);
                    for (let x = 0; x <= W; x += 2) {
                        const y = yBase + Math.sin(x * freq + time * 0.0001 * (1 + layer * 0.3)) * amp +
                            Math.sin(x * freq * 2.1 + time * 0.00007) * amp * 0.4;
                        ctx.lineTo(x, y);
                    }
                    ctx.lineTo(W, H);
                    ctx.closePath();
                    ctx.fillStyle = `rgba(120, 80, 50, ${alpha})`;
                    ctx.fill();
                }

                // 水面
                const waterY = H * 0.78;
                const grad3 = ctx.createLinearGradient(0, waterY, 0, H);
                grad3.addColorStop(0, `rgba(160, 120, 80, 0.25)`);
                grad3.addColorStop(0.5, `rgba(180, 140, 100, 0.15)`);
                grad3.addColorStop(1, `rgba(200, 160, 120, 0.08)`);
                ctx.fillStyle = grad3;
                ctx.beginPath();
                ctx.moveTo(0, waterY);
                for (let x = 0; x <= W; x += 2) {
                    const y = waterY + Math.sin(x * 0.02 + time * 0.0002) * 2 + Math.sin(x * 0.03 + time * 0.00015) * 1.5;
                    ctx.lineTo(x, y);
                }
                ctx.lineTo(W, H);
                ctx.lineTo(0, H);
                ctx.closePath();
                ctx.fill();
            }

            // ---- 主循环 ----
            function render() {
                time++;
                ctx.clearRect(0, 0, W, H);
                drawBackground(time);

                // 云
                clouds.forEach(c => { c.update();
                    c.draw(ctx); });

                // 树
                trees.forEach(t => t.update(time));
                const sorted = [...trees].sort((a, b) => a.y - b.y);
                sorted.forEach(t => t.draw(ctx, time));

                // 落叶
                leaves.forEach(l => { l.update();
                    l.draw(ctx); });

                // 水面涟漪
                if (time % 3 === 0 && ripples.length < 30) {
                    const r = new WaterRipple();
                    r.x = rand(0, W);
                    r.y = rand(H * 0.78, H * 0.92);
                    ripples.push(r);
                }
                ripples.forEach(r => { r.update();
                    r.draw(ctx); });
                ripples = ripples.filter(r => !r.isDead());

                // 前景光晕
                for (let i = 0; i < 3; i++) {
                    const x = W * (0.15 + i * 0.35) + Math.sin(time * 0.00015 + i * 2) * 60;
                    const y = H * (0.6 + i * 0.1) + Math.cos(time * 0.0001 + i * 1.5) * 30;
                    const r = 80 + 30 * Math.sin(time * 0.0001 + i);
                    const grad = ctx.createRadialGradient(x, y, 0, x, y, r);
                    grad.addColorStop(0, `rgba(255, 200, 150, ${0.01 + 0.01 * Math.sin(time * 0.0002 + i)})`);
                    grad.addColorStop(1, 'rgba(255,200,150,0)');
                    ctx.fillStyle = grad;
                    ctx.fillRect(x - r, y - r, r * 2, r * 2);
                }

                frameId = requestAnimationFrame(render);
            }

            // ---- 响应 ----
            function onResize() {
                resize();
                trees.forEach((tree, i) => {
                    tree.x = W * (0.08 + (i + 0.5) / (TREE_COUNT + 1) * 0.84);
                    tree.y = H * (0.55 + (i % 3) * 0.06 + 0.05);
                });
                leaves.forEach(l => { l.x = Math.min(l.x, W);
                    l.y = Math.min(l.y, H); });
                clouds.forEach(c => { c.x = Math.min(c.x, W * 1.2); });
            }

            function init() {
                resize();
                initScene();
                render();
                window.addEventListener('resize', onResize);
                let timer;
                window.addEventListener('resize', () => { clearTimeout(timer);
                    timer = setTimeout(onResize, 200); });
            }

            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    if (frameId) { cancelAnimationFrame(frameId);
                        frameId = null; }
                } else {
                    if (!frameId) render();
                }
            });

            if (document.readyState === 'complete') init();
            else window.addEventListener('load', init);
        })();
    </script>
</body>
</html>