${ui().actions.piece} ${item[0]}

${item[1]}

${item[2]}${item[3]}

`; }; const renderTattooArchiveSections = (categories) => { const archiveEl = document.getElementById('archive'); if (!archiveEl) return; archiveEl.innerHTML = categories.map(category => `

${category.title}

${category.desc}

${category.works.slice(0, 4).map(renderArchiveCard).join('')}

`).join(''); }; const renderArtArchiveSection = (archive) => { const archiveEl = document.getElementById('archive'); if (!archiveEl) return; archiveEl.innerHTML = `

${archive.title}

${archive.desc}

${archive.works.slice(0, 4).map(renderArchiveCard).join('')}

`; }; const updateActiveCategoryNav = () => { if (!document.body.classList.contains('persona-tattoo')) return; const sections = Array.from(document.querySelectorAll('[data-category-section]')); if (!sections.length) return; const targetY = window.innerHeight * .38; const activeSection = sections .map(section => ({ section, distance: Math.abs(section.getBoundingClientRect().top - targetY) })) .sort((a, b) => a.distance - b.distance)[0]?.section; if (!activeSection) return; const activeId = activeSection.dataset.categorySection; galleryState.tattoo = activeId; categoryNav?.querySelectorAll('.category-nav-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.category === activeId); }); }; const bindArchiveScrollSpy = () => { if (archiveNavScrollBound) { updateActiveCategoryNav(); return; } archiveNavScrollBound = true; const schedule = () => { cancelAnimationFrame(archiveNavFrame); archiveNavFrame = requestAnimationFrame(updateActiveCategoryNav); }; window.addEventListener('scroll', schedule, { passive: true }); window.addEventListener('resize', schedule); updateActiveCategoryNav(); }; const renderCategoryNav = (mode) => { if (!categoryNav) return; if (mode !== 'tattoo') { categoryNav.innerHTML = ''; return; } const tattooData = getModeData('tattoo'); categoryNav.innerHTML = `

${ui().actions.inkPaths}

` + tattooData.categories.map((category, index) => ` `).join(''); categoryNav.querySelectorAll('.category-nav-btn').forEach(btn => { btn.addEventListener('mouseenter', () => { cursor.classList.add('active'); cursorText.textContent = 'archive'; }); btn.addEventListener('mouseleave', () => { cursor.classList.remove('active'); cursorText.textContent = ''; }); btn.addEventListener('click', () => { galleryState.tattoo = btn.dataset.category; categoryNav.querySelectorAll('.category-nav-btn').forEach(item => item.classList.toggle('active', item === btn)); document.getElementById(`archive-${btn.dataset.category}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); }); }; const openGallery = () => { const category = getArchiveData(document.body.classList.contains('persona-graffiti') ? 'graffiti' : 'tattoo'); galleryKicker.textContent = category.kicker || 'Archive'; galleryTitle.innerHTML = category.title || category.nav; galleryGrid.innerHTML = category.works.map(item => `

${item[0]} / ${item[1]}

`).join(''); galleryModal.classList.add('open'); document.body.style.overflow = 'hidden'; }; const closeGallery = () => { galleryModal.classList.remove('open'); document.body.style.overflow = ''; }; const applyContent = (mode) => { const d = getModeData(mode); applyStaticCopy(); document.querySelector('.brand').textContent = d.brand; document.querySelector('.eyebrow').textContent = d.eyebrow; document.querySelector('.hero-content h1').innerHTML = `${d.title}
${d.outline}`; document.querySelector('.hero-copy').textContent = d.copy; document.querySelectorAll('.floating-img').forEach((img, i) => img.src = d.heroImages[i]); document.querySelector('.events-copy h2').innerHTML = d.events.title; document.querySelector('.events-copy p').textContent = d.events.text; document.querySelectorAll('.event-item').forEach((eventItem, i) => { const item = d.events.items[i]; eventItem.querySelector('span').textContent = item[0]; eventItem.querySelector('h3').textContent = item[1]; eventItem.querySelector('p').textContent = item[2]; eventItem.querySelector('em').textContent = item[3]; if (item[4]) { eventItem.dataset.url = item[4]; eventItem.dataset.cursor = item[5] || item[3] || 'go'; eventItem.setAttribute('role', 'link'); eventItem.setAttribute('tabindex', '0'); eventItem.setAttribute('aria-label', `${item[1]} - ${item[5] || item[3] || 'open'}`); } else { eventItem.removeAttribute('data-url'); eventItem.dataset.cursor = 'read'; eventItem.removeAttribute('role'); eventItem.removeAttribute('tabindex'); eventItem.removeAttribute('aria-label'); } }); document.querySelector('.ticker-track').innerHTML = [...d.ticker, ...d.ticker].map(t => `${t}`).join(''); const archive = getArchiveData(mode); if (mode === 'tattoo') { renderTattooArchiveSections(d.categories || []); renderCategoryNav(mode); bindArchiveScrollSpy(); } else { renderArtArchiveSection(archive); renderCategoryNav(mode); } resetWorkCardTransforms(); bindWorkCards(); bindGalleryButtons(); requestAnimationFrame(() => { document.querySelectorAll('#archive .reveal').forEach(el => el.classList.add('visible')); }); const pieceImg = document.querySelector('.piece-visual img'); pieceImg.src = d.focusImg; pieceImg.alt = d.focusTitle.replace(//gi, ' '); document.querySelector('.piece-content small').textContent = d.focusSmall; document.querySelector('.piece-content h2').innerHTML = d.focusTitle; document.querySelector('.piece-content p').textContent = d.focusText; document.querySelectorAll('.piece-stat strong').forEach((el, i) => el.textContent = d.focusStats[i]); document.querySelector('.style-kicker').textContent = d.styleKicker; document.querySelector('.style-copy h2').textContent = d.styleTitle; document.querySelector('.style-copy p').textContent = d.styleText; document.querySelectorAll('.style-row').forEach((row, i) => { const item = d.styles[i]; row.querySelector('span').textContent = item[0]; row.querySelector('h3').textContent = item[1]; row.querySelector('p').textContent = item[2]; row.querySelector('strong').textContent = item[3]; }); document.querySelector('.process-timeline .section-title').innerHTML = d.processTitle; document.querySelector('.process-timeline .section-desc').textContent = d.processDesc; document.querySelectorAll('.timeline-step').forEach((step, i) => { const item = d.steps[i]; step.dataset.step = item[0]; step.querySelector('span').textContent = item[0]; step.querySelector('h3').textContent = item[1]; step.querySelector('p').textContent = item[2]; }); document.querySelector('.flash-wall .section-title').innerHTML = d.flashTitle; document.querySelector('.flash-wall .section-desc').textContent = d.flashDesc; document.querySelectorAll('.flash-card').forEach((card, i) => { const item = d.flash[i]; card.dataset.symbol = item[0]; card.dataset.status = item[4]; card.dataset.cursor = item[5]; card.querySelector('span').textContent = item[1]; card.querySelector('strong').textContent = item[2]; card.querySelector('em').textContent = item[3]; }); document.querySelector('.manifesto h2').innerHTML = d.manifesto; document.querySelector('.contact h2').innerHTML = d.contactTitle; document.querySelector('.contact p').textContent = d.contactText; const socialsEl = document.querySelector('.socials'); if (socialsEl && Array.isArray(d.contactSocials) && d.contactSocials.length) { socialsEl.innerHTML = d.contactSocials.map(item => ` `).join(''); } }; const setTransitionMode = (target) => { paintTransition.classList.remove('to-graffiti', 'to-tattoo'); if (target === 'graffiti') { paintTransition.classList.add('to-graffiti'); document.querySelector('.splat-1').textContent = '✕'; document.querySelector('.splat-2').textContent = 'NO RULES'; document.querySelector('.splat-3').textContent = 'LEAVE YOUR MARK'; } else { paintTransition.classList.add('to-tattoo'); document.querySelector('.splat-1').textContent = '✷'; document.querySelector('.splat-2').textContent = 'DRAW THE MARK'; document.querySelector('.splat-3').textContent = 'INK / LINE / SKIN'; } }; const switchPersona = (target) => { if (document.body.classList.contains(`persona-${target}`)) return; setTransitionMode(target); paintTransition.classList.remove('active'); paintTransition.querySelectorAll('*').forEach(node => { node.style.animation = 'none'; void node.offsetWidth; node.style.animation = ''; }); void paintTransition.offsetWidth; paintTransition.classList.add('active'); setTimeout(() => { document.body.classList.remove('persona-tattoo', 'persona-graffiti'); document.body.classList.add(`persona-${target}`); personaButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.persona === target)); applyContent(target); }, 560); setTimeout(() => paintTransition.classList.remove('active'), 1500); }; setBlobIntensity(1); applyStaticCopy(); applyContent('tattoo'); personaButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.persona === 'tattoo')); if (galleryViewAll) galleryViewAll.addEventListener('click', openGallery); if (galleryClose) galleryClose.addEventListener('click', closeGallery); if (galleryModal) galleryModal.addEventListener('click', e => { if (e.target === galleryModal) closeGallery(); }); window.addEventListener('mousemove', (e) => { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; const blobOffset = document.body.classList.contains('persona-tattoo') ? 280 : 250; const activeScale = Number(mouseBlob.dataset.scale || blobScale || 1); mouseBlob.style.transform = `translate(${e.clientX - blobOffset}px, ${e.clientY - blobOffset}px) scale(${activeScale})`; const contact = document.querySelector('.contact'); const rect = contact.getBoundingClientRect(); if (e.clientY >= rect.top && e.clientY <= rect.bottom) { contact.style.setProperty('--cx', `${((e.clientX - rect.left) / rect.width) * 100}%`); contact.style.setProperty('--cy', `${((e.clientY - rect.top) / rect.height) * 100}%`); } }); document.querySelectorAll('.magnetic').forEach(item => { item.addEventListener('mouseenter', () => { cursor.classList.add('active'); cursorText.textContent = item.dataset.cursor || 'view'; const intense = item.classList.contains('work-card') || item.classList.contains('events-card') || item.classList.contains('piece-visual') || item.classList.contains('piece-content') || item.classList.contains('flash-card') || item.classList.contains('style-row') || item.classList.contains('timeline-step'); setBlobIntensity(intense ? 1.28 : 1.1); }); item.addEventListener('mouseleave', () => { cursor.classList.remove('active'); cursorText.textContent = ''; item.style.removeProperty('--mag-x'); item.style.removeProperty('--mag-y'); setBlobIntensity(1); }); item.addEventListener('mousemove', (e) => { if (!item.classList.contains('pill') && !item.classList.contains('mood-switch') && !item.classList.contains('language-switch')) return; const r = item.getBoundingClientRect(); item.style.setProperty('--mag-x', `${(e.clientX - r.left - r.width / 2) * .18}px`); item.style.setProperty('--mag-y', `${(e.clientY - r.top - r.height / 2) * .22}px`); }); }); document.querySelectorAll('.event-item').forEach(eventItem => { const openEventUrl = () => { if (!eventItem.dataset.url) return; const eventWindow = window.open(eventItem.dataset.url, '_blank', 'noopener,noreferrer'); if (eventWindow) eventWindow.opener = null; }; eventItem.addEventListener('click', () => { openEventUrl(); }); eventItem.addEventListener('keydown', (event) => { if (!eventItem.dataset.url || (event.key !== 'Enter' && event.key !== ' ')) return; event.preventDefault(); openEventUrl(); }); }); personaButtons.forEach(btn => btn.addEventListener('click', () => switchPersona(btn.dataset.persona))); window.__REFERENCE_PROTOTYPE_READY__ = true; moodButtons.forEach(btn => { btn.addEventListener('click', () => { document.body.classList.remove('mood-black', 'mood-ritual'); if (!['black','ritual'].includes(btn.dataset.mood)) return; document.body.classList.add(`mood-${btn.dataset.mood}`); moodButtons.forEach(item => item.classList.remove('active')); btn.classList.add('active'); }); }); function bindWorkCards() { document.querySelectorAll('.work-card').forEach(card => { if (card.dataset.bound === 'true') return; card.dataset.bound = 'true'; card.addEventListener('mouseenter', () => { cursor.classList.add('active'); cursorText.textContent = card.dataset.cursor || 'view'; setBlobIntensity(1.28); }); card.addEventListener('mousemove', (e) => { const r = card.getBoundingClientRect(); const x = e.clientX - r.left; const y = e.clientY - r.top; const rotateY = ((x / r.width) - .5) * 14; const rotateX = ((y / r.height) - .5) * -14; const styles = getComputedStyle(card); const baseY = styles.getPropertyValue('--card-base-y').trim() || '0px'; const baseRotate = styles.getPropertyValue('--card-base-rotate').trim() || '0deg'; card.style.setProperty('--mx', `${(x / r.width) * 100}%`); card.style.setProperty('--my', `${(y / r.height) * 100}%`); card.style.transform = `translateY(${baseY}) rotate(${baseRotate}) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; }); card.addEventListener('mouseleave', () => { cursor.classList.remove('active'); cursorText.textContent = ''; setCardBaseTransform(card); setBlobIntensity(1); }); card.addEventListener('click', () => { modalImg.src = card.dataset.img; modalPiece.textContent = `${ui().actions.piece} ${card.dataset.piece}`; modalTitle.textContent = card.dataset.title; modalDesc.textContent = card.dataset.desc; modalStyle.textContent = card.dataset.style; modalPlacement.textContent = card.dataset.placement; modalStatus.textContent = card.dataset.status; modal.classList.add('open'); document.body.style.overflow = 'hidden'; }); }); } function bindGalleryButtons() { document.querySelectorAll('.gallery-view-all').forEach(btn => { if (btn.dataset.bound === 'true') return; btn.dataset.bound = 'true'; btn.addEventListener('mouseenter', () => { cursor.classList.add('active'); cursorText.textContent = btn.dataset.cursor || 'all'; }); btn.addEventListener('mouseleave', () => { cursor.classList.remove('active'); cursorText.textContent = ''; }); btn.addEventListener('click', () => openGallery(btn.dataset.galleryCategory)); }); } bindWorkCards(); const closeModal = () => { modal.classList.remove('open'); document.body.style.overflow = ''; }; modalClose.addEventListener('click', closeModal); modal.addEventListener('click', e => { if (e.target === modal) closeModal(); }); window.addEventListener('keydown', e => { if (e.key === 'Escape') { closeModal(); closeGallery(); } }); const updateCut = () => { document.querySelectorAll('[data-cut]').forEach(cut => { const rect = cut.getBoundingClientRect(); const raw = (window.innerHeight - rect.top) / (window.innerHeight + rect.height); const clamped = Math.max(0, Math.min(1, raw)); cut.style.setProperty('--cut', String(.12 + clamped * .88)); cut.style.setProperty('--cut-text', `${(clamped - .5) * -220}px`); }); }; window.addEventListener('scroll', updateCut, { passive: true }); window.addEventListener('resize', updateCut); updateCut(); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); }); }, { threshold: .14 }); document.querySelectorAll('.reveal').forEach(el => observer.observe(el));