const heroPhoto = document.querySelector('.hero-photo'); const thumbs = [...document.querySelectorAll('.thumb-item')]; const portrait = document.querySelector('.scene-portrait'); const thumbsScene = document.querySelector('.scene-thumbs'); const mosaicTwo = document.querySelector('.scene-mosaic-two'); const mosaicThree = document.querySelector('.scene-mosaic-three'); const nail = document.querySelector('.scene-nail'); const header = document.querySelector('.site-header'); const footer = document.querySelector('.site-footer'); const phoneQuery = window.matchMedia('(max-width: 768px)'); function phoneLayout() { return phoneQuery.matches; } function buildScenes() { if (phoneLayout()) { return [ [portrait], [thumbsScene], [mosaicTwo], [mosaicThree], [nail] ]; } return [ [portrait, thumbsScene], [mosaicTwo, mosaicThree], [nail] ]; } let scenes = buildScenes(); let index = 0; let thumbIndex = 0; let busy = false; let auto = true; let autoTimer = 0; let resumeTimer = 0; let linkHover = false; let thumbHover = false; let wheelLock = 0; let drag = null; document.querySelectorAll('.scene-mosaic .stack').forEach((stack) => { const originals = [...stack.children]; const track = document.createElement('div'); track.className = 'stack-track'; originals.forEach((node) => track.appendChild(node)); originals.forEach((node) => track.appendChild(node.cloneNode(true))); originals.forEach((node) => track.appendChild(node.cloneNode(true))); stack.appendChild(track); }); function ease(t) { return t * t * t * (t * (t * 6 - 15) + 10); } function held() { return linkHover || thumbHover; } function showThumb(i) { thumbIndex = i; const image = thumbs[i].querySelector('.thumb-image'); heroPhoto.src = image.currentSrc || image.src; heroPhoto.alt = image.alt; thumbs.forEach((item, n) => item.classList.toggle('is-active', n === i)); } function hideScene(scene) { scene.style.visibility = 'hidden'; scene.style.zIndex = ''; scene.style.transform = ''; } function shift(el, px, z) { el.style.visibility = 'visible'; el.style.zIndex = z == null ? '' : String(z); el.style.transform = px ? `translate3d(${px}px,0,0)` : ''; } function setChrome(mode, px) { const pair = [header, footer]; if (mode === 'on' || mode === 'off') { pair.forEach((el) => { el.style.visibility = mode === 'off' ? 'hidden' : ''; el.style.zIndex = ''; el.style.transform = ''; }); return; } const z = mode === 'under' ? '4' : '7'; pair.forEach((el) => { el.style.visibility = 'visible'; el.style.zIndex = z; el.style.transform = px ? `translate3d(${px}px,0,0)` : ''; }); } function setGridFlow(step) { document.querySelectorAll('.scene-mosaic .stack').forEach((stack, i) => { const track = stack.querySelector('.stack-track'); const height = stack.clientHeight; if (!track || !height) return; const dir = i % 2 === 0 ? -1 : 1; track.style.transform = `translate3d(0, ${dir * height * 0.18 * step}px, 0)`; }); } function isGrid(i) { return scenes[i].some((scene) => scene.classList.contains('scene-mosaic')); } function onThumbs(i) { return scenes[i].includes(thumbsScene); } function gridStep(from, to, t) { const fromGrid = isGrid(from); const toGrid = isGrid(to); if (fromGrid && toGrid) return 1; if (toGrid && from < to) return t; if (fromGrid && to < from) return 1 - t; if (fromGrid && to > from) return 1 + t; if (toGrid && from > to) return 2 - t; return null; } function gridRest(i) { const grids = scenes.map((_, n) => n).filter(isGrid); if (!grids.length || i < grids[0]) return 0; if (grids.includes(i)) return 1; return 2; } function paint(from, to, t) { const width = window.innerWidth; const last = scenes.length - 1; const forward = to > from || (from === last && to === 0); const outX = (forward ? -width : width) * t; const inX = (forward ? width : -width) * (1 - t); scenes.forEach((group, i) => { if (i === from) group.forEach((scene) => shift(scene, outX, from === 0 ? 5 : 6)); else if (i === to) group.forEach((scene) => shift(scene, inX, to === 0 ? 3 : 2)); else group.forEach(hideScene); }); if (from === 0) setChrome('over', outX); else if (to === 0) setChrome(forward ? 'under' : 'over', inX); else setChrome('off'); const step = gridStep(from, to, t); if (step != null) setGridFlow(step); } function settle(i) { const enteredThumbs = onThumbs(i) && (index === i || !onThumbs(index)); const comingIn = index !== i; index = i; scenes.forEach((group, n) => { if (n === i) group.forEach((scene) => shift(scene, 0, i === 0 ? null : 6)); else group.forEach(hideScene); }); setChrome(i === 0 ? 'on' : 'off'); setGridFlow(gridRest(i)); if (comingIn && enteredThumbs) showThumb(0); } function animateTo(dest) { if (dest === index) { settle(index); if (auto && !held()) schedule(); return; } const from = index; busy = true; clearTimeout(autoTimer); const started = performance.now(); function tick(now) { const t = Math.min(1, (now - started) / 1500); paint(from, dest, ease(t)); if (t < 1) requestAnimationFrame(tick); else { busy = false; settle(dest); if (auto && !held()) schedule(); } } requestAnimationFrame(tick); } function advance() { if (!auto || busy || held()) return; if (onThumbs(index) && thumbIndex < thumbs.length - 1) { showThumb(thumbIndex + 1); schedule(); return; } animateTo(index < scenes.length - 1 ? index + 1 : 0); } function schedule() { clearTimeout(autoTimer); if (!auto || busy || held()) return; const delay = onThumbs(index) && thumbIndex < thumbs.length - 1 ? 1600 : 1700 + index * 200; autoTimer = setTimeout(advance, delay); } function pauseAuto() { auto = false; clearTimeout(autoTimer); clearTimeout(resumeTimer); resumeTimer = setTimeout(() => { if (held()) return; auto = true; if (!busy) schedule(); }, 1500); } function holdForLink() { linkHover = true; clearTimeout(autoTimer); clearTimeout(resumeTimer); } function releaseHold() { if (held()) return; if (!auto) { clearTimeout(resumeTimer); resumeTimer = setTimeout(() => { if (held()) return; auto = true; if (!busy) schedule(); }, 1500); return; } if (!busy) schedule(); } function goTo(dest) { dest = Math.max(0, Math.min(scenes.length - 1, dest)); if (busy || dest === index) { if (auto && !busy && !held()) schedule(); return; } animateTo(dest); } thumbs.forEach((thumb, i) => { thumb.addEventListener('click', () => { if (!onThumbs(index)) return; showThumb(i); if (auto && !held() && !busy) schedule(); }); }); document.querySelectorAll('a[href="#"], a.book-tab').forEach((link) => { link.addEventListener('click', (event) => event.preventDefault()); }); window.addEventListener('wheel', (event) => { event.preventDefault(); const now = performance.now(); if (busy || now < wheelLock) { pauseAuto(); return; } const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY; if (Math.abs(delta) < 8) return; wheelLock = now + 920; pauseAuto(); goTo(delta > 0 ? index + 1 : index - 1); }, { passive: false }); window.addEventListener('pointerdown', (event) => { if (event.pointerType !== 'mouse' && event.target instanceof Element && event.target.closest('.thumb-item') && onThumbs(index)) { thumbHover = true; clearTimeout(autoTimer); clearTimeout(resumeTimer); } if (event.target instanceof Element && event.target.closest('a, button, .thumb-item')) return; if (event.button !== 0 || busy) return; drag = { y: event.clientY, index, moved: false }; }); window.addEventListener('pointermove', (event) => { if (!drag || busy) return; const dy = event.clientY - drag.y; if (!drag.moved) { if (Math.abs(dy) < 8) return; drag.moved = true; pauseAuto(); document.body.classList.add('is-dragging'); } const dir = dy < 0 ? 1 : -1; const next = drag.index + dir; if (next < 0 || next > scenes.length - 1) return; paint(drag.index, next, Math.min(1, Math.abs(dy) / (window.innerHeight * 0.55))); }); window.addEventListener('pointerup', (event) => { if (event.pointerType !== 'mouse' && thumbHover) { thumbHover = false; if (!drag) releaseHold(); } if (!drag) return; const dy = event.clientY - drag.y; const moved = drag.moved; const start = drag.index; drag = null; document.body.classList.remove('is-dragging'); if (!moved) return; if (dy < -80 && start < scenes.length - 1) goTo(start + 1); else if (dy > 80 && start > 0) goTo(start - 1); else settle(start); }); window.addEventListener('pointercancel', () => { if (!drag) return; const start = drag.index; drag = null; document.body.classList.remove('is-dragging'); settle(start); }); window.addEventListener('pointerover', (event) => { if (!(event.target instanceof Element)) return; if (event.target.closest('a')) { holdForLink(); return; } if (onThumbs(index) && event.target.closest('.thumb-item')) { thumbHover = true; clearTimeout(autoTimer); clearTimeout(resumeTimer); } }); window.addEventListener('pointerout', (event) => { if (!(event.target instanceof Element)) return; const next = event.relatedTarget; if (event.target.closest('a')) { if (next instanceof Element && next.closest('a')) return; linkHover = false; releaseHold(); return; } if (!event.target.closest('.thumb-item')) return; if (next instanceof Element && next.closest('.thumb-item')) return; thumbHover = false; releaseHold(); }); phoneQuery.addEventListener('change', () => { if (busy) return; const next = buildScenes(); const same = next.length === scenes.length && next.every((group, i) => group.length === scenes[i].length); if (same) return; scenes = next; settle(0); if (auto && !held()) schedule(); }); settle(0); schedule();

Kim Eun A