Pinly – Product Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinly – Product Demo</title>
<link rel="icon" type="image/png" href="images/animationimages/favicon48.png">
<style>
  @font-face {
  font-family: 'RadioCanada';
  src: url('fonts/RadioCanada-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }

.large-layer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 60px;
    text-align: center;
    width: 80%;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    z-index: 2;
    font-family: 'RadioCanada', arial, sans-serif;
  }

body {
    background: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'RadioCanada', arial, sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    padding-top: 20px;
  }

/* Block all pointer interaction on the animation scene, but keep real cursor visible */

/* ── Background image grid ── */
  .bg-grid {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 0 12px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    align-items: start;
    opacity: 0;
    transition: opacity 2s ease;
  }

@media (max-width: 1024px) {
    .bg-grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 768px) {
    .bg-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 600px) {
    .bg-grid { grid-template-columns: repeat(3, 1fr); }
  }

.bg-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

@keyframes scrollDown {
    from { transform: translateY(0); }
    to   { transform: translateY(50%); }
  }

.bg-img {
    width: 100%;
    border-radius: 6px;
    flex-shrink: 0;
  }

/* ── Outer frame ── */
  .scene {
    position: relative;
    width: 380px;
    z-index: 1;
    pointer-events: none;
  }

.label {
    text-align: center;
    color: #555;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-weight: 300;
  }

/* ── Chrome extension popup shell ── */
  /* ── Floating icon above popup ── */
  .popup-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 20px;
    top: -32px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
  }

.popup {
    width: 360px;
    height: 600px;
    background: #222;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 8px 20px rgba(0,0,0,.6),
      0 0 40px 20px rgba(255,255,255,0.4),
      0 0 80px 40px rgba(255,255,255,0.2);
    margin: 0 auto;
  }

/* ── Top bar ── */
  .top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45px;
    background: #222;
    border-bottom: 1px solid #2f2f2f;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }

.pinly-logo {
    font-size: 26px;
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.5px;
    font-style: normal;
    line-height: 1;
  }

/* ── Middle scroll area ── */
  .middle {
    position: absolute;
    top: 45px; left: 0; right: 0;
    bottom: 61px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 11px;
    gap: 0;
  }

/* ── Moodboard card ── */
  .card {
    width: 325px;
    height: 230px;
    background: #2a2a2a;
    border-radius: 8px;
    border: 1px solid #2f2f2f;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 11px;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

.card.quickdrop-active {
    border: 2px solid #666666;
  }

.card.hovered {
    background: #333;
    border-color: #444;
  }

.card.quickdrop-active.hovered {
    border-color: #666666;
  }

.card-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #757575;
    font-size: 20px;
    white-space: nowrap;
    z-index: 25;
    font-family: arial, sans-serif;
    transition: opacity 0.4s ease, color 0.4s ease;
  }

/* ── Bottom bar ── */
  .bottom-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 61px;
    background: #2a2a2a;
    border-top: 1px solid #2f2f2f;
    box-shadow: 0 -6px 16px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    z-index: 100;
  }

.btn-add {
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    transition: color 0.25s;
  }
  .btn-add.active { color: #fff; }
  .btn-add.hover { color: #fff; }

.btn-info {
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 26px;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.25s;
  }

/* ── Input box overlay ── */
  .input-box {
    position: absolute;
    top: 49%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 300px;
    background: #181818;
    border: 1px solid #2f2f2f;
    border-radius: 4px;
    padding: 10px;
    font-size: 20px;
    color: #fff;
    font-family: arial, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .input-box.visible { opacity: 1; pointer-events: auto; }

/* ── Context menu ── */
  .context-menu {
    position: absolute;
    background: #333;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    width: 115px;
    z-index: 300;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9);
    transform-origin: top left;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }
  .context-menu.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  .context-menu ul { list-style: none; }
  .context-menu li {
    padding: 8px 12px;
    color: #e6e6e6;
    font-size: 13px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.15s;
    white-space: nowrap;
  }
  .context-menu li.highlight {
    background: #555;
    color: #fff;
  }

/* ── Cursor ── */
  .cursor {
    position: fixed;
    width: 20px; height: 20px;
    pointer-events: none;
    z-index: 99999;
    transition: left 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
                top 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
    display: none;
  }

/* ── Image tiles inside card ── */
  .tile {
    position: absolute;
    border-radius: 5px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .tile.shown {
    opacity: 1;
    transform: scale(1);
  }

/* ── Quick Drop + overlay ── */
  .qd-overlay {
    position: fixed;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
  }
  .qd-overlay.visible { opacity: 1; }
  .qd-overlay.clicked { transform: rotate(90deg); }

/* ── Image added to card ── */
  .card-thumb {
    position: absolute;
    border-radius: 4px;
    background: #b8c9a8;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .card-thumb.shown {
    opacity: 1;
    transform: scale(1);
  }
  .qd-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: #a99fec;
    color: white;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 99px;
    letter-spacing: 0.05em;
    z-index: 20;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .qd-badge.visible {
    opacity: 1;
    transform: translateY(0);
  }

/* ── Step caption ── */
  .caption {
    position: absolute;
    bottom: 70px; left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 99px;
    white-space: nowrap;
    z-index: 400;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    font-weight: 300;
  }
  .caption.visible { opacity: 1; }

/* ── Ripple click feedback ── */
  .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    width: 30px; height: 30px;
    transform: scale(0);
    z-index: 500;
    pointer-events: none;
    animation: rippleAnim 0.5s ease-out forwards;
  }
  @keyframes rippleAnim {
    to { transform: scale(3); opacity: 0; }
  }

/* ── Expanded canvas view ── */
  .expanded-view {
    position: fixed;
    background: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.8);
    z-index: 500;
    overflow: hidden;
    pointer-events: none;
    transition: left 0.6s cubic-bezier(0.4,0,0.2,1),
                top 0.6s cubic-bezier(0.4,0,0.2,1),
                width 0.6s cubic-bezier(0.4,0,0.2,1),
                height 0.6s cubic-bezier(0.4,0,0.2,1),
                border-radius 0.6s cubic-bezier(0.4,0,0.2,1),
                opacity 0.4s ease;
  }

.expanded-titlebar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 72px;
    background: #2a2a2a;
    display: flex;
    flex-direction: column;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .expanded-titlebar.visible { opacity: 1; }

/* ── Tab row ── */
  .titlebar-tabrow {
    height: 36px;
    display: flex;
    align-items: flex-end;
    padding: 0 0 0 0;
    gap: 0;
    flex-shrink: 0;
    background: #1a1a1a;
  }
  /* Dots area — same dark bg as inactive zone */
  .titlebar-dots {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 0 14px 6px 14px;
    background: #1a1a1a;
    height: 100%;
  }
  .titlebar-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .dot-red    { background: #ed6a5e; }
  .dot-yellow { background: #f4bf4e; }
  .dot-green  { background: #61c654; }

/* Active tab — same color as address bar container (#2a2a2a) */
  .titlebar-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px 0 10px;
    background: #2a2a2a;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    white-space: nowrap;
    min-width: 160px;
    max-width: 220px;
    position: relative;
  }
  .titlebar-tab-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    opacity: 0.9;
  }
  .titlebar-tab-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: arial, sans-serif;
  }
  .titlebar-tab-close {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
  }
  /* New tab + — same dark inactive bg, aligned to tab bottom */
  .titlebar-newtab {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 0 10px 6px 8px;
    color: rgba(255,255,255,0.2);
    font-size: 16px;
    background: #1a1a1a;
    line-height: 1;
  }

/* ── Address bar row ── */
  .titlebar-addrrow {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px 0 6px;
    gap: 2px;
    flex-shrink: 0;
    background: #2a2a2a;
  }
  .titlebar-navbtn {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 17px;
    flex-shrink: 0;
  }
  .titlebar-addressbar {
    flex: 1;
    height: 24px;
    background: #333;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
    min-width: 0;
    margin-left: 6px;
    margin-right: 4px;
  }
  .titlebar-addressbar-text {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: left;
  }
  .titlebar-favicon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-left: 10px;
    margin-right: 10px;
  }

.expanded-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

.expanded-thumb {
    position: absolute;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .expanded-thumb.shown { opacity: 1; }
  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 1s ease, transform 1.2s ease;
    pointer-events: none;
  }
  canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

</style>
</head>
<body>

<div class="bg-grid" id="bgGrid"></div>

<img src="images/animationimages/favicon48.png" class="popup-icon" alt="pinly">

<div class="top-bar">
      <span class="pinly-logo">pinly</span>
    </div>

<div class="middle" id="middle">
      
    </div>

<input class="input-box" id="inputBox" value="" readonly>

<div class="context-menu" id="ctxMenu">
      <ul>
        <li>Move Up</li>
        <li>Move Down</li>
        <li id="qdItem">Quick Drop</li>
        <li>Rename Canvas</li>
        <li>Delete Canvas</li>
      </ul>
    </div>

<div class="bottom-bar">
      <button class="btn-add" id="addBtn">+</button>
      <button class="btn-info">i</button>
    </div>

<div class="caption" id="caption"></div>

<div class="qd-overlay" id="qdOverlay">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="pointer-events:none;">
        <line x1="8" y1="2" x2="8" y2="14" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="2" y1="8" x2="14" y2="8" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
      </svg>
    </div>

</div>

<svg class="cursor" id="cursor" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 2L16 10L9.5 11.5L7 18L4 2Z" fill="white" stroke="#333" stroke-width="0.8"/>
</svg>

</div>

// Preload all images and get their natural dimensions
  Promise.all(BG_IMGS.map(src => new Promise(resolve => {
    const img = new Image();
    img.onload  = () => resolve({ src, w: img.naturalWidth,  h: img.naturalHeight });
    img.onerror = () => resolve({ src, w: 1, h: 1 });
    img.src = src;
  }))).then(imgInfos => {

// Column width: equal share of viewport minus padding and gaps
    const totalGap = GAP * (NUM_COLS + 1);
    const colWidth = Math.floor((window.innerWidth - totalGap) / NUM_COLS);

// Fisher-Yates shuffle
    function shuffle(arr) {
      const a = arr.slice();
      for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
      }
      return a;
    }

// Round-robin interleave: assign images slot by slot across columns.
    // Column 0 is restricted to images 1–15; columns 1–4 draw from all 33.
    // Reshuffle whenever the pool is exhausted so repeats land unpredictably.
    // Constraint: same image never appears within 3 positions in a column.
    const col0Imgs = imgInfos.filter(info => {
      const num = parseInt((info.src.match(/image(\d+)\.png/) || [])[1] || '99', 10);
      return num >= 1 && num <= 15;
    });
    const colArrays = Array.from({ length: NUM_COLS }, () => []);
    const targetPerCol = imgInfos.length;

// Pick next image from pool ensuring min gap of 3 from recent images in the column
    function pickWithGap(pool, poolIdx, colArr, minGap) {
      const recent = colArr.slice(-minGap).map(x => x.src);
      // Try from current position forward
      for (let tries = 0; tries < pool.length; tries++) {
        const idx = (poolIdx + tries) % pool.length;
        if (!recent.includes(pool[idx].src)) {
          return { item: pool[idx], newIdx: idx + 1 };
        }
      }
      // Fallback: just take current (shouldn't happen with 33 images and gap 3)
      return { item: pool[poolIdx % pool.length], newIdx: poolIdx + 1 };
    }

// Fill column 0 from restricted pool (images 1–15 only)
    let pool0 = shuffle(col0Imgs), pool0Idx = 0;
    for (let i = 0; i < targetPerCol; i++) {
      if (pool0Idx >= pool0.length) { pool0 = shuffle(col0Imgs); pool0Idx = 0; }
      const pick = pickWithGap(pool0, pool0Idx, colArrays[0], 3);
      colArrays[0].push(pick.item);
      pool0Idx = pick.newIdx;
      if (pool0Idx >= pool0.length) { pool0 = shuffle(col0Imgs); pool0Idx = 0; }
    }

// Fill columns 1–4 round-robin from the full pool
    let pool = shuffle(imgInfos);
    let poolIdx = 0;
    for (let slot = 0; slot < (NUM_COLS - 1) * targetPerCol; slot++) {
      if (poolIdx >= pool.length) { pool = shuffle(imgInfos); poolIdx = 0; }
      const colTarget = 1 + (slot % (NUM_COLS - 1));
      const pick = pickWithGap(pool, poolIdx, colArrays[colTarget], 3);
      colArrays[colTarget].push(pick.item);
      poolIdx = pick.newIdx;
      if (poolIdx >= pool.length) { pool = shuffle(imgInfos); poolIdx = 0; }
    }

// ── Cross-column neighbor dedup ──
    // Ensure no image has the same image adjacent in any direction (left, right,
    // up-left, up-right, down-left, down-right) across neighbouring columns.
    // Since columns can have different lengths, we compare by index position.
    // Multiple passes to resolve cascading conflicts.
    for (let pass = 0; pass < 5; pass++) {
      let swapped = false;
      for (let c = 0; c < NUM_COLS; c++) {
        const col = colArrays[c];
        for (let r = 0; r < col.length; r++) {
          const src = col[r].src;
          // Check neighbours in adjacent columns at rows r-1, r, r+1
          const adjCols = [];
          if (c > 0) adjCols.push(colArrays[c - 1]);
          if (c < NUM_COLS - 1) adjCols.push(colArrays[c + 1]);
          let conflict = false;
          for (const adj of adjCols) {
            for (let dr = -1; dr <= 1; dr++) {
              const nr = r + dr;
              if (nr >= 0 && nr < adj.length && adj[nr].src === src) {
                conflict = true;
                break;
              }
            }
            if (conflict) break;
          }
          if (!conflict) continue;
          // Try swapping with another position in the same column (gap ≥ 3 away)
          for (let s = 0; s < col.length; s++) {
            if (Math.abs(s - r) < 3) continue; // respect within-column gap
            // Check that swapping won't create new conflicts for either position
            const sSrc = col[s].src;
            if (sSrc === src) continue;
            // Verify s-position with r's neighbours
            let sOkAtR = true;
            for (const adj of adjCols) {
              for (let dr = -1; dr <= 1; dr++) {
                const nr = r + dr;
                if (nr >= 0 && nr < adj.length && adj[nr].src === sSrc) { sOkAtR = false; break; }
              }
              if (!sOkAtR) break;
            }
            // Also check within-column neighbours at r
            if (sOkAtR && r > 0 && col[r - 1].src === sSrc) sOkAtR = false;
            if (sOkAtR && r < col.length - 1 && col[r + 1].src === sSrc) sOkAtR = false;

if (!sOkAtR) continue;

// Verify r-src at s-position won't conflict
            let rOkAtS = true;
            const sAdjCols = [];
            if (c > 0) sAdjCols.push(colArrays[c - 1]);
            if (c < NUM_COLS - 1) sAdjCols.push(colArrays[c + 1]);
            for (const adj of sAdjCols) {
              for (let dr = -1; dr <= 1; dr++) {
                const nr = s + dr;
                if (nr >= 0 && nr < adj.length && adj[nr].src === src) { rOkAtS = false; break; }
              }
              if (!rOkAtS) break;
            }
            if (rOkAtS && s > 0 && col[s - 1].src === src) rOkAtS = false;
            if (rOkAtS && s < col.length - 1 && col[s + 1].src === src) rOkAtS = false;

if (rOkAtS) {
              [col[r], col[s]] = [col[s], col[r]];
              swapped = true;
              break;
            }
          }
        }
      }
      if (!swapped) break; // No conflicts remain
    }

for (let colIdx = 0; colIdx < NUM_COLS; colIdx++) {
      const cell = document.createElement('div');
      cell.style.cssText = 'overflow:hidden; position:relative;';

const colImgs = colArrays[colIdx];

// Ensure gap of 3 at strip wrap-around (last images don't match first images)
      // Swap offending tail items with something from the middle
      for (let g = 0; g < 3 && g < colImgs.length - 3; g++) {
        for (let t = 0; t < 3; t++) {
          const tailIdx = colImgs.length - 1 - t;
          if (colImgs[tailIdx].src === colImgs[g].src) {
            // Swap with an item from the middle that won't violate the constraint
            for (let m = 3; m < colImgs.length - 3; m++) {
              const nearby = [colImgs[m-1], colImgs[m+1], colImgs[tailIdx-1], colImgs[Math.min(tailIdx+1, colImgs.length-1)]];
              if (!nearby.some(n => n && n.src === colImgs[tailIdx].src) &&
                  !nearby.some(n => n && n.src === colImgs[g].src)) {
                [colImgs[tailIdx], colImgs[m]] = [colImgs[m], colImgs[tailIdx]];
                break;
              }
            }
          }
        }
      }

// Build one full strip using this column's unique image sequence
      function makeStrip(imgs) {
        const strip = document.createElement('div');
        strip.style.cssText = `display:flex; flex-direction:column; gap:${GAP}px;`;
        for (let i = 0; i < imgs.length; i++) {
          const info = imgs[i];
          const naturalH = Math.round(colWidth * info.h / info.w);
          const el = document.createElement('img');
          el.className = 'bg-img';
          el.src = info.src;
          // width:100% fills column, height derived from natural ratio — no cropping
          el.style.cssText = `width:100%; height:${naturalH}px; display:block; border-radius:6px; object-fit:fill;`;
          el.draggable = false;
          strip.appendChild(el);
        }
        return strip;
      }

// Compute strip height from natural ratios so the loop keyframe is exact
      let stripHeight = 0;
      for (let i = 0; i < colImgs.length; i++) {
        stripHeight += Math.round(colWidth * colImgs[i].h / colImgs[i].w) + GAP;
      }

// Wrapper with enough strips to fill viewport × 3
      const wrapper = document.createElement('div');
      wrapper.style.cssText = `display:flex; flex-direction:column; gap:${GAP}px; will-change:transform;`;

const numStrips = Math.ceil((window.innerHeight * 3) / stripHeight) + 2;
      for (let s = 0; s < numStrips; s++) {
        wrapper.appendChild(makeStrip(colImgs));
      }

// Keyframe: scroll down by exactly one strip height for seamless loop
      const kfName = `scrollCol${colIdx}`;
      const styleEl = document.createElement('style');
      styleEl.textContent = `@keyframes ${kfName} {
        from { transform: translateY(0); }
        to   { transform: translateY(${stripHeight + GAP}px); }
      }`;
      document.head.appendChild(styleEl);

// Start 1.5 strips above viewport so images fill screen immediately
      wrapper.style.marginTop = -(stripHeight * 1.5) + 'px';
      const SPEED_PX_PER_S = 50;
      const duration = stripHeight / SPEED_PX_PER_S;
      wrapper.style.animation = `${kfName} ${duration.toFixed(2)}s linear infinite`;
      wrapper.style.animationPlayState = 'paused';

cell.appendChild(wrapper);
      grid.appendChild(cell);
    }
  });
})();
</script>

// ─────────────────────────────────────────────
// Scrubber
// ─────────────────────────────────────────────
let _currentStep = 0;
let _skipTarget = -1;          // step we're skipping TO
let _skipCallbacks = [];

function setActiveStep(i) {
  _currentStep = i;
  // If we've reached the skip target, stop skipping
  if (_currentStep >= _skipTarget) _skipTarget = -1;
  for (let s = 0; s <= 4; s++) {
    const dot   = document.getElementById('sdot-' + s);
    const label = document.getElementById('slabel-' + s);
    if (!dot) continue;
    dot.classList.toggle('active', s === i);
    label.classList.toggle('active', s === i);
  }
}

function onSkipTo(cb) {
  _skipCallbacks.push(cb);
}

function triggerSkip(clickedStep) {
  _skipTarget = clickedStep;
  // Drain ALL pending sleep callbacks immediately
  const cbs = _skipCallbacks.splice(0);
  cbs.forEach(cb => cb());
}

function setStep(i) { setActiveStep(i); }

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

// Move cursor using popup-relative coords (for steps inside popup)
function moveCursor(x, y, duration = 600) {
  const rect = popup.getBoundingClientRect();
  cursor.style.left = (rect.left + x) + 'px';
  cursor.style.top  = (rect.top  + y) + 'px';
  cursor.style.transition = `left ${duration}ms cubic-bezier(0.25,0.46,0.45,0.94), top ${duration}ms cubic-bezier(0.25,0.46,0.45,0.94)`;
}

// Move cursor using fixed viewport coords (for steps outside popup)
function moveFixedCursor(vx, vy, duration = 600) {
  cursor.style.left = vx + 'px';
  cursor.style.top  = vy + 'px';
  cursor.style.transition = `left ${duration}ms cubic-bezier(0.25,0.46,0.45,0.94), top ${duration}ms cubic-bezier(0.25,0.46,0.45,0.94)`;
}

function showCaption(text) {
  caption.textContent = text;
  caption.classList.add('visible');
}
function hideCaption() {
  caption.classList.remove('visible');
}

function spawnRipple(x, y) {
  const r = document.createElement('div');
  r.className = 'ripple';
  r.style.position = 'fixed';
  r.style.left = (x - 15) + 'px';
  r.style.top  = (y - 15) + 'px';
  document.body.appendChild(r);
  setTimeout(() => r.remove(), 600);
}

// ─────────────────────────────────────────────
// Canvas thumbnail painter  (smooth color blobs)
// ─────────────────────────────────────────────
function makeCanvas(card) {
  const cnv = document.createElement('canvas');
  cnv.width = 325 * 2;
  cnv.height = 230 * 2;
  cnv.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border-radius:8px;opacity:0;transition:opacity 0.5s ease;z-index:15;';
  card.appendChild(cnv);
  return cnv;
}

// ── Image pool — add image11.png, image12.png … here to expand ──
const IMG_POOL = Array.from({length: 33}, (_, i) => `images/animationimages/image${i + 1}.png`);

// Preload all pool images
const _imgCache = {};
IMG_POOL.forEach(src => {
  const im = new Image(); im.src = src; _imgCache[src] = im;
});

// Return a pool image src by cycling index
function poolImg(idx) {
  return IMG_POOL[((idx % IMG_POOL.length) + IMG_POOL.length) % IMG_POOL.length];
}

// Draw a pool image onto ctx, preserving natural aspect ratio (contain/letterbox) with rounded corners
function drawPoolImgContain(ctx, src, x, y, w, h, radius) {
  radius = radius || 4;
  return new Promise(function(resolve) {
    const img = _imgCache[src] || new Image();
    if (!_imgCache[src]) { _imgCache[src] = img; img.src = src; }
    function paint() {
      ctx.save();
      ctx.beginPath();
      ctx.roundRect(x, y, w, h, Math.min(radius, w / 4, h / 4));
      ctx.clip();
      const iw = img.naturalWidth  || w;
      const ih = img.naturalHeight || h;
      const scale = Math.min(w / iw, h / ih); // contain: fit within box
      const sw = iw * scale, sh = ih * scale;
      const ox = x + (w - sw) / 2, oy = y + (h - sh) / 2;
      ctx.drawImage(img, ox, oy, sw, sh);
      ctx.restore();
      resolve();
    }
    if (img.complete && img.naturalWidth) {
      paint();
    } else {
      img.onload = paint;
      img.onerror = function() {
        ctx.save();
        ctx.beginPath();
        ctx.roundRect(x, y, w, h, Math.min(radius, w / 4, h / 4));
        ctx.fillStyle = '#2a2a2a';
        ctx.fill();
        ctx.restore();
        resolve();
      };
    }
  });
}

// Draw a pool image onto ctx, cover-cropped into rect (x,y,w,h) with rounded corners
function drawPoolImg(ctx, src, x, y, w, h, radius) {
  radius = radius || 4;
  return new Promise(function(resolve) {
    const img = _imgCache[src] || new Image();
    if (!_imgCache[src]) { _imgCache[src] = img; img.src = src; }
    function paint() {
      ctx.save();
      ctx.beginPath();
      ctx.roundRect(x, y, w, h, Math.min(radius, w / 4, h / 4));
      ctx.clip();
      const iw = img.naturalWidth  || w;
      const ih = img.naturalHeight || h;
      const scale = Math.max(w / iw, h / ih);
      const sw = iw * scale, sh = ih * scale;
      const ox = x + (w - sw) / 2, oy = y + (h - sh) / 2;
      ctx.drawImage(img, ox, oy, sw, sh);
      ctx.restore();
      resolve();
    }
    if (img.complete && img.naturalWidth) {
      paint();
    } else {
      img.onload = paint;
      img.onerror = function() {
        ctx.save();
        ctx.beginPath();
        ctx.roundRect(x, y, w, h, Math.min(radius, w / 4, h / 4));
        ctx.fillStyle = '#2a2a2a';
        ctx.fill();
        ctx.restore();
        resolve();
      };
    }
  });
}

const PALETTES = [
  // Image 1 – warm rose / gold
  [
    { x: 0.2, y: 0.3, r: 200, c: '#ff6b9d' },
    { x: 0.7, y: 0.6, r: 230, c: '#ffb347' },
    { x: 0.5, y: 0.1, r: 160, c: '#ff8c69' },
  ],
  // Image 2 – ocean teal / violet
  [
    { x: 0.1, y: 0.5, r: 220, c: '#43e8d8' },
    { x: 0.75, y: 0.3, r: 200, c: '#7b5ea7' },
    { x: 0.5, y: 0.8, r: 170, c: '#4facfe' },
  ],
  // Image 3 – lush green / lime
  [
    { x: 0.3, y: 0.6, r: 210, c: '#a8edea' },
    { x: 0.8, y: 0.2, r: 190, c: '#84fab0' },
    { x: 0.15, y: 0.15, r: 150, c: '#43e97b' },
  ],
];

function paintBlobs(ctx, palette, w, h, alpha = 1) {
  ctx.clearRect(0, 0, w, h);
  // Dark base
  ctx.fillStyle = '#1e1e1e';
  ctx.fillRect(0, 0, w, h);
  palette.forEach(b => {
    const grd = ctx.createRadialGradient(b.x*w, b.y*h, 0, b.x*w, b.y*h, b.r * 2);
    grd.addColorStop(0, hexAlpha(b.c, 0.85 * alpha));
    grd.addColorStop(1, hexAlpha(b.c, 0));
    ctx.globalCompositeOperation = 'screen';
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, w, h);
    ctx.globalCompositeOperation = 'source-over';
  });
  // Soft vignette
  const vign = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, w*0.7);
  vign.addColorStop(0, 'rgba(0,0,0,0)');
  vign.addColorStop(1, 'rgba(0,0,0,0.55)');
  ctx.fillStyle = vign;
  ctx.fillRect(0, 0, w, h);
}

function hexAlpha(hex, a) {
  const r = parseInt(hex.slice(1,3),16);
  const g = parseInt(hex.slice(3,5),16);
  const b = parseInt(hex.slice(5,7),16);
  return `rgba(${r},${g},${b},${a})`;
}

// Animate canvas fade-in with smooth blob paint
async function fadeInCanvas(cnv, paletteIdx, delay = 0) {
  await sleep(delay);
  const ctx = cnv.getContext('2d');
  const w = cnv.width, h = cnv.height;
  const palette = PALETTES[paletteIdx];
  let start = null;
  const duration = 900;

function frame(ts) {
    if (!start) start = ts;
    const t = Math.min((ts - start) / duration, 1);
    const ease = 1 - Math.pow(1 - t, 3); // ease-out-cubic
    paintBlobs(ctx, palette, w, h, ease);
    cnv.style.opacity = ease;
    if (t < 1) requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

// Animate multiple canvases composited together
function compositeAllPalettes(cnv, palettes, alphas) {
  const ctx = cnv.getContext('2d');
  const w = cnv.width, h = cnv.height;
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = '#1e1e1e';
  ctx.fillRect(0, 0, w, h);
  palettes.forEach((p, i) => {
    const a = alphas[i] || 0;
    if (a <= 0) return;
    p.forEach(b => {
      const grd = ctx.createRadialGradient(b.x*w, b.y*h, 0, b.x*w, b.y*h, b.r * 2);
      grd.addColorStop(0, hexAlpha(b.c, 0.7 * a));
      grd.addColorStop(1, hexAlpha(b.c, 0));
      ctx.globalCompositeOperation = 'screen';
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, w, h);
      ctx.globalCompositeOperation = 'source-over';
    });
  });
  const vign = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, w*0.7);
  vign.addColorStop(0, 'rgba(0,0,0,0)');
  vign.addColorStop(1, 'rgba(0,0,0,0.45)');
  ctx.fillStyle = vign;
  ctx.fillRect(0, 0, w, h);
}

// ─────────────────────────────────────────────
// Main demo sequence
// ─────────────────────────────────────────────
async function runDemo() {
  cursor.style.display = 'block';

// ── Step 0: cursor enters from bottom, hovers over + ──
  moveCursor(30, 620, 0);  // start below visible area
  await sleep(100);
  moveCursor(30, 565, 350);     // move up to the + button (faster)
  await sleep(200);
  addBtn.classList.add('hover');  // light up white on hover
  await sleep(200);

// ── Step 1: Click + to create canvas ──
  setStep(0);
  addBtn.classList.remove('hover');
  addBtn.classList.add('active');
  moveCursor(30, 565);
  await sleep(200);
  spawnRipple(popup.getBoundingClientRect().left + 30, popup.getBoundingClientRect().top + 565);
  await sleep(300);

// Show input box
  inputBox.classList.add('visible');
  inputBox.value = '';
  await sleep(400);

// Type name
  const name = 'MY PROJECT';
  for (let i = 0; i <= name.length; i++) {
    inputBox.value = name.slice(0, i);
    await sleep(90);
  }
  await sleep(500);

// Confirm – create card
  inputBox.classList.remove('visible');
  addBtn.classList.remove('active');

const card = document.createElement('div');
  card.className = 'card';
  card.id = 'mainCard';
  card.innerHTML = `<span class="card-label">MY PROJECT</span>`;
  card.style.opacity = '0';
  card.style.transform = 'translateY(10px) scale(0.97)';
  card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
  middle.appendChild(card);

await sleep(50);
  card.style.opacity = '1';
  card.style.transform = 'translateY(0) scale(1)';
  await sleep(600);
  setStep(1);

// ── Step 2: Right-click → Quick Drop ──
  await sleep(400);
  setStep(2);
  moveCursor(180, 220);
  await sleep(700);
  card.style.transition = 'none';  // instant on enter
  card.classList.add('hovered');
  card.style.transition = '';       // restore smooth transition for exit
  await sleep(300);

// context menu appears — card loses hover as context menu takes over
  card.classList.remove('hovered');
  ctxMenu.style.left = '100px';
  ctxMenu.style.top  = '180px';
  ctxMenu.classList.add('visible');
  await sleep(300);

// cursor moves to Quick Drop item
  moveCursor(150, 272);
  await sleep(500);
  qdItem.classList.add('highlight');
  spawnRipple(popup.getBoundingClientRect().left + 150, popup.getBoundingClientRect().top + 272);
  await sleep(300);
  qdItem.textContent = 'Quick Drop ✓';
  card.classList.add('quickdrop-active');
  await sleep(400);
  ctxMenu.classList.remove('visible');
  qdItem.classList.remove('highlight');
  // cursor is still over the card area — restore hover glow instantly
  card.style.transition = 'none';
  card.classList.add('hovered');
  card.style.transition = '';
  await sleep(400);
  document.getElementById('bgGrid').style.opacity = '1';
  document.querySelectorAll('#bgGrid div[style*="will-change"]').forEach(c => c.style.animationPlayState = 'running');
  await sleep(800);

// ── Step 3: cursor moves to a real bg image, + appears ──
  setStep(3);
  cursor.style.display = 'block';
  const qdOverlay = document.getElementById('qdOverlay');

// Track which tile DOM elements and image sources have already been used
  const usedTiles = new Set();
  const usedSrcs = new Set();

// Clamp thumb so it always stays PAD px inside the card (325×230)
  const CARD_W = 325, CARD_H = 230, PAD = 10;
  function clampThumb(left, top, w, h) {
    const l = Math.max(PAD, Math.min(left, CARD_W - w - PAD));
    const t = Math.max(PAD, Math.min(top,  CARD_H - h - PAD));
    return { l, t };
  }

// Helper: get a bg image tile that's fully visible, not behind popup, and not already used
  function getVisibleTile(colIndex) {
    const cells = document.querySelectorAll('#bgGrid > div');
    const cell = cells[colIndex];
    if (!cell) return null;
    const imgs = cell.querySelectorAll('.bg-img');
    const popupR = popup.getBoundingClientRect();
    for (const img of imgs) {
      if (usedTiles.has(img)) continue;
      if (usedSrcs.has(img.src)) continue;
      const r = img.getBoundingClientRect();
      if (r.top > 20 && r.bottom < window.innerHeight - 20 && r.height > 30 &&
          (r.right < popupR.left - 10 || r.left > popupR.right + 10)) {
        return r;
      }
    }
    return null;
  }

// Helper: get tile DOM element (not just rect), skipping used ones
  function getVisibleTileEl(colIndex) {
    const cells = document.querySelectorAll('#bgGrid > div');
    const cell = cells[colIndex];
    if (!cell) return null;
    const imgs = cell.querySelectorAll('.bg-img');
    const popupR = popup.getBoundingClientRect();
    for (const img of imgs) {
      if (usedTiles.has(img)) continue;
      if (usedSrcs.has(img.src)) continue;
      const r = img.getBoundingClientRect();
      if (r.top > 20 && r.bottom < window.innerHeight - 20 && r.height > 30 &&
          (r.right < popupR.left - 10 || r.left > popupR.right + 10)) {
        return img;
      }
    }
    return null;
  }

for (const t of rapidThumbs) {
    const tileEl = getVisibleTileEl(t.col);

// Skip entirely if no unused visible tile found
    if (!tileEl) continue;
    usedTiles.add(tileEl);
    usedSrcs.add(tileEl.src);

// Move cursor to center of tile — slower for first two images
    const moveDur = t.slow ? 1400 : 300;
    const moveWait = t.slow ? 1500 : 350;
    const tr = tileEl.getBoundingClientRect();
    moveFixedCursor(tr.left + tr.width / 2, tr.top + tr.height / 2, moveDur);
    // Poll cursor position and remove hover the moment it leaves the card bounds
    (function watchHover() {
      if (!card.classList.contains('hovered')) return;
      const cr = card.getBoundingClientRect();
      const cx = parseFloat(cursor.style.left);
      const cy = parseFloat(cursor.style.top);
      if (cx < cr.left || cx > cr.right || cy < cr.top || cy > cr.bottom) {
        card.classList.remove('hovered');
      } else {
        requestAnimationFrame(watchHover);
      }
    })();
    await sleep(moveWait);

// Show + and track
    qdOverlay.classList.remove('clicked');
    qdOverlay.style.transform = '';
    qdOverlay.style.opacity = '1';
    qdOverlay.classList.add('visible');
    let tracking = true;
    const track = () => {
      if (!tracking) return;
      const r = tileEl.getBoundingClientRect();
      qdOverlay.style.left = (r.left + 10) + 'px';
      qdOverlay.style.top  = (r.top  + 10) + 'px';
      requestAnimationFrame(track);
    };
    track();
    await sleep(400);

// Cursor moves to slightly below center of the + icon
    const r2 = tileEl.getBoundingClientRect();
    moveFixedCursor(r2.left + 10 + 14, r2.top + 10 + 34, 250);
    await sleep(300);

// Click — ripple + rotate
    const r3 = tileEl.getBoundingClientRect();
    spawnRipple(r3.left + 10 + 14, r3.top + 10 + 34);
    qdOverlay.classList.add('clicked');
    await sleep(300);
    tracking = false;
    qdOverlay.style.opacity = '0';
    // Reset rotation invisibly
    qdOverlay.style.transition = 'none';
    qdOverlay.classList.remove('visible');
    qdOverlay.classList.remove('clicked');
    qdOverlay.style.transform = '';
    requestAnimationFrame(() => qdOverlay.style.transition = '');

const tileImgSrc = tileEl.src || poolImg(0);
    const tileRR = tileEl.getBoundingClientRect();
    const aspectR = tileRR.width / tileRR.height;

// Go directly to card click — no extra pause
  // ── Step 4: cursor moves to card and clicks it ──
  cursor.style.display = 'block';
  const cardRect = card.getBoundingClientRect();
  moveFixedCursor(cardRect.left + cardRect.width / 2, cardRect.top + cardRect.height / 2, 500);
  await sleep(600);
  card.classList.add('hovered');
  await sleep(300);
  spawnRipple(cardRect.left + cardRect.width / 2, cardRect.top + cardRect.height / 2);
  await sleep(200);

// ── Step 4 (expanded view) ──
  setStep(4);
  // ── Step 5: expanded view opens ──
  // Collect all thumb colors/positions from card
  const thumbEls = Array.from(card.querySelectorAll('.card-thumb'));
  const cardR = card.getBoundingClientRect();

// Create expanded view starting from card position
  const expandedView = document.createElement('div');
  expandedView.className = 'expanded-view';
  expandedView.style.left   = cardR.left + 'px';
  expandedView.style.top    = cardR.top  + 'px';
  expandedView.style.width  = cardR.width  + 'px';
  expandedView.style.height = cardR.height + 'px';
  expandedView.style.borderRadius = '8px';
  expandedView.style.opacity = '0';

// Title bar
  const titleBar = document.createElement('div');
  titleBar.className = 'expanded-titlebar';
  titleBar.innerHTML = `
    
    <div class="titlebar-tabrow">
      <div class="titlebar-dots">
        <div class="titlebar-dot dot-red"></div>
        <div class="titlebar-dot dot-yellow"></div>
        <div class="titlebar-dot dot-green"></div>
      </div>
      <div class="titlebar-tab">
        <img src="images/animationimages/favicon48.png" class="titlebar-tab-icon" alt="pinly">
        <span class="titlebar-tab-title">MY PROJECT</span>
        <span class="titlebar-tab-close">✕</span>
      </div>
      <div class="titlebar-newtab">+</div>
    </div>
    
    <div class="titlebar-addrrow">
      <div class="titlebar-navbtn">←</div>
      <div class="titlebar-navbtn">→</div>
      <div class="titlebar-navbtn">↻</div>
      <div class="titlebar-addressbar">
        <span class="titlebar-addressbar-text">pinly.app/myproject</span>
      </div>
      <img src="images/animationimages/favicon48.png" class="titlebar-favicon" alt="pinly">
    </div>
  `;
  expandedView.appendChild(titleBar);
  document.body.appendChild(expandedView);
  // Re-append cursor so it's last in DOM → paints above expanded view
  document.body.appendChild(cursor);

// Fade in expanded view — keep card hover until it's covered
  await sleep(30);
  expandedView.style.opacity = '1';
  popup.style.transition = 'opacity 0.4s ease';
  popup.style.opacity = '0';
  document.querySelector('.popup-icon').style.transition = 'opacity 0.4s ease';
  document.querySelector('.popup-icon').style.opacity = '0';
  cursor.style.display = 'block';
  await sleep(50);

// Expand: always 120px from top, maintain 15.4:10 aspect ratio
  const topMargin = 100;
  const aspect = 15.4 / 10;
  const targetT = topMargin;
  const targetH = window.innerHeight - topMargin - 80; // 80px bottom breathing room
  const targetW = Math.min(targetH * aspect, window.innerWidth - 80); // cap to viewport width
  const targetL = (window.innerWidth - targetW) / 2;

expandedView.style.left         = targetL + 'px';
  expandedView.style.top          = targetT + 'px';
  expandedView.style.width        = targetW + 'px';
  expandedView.style.height       = targetH + 'px';
  expandedView.style.borderRadius = '10px';

// Remove hover only after expanded view fully covers card
  await sleep(300);
  card.classList.remove('hovered');

// Fade out bg grid simultaneously
  document.getElementById('bgGrid').style.transition = 'opacity 0.6s ease';
  document.getElementById('bgGrid').style.opacity = '0';

await sleep(700);

// Show title bar now that we're fully expanded
  titleBar.classList.add('visible');

// ── Populate expanded canvas using fitElementsToView logic ──
  // Use canvas-space coords (data-cx/cy) not clamped display coords,
  // exactly mirroring the real app's fitElementsToView bounding-box calculation
  const TITLEBAR_H = 72;
  const PAD_EXP = 16; // breathing room inside expanded view
  const contentW = targetW - PAD_EXP * 2;
  const contentH = targetH - TITLEBAR_H - PAD_EXP * 2;

// Collect canvas-space positions (pre-clamp) from thumb data attributes
  const thumbData = thumbEls.map(th => ({
    l: parseFloat(th.dataset.cx),
    t: parseFloat(th.dataset.cy),
    w: parseFloat(th.dataset.cw),
    h: parseFloat(th.dataset.ch),
    bg: th.style.backgroundImage || th.style.background
  }));

// Bounding box of all thumbnails in card-space coords
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  thumbData.forEach(d => {
    minX = Math.min(minX, d.l);
    minY = Math.min(minY, d.t);
    maxX = Math.max(maxX, d.l + d.w);
    maxY = Math.max(maxY, d.t + d.h);
  });

const bboxW = maxX - minX;
  const bboxH = maxY - minY;

// Scale to fit — same as real app: Math.min(scaleX, scaleY) * 0.97
  const fitScale = Math.min(contentW / bboxW, contentH / bboxH) * 0.97;

// Center the bounding box in the content area — same as real app
  const originX = PAD_EXP + (-minX * fitScale + (contentW - bboxW * fitScale) / 2);
  const originY = TITLEBAR_H + PAD_EXP + (-minY * fitScale + (contentH - bboxH * fitScale) / 2);

thumbData.forEach((d, i) => {
    const et = document.createElement('div');
    et.className = 'expanded-thumb';
    et.style.left   = (d.l * fitScale + originX) + 'px';
    et.style.top    = (d.t * fitScale + originY) + 'px';
    et.style.width  = (d.w * fitScale) + 'px';
    et.style.height = (d.h * fitScale) + 'px';
    et.style.overflow = 'hidden';
    et.style.borderRadius = '5px';

// Use <img> with object-fit:contain — matches real app's context.drawImage (no crop)
    if (d.bg && d.bg.startsWith('url')) {
      const urlMatch = d.bg.match(/url$["']?([^"')]+)["']?$/);
      if (urlMatch) {
        const img = document.createElement('img');
        img.src = urlMatch[1];
        img.style.cssText = 'width:100%;height:100%;object-fit:contain;display:block;border-radius:5px;';
        et.appendChild(img);
      } else {
        et.style.background = d.bg;
      }
    } else {
      et.style.background = d.bg;
    }

et.style.transitionDelay = (i * 60) + 'ms';
    expandedView.appendChild(et);
    requestAnimationFrame(() => et.classList.add('shown'));
  });

await sleep(600);

// ── Interactions on expanded canvas ──
  const expThumbs = Array.from(expandedView.querySelectorAll('.expanded-thumb'));

// Shared z-index counter for pop-to-front
  let topZ = 10;
  expThumbs.forEach(t => { t.style.zIndex = topZ++; });

function popToFront(el) { el.style.zIndex = topZ++; }

// Drive cursor AND element from the same rAF loop so they never drift apart.
  // The cursor position is read back from its live computed style each frame
  // (same approach as the real app reading mouse coords every mousemove).
  function animateProp(el, fromProps, toProps, duration) {
    return new Promise(resolve => {
      const start = performance.now();
      function step(now) {
        const t = Math.min((now - start) / duration, 1);
        const ease = t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
        for (const [k, v] of Object.entries(fromProps)) {
          el.style[k] = (v + (toProps[k] - v) * ease) + 'px';
        }
        if (t < 1) requestAnimationFrame(step);
        else resolve();
      }
      requestAnimationFrame(step);
    });
  }

// Drag: run cursor AND element in one unified rAF loop (no CSS transition on cursor
  // during drag — position is set directly every frame, like real app's onMouseMove).
  function dragAnimate(el, fromEl, toEl, fromCursor, toCursor, duration) {
    return new Promise(resolve => {
      // Disable CSS transition on cursor during drag — set position raw every frame
      cursor.style.transition = 'none';
      const start = performance.now();
      function step(now) {
        const t = Math.min((now - start) / duration, 1);
        const ease = t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
        // Element
        el.style.left = (fromEl.left + (toEl.left - fromEl.left) * ease) + 'px';
        el.style.top  = (fromEl.top  + (toEl.top  - fromEl.top)  * ease) + 'px';
        // Cursor — same easing, same frame: perfectly in sync
        cursor.style.left = (fromCursor.x + (toCursor.x - fromCursor.x) * ease) + 'px';
        cursor.style.top  = (fromCursor.y + (toCursor.y - fromCursor.y) * ease) + 'px';
        if (t < 1) requestAnimationFrame(step);
        else {
          // Restore CSS transition for non-drag cursor moves
          cursor.style.transition = `left 600ms cubic-bezier(0.25,0.46,0.45,0.94), top 600ms cubic-bezier(0.25,0.46,0.45,0.94)`;
          resolve();
        }
      }
      requestAnimationFrame(step);
    });
  }

function moveExpCursor(x, y, dur = 600) {
    cursor.style.display = 'block';
    moveFixedCursor(x, y, dur);
  }

// Center of expanded content area
  const exCx = targetL + targetW / 2;
  const exCy = targetT + TITLEBAR_H + (targetH - TITLEBAR_H) / 2;

// ── Drag image 0 toward center ──
  if (expThumbs[0]) {
    const t0 = expThumbs[0];
    const r0 = t0.getBoundingClientRect();
    // Click near top-left corner of image 0 (least likely to be covered)
    const cx0 = r0.left + r0.width  * 0.25;
    const cy0 = r0.top  + r0.height * 0.25;

moveExpCursor(cx0, cy0, 600);
    await sleep(700);
    spawnRipple(cx0, cy0);
    popToFront(t0);
    await sleep(200);

// Move toward center — cursor stays sticky at its click offset within the image
    const toL0 = exCx - r0.width  / 2 - targetW * 0.12;   // desired image left (screen)
    const toT0 = Math.max(targetT + TITLEBAR_H, exCy - r0.height / 2 - targetH * 0.08);   // desired image top, clamped so tall images don't go above expanded view
    const fromL0 = parseFloat(t0.style.left);
    const fromT0 = parseFloat(t0.style.top);
    // delta in element-local coords == delta in screen coords (no extra scale here)
    const dx0 = toL0 - (targetL + fromL0);
    const dy0 = toT0 - (targetT + TITLEBAR_H + fromT0);
    // cursor destination = click point + same screen delta (sticky!)
    const toCx0 = cx0 + dx0;
    const toCy0 = cy0 + dy0;

t0.style.transition = 'none';
    await dragAnimate(
      t0,
      { left: fromL0,        top: fromT0 },
      { left: fromL0 + dx0,  top: fromT0 + dy0 },
      { x: cx0,  y: cy0 },
      { x: toCx0, y: toCy0 },
      700
    );
    t0.style.transition = '';
    await sleep(400);
  }

// ── Drag image 2 toward center ──
  if (expThumbs[2]) {
    const t2 = expThumbs[2];
    const r2 = t2.getBoundingClientRect();
    // Click near bottom-right corner of image 2
    const cx2 = r2.left + r2.width  * 0.75;
    const cy2 = r2.top  + r2.height * 0.75;

moveExpCursor(cx2, cy2, 600);
    await sleep(700);
    spawnRipple(cx2, cy2);
    popToFront(t2);
    await sleep(200);

const toL2 = exCx - r2.width  / 2 + targetW * 0.10;
    const toT2 = exCy - r2.height / 2 + targetH * 0.06;
    const fromL2 = parseFloat(t2.style.left);
    const fromT2 = parseFloat(t2.style.top);
    const dx2 = toL2 - (targetL + fromL2);
    const dy2 = toT2 - (targetT + TITLEBAR_H + fromT2);
    // cursor stays at its click offset within the image (sticky)
    const toCx2 = cx2 + dx2;
    const toCy2 = cy2 + dy2;

t2.style.transition = 'none';
    await dragAnimate(
      t2,
      { left: fromL2,        top: fromT2 },
      { left: fromL2 + dx2,  top: fromT2 + dy2 },
      { x: cx2,  y: cy2 },
      { x: toCx2, y: toCy2 },
      700
    );
    t2.style.transition = '';
    await sleep(400);
  }

// ── Resize image 1: click near its unique corner → double-click → drag corner smaller ──
  if (expThumbs[1]) {
    const t1 = expThumbs[1];
    let r1 = t1.getBoundingClientRect();

// Click near top-right corner (image 1 is typically mid-left, this corner sticks out)
    const cc1x = r1.left + r1.width * 0.75;
    const cc1y = r1.top  + r1.height * 0.25;
    moveExpCursor(cc1x, cc1y, 500);
    await sleep(600);
    spawnRipple(cc1x, cc1y);
    popToFront(t1);
    await sleep(120);
    spawnRipple(cc1x, cc1y); // double click

r1 = t1.getBoundingClientRect();
    const brX = r1.right  - handleSize / 2;
    const brY = r1.bottom - handleSize / 2;
    moveExpCursor(brX, brY, 500);
    await sleep(600);
    spawnRipple(brX, brY);
    await sleep(150);

const fromW1 = parseFloat(t1.style.width);
    const fromH1 = parseFloat(t1.style.height);
    const aspectR1 = fromW1 / fromH1;  // true aspect ratio
    const shrinkPx = Math.min(r1.width * 0.38, r1.height * 0.38);
    const toW1 = fromW1 - shrinkPx;
    const toH1 = toW1 / aspectR1;       // strict aspect ratio lock (matches real app)
    const shrinkH = fromH1 - toH1;      // actual height shrink

t1.style.transition = 'none';
    cursor.style.transition = 'none'; // disable CSS transition — drive raw from rAF
    const dragDur = 700;
    const toCursorX = brX - shrinkPx;
    const toCursorY = brY - shrinkH;

await sleep(400);
    t1.style.transition = '';

handles.forEach(({ el }) => { el.style.opacity = '0'; });
    await sleep(300);
    handles.forEach(({ el }) => el.remove());

// Move cursor to center of canvas before zoom — stays visible through zoom
    moveExpCursor(targetL + targetW / 2, targetT + TITLEBAR_H + (targetH - TITLEBAR_H) / 2, 400);
    await sleep(400);
  }

// ── Simulate scroll-wheel zoom out — smooth CSS transition ──
  {
    const allThumbs = Array.from(expandedView.querySelectorAll('.expanded-thumb'));
    const totalZoom = 0.72; // same total as before (~0.96^8)
    const focalX = targetW / 2;
    const focalY = TITLEBAR_H + (targetH - TITLEBAR_H) / 2;

// Compute final positions all at once, apply with a smooth transition
    allThumbs.forEach(th => {
      const l = parseFloat(th.style.left);
      const t = parseFloat(th.style.top);
      const w = parseFloat(th.style.width);
      const h = parseFloat(th.style.height);
      th.style.transition = 'left 0.7s cubic-bezier(0.4,0,0.2,1), top 0.7s cubic-bezier(0.4,0,0.2,1), width 0.7s cubic-bezier(0.4,0,0.2,1), height 0.7s cubic-bezier(0.4,0,0.2,1)';
      th.style.left   = (focalX + (l - focalX) * totalZoom) + 'px';
      th.style.top    = (focalY + (t - focalY) * totalZoom) + 'px';
      th.style.width  = (w * totalZoom) + 'px';
      th.style.height = (h * totalZoom) + 'px';
    });
    await sleep(850);
  }

// ── No pause — cursor moves to favicon immediately as zoom settles ──
  // Snapshot happens in parallel while cursor is already moving

// ── Snapshot final expanded-thumb layout for thumbnail re-render ──
  // Use pixel positions directly — no inverse transform needed
  // (zoom has modified positions so fitScale/originX/Y are stale anyway)
  const finalThumbSnap = Array.from(expandedView.querySelectorAll('.expanded-thumb'))
    .sort((a, b) => (parseInt(a.style.zIndex) || 0) - (parseInt(b.style.zIndex) || 0))
    .map(th => {
    // Try child <img> first (set by our contain-mode renderer), then fall back to background-image
    const childImg = th.querySelector('img');
    const bg = childImg ? `url("${childImg.src}")` : (th.style.backgroundImage || th.style.background);
    return {
      l: parseFloat(th.style.left),
      t: parseFloat(th.style.top) - TITLEBAR_H,
      w: parseFloat(th.style.width),
      h: parseFloat(th.style.height),
      bg
    };
  });

// ── Pre-render updated thumbnail onto card BEFORE collapsing ──
  // Draw while expanded view still covers the card, so it's ready instantly
  if (finalThumbSnap.length) {
    const dpr = window.devicePixelRatio || 1;
    const cssW = 325, cssH = 230;

let popupCnv = card.querySelector('canvas.thumb-redraw');
    if (!popupCnv) {
      popupCnv = document.createElement('canvas');
      popupCnv.className = 'thumb-redraw';
      popupCnv.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border-radius:8px;z-index:20;pointer-events:none;opacity:1;';
      card.appendChild(popupCnv);
    }
    popupCnv.width  = cssW * dpr;
    popupCnv.height = cssH * dpr;
    popupCnv.style.opacity = '1';

const ctx = popupCnv.getContext('2d');
    ctx.scale(dpr, dpr);

let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    finalThumbSnap.forEach(d => {
      minX = Math.min(minX, d.l);       minY = Math.min(minY, d.t);
      maxX = Math.max(maxX, d.l + d.w); maxY = Math.max(maxY, d.t + d.h);
    });

const thumbScale = Math.min(cssW / (maxX - minX), cssH / (maxY - minY)) * 0.9;
    const originTX = -minX * thumbScale + (cssW - (maxX - minX) * thumbScale) / 2;
    const originTY = -minY * thumbScale + (cssH - (maxY - minY) * thumbScale) / 2;

ctx.fillStyle = '#2a2a2a';
    ctx.fillRect(0, 0, cssW, cssH);

// Draw real images cover-cropped. Extract src from background-image url(...)
    const snapPromises = finalThumbSnap.map((d, i) => {
      const x = d.l * thumbScale + originTX;
      const y = d.t * thumbScale + originTY;
      const w = d.w * thumbScale;
      const h = d.h * thumbScale;
      // d.bg is like url("images/image3.png") — extract the path
      const srcMatch = d.bg.match(/url$["']?([^"')]+)["']?$/);
      const src = srcMatch ? srcMatch[1] : poolImg(i);
      return drawPoolImg(ctx, src, x, y, w, h, Math.min(4, w/4, h/4));
    });
    await Promise.all(snapPromises);
  }

// ── Cursor moves to the Pinly favicon — starts moving while snapshot renders ──
  const faviconEl = expandedView.querySelector('.titlebar-favicon');
  const faviconR  = faviconEl ? faviconEl.getBoundingClientRect() : null;
  const faviconCx = faviconR ? faviconR.left + faviconR.width  / 2 : targetL + targetW - 30;
  const faviconCy = faviconR ? faviconR.top  + faviconR.height / 2 : targetT + 54;

cursor.style.display = 'block';
  moveExpCursor(faviconCx, faviconCy, 550);
  await sleep(580);

// Click ripple on the favicon icon
  spawnRipple(faviconCx, faviconCy);
  await sleep(180);

// ── Blink sequence plays on extIcon (same as the real app's BLINK_SEQUENCE) ──
  // Build the popup first so extIcon exists, then blink, then fade in
  
  // Use the exact screen position of titlebar-favicon so the ext icon sits right on top of it.

const extIconSize = 16;

// faviconR is the bounding rect of the titlebar-favicon inside the expanded view
  // The floating extIcon must overlay it exactly → position wrapper so extIcon lands there.
  // extIcon is positioned `right:20px; top:0` inside extWrapper.
  // So:  extWrapper.right - 20 = faviconR.right  →  extWrapper.left = faviconR.right + 20 - extIconSize ... 
  // Simpler: position extIcon absolutely at faviconR coords by computing wrapper left/top.

// We'll position the icon's left edge at faviconR.left, top at faviconR.top.
  // extIcon inside wrapper: position:absolute, left:0, top:0 (override the right:20)
  // Wrapper left = faviconR.left, wrapper top = faviconR.top

const iconLeft = faviconR ? faviconR.left : targetL + targetW - 40;
  const iconTop  = faviconR ? faviconR.top  : targetT + 46;

// Popup width and height
  const browserPopupW = 360;
  const browserPopupH = 600;

// Popup right edge aligns with icon right edge (like Chrome extension popup)
  const browserPopupL = iconLeft + extIconSize - browserPopupW;

const iconGap = 6; // px gap between icon bottom and popup top

// Wrapper sits at the favicon's exact position — icon overlays it at top:0, left:0
  // Popup sits below the icon: top = iconSize + iconGap
  const extWrapper = document.createElement('div');
  extWrapper.style.cssText = `position:fixed; left:${browserPopupL}px; top:${iconTop}px;
    width:${browserPopupW}px;
    pointer-events:none; z-index:2000; opacity:0; transition:opacity 0.4s ease;`;

// Floating icon — right-aligned inside wrapper, overlays the address bar favicon exactly
  const extIcon = document.createElement('img');
  extIcon.src = 'images/animationimages/favicon48.png';
  extIcon.style.cssText = `position:absolute; width:${extIconSize}px; height:${extIconSize}px;
    right:0; top:0; border-radius:4px;`;
  extWrapper.appendChild(extIcon);

// ── Blink sequence on the floating icon (mirrors the real app's BLINK_SEQUENCE) ──
  const BLINK_SEQUENCE = [
    'images/animationimages/icon48.png',
    'images/animationimages/icon48(2).png',
    'images/animationimages/icon48(3).png',
    'images/animationimages/icon48(4).png',
    'images/animationimages/icon48(4).png',
    'images/animationimages/icon48(3).png',
    'images/animationimages/icon48(2).png',
    'images/animationimages/icon48.png',
  ];

// Append wrapper to DOM so extIcon is visible for blinking, but keep opacity:0
  // We'll do the blink on the titlebar-favicon directly (it's already visible)
  // and simultaneously on extIcon once wrapper is in DOM
  document.body.appendChild(extWrapper);
  document.body.appendChild(cursor);

// Blink the titlebar-favicon + extIcon together
  for (const src of BLINK_SEQUENCE) {
    if (faviconEl) faviconEl.src = src;
    extIcon.src = src;
    await sleep(35);
  }
  // Restore favicon to original
  if (faviconEl) faviconEl.src = 'images/animationimages/favicon48.png';
  extIcon.src = 'images/animationimages/favicon48.png';

// The popup shell — sits below the icon
  const browserPopup = document.createElement('div');
  browserPopup.style.cssText = `position:absolute; top:${extIconSize + iconGap}px; left:0; right:0;
    width:${browserPopupW}px; height:${browserPopupH}px;
    background:#222; border-radius:6px; overflow:hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.6);`;

// Top bar
  const bpTopBar = document.createElement('div');
  bpTopBar.style.cssText = `position:absolute; top:0; left:0; right:0; height:45px;
    background:#222; border-bottom:1px solid #2f2f2f;
    display:flex; align-items:center; justify-content:center; z-index:100;`;
  bpTopBar.innerHTML = `<span style="font-size:26px;color:#fff;font-weight:400;letter-spacing:-0.5px;font-family:'RadioCanada',arial,sans-serif;">pinly</span>`;
  browserPopup.appendChild(bpTopBar);

// Middle scroll area
  const bpMiddle = document.createElement('div');
  bpMiddle.style.cssText = `position:absolute; top:45px; left:0; right:0; bottom:61px;
    overflow:hidden; display:flex; flex-direction:column; align-items:center;
    padding-top:11px; gap:0;`;
  browserPopup.appendChild(bpMiddle);

// Bottom bar
  const bpBottomBar = document.createElement('div');
  bpBottomBar.style.cssText = `position:absolute; bottom:0; left:0; right:0; height:61px;
    background:#2a2a2a; border-top:1px solid #2f2f2f;
    display:flex; align-items:center; justify-content:space-between; padding:0 10px; z-index:100;`;
  bpBottomBar.innerHTML = `<button style="width:40px;height:40px;background:transparent;border:none;color:#666;font-size:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;line-height:1;">+</button>
    <button style="width:40px;height:40px;background:transparent;border:none;color:#666;font-size:26px;font-family:Georgia,serif;font-style:italic;font-weight:bold;display:flex;align-items:center;justify-content:center;border-radius:50%;">i</button>`;
  browserPopup.appendChild(bpBottomBar);

// ── Build card I into bpMiddle BEFORE popup fades in — visible immediately ──
  {
    const bpCard1 = document.createElement('div');
    bpCard1.className = 'card quickdrop-active';
    bpCard1.innerHTML = `<span class="card-label" style="color:#fff">MY PROJECT</span>`;
    bpCard1.style.opacity = '1';
    bpCard1.style.transform = 'translateY(0) scale(1)';

const origCnv = card.querySelector('canvas.thumb-redraw');
    if (origCnv) {
      const bpCnv = document.createElement('canvas');
      bpCnv.className = 'thumb-redraw';
      bpCnv.width  = origCnv.width;
      bpCnv.height = origCnv.height;
      bpCnv.style.cssText = origCnv.style.cssText;
      const bpCtx = bpCnv.getContext('2d');
      bpCtx.drawImage(origCnv, 0, 0);
      bpCard1.appendChild(bpCnv);
    }

bpMiddle.appendChild(bpCard1);
  }

extWrapper.appendChild(browserPopup);

// Fade in the extension popup — card I already inside, visible immediately
  await sleep(30);
  extWrapper.style.opacity = '1';
  await sleep(350);
  const PALETTE_II = [
    { x: 0.6, y: 0.2, r: 220, c: '#f7971e' },
    { x: 0.2, y: 0.7, r: 200, c: '#ffd200' },
    { x: 0.85, y: 0.75, r: 160, c: '#f953c6' },
  ];
  const PALETTE_III = [
    { x: 0.15, y: 0.4, r: 230, c: '#0f2027' },
    { x: 0.7, y: 0.2, r: 200, c: '#203a43' },
    { x: 0.5, y: 0.85, r: 180, c: '#2c5364' },
  ];
  const PALETTE_IV = [
    { x: 0.5, y: 0.3, r: 240, c: '#8e2de2' },
    { x: 0.2, y: 0.7, r: 210, c: '#4a00e0' },
    { x: 0.8, y: 0.8, r: 170, c: '#b721ff' },
  ];

// ── makePrefilled: card with thumbs drawn onto canvas, matching card I thumbnail style ──
  function makePrefilled(label, _palette, thumbDefs, containAspect) {
    const c = document.createElement('div');
    c.className = 'card';
    c.innerHTML = `<span class="card-label" style="color:#fff">${label}</span>`;
    c.style.opacity = '0';
    c.style.transform = 'translateY(8px) scale(0.97)';
    c.style.transition = 'opacity 0.5s ease, transform 0.5s ease';

const dpr = window.devicePixelRatio || 1;
    const cssW = 325, cssH = 230;
    const cnv = document.createElement('canvas');
    cnv.className = 'thumb-redraw';
    cnv.width  = cssW * dpr;
    cnv.height = cssH * dpr;
    cnv.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border-radius:8px;z-index:20;pointer-events:none;opacity:1;';
    c.appendChild(cnv);
    bpMiddle.appendChild(c);

const ctx = cnv.getContext('2d');
    ctx.scale(dpr, dpr);

// Dark base
    ctx.fillStyle = '#2a2a2a';
    ctx.fillRect(0, 0, cssW, cssH);

// No blob background — clean dark base like card I thumbnail

// Fit thumbs to card using same scaling as card I thumb-redraw
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    thumbDefs.forEach(d => {
      minX = Math.min(minX, d.l);       minY = Math.min(minY, d.t);
      maxX = Math.max(maxX, d.l + d.w); maxY = Math.max(maxY, d.t + d.h);
    });
    const thumbScale = Math.min(cssW / (maxX - minX), cssH / (maxY - minY)) * 0.9;
    const originTX = -minX * thumbScale + (cssW - (maxX - minX) * thumbScale) / 2;
    const originTY = -minY * thumbScale + (cssH - (maxY - minY) * thumbScale) / 2;

// Draw images asynchronously — drawPoolImg handles cover-crop + rounded clip
    (async () => {
      for (let i = 0; i < thumbDefs.length; i++) {
        const d = thumbDefs[i];
        const x = d.l * thumbScale + originTX;
        const y = d.t * thumbScale + originTY;
        const w = d.w * thumbScale;
        const h = d.h * thumbScale;
        await (containAspect ? drawPoolImgContain : drawPoolImg)(ctx, d.img, x, y, w, h, Math.min(4, w/4, h/4));
      }
    })();

return c;
  }

// 12-thumb layouts — dense, varied, matching card I quickdrop density
  // Card II: images 30, 32, 33, 19, 17, 15
  const thumbsII = [
    { l:15,  t:15,  w:160, h:90, img:'images/animationimages/image30.png' },  // wide hero top-left
    { l:190, t:12,  w:110, h:60, img:'images/animationimages/image32.png' },  // wide top-right
    { l:190, t:80,  w:55,  h:80, img:'images/animationimages/image33.png' },  // tall mid-right
    { l:15,  t:115, w:75,  h:90, img:'images/animationimages/image19.png' },  // tall bottom-left
    { l:100, t:120, w:80,  h:55, img:'images/animationimages/image17.png' },  // mid bottom
    { l:255, t:168, w:55,  h:40, img:'images/animationimages/image15.png' },  // small corner BR
    { l:100, t:60,  w:80,  h:52, img:'images/animationimages/image5.png' },   // centre fill
    { l:190, t:168, w:55,  h:40, img:'images/animationimages/image11.png' },  // small bottom-right
    { l:15,  t:55,  w:75,  h:52, img:'images/animationimages/image12.png' },  // left fill
  ];
  // Card III: images 16, 18, 25, 26, 23, 1
  const thumbsIII = [
    { l:12,  t:12,  w:88, h:65, img:'images/animationimages/image16.png' },  // col1 row1
    { l:112, t:12,  w:88, h:65, img:'images/animationimages/image18.png' },  // col2 row1
    { l:212, t:12,  w:88, h:65, img:'images/animationimages/image25.png' },  // col3 row1
    { l:12,  t:87,  w:88, h:65, img:'images/animationimages/image26.png' },  // col1 row2
    { l:112, t:87,  w:88, h:65, img:'images/animationimages/image23.png' },  // col2 row2
    { l:212, t:87,  w:88, h:65, img:'images/animationimages/image1.png' },   // col3 row2
    { l:62,  t:162, w:88, h:55, img:'images/animationimages/image11.png' },  // col1-2 row3
    { l:162, t:162, w:88, h:55, img:'images/animationimages/image4.png' },   // col2-3 row3
  ];
  // Card IV: images 22, 27, 28, 29, 13, 14
  const thumbsIV = [
    { l:85,  t:55,  w:155, h:120, img:'images/animationimages/image22.png' }, // large centre hero
    { l:10,  t:10,  w:68,  h:48,  img:'images/animationimages/image27.png' }, // top-left
    { l:250, t:10,  w:62,  h:48,  img:'images/animationimages/image28.png' }, // top-right
    { l:10,  t:65,  w:68,  h:55,  img:'images/animationimages/image29.png' }, // mid-left
    { l:250, t:65,  w:62,  h:55,  img:'images/animationimages/image13.png' }, // mid-right
    { l:10,  t:155, w:68,  h:52,  img:'images/animationimages/image14.png' }, // bottom-left
    { l:90,  t:180, w:75,  h:38,  img:'images/animationimages/image6.png' },  // bottom-centre-left
    { l:175, t:180, w:75,  h:38,  img:'images/animationimages/image7.png' },  // bottom-centre-right
    { l:250, t:155, w:62,  h:52,  img:'images/animationimages/image9.png' },  // bottom-right
  ];
  const PALETTE_V = [
    { x: 0.4, y: 0.15, r: 220, c: '#11998e' },
    { x: 0.75, y: 0.6,  r: 200, c: '#38ef7d' },
    { x: 0.15, y: 0.8,  r: 170, c: '#0083b0' },
  ];
  // Card V: random from remaining images (2, 3, 8, 10, 20, 21, 24)
  const thumbsV = [
    { l:10,  t:10,  w:300, h:50, img:'images/animationimages/image2.png' },  // full-width strip top
    { l:10,  t:70,  w:145, h:55, img:'images/animationimages/image3.png' },  // left strip mid
    { l:165, t:70,  w:145, h:55, img:'images/animationimages/image8.png' },  // right strip mid
    { l:10,  t:135, w:95,  h:55, img:'images/animationimages/image10.png' }, // left narrow
    { l:115, t:135, w:95,  h:55, img:'images/animationimages/image20.png' }, // centre narrow
    { l:220, t:135, w:90,  h:55, img:'images/animationimages/image21.png' }, // right narrow
    { l:10,  t:200, w:300, h:15, img:'images/animationimages/image24.png' }, // thin strip bottom
  ];

// ── Linger on card I — cursor moves into popup thumbnail area during this pause ──
  const bpMR = bpMiddle.getBoundingClientRect();
  const cursorInPopupX = bpMR.left + bpMR.width * 0.5;
  const cursorInPopupY = bpMR.top + bpMR.height * 0.4;
  cursor.style.display = 'block';
  moveExpCursor(cursorInPopupX, cursorInPopupY, 400);
  // bpCard1 is the first card in the popup — brighten it instantly as cursor arrives
  const bpCard1El = bpMiddle.querySelector('.card');
  if (bpCard1El) {
    // Canvas covers the full card so .hovered background is invisible — use filter instead
    bpCard1El.style.transition = 'none';
    bpCard1El.style.filter = 'brightness(1.25)';
    bpCard1El.style.transition = 'filter 0.2s ease';
    // Poll to remove hover when cursor leaves the card bounds
    (function watchBpHover() {
      if (!bpCard1El.style.filter) return;
      const cr = bpCard1El.getBoundingClientRect();
      const cx = parseFloat(cursor.style.left);
      const cy = parseFloat(cursor.style.top);
      if (cx < cr.left || cx > cr.right || cy < cr.top || cy > cr.bottom) {
        bpCard1El.style.filter = '';
      } else {
        requestAnimationFrame(watchBpHover);
      }
    })();
  }
  await sleep(600);

// ── Card II slides in quickly ──
  const card2 = makePrefilled('MY PROJECT II', PALETTE_II, thumbsII, true);
  await sleep(60);
  card2.style.transition = 'opacity 1.1s ease, transform 1.1s ease';
  card2.style.opacity = '1';
  card2.style.transform = 'translateY(0) scale(1)';
  await sleep(1300); // let card II settle before scroll starts

// ── Cards III–V added silently below (hidden by overflow) ──
  const card3 = makePrefilled('MY PROJECT III', PALETTE_III, thumbsIII, true);
  card3.style.transition = 'none'; card3.style.opacity = '1'; card3.style.transform = 'translateY(0) scale(1)';
  const card4 = makePrefilled('MY PROJECT IV', PALETTE_IV, thumbsIV, true);
  card4.style.transition = 'none'; card4.style.opacity = '1'; card4.style.transform = 'translateY(0) scale(1)';
  const card5 = makePrefilled('MY PROJECT V', PALETTE_V, thumbsV, true);
  card5.style.transition = 'none'; card5.style.opacity = '1'; card5.style.transform = 'translateY(0) scale(1)';

// ── Scroll through projects — cursor already inside popup thumbnail area ──
  bpMiddle.style.overflowY = 'auto';
  await sleep(40);

const scrollTarget = (bpMiddle.scrollHeight - bpMiddle.clientHeight) * 0.80;
  const scrollDuration = 3000;
  const scrollT0 = performance.now();

let hoveredScrollCard = null;
  await new Promise(resolve => {
    function step(now) {
      const p = Math.min((now - scrollT0) / scrollDuration, 1);
      bpMiddle.scrollTop = scrollTarget * p;

// Highlight whichever card the cursor is currently over
      const cx = parseFloat(cursor.style.left);
      const cy = parseFloat(cursor.style.top);
      const allCards = Array.from(bpMiddle.querySelectorAll('.card'));
      let found = null;
      for (const c of allCards) {
        const r = c.getBoundingClientRect();
        if (cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom) {
          found = c; break;
        }
      }
      if (found !== hoveredScrollCard) {
        if (hoveredScrollCard) hoveredScrollCard.style.filter = '';
        if (found) { found.style.transition = 'none'; found.style.filter = 'brightness(1.25)'; found.style.transition = 'filter 0.2s ease'; }
        hoveredScrollCard = found;
      }

if (p < 1) requestAnimationFrame(step);
      else resolve();
    }
    requestAnimationFrame(step);
  });
  // Don't clear the last hovered card immediately — let it fade out naturally
  // after the cursor has visually moved away into the expanded view

await sleep(200);

// ── Cursor moves out of popup and clicks into the expanded view canvas ──
  const clickBackX = targetL + targetW * 0.38;
  const clickBackY = targetT + TITLEBAR_H + (targetH - TITLEBAR_H) * 0.45;
  moveExpCursor(clickBackX, clickBackY, 350);
  // Now the cursor has left the popup — clear the hover highlight
  if (hoveredScrollCard) { hoveredScrollCard.style.filter = ''; hoveredScrollCard = null; }
  await sleep(400);
  spawnRipple(clickBackX, clickBackY);
  await sleep(100);

// ── Popup closes ──
  extWrapper.style.transition = 'opacity 0.3s ease';
  extWrapper.style.opacity = '0';
  await sleep(350);
  extWrapper.remove();

await sleep(150);

// ── Right-click on an expanded thumb to open context menu ──
  const ctxThumb = Array.from(expandedView.querySelectorAll('.expanded-thumb'))
    .find(th => parseFloat(th.style.opacity) > 0.5);
  const ctxR = ctxThumb ? ctxThumb.getBoundingClientRect()
    : { left: clickBackX - 40, top: clickBackY - 30, width: 80, height: 60 };
  const rclickX = ctxR.left + ctxR.width  * 0.5;
  const rclickY = ctxR.top  + ctxR.height * 0.5;

moveExpCursor(rclickX, rclickY, 300);
  await sleep(350);
  spawnRipple(rclickX, rclickY);
  await sleep(150);

// ── Context menu appears — styled exactly like the popup context menu ──
  const expCtxMenu = document.createElement('div');
  expCtxMenu.style.cssText = `
    position:fixed;
    background:#333;
    border-radius:5px;
    box-shadow:0 2px 8px rgba(0,0,0,.45);
    width:130px;
    z-index:3000;
    overflow:hidden;
    opacity:0;
    transform:scale(0.9);
    transform-origin:top left;
    transition:opacity 0.18s ease, transform 0.18s ease;
    pointer-events:none;
    font-family:'RadioCanada',arial,sans-serif;
  `;

const ctxItems = ['Bring to Front', 'Bring to Back', 'Duplicate', 'Show Source', 'Save Image', 'Delete Image'];
  ctxItems.forEach(label => {
    const li = document.createElement('div');
    li.textContent = label;
    li.style.cssText = `padding:8px 12px;color:#e6e6e6;font-size:13px;border-radius:5px;white-space:nowrap;`;
    li.dataset.label = label;
    expCtxMenu.appendChild(li);
  });

// Position menu: right of cursor, clamped to expanded view
  let menuL = rclickX + 4;
  let menuT = rclickY - 4;
  // Clamp inside expanded view
  menuL = Math.min(menuL, targetL + targetW - 140);
  menuT = Math.min(menuT, targetT + targetH - 200);
  expCtxMenu.style.left = menuL + 'px';
  expCtxMenu.style.top  = menuT + 'px';
  document.body.appendChild(expCtxMenu);
  document.body.appendChild(cursor);

await sleep(30);
  expCtxMenu.style.opacity = '1';
  expCtxMenu.style.transform = 'scale(1)';
  await sleep(400);

// ── Cursor moves to "Show Source" item ──
  const showSourceItem = Array.from(expCtxMenu.querySelectorAll('div[data-label]'))
    .find(el => el.dataset.label === 'Show Source');
  const ssR = showSourceItem.getBoundingClientRect();
  const ssCx = ssR.left + ssR.width / 2;
  const ssCy = ssR.top  + ssR.height / 2;

moveExpCursor(ssCx, ssCy, 400);
  await sleep(500);
  showSourceItem.style.background = '#555';
  showSourceItem.style.color = '#fff';
  await sleep(200);
  spawnRipple(ssCx, ssCy);
  await sleep(150);

// Context menu closes
  expCtxMenu.style.opacity = '0';
  expCtxMenu.style.transform = 'scale(0.9)';
  await sleep(220);
  expCtxMenu.remove();

// ── New tab opens in the browser titlebar ──
  // Animate tab row: existing tab shrinks slightly, new "Image Source" tab appears
  const tabRow = expandedView.querySelector('.titlebar-tabrow');
  const existingTab = tabRow.querySelector('.titlebar-tab');

// Create the new tab element
  const newTab = document.createElement('div');
  newTab.className = 'titlebar-tab';
  newTab.style.cssText = `
    display:flex; align-items:center; gap:6px;
    height:28px; padding:0 12px 0 10px;
    background:#2a2a2a; border-radius:8px 8px 0 0;
    font-size:12px; color:rgba(255,255,255,0.85); font-weight:400;
    white-space:nowrap; min-width:160px; max-width:220px;
    opacity:0; transition:opacity 0.3s ease;
    font-family:'RadioCanada',arial,sans-serif;
  `;
  newTab.innerHTML = `
    <div style="width:16px;height:16px;border-radius:2px;background:#fff;flex-shrink:0;"></div>
    <span style="flex:1;overflow:hidden;text-overflow:ellipsis;font-family:arial,sans-serif;">Image Source</span>
    <span style="width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:rgba(255,255,255,0.4);font-size:11px;line-height:1;">✕</span>
  `;

// ── New tab content: build webpage BEFORE fading in so tab + page appear together ──
  const srcThumb = Array.from(expandedView.querySelectorAll('.expanded-thumb'))[0];
  const srcImgEl = srcThumb ? srcThumb.querySelector('img') : null;
  const srcImgSrc = srcImgEl ? srcImgEl.src : (thumbEls[0] ? thumbEls[0].style.backgroundImage.match(/url\(["']?([^"')]+)/)?.[1] : 'images/animationimages/image1.png');

const webPage = document.createElement('div');
  webPage.style.cssText = `
    position:absolute;
    left:0; top:${TITLEBAR_H}px; right:0; bottom:0;
    background:#f5f5f5;
    opacity:0;
    transition:opacity 0.3s ease;
    overflow:visible;
    z-index:50;
  `;
  webPage.innerHTML = `
    <div style="width:100%;height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden;">
      
      <div style="width:100%;height:38px;background:#fff;border-bottom:1px solid #ececec;display:flex;align-items:center;padding:0 20px;box-sizing:border-box;flex-shrink:0;">
        <span style="font-size:12px;font-weight:700;color:#222;font-family:'RadioCanada',arial,sans-serif;letter-spacing:-0.2px;">Image Source Website</span>
      </div>
      
      <div style="flex:1;display:flex;flex-direction:column;align-items:center;overflow:visible;padding:0 24px;box-sizing:border-box;min-height:0;">
        
        <div style="flex:1;width:100%;max-width:480px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding-bottom:10px;min-height:0;">
          <div style="height:11px;background:#aaa;border-radius:3px;width:88%;"></div>
          <div style="height:8px;background:#bbb;border-radius:3px;width:60%;"></div>
          <div style="height:6px;background:#c8c8c8;border-radius:3px;width:38%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:95%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:82%;"></div>
        </div>
        
        <div style="width:100%;max-width:480px;flex-shrink:0;">
          <img src="${srcImgSrc}" style="width:100%;height:auto;object-fit:cover;border-radius:5px;display:block;">
        </div>
        
        <div style="width:100%;max-width:480px;display:flex;flex-direction:column;gap:9px;padding-top:10px;">
          <div style="height:6px;background:#c8c8c8;border-radius:3px;width:52%;align-self:center;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:88%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:94%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:78%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:91%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:85%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:70%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:96%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:83%;"></div>
          <div style="height:7px;background:#c8c8c8;border-radius:3px;width:100%;"></div>
        </div>
      </div>
    </div>
  `;
  expandedView.appendChild(webPage);

// Dim the existing tab (inactive style)
  existingTab.style.transition = 'background 0.3s ease, color 0.3s ease';
  existingTab.style.background = '#1a1a1a';
  const existingTabTitle = existingTab.querySelector('.titlebar-tab-title');
  if (existingTabTitle) existingTabTitle.style.color = 'rgba(255,255,255,0.45)';

// Update address bar URL (fade out first)
  const addrText = expandedView.querySelector('.titlebar-addressbar-text');
  if (addrText) {
    addrText.style.transition = 'opacity 0.15s ease';
    addrText.style.opacity = '0';
  }

// Insert new tab
  const newTabBtn = tabRow.querySelector('.titlebar-newtab');
  tabRow.insertBefore(newTab, newTabBtn);

// All three appear together: tab + webpage + url
  await sleep(30);
  newTab.style.opacity = '1';
  webPage.style.opacity = '1';
  if (addrText) {
    addrText.textContent = 'imagesource.website';
    addrText.style.opacity = '1';
  }

// Move cursor away (into the webpage area)
  moveExpCursor(targetL + targetW * 0.5, targetT + TITLEBAR_H + 80, 500);
  cursor.style.display = 'none';
  await sleep(1800);

// ── Fade out expanded view + webpage together ──
  expandedView.style.transition = 'opacity 0.8s ease';
  expandedView.style.opacity = '0';
  await sleep(900);

// ── Animation complete ──
  // Notify parent page that animation is done
  if (window.parent !== window) {
    window.parent.postMessage({ type: 'pinly-animation-done' }, '*');
  }
}

// Restart on window resize (debounced)
let _resizeTimer;
let _lastWidth = window.innerWidth;
window.addEventListener('resize', () => {
  clearTimeout(_resizeTimer);
  _resizeTimer = setTimeout(() => {
    if (window.innerWidth === _lastWidth) return;
    _lastWidth = window.innerWidth;
    location.reload();
  }, 400);
});

// Kick off after fonts load
document.fonts.ready.then(() => {
  setTimeout(runDemo, 600);
});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Pinly – Mobile Demo</title>
<link rel="icon" type="image/png" href="images/animationimages/favicon48.png">
<style>
  @font-face {
    font-family: 'RadioCanada';
    src: url('fonts/RadioCanada-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

body {
    background: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'RadioCanada', arial, sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    padding-top: 70px;
  }

/* ── Background single column ── */
  .bg-col-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.5s ease;
  }

.bg-col-mobile .bg-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 10px;
    will-change: transform;
  }

.bg-col-mobile .bg-img {
    width: 100%;
    border-radius: 8px;
    flex-shrink: 0;
    display: block;
  }

/* ── Scene wrapper ── */
  .scene {
    position: relative;
    z-index: 1;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

/* ── Floating icon above popup ── */
  .popup-icon {
    display: none;
  }

/* ── Chrome extension popup shell ── */
  .popup {
    width: 320px;
    height: 540px;
    background: #222;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 8px 20px rgba(0,0,0,.6),
      0 0 40px 20px rgba(255,255,255,0.4),
      0 0 80px 40px rgba(255,255,255,0.2);
  }

/* ── Top bar ── */
  .top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 42px;
    background: #222;
    border-bottom: 1px solid #2f2f2f;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }

.pinly-logo {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.5px;
    font-style: normal;
    line-height: 1;
  }

/* ── Middle scroll area ── */
  .middle {
    position: absolute;
    top: 42px; left: 0; right: 0;
    bottom: 56px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    gap: 0;
  }

/* ── Moodboard card ── */
  .card {
    width: 290px;
    height: 200px;
    background: #2a2a2a;
    border-radius: 8px;
    border: 1px solid #2f2f2f;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

.card.quickdrop-active {
    border: 2px solid #666666;
  }

.card.hovered {
    background: #333;
    border-color: #444;
  }

.card.quickdrop-active.hovered {
    border-color: #666666;
  }

.card-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #757575;
    font-size: 18px;
    white-space: nowrap;
    z-index: 25;
    font-family: arial, sans-serif;
    transition: opacity 0.4s ease, color 0.4s ease;
  }

/* ── Bottom bar ── */
  .bottom-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: #2a2a2a;
    border-top: 1px solid #2f2f2f;
    box-shadow: 0 -6px 16px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    z-index: 100;
  }

.btn-add {
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    line-height: 1;
    transition: color 0.25s;
  }
  .btn-add.active { color: #fff; }

.btn-info {
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 24px;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: color 0.25s;
  }

/* ── Input box overlay ── */
  .input-box {
    position: absolute;
    top: 49%; left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 260px;
    background: #181818;
    border: 1px solid #2f2f2f;
    border-radius: 4px;
    padding: 9px;
    font-size: 18px;
    color: #fff;
    font-family: arial, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .input-box.visible { opacity: 1; }

/* ── Context menu ── */
  .context-menu {
    position: absolute;
    background: #333;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    width: 115px;
    z-index: 300;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9);
    transform-origin: top left;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }
  .context-menu.visible {
    opacity: 1;
    transform: scale(1);
  }
  .context-menu ul { list-style: none; }
  .context-menu li {
    padding: 7px 11px;
    color: #e6e6e6;
    font-size: 12px;
    border-radius: 5px;
    transition: background 0.15s;
    white-space: nowrap;
  }
  .context-menu li.highlight {
    background: #555;
    color: #fff;
  }

/* ── Cursor ── */
  .cursor {
    position: fixed;
    width: 18px; height: 18px;
    pointer-events: none;
    z-index: 99999;
    transition: left 0.5s cubic-bezier(0.25,0.46,0.45,0.94),
                top 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
    display: none;
  }

/* ── Card thumb images ── */
  .card-thumb {
    position: absolute;
    border-radius: 4px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .card-thumb.shown {
    opacity: 1;
    transform: scale(1);
  }

/* ── Quick Drop + overlay ── */
  .qd-overlay {
    position: fixed;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
  }
  .qd-overlay.visible { opacity: 1; }
  .qd-overlay.clicked { transform: rotate(90deg); }

.qd-badge {
    position: absolute;
    top: 7px; left: 7px;
    background: #a99fec;
    color: white;
    font-size: 9px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 99px;
    letter-spacing: 0.05em;
    z-index: 20;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .qd-badge.visible {
    opacity: 1;
    transform: translateY(0);
  }

/* ── Ripple click feedback ── */
  .ripple {
    position: fixed;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    width: 26px; height: 26px;
    transform: scale(0);
    z-index: 500;
    pointer-events: none;
    animation: rippleAnim 0.5s ease-out forwards;
  }
  @keyframes rippleAnim {
    to { transform: scale(3); opacity: 0; }
  }

/* ── Step caption ── */
  .caption {
    position: fixed;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 99px;
    white-space: nowrap;
    z-index: 400;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    font-weight: 300;
  }
  .caption.visible { opacity: 1; }

</style>
</head>
<body>

<div class="bg-col-mobile" id="bgCol"></div>

<img src="images/animationimages/favicon48.png" class="popup-icon" alt="pinly">

<div class="top-bar">
      <span class="pinly-logo">pinly</span>
    </div>

<div class="middle" id="middle"></div>

<input class="input-box" id="inputBox" value="" readonly>

<div class="bottom-bar">
      <button class="btn-add" id="addBtn">+</button>
      <button class="btn-info">i</button>
    </div>

<div class="caption" id="caption"></div>

</div>
</div>

<div class="qd-overlay" id="qdOverlay">
  <svg width="20" height="20" viewBox="0 0 16 16" fill="none" style="pointer-events:none;">
    <line x1="8" y1="2" x2="8" y2="14" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
    <line x1="2" y1="8" x2="14" y2="8" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
  </svg>
</div>

<svg class="cursor" id="cursor" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 2L16 10L9.5 11.5L7 18L4 2Z" fill="white" stroke="#333" stroke-width="0.8"/>
</svg>

// ── Abort / loop control ──
let _abortDemo = false;
let _demoRunning = false;
let _runId = 0;

// ── Image preload cache ──
const _imgCache = {};
IMG_POOL.forEach(src => { const im = new Image(); im.src = src; _imgCache[src] = im; });

let _bgImgInfos = null;

// ── Preload image dimensions ──
function preloadImages() {
  return Promise.all(IMG_POOL.map(src => new Promise(resolve => {
    const img = _imgCache[src] || new Image();
    img.onload  = () => resolve({ src, w: img.naturalWidth, h: img.naturalHeight });
    img.onerror = () => resolve({ src, w: 1, h: 1 });
    if (img.complete && img.naturalWidth) resolve({ src, w: img.naturalWidth, h: img.naturalHeight });
  })));
}

// ── Build single scrolling background column ──
function buildBgColumn() {
  const col = document.getElementById('bgCol');
  col.innerHTML = '';
  document.querySelectorAll('style[data-bg-mob]').forEach(s => s.remove());

const colWidth = window.innerWidth - GAP * 2;

function doBuild(imgInfos) {
    // Shuffle
    function shuffle(arr) {
      const a = arr.slice();
      for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
      }
      return a;
    }

// Compute strip height
    let stripHeight = 0;
    for (const info of ordered) {
      stripHeight += Math.round(colWidth * info.h / info.w) + GAP;
    }

const wrapper = document.createElement('div');
    wrapper.className = 'bg-strip';
    wrapper.style.cssText = `will-change:transform;`;

const numStrips = Math.ceil((window.innerHeight * 3) / stripHeight) + 2;
    for (let s = 0; s < numStrips; s++) {
      const strip = makeStrip(ordered);
      // Unwrap: append children directly
      while (strip.firstChild) wrapper.appendChild(strip.firstChild);
    }

wrapper.style.marginTop = -(stripHeight * 1.5) + 'px';
    const SPEED = 70; // px/s (slowed for mobile to keep tiles visible longer)
    const dur = stripHeight / SPEED;
    wrapper.style.animation = `${kfName} ${dur.toFixed(2)}s linear infinite`;
    wrapper.style.animationPlayState = 'paused';

col.appendChild(wrapper);
  }

if (_bgImgInfos) {
    doBuild(_bgImgInfos);
  } else {
    preloadImages().then(infos => {
      _bgImgInfos = infos;
      doBuild(infos);
    });
  }
}

// ── DOM refs ──
const popup    = document.getElementById('popup');
const middle   = document.getElementById('middle');
const inputBox = document.getElementById('inputBox');
const ctxMenu  = document.getElementById('ctxMenu');
const addBtn   = document.getElementById('addBtn');
const caption  = document.getElementById('caption');
const cursor   = document.getElementById('cursor');
const qdItem   = document.getElementById('qdItem');

// ── Sleep with abort ──
let _skipCallbacks = [];

function onSkipTo(cb) { _skipCallbacks.push(cb); }

// ── Cursor helpers ──
function moveCursor(x, y, duration = 500) {
  const rect = popup.getBoundingClientRect();
  cursor.style.left = (rect.left + x) + 'px';
  cursor.style.top  = (rect.top  + y) + 'px';
  cursor.style.transition = `left ${duration}ms cubic-bezier(0.25,0.46,0.45,0.94), top ${duration}ms cubic-bezier(0.25,0.46,0.45,0.94)`;
}

function spawnRipple(x, y) {
  const r = document.createElement('div');
  r.className = 'ripple';
  r.style.left = (x - 13) + 'px';
  r.style.top  = (y - 13) + 'px';
  document.body.appendChild(r);
  setTimeout(() => r.remove(), 600);
}

function clampThumb(left, top, w, h) {
  const l = Math.max(PAD, Math.min(left, CARD_W - w - PAD));
  const t = Math.max(PAD, Math.min(top,  CARD_H - h - PAD));
  return { l, t };
}

function poolImg(idx) {
  return IMG_POOL[((idx % IMG_POOL.length) + IMG_POOL.length) % IMG_POOL.length];
}

// ── Draw image cover-cropped into canvas rect ──
function drawPoolImg(ctx, src, x, y, w, h, radius) {
  radius = radius || 4;
  return new Promise(resolve => {
    const img = _imgCache[src] || new Image();
    if (!_imgCache[src]) { _imgCache[src] = img; img.src = src; }
    function paint() {
      ctx.save();
      ctx.beginPath();
      ctx.roundRect(x, y, w, h, Math.min(radius, w / 4, h / 4));
      ctx.clip();
      const iw = img.naturalWidth  || w;
      const ih = img.naturalHeight || h;
      const scale = Math.max(w / iw, h / ih);
      const sw = iw * scale, sh = ih * scale;
      const ox = x + (w - sw) / 2, oy = y + (h - sh) / 2;
      ctx.drawImage(img, ox, oy, sw, sh);
      ctx.restore();
      resolve();
    }
    if (img.complete && img.naturalWidth) paint();
    else { img.onload = paint; img.onerror = resolve; }
  });
}

// ── Draw image contain-fit into canvas rect ──
function drawPoolImgContain(ctx, src, x, y, w, h, radius) {
  radius = radius || 4;
  return new Promise(resolve => {
    const img = _imgCache[src] || new Image();
    if (!_imgCache[src]) { _imgCache[src] = img; img.src = src; }
    function paint() {
      ctx.save();
      ctx.beginPath();
      ctx.roundRect(x, y, w, h, Math.min(radius, w / 4, h / 4));
      ctx.clip();
      const iw = img.naturalWidth  || w;
      const ih = img.naturalHeight || h;
      const scale = Math.min(w / iw, h / ih);
      const sw = iw * scale, sh = ih * scale;
      const ox = x + (w - sw) / 2, oy = y + (h - sh) / 2;
      ctx.drawImage(img, ox, oy, sw, sh);
      ctx.restore();
      resolve();
    }
    if (img.complete && img.naturalWidth) paint();
    else { img.onload = paint; img.onerror = resolve; }
  });
}

// (tile selection done inline in runDemo)

// ═════════════════════════════════════════════
// MAIN MOBILE DEMO
// ═════════════════════════════════════════════
async function runDemo() {
  // Clear any stale state from previous run
  middle.innerHTML = '';
  middle.scrollTop = 0;
  middle.style.overflowY = 'hidden';

cursor.style.display = 'block';

// ── Step 0: Cursor enters, hovers over + ──
  moveCursor(25, 560, 0);
  await sleep(100);
  moveCursor(25, 505, 300);
  await sleep(250);
  addBtn.classList.add('active');
  await sleep(200);

// ── Step 1: Click + to create canvas ──
  spawnRipple(popup.getBoundingClientRect().left + 25, popup.getBoundingClientRect().top + 505);
  await sleep(300);

// Show input box
  inputBox.classList.add('visible');
  inputBox.value = '';
  await sleep(400);

// Type name
  const name = 'MY PROJECT';
  for (let i = 0; i <= name.length; i++) {
    inputBox.value = name.slice(0, i);
    await sleep(85);
  }
  await sleep(500);

// Confirm — create card
  inputBox.classList.remove('visible');
  addBtn.classList.remove('active');

const card = document.createElement('div');
  card.className = 'card';
  card.innerHTML = `<span class="card-label">MY PROJECT</span>`;
  card.style.opacity = '0';
  card.style.transform = 'translateY(10px) scale(0.97)';
  card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
  middle.appendChild(card);

await sleep(50);
  card.style.opacity = '1';
  card.style.transform = 'translateY(0) scale(1)';
  await sleep(600);

// ── Step 2: Right-click → Quick Drop ──
  await sleep(300);
  moveCursor(160, 190);
  await sleep(600);
  card.classList.add('hovered');
  await sleep(300);

// Context menu
  card.classList.remove('hovered');
  ctxMenu.style.left = '85px';
  ctxMenu.style.top  = '160px';
  ctxMenu.classList.add('visible');
  await sleep(300);

// Cursor to Quick Drop
  moveCursor(130, 240);
  await sleep(450);
  qdItem.classList.add('highlight');
  spawnRipple(popup.getBoundingClientRect().left + 130, popup.getBoundingClientRect().top + 240);
  await sleep(300);
  qdItem.textContent = 'Quick Drop ✓';
  card.classList.add('quickdrop-active');
  await sleep(400);
  ctxMenu.classList.remove('visible');
  qdItem.classList.remove('highlight');
  card.classList.add('hovered');
  await sleep(400);

// ── Step 3: Popup slides down — upper half = images, lower half = top of popup ──
  const bgCol = document.getElementById('bgCol');
  bgCol.style.opacity = '1';
  const wrappers = bgCol.querySelectorAll('[style*="will-change"]');
  wrappers.forEach(w => w.style.animationPlayState = 'running');

// Slide popup down so top-bar + card are visible at the lower portion of screen
  const scene = document.getElementById('scene');
  scene.style.transition = 'transform 0.6s cubic-bezier(0.4,0,0.2,1)';
  const vH = window.innerHeight;
  const popupRect = popup.getBoundingClientRect();
  // We want: the popup top-bar sits roughly at ~50% of viewport height
  // This gives the entire upper half for scrolling images
  // and the card (just below the top-bar) is clearly visible at ~55% of screen
  const cardTopInPopup = 52;
  const desiredCardTop = vH * 0.60;
  const shiftDown = desiredCardTop - (popupRect.top + cardTopInPopup);
  scene.style.transform = `translateY(${shiftDown}px)`;
  await sleep(700);

// Ensure cursor stays visible during Quick Drop (it moves into the upper half)
  cursor.style.display = 'block';
  // Re-append cursor to body so it renders above all other elements
  document.body.appendChild(cursor);

const qdOverlay = document.getElementById('qdOverlay');
  const usedTiles = new Set();
  const usedSrcs = new Set();

// Thumb positions for the 3 images in the card (matching original style)
  const rapidThumbs = [
    { slow: true,  width: 90, height: 65, left: 20,  top: 20  },
    { slow: true,  width: 70, height: 95, left: 125, top: 15  },
    { slow: false, width: 75, height: 60, left: 60,  top: 85  },
  ];

// Helper: find a bg image in the upper portion of the screen (above the visible popup)
  function getTileInUpperHalf() {
    const colEl = document.getElementById('bgCol');
    const imgs = colEl.querySelectorAll('.bg-img');
    const popupScreenTop = popup.getBoundingClientRect().top;
    const zoneTop = 15;
    const zoneBottom = popupScreenTop - 10;
    for (const img of imgs) {
      if (usedTiles.has(img)) continue;
      if (usedSrcs.has(img.src)) continue;
      const r = img.getBoundingClientRect();
      if (r.top >= zoneTop && r.bottom <= zoneBottom && r.height > 25) {
        return img;
      }
    }
    for (const img of imgs) {
      if (usedTiles.has(img)) continue;
      if (usedSrcs.has(img.src)) continue;
      const r = img.getBoundingClientRect();
      const cy = r.top + r.height / 2;
      if (cy > zoneTop + 5 && cy < zoneBottom && r.height > 15) {
        return img;
      }
    }
    return null;
  }

let addedCount = 0;
  for (let attempt = 0; attempt < 15 && addedCount < 3; attempt++) {
    const tileEl = getTileInUpperHalf();
    if (!tileEl) {
      await sleep(500);
      continue;
    }
    usedTiles.add(tileEl);
    usedSrcs.add(tileEl.src);

const t = rapidThumbs[addedCount];

// 1) Move cursor to CENTER of the tile — slow for first two, fast after
    const moveDur = t.slow ? 1400 : 300;
    const moveWait = t.slow ? 1500 : 350;
    const tr = tileEl.getBoundingClientRect();
    moveFixedCursor(tr.left + tr.width / 2, tr.top + tr.height / 2, moveDur);
    // Poll cursor position and remove hover the moment it leaves the card bounds
    (function watchHover() {
      if (!card.classList.contains('hovered')) return;
      const cr = card.getBoundingClientRect();
      const cx = parseFloat(cursor.style.left);
      const cy = parseFloat(cursor.style.top);
      if (cx < cr.left || cx > cr.right || cy < cr.top || cy > cr.bottom) {
        card.classList.remove('hovered');
      } else {
        requestAnimationFrame(watchHover);
      }
    })();
    await sleep(moveWait);

// 2) Show + overlay and track the tile position
    qdOverlay.classList.remove('clicked');
    qdOverlay.style.transform = '';
    qdOverlay.style.opacity = '1';
    qdOverlay.classList.add('visible');
    let tracking = true;
    const track = () => {
      if (!tracking || _abortDemo) return;
      const r = tileEl.getBoundingClientRect();
      qdOverlay.style.left = (r.left + 10) + 'px';
      qdOverlay.style.top  = (r.top  + 10) + 'px';
      requestAnimationFrame(track);
    };
    track();
    await sleep(400);

// 3) Cursor moves to slightly below center of the + icon
    const r2 = tileEl.getBoundingClientRect();
    moveFixedCursor(r2.left + 10 + 14, r2.top + 10 + 34, 250);
    await sleep(300);

// 4) Click — ripple + rotate
    const r3 = tileEl.getBoundingClientRect();
    spawnRipple(r3.left + 10 + 14, r3.top + 10 + 34);
    qdOverlay.classList.add('clicked');
    await sleep(300);
    tracking = false;
    qdOverlay.style.opacity = '0';
    // Reset rotation invisibly
    qdOverlay.style.transition = 'none';
    qdOverlay.classList.remove('visible');
    qdOverlay.classList.remove('clicked');
    qdOverlay.style.transform = '';
    requestAnimationFrame(() => qdOverlay.style.transition = '');

// 5) Add thumb to card
    const tileImgSrc = tileEl.src || poolImg(addedCount);
    const tileRR = tileEl.getBoundingClientRect();
    const aspectR = tileRR.width / tileRR.height;

const tw = t.width;
    const th = Math.round(tw / aspectR);
    const { l, t: tTop } = clampThumb(t.left, t.top, tw, th);

await sleep(400);

// ── Step 4: Hide bg, cursor returns to card, popup slides back ──
  // Start bg fade and popup slide-back simultaneously
  bgCol.style.transition = 'opacity 0.6s ease';
  bgCol.style.opacity = '0';
  wrappers.forEach(w => w.style.animationPlayState = 'paused');

// Slide popup back to center at the same time as bg fades
  scene.style.transition = 'transform 0.7s cubic-bezier(0.4,0,0.2,1)';
  scene.style.transform = 'translateY(0)';

// Move cursor back onto the card, adjusting for the slide-back
  const cardReturnRect = card.getBoundingClientRect();
  const returnX = cardReturnRect.left + cardReturnRect.width * 0.5;
  const returnY = cardReturnRect.top + cardReturnRect.height * 0.4;
  const cursorTargetY = returnY - shiftDown;
  cursor.style.transition = 'left 700ms cubic-bezier(0.4,0,0.2,1), top 700ms cubic-bezier(0.4,0,0.2,1)';
  cursor.style.left = returnX + 'px';
  cursor.style.top  = cursorTargetY + 'px';

await sleep(500);

// Brighten card as cursor arrives (hover effect)
  card.style.transition = 'none';
  card.style.filter = 'brightness(1.25)';
  card.style.transition = 'filter 0.2s ease';
  await sleep(300);

// Keep card I hovered (brightness already set) — just clear quickdrop text
  qdItem.textContent = 'Quick Drop';

await sleep(600);

// ── makePrefilled for mobile ──
  function makePrefilled(label, thumbDefs, containAspect) {
    const c = document.createElement('div');
    c.className = 'card';
    c.innerHTML = `<span class="card-label" style="color:#fff">${label}</span>`;
    c.style.opacity = '0';
    c.style.transform = 'translateY(8px) scale(0.97)';
    c.style.transition = 'opacity 0.5s ease, transform 0.5s ease';

const dpr = window.devicePixelRatio || 1;
    const cnv = document.createElement('canvas');
    cnv.className = 'thumb-redraw';
    cnv.width  = CARD_W * dpr;
    cnv.height = CARD_H * dpr;
    cnv.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border-radius:8px;z-index:20;pointer-events:none;opacity:1;';
    c.appendChild(cnv);
    middle.appendChild(c);

const ctx = cnv.getContext('2d');
    ctx.scale(dpr, dpr);
    ctx.fillStyle = '#2a2a2a';
    ctx.fillRect(0, 0, CARD_W, CARD_H);

let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    thumbDefs.forEach(d => {
      minX = Math.min(minX, d.l); minY = Math.min(minY, d.t);
      maxX = Math.max(maxX, d.l + d.w); maxY = Math.max(maxY, d.t + d.h);
    });
    const thumbScale = Math.min(CARD_W / (maxX - minX), CARD_H / (maxY - minY)) * 0.9;
    const originTX = -minX * thumbScale + (CARD_W - (maxX - minX) * thumbScale) / 2;
    const originTY = -minY * thumbScale + (CARD_H - (maxY - minY) * thumbScale) / 2;

(async () => {
      for (let i = 0; i < thumbDefs.length; i++) {
        const d = thumbDefs[i];
        const x = d.l * thumbScale + originTX;
        const y = d.t * thumbScale + originTY;
        const w = d.w * thumbScale;
        const h = d.h * thumbScale;
        await (containAspect ? drawPoolImgContain : drawPoolImg)(ctx, d.img, x, y, w, h, Math.min(4, w/4, h/4));
      }
    })();

return c;
  }

// Card layouts (same as desktop)
  const thumbsII = [
    { l:15,  t:15,  w:160, h:90, img:'images/animationimages/image30.png' },
    { l:190, t:12,  w:110, h:60, img:'images/animationimages/image32.png' },
    { l:190, t:80,  w:55,  h:80, img:'images/animationimages/image33.png' },
    { l:15,  t:115, w:75,  h:90, img:'images/animationimages/image19.png' },
    { l:100, t:120, w:80,  h:55, img:'images/animationimages/image17.png' },
    { l:255, t:168, w:55,  h:40, img:'images/animationimages/image15.png' },
    { l:100, t:60,  w:80,  h:52, img:'images/animationimages/image5.png' },
    { l:190, t:168, w:55,  h:40, img:'images/animationimages/image11.png' },
    { l:15,  t:55,  w:75,  h:52, img:'images/animationimages/image12.png' },
  ];
  const thumbsIII = [
    { l:12,  t:12,  w:88, h:65, img:'images/animationimages/image16.png' },
    { l:112, t:12,  w:88, h:65, img:'images/animationimages/image18.png' },
    { l:212, t:12,  w:88, h:65, img:'images/animationimages/image25.png' },
    { l:12,  t:87,  w:88, h:65, img:'images/animationimages/image26.png' },
    { l:112, t:87,  w:88, h:65, img:'images/animationimages/image23.png' },
    { l:212, t:87,  w:88, h:65, img:'images/animationimages/image1.png' },
    { l:62,  t:162, w:88, h:55, img:'images/animationimages/image11.png' },
    { l:162, t:162, w:88, h:55, img:'images/animationimages/image4.png' },
  ];
  const thumbsIV = [
    { l:85,  t:55,  w:155, h:120, img:'images/animationimages/image22.png' },
    { l:10,  t:10,  w:68,  h:48,  img:'images/animationimages/image27.png' },
    { l:250, t:10,  w:62,  h:48,  img:'images/animationimages/image28.png' },
    { l:10,  t:65,  w:68,  h:55,  img:'images/animationimages/image29.png' },
    { l:250, t:65,  w:62,  h:55,  img:'images/animationimages/image13.png' },
    { l:10,  t:155, w:68,  h:52,  img:'images/animationimages/image14.png' },
    { l:90,  t:180, w:75,  h:38,  img:'images/animationimages/image6.png' },
    { l:175, t:180, w:75,  h:38,  img:'images/animationimages/image7.png' },
    { l:250, t:155, w:62,  h:52,  img:'images/animationimages/image9.png' },
  ];
  const thumbsV = [
    { l:10,  t:10,  w:300, h:50, img:'images/animationimages/image2.png' },
    { l:10,  t:70,  w:145, h:55, img:'images/animationimages/image3.png' },
    { l:165, t:70,  w:145, h:55, img:'images/animationimages/image8.png' },
    { l:10,  t:135, w:95,  h:55, img:'images/animationimages/image10.png' },
    { l:115, t:135, w:95,  h:55, img:'images/animationimages/image20.png' },
    { l:220, t:135, w:90,  h:55, img:'images/animationimages/image21.png' },
    { l:10,  t:200, w:300, h:15, img:'images/animationimages/image24.png' },
  ];

// Add card II with animation
  const card2 = makePrefilled('MY PROJECT II', thumbsII, true);
  await sleep(60);
  card2.style.transition = 'opacity 1.1s ease, transform 1.1s ease';
  card2.style.opacity = '1';
  card2.style.transform = 'translateY(0) scale(1)';
  await sleep(1300); // let card II settle before scroll starts

// Cards III–V added silently below
  const card3 = makePrefilled('MY PROJECT III', thumbsIII, true);
  card3.style.transition = 'none'; card3.style.opacity = '1'; card3.style.transform = 'translateY(0) scale(1)';
  const card4 = makePrefilled('MY PROJECT IV', thumbsIV, true);
  card4.style.transition = 'none'; card4.style.opacity = '1'; card4.style.transform = 'translateY(0) scale(1)';
  const card5 = makePrefilled('MY PROJECT V', thumbsV, true);
  card5.style.transition = 'none'; card5.style.opacity = '1'; card5.style.transform = 'translateY(0) scale(1)';

// ── Linger on card I — cursor already on card with brightness from return ──
  // Card I is already filter:brightness(1.25) from when cursor returned
  // Just move cursor to final position within the popup middle area
  const midRect = middle.getBoundingClientRect();
  const cursorInPopupX = midRect.left + midRect.width * 0.5;
  const cursorInPopupY = midRect.top + midRect.height * 0.4;
  cursor.style.display = 'block';
  moveFixedCursor(cursorInPopupX, cursorInPopupY, 400);
  await sleep(600);

// ── Scroll through projects — with hover highlighting ──
  middle.style.overflowY = 'auto';
  await sleep(40);

const scrollTarget = (middle.scrollHeight - middle.clientHeight) * 0.80;
  const scrollDuration = 3000;
  const scrollT0 = performance.now();

// Card I is already hovered — seed the scroll tracker so it transitions smoothly
  let hoveredScrollCard = card;
  card.style.transition = 'filter 0.2s ease';
  await new Promise((resolve, reject) => {
    function step(now) {
      if (_abortDemo) { reject(new Error('abort')); return; }
      const p = Math.min((now - scrollT0) / scrollDuration, 1);
      middle.scrollTop = scrollTarget * p;

// Highlight whichever card the cursor is currently over
      const cx = parseFloat(cursor.style.left);
      const cy = parseFloat(cursor.style.top);
      const allCards = Array.from(middle.querySelectorAll('.card'));
      let found = null;
      for (const c of allCards) {
        const r = c.getBoundingClientRect();
        if (cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom) {
          found = c; break;
        }
      }
      if (found !== hoveredScrollCard) {
        if (hoveredScrollCard) hoveredScrollCard.style.filter = '';
        if (found) { found.style.transition = 'none'; found.style.filter = 'brightness(1.25)'; found.style.transition = 'filter 0.2s ease'; }
        hoveredScrollCard = found;
      }

if (p < 1) requestAnimationFrame(step);
      else resolve();
    }
    requestAnimationFrame(step);
  });
  // Keep the last hovered card bright until fade out
  await sleep(1000);

// ── Fade out and loop ──
  popup.style.transition = 'opacity 0.6s ease';
  popup.style.opacity = '0';
  document.querySelector('.popup-icon').style.transition = 'opacity 0.6s ease';
  document.querySelector('.popup-icon').style.opacity = '0';
  cursor.style.transition = 'opacity 0.6s ease';
  cursor.style.opacity = '0';
  await sleep(700);

// ── Animation complete ──
  // Notify parent page that animation is done
  if (window.parent !== window) {
    window.parent.postMessage({ type: 'pinly-animation-done' }, '*');
  }
}

// ── Safe runner ──
async function runDemoSafe() {
  if (_demoRunning) return;
  _demoRunning = true;
  _abortDemo = false;
  _runId++;
  try {
    await runDemo();
  } catch (e) {
    if (e.message !== 'abort') console.error('Demo error:', e);
  }
  _demoRunning = false;
}

// ── Cleanup ──
function cleanupDemo() {
  document.querySelectorAll('.ripple').forEach(el => el.remove());
  middle.innerHTML = '';
  inputBox.classList.remove('visible');
  inputBox.value = '';
  ctxMenu.classList.remove('visible');
  ctxMenu.querySelectorAll('li').forEach(li => li.classList.remove('highlight'));
  addBtn.classList.remove('active');
  cursor.style.display = 'none';
  cursor.style.transition = '';
  cursor.style.opacity = '1';
  popup.style.transition = 'none'; popup.style.opacity = '1';
  document.querySelector('.popup-icon').style.transition = 'none';
  document.querySelector('.popup-icon').style.opacity = '1';
  const bgCol = document.getElementById('bgCol');
  bgCol.style.transition = 'none'; bgCol.style.opacity = '0';
  bgCol.querySelectorAll('[style*="will-change"]').forEach(w => w.style.animationPlayState = 'paused');
  const qdOverlay = document.getElementById('qdOverlay');
  qdOverlay.classList.remove('visible', 'clicked');
  qdOverlay.style.opacity = '0';
  qdOverlay.style.transform = '';
  qdItem.textContent = 'Quick Drop';
  const scene = document.getElementById('scene');
  scene.style.transition = 'none';
  scene.style.transform = 'translateY(0)';
  middle.style.overflowY = 'hidden';
  middle.scrollTop = 0;
}

// ── Resize handler ──
let _resizeTimer = null;
let _lastWidth = window.innerWidth;
window.addEventListener('resize', () => {
  clearTimeout(_resizeTimer);
  _resizeTimer = setTimeout(() => {
    if (window.innerWidth === _lastWidth) return;
    _lastWidth = window.innerWidth;
    // If we crossed above 768px, reload to switch to desktop mode
    if (window.innerWidth > 768) {
      location.reload();
      return;
    }
    // Otherwise, smart restart within mobile mode
    _abortDemo = true;
    _runId++;
    const cbs = _skipCallbacks.splice(0);
    cbs.forEach(cb => cb());
    setTimeout(() => {
      cleanupDemo();
      buildBgColumn();
      setTimeout(() => {
        _abortDemo = false;
        _demoRunning = false;
        runDemoSafe();
      }, 400);
    }, 100);
  }, 350);
});

// ── Init ──
let _initDone = false;
function initOnce() {
  if (_initDone) return;
  _initDone = true;
  buildBgColumn();
  setTimeout(runDemoSafe, 800);
}
if (document.fonts && document.fonts.ready) {
  document.fonts.ready.then(initOnce);
} else {
  window.addEventListener('load', initOnce);
}
// Fallback in case fonts.ready already resolved before listener
setTimeout(initOnce, 1000);
</script>
</body>
</html>