window.sketch = (runtime) => {
  const { c2, canvas, startFrame } = runtime;
  const renderer = new c2.Renderer(canvas);

  // Easing function for smoother animations
  const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;

  startFrame((frameCount) => {
    renderer.clear('#0a0a0a');

    // Sky with smoke and fire glow (using solid colors and overlays)
    // Base sky
    renderer.fill('#1a0500');
    renderer.rect(0, 0, canvas.width, canvas.height);

    // Smoke layer (semi-transparent black with movement)
    const smokeAlpha = 0.3 + Math.sin(frameCount * 0.01) * 0.1;
    renderer.fill(`rgba(20, 20, 20, ${smokeAlpha})`);
    renderer.rect(0, 0, canvas.width, canvas.height * 0.6);

    // Fire glow at horizon
    const fireGlowHeight = canvas.height * 0.2;
    const fireGlowY = canvas.height - fireGlowHeight;
    renderer.fill('#4a1a00');
    renderer.rect(0, fireGlowY, canvas.width, fireGlowHeight);

    // Distant explosions (pulsing)
    const explosionCount = 5;
    for (let i = 0; i < explosionCount; i++) {
      const x = (i + 0.5) * (canvas.width / explosionCount);
      const y = canvas.height * 0.3 + Math.sin(frameCount * 0.05 + i) * 20;
      const size = 40 + Math.sin(frameCount * 0.1 + i * 0.7) * 20;
      const alpha = 0.5 + Math.sin(frameCount * 0.2 + i) * 0.3;
      renderer.alpha(alpha);
      renderer.fill(`hsl(${10 + i * 5}, 100%, 50%)`);
      renderer.circle(x, y, size);
    }
    renderer.alpha(1);

    // Smoke plumes (drifting upward)
    const smokePlumes = 8;
    for (let i = 0; i < smokePlumes; i++) {
      const x = (i + 0.5) * (canvas.width / smokePlumes);
      const baseY = canvas.height * 0.7;
      const height = canvas.height * 0.2;
      const offset = Math.sin(frameCount * 0.03 + i) * 10;
      const points = [
        { x: x - 20 + offset, y: baseY },
        { x: x - 30 + offset, y: baseY - height * 0.3 },
        { x: x - 10 + offset, y: baseY - height * 0.6 },
        { x: x + 10 + offset, y: baseY - height * 0.4 },
        { x: x + 20 + offset, y: baseY - height * 0.1 },
        { x: x + 30 + offset, y: baseY }
      ];
      renderer.fill('rgba(30, 30, 30, 0.4)');
      renderer.polygon(points);
    }

    // Burning skyscrapers (silhouettes with fire)
    const buildingCount = 10;
    for (let i = 0; i < buildingCount; i++) {
      const x = (i + 0.5) * (canvas.width / buildingCount);
      const width = 10 + Math.random() * 30;
      const height = canvas.height * (0.4 + Math.random() * 0.3);
      const baseY = canvas.height - height;

      // Building silhouette (charred)
      renderer.fill('#1a1a1a');
      renderer.rect(x - width/2, baseY, width, height);

      // Windows with fire glow
      const windowRows = 8 + Math.floor(Math.random() * 5);
      const windowCols = 2 + Math.floor(Math.random() * 3);
      for (let r = 0; r < windowRows; r++) {
        for (let c = 0; c < windowCols; c++) {
          const winX = x - width/2 + (c + 0.5) * (width / windowCols);
          const winY = baseY + (r + 0.5) * (height / windowRows);
          const winSize = 2 + Math.random() * 3;
          const flicker = Math.sin(frameCount * 0.5 + r + c) * 0.5 + 0.5;
          renderer.fill(`rgba(255, ${100 + flicker * 155}, 0, ${0.3 + flicker * 0.5})`);
          renderer.rect(winX - winSize/2, winY - winSize/2, winSize, winSize);
        }
      }

      // Fire licking up the sides
      const flameHeight = height * (0.3 + Math.sin(frameCount * 0.1 + i) * 0.1);
      renderer.fill(`rgba(255, ${100 + Math.sin(frameCount * 0.2) * 55}, 0, 0.6)`);
      renderer.rect(x - width/2 - 5, baseY - flameHeight, 5, flameHeight);
      renderer.rect(x + width/2, baseY - flameHeight, 5, flameHeight);
    }

    // Molten fire rivers (flowing down facades)
    for (let i = 0; i < buildingCount; i += 2) {
      const x = (i + 0.5) * (canvas.width / buildingCount);
      const width = 8 + Math.random() * 12;
      const startY = canvas.height * 0.3;
      const endY = canvas.height * 0.8;
      const flowOffset = (frameCount * 0.05) % 1;

      // Wavy fire river
      const points = [];
      for (let t = 0; t <= 1; t += 0.05) {
        const y = startY + (endY - startY) * t;
        const wave = Math.sin(t * 10 + flowOffset * 2) * width * 0.3;
        points.push({ x: x + wave, y });
      }
      renderer.fill(`rgba(255, ${150 + Math.sin(frameCount * 0.3) * 50}, 0, 0.7)`);
      renderer.polygon(points);
    }

    // Embers floating upward
    const emberCount = 30;
    for (let i = 0; i < emberCount; i++) {
      const progress = ((frameCount + i * 100) % 200) / 200;
      const x = (i % 10) * (canvas.width / 10) + (Math.sin(frameCount * 0.1 + i) - 0.5) * 20;
      const y = canvas.height - (progress * canvas.height * 0.7);
      const size = 1 + Math.random() * 3;
      const alpha = 1 - progress;
      const hue = 10 + Math.sin(frameCount * 0.05 + i) * 20;
      renderer.alpha(alpha);
      renderer.fill(`hsl(${hue}, 100%, ${50 + progress * 30}%)`);
      renderer.circle(x, y, size);
    }
    renderer.alpha(1);

    // Heat distortion effect (subtle waves)
    renderer.fill('rgba(255, 100, 0, 0.05)');
    for (let i = 0; i < 5; i++) {
      const x = (i + 0.5) * (canvas.width / 5);
      const y = canvas.height * 0.5 + Math.sin(frameCount * 0.02 + i) * 30;
      renderer.circle(x, y, canvas.width * 0.1);
    }
  });
};
