const curtainEl = document.getElementById('curtain'); const header = document.getElementById('siteHeader'); const sceneMosaic = document.querySelector('.scene-mosaic'); const sceneStory = document.querySelector('.scene-story'); const bandTop = document.getElementById('bandTop'); const bandMid = document.getElementById('bandMid'); const bandBot = document.getElementById('bandBot'); const bandSolo = document.getElementById('bandSolo'); const LAST = 3; document.querySelectorAll('.band-track').forEach((row) => { const group = document.createElement('div'); group.style.display = 'flex'; group.style.alignItems = 'center'; group.style.height = '100%'; for (let i = 0; i < 8; i += 1) { const slot = document.createElement('div'); slot.className = 'logo-slot'; const img = document.createElement('img'); img.src = row.dataset.logo; img.alt = ''; slot.appendChild(img); group.appendChild(slot); } row.appendChild(group); row.appendChild(group.cloneNode(true)); }); let index = 0; let push = 0; let phase = 'scenes'; let curtain = 100; let busy = false; let auto = true; let autoTimer = 0; let resumeTimer = 0; let wheelLock = 0; let drag = null; let linkHover = false; let railTicket = 0; function ease(t) { return t * t * t * (t * (t * 6 - 15) + 10); } function updateChrome() { header.classList.toggle('is-off', phase !== 'scenes' || curtain < 78); } function sheetPark() { const rest = sceneMosaic.querySelector('.stack.rest'); if (!rest || !sceneMosaic.offsetWidth) return 54; return 100 - (rest.offsetLeft / sceneMosaic.offsetWidth) * 100; } function layoutColumn(colPct, shiftPx) { document.body.style.setProperty('--col', `${colPct}vw`); document.body.style.setProperty('--x', `${shiftPx}px`); } function setGridFlow(step) { sceneMosaic.querySelectorAll('.stack').forEach((stack, i) => { const track = stack.querySelector('.stack-track'); if (!track) return; const dir = i % 2 === 0 ? -1 : 1; const y = dir * stack.clientHeight * 0.28 * step; track.style.transform = `translate3d(0, ${y}px, 0)`; }); } function applyPush(p) { push = Math.min(1, Math.max(0, p)); if (phoneLayout()) { layoutColumn(100, -window.innerWidth * push); sceneMosaic.style.transform = `translate3d(${50 * (1 - push)}%,0,0)`; layer(sceneMosaic, 1); layer(sceneStory, 0); header.classList.remove('is-vertical', 'is-on'); setGridFlow(push); return; } const col = 100 - push * (100 - sheetPark()); layoutColumn(col, 0); sceneMosaic.style.transform = `translate3d(${col}%,0,0)`; layer(sceneMosaic, 1); layer(sceneStory, 0); header.classList.remove('is-vertical', 'is-on'); setGridFlow(push); } function slideOff(t) { const park = sheetPark(); layoutColumn(park, -window.innerWidth * (park / 100) * t); sceneMosaic.style.transform = `translate3d(${park * (1 - t)}%,0,0)`; layer(sceneMosaic, 1); layer(sceneStory, 0); setGridFlow(1 + t); } function slidePhoneGrid(t) { const u = Math.min(1, Math.max(0, t)); layoutColumn(100, -window.innerWidth); sceneMosaic.style.transform = `translate3d(${-50 * u}%,0,0)`; layer(sceneMosaic, 1); layer(sceneStory, 0); setGridFlow(1 + u); } function armVerticalHeader() { const ticket = ++railTicket; header.classList.add('is-vertical'); header.classList.remove('is-on'); header.style.transition = 'none'; void header.offsetWidth; header.style.transition = ''; requestAnimationFrame(() => { requestAnimationFrame(() => { if (ticket === railTicket) header.classList.add('is-on'); }); }); } function leaveVerticalHeader() { railTicket += 1; header.classList.remove('is-on'); const ticket = railTicket; setTimeout(() => { if (ticket === railTicket) header.classList.remove('is-vertical'); }, 1800); } function layer(el, opacity) { el.style.opacity = String(opacity); el.style.visibility = opacity > 0.02 ? 'visible' : 'hidden'; } function phoneLayout() { return window.matchMedia('(max-width: 768px)').matches; } function setCurtain(vh) { curtain = vh; curtainEl.style.transform = `translate3d(0,${vh}vh,0)`; updateChrome(); } function animateValue(from, to, ms, apply, done) { busy = true; const started = performance.now(); function tick(now) { const t = Math.min(1, (now - started) / ms); apply(from + (to - from) * ease(t)); if (t < 1) requestAnimationFrame(tick); else { busy = false; if (done) done(); } } requestAnimationFrame(tick); } function holdFor(i) { if (i === 0) return 1100; if (i === 1) return 1600; if (i === 2) return 1300; return 1700; } function schedule() { clearTimeout(autoTimer); if (!auto || busy || linkHover || phase !== 'scenes') return; autoTimer = setTimeout(() => { if (!auto || busy || linkHover || phase !== 'scenes') return; if (index < LAST) goTo(index + 1); else playFinale(); }, holdFor(index)); } function pauseAuto() { auto = false; clearTimeout(autoTimer); clearTimeout(resumeTimer); resumeTimer = setTimeout(resumeAuto, 1500); } function resumeAuto() { if (linkHover) return; auto = true; if (phase === 'bands') openOut(); else if (phase === 'scenes') schedule(); else if (phase === 'rising' || phase === 'opening') resumeTimer = setTimeout(resumeAuto, 400); } function holdForLink() { linkHover = true; document.body.classList.add('is-link-hover'); clearTimeout(autoTimer); clearTimeout(resumeTimer); } function releaseLink() { linkHover = false; document.body.classList.remove('is-link-hover'); if (!auto) { resumeTimer = setTimeout(resumeAuto, 1500); return; } if (busy || phase === 'rising' || phase === 'opening' || phase === 'revealing') return; if (phase === 'bands') { autoTimer = setTimeout(() => { if (auto && !linkHover && phase === 'bands') openOut(); }, 400); return; } schedule(); } function resetShift() { sceneMosaic.style.transform = ''; sceneStory.style.transform = ''; } function slideX(el, percent) { el.style.transform = `translate3d(${percent}%,0,0)`; layer(el, 1); } function finish(dest) { index = dest; resetShift(); if (dest <= 1) { railTicket += 1; header.classList.remove('is-vertical', 'is-on'); applyPush(dest); } else if (dest === 2) { if (phoneLayout()) { layoutColumn(100, -window.innerWidth); sceneMosaic.style.transform = 'translate3d(-50%,0,0)'; layer(sceneMosaic, 1); layer(sceneStory, 0); setGridFlow(2); } else { slideOff(1); layer(sceneMosaic, 1); layer(sceneStory, 0); } } else { if (phoneLayout()) { layoutColumn(100, -window.innerWidth); sceneMosaic.style.transform = 'translate3d(-50%,0,0)'; } else slideOff(1); setGridFlow(3); layer(sceneMosaic, phoneLayout() ? 1 : 0); layer(sceneStory, 1); header.classList.add('is-vertical', 'is-on'); } updateChrome(); if (auto) schedule(); } function slideScenes(from, dest, t) { const forward = dest > from; if ((from === 1 && dest === 2) || (from === 2 && dest === 1)) { if (phoneLayout()) slidePhoneGrid(forward ? t : 1 - t); else slideOff(forward ? t : 1 - t); return; } if (phoneLayout() && ((from === 2 && dest === 3) || (from === 3 && dest === 2))) { const u = forward ? t : 1 - t; sceneMosaic.style.transform = 'translate3d(-50%,0,0)'; layer(sceneMosaic, 1); slideX(sceneStory, 100 * (1 - u)); setGridFlow(2 + u); return; } if (forward) { slideX(sceneMosaic, -100 * t); slideX(sceneStory, 100 * (1 - t)); } else { slideX(sceneStory, 100 * t); slideX(sceneMosaic, -100 * (1 - t)); } setGridFlow(2 + (forward ? t : 1 - t)); } function goTo(dest) { if (busy || phase !== 'scenes') return; dest = Math.max(0, Math.min(LAST, dest)); if (dest === index && (dest > 1 || Math.abs(push - dest) < 0.01)) { if (auto) schedule(); return; } clearTimeout(autoTimer); const from = index; if (dest === LAST) armVerticalHeader(); else if (from === LAST) leaveVerticalHeader(); if (phoneLayout() && from === 0 && (dest === 0 || dest === 1)) { animateValue(push, dest, 1500, applyPush, () => finish(dest)); return; } if (phoneLayout() && from === 1 && dest === 0) { animateValue(1, 0, 1500, applyPush, () => finish(0)); return; } if (from <= 1 && dest <= 1) { animateValue(push, dest, 1700, applyPush, () => finish(dest)); return; } animateValue(0, 1, 1700, (t) => slideScenes(from, dest, t), () => finish(dest)); } function layoutBands(split, open) { const band = 100 / 3; const midH = split * band + open * (100 - split * band); const side = (100 - midH) / 2; bandTop.style.height = `${side}vh`; bandBot.style.height = `${side}vh`; bandMid.style.top = `${side}vh`; bandMid.style.height = `${midH}vh`; const flowing = String(Math.max(0, split * (1 - Math.min(1, open / 0.38)))); document.querySelectorAll('.band-track').forEach((row) => { row.style.opacity = flowing; }); const phone = phoneLayout(); const hero = phone ? Math.min(window.innerWidth * 0.78, 520) : Math.min(window.innerWidth * 0.72, 1040); const compact = phone ? Math.min(window.innerWidth * 0.46, 260) : Math.min(window.innerWidth * 0.34, 520); const soloIn = Math.max(0, (open - 0.22) / 0.78); bandSolo.style.width = `${compact + (hero - compact) * open}px`; bandSolo.style.opacity = String(soloIn); } function playFinale() { if (busy || phase !== 'scenes') return; clearTimeout(autoTimer); index = LAST; phase = 'rising'; leaveVerticalHeader(); layoutBands(0, 0); updateChrome(); animateValue(100, 0, 900, setCurtain, () => { phase = 'opening'; animateValue(0, 1, 1050, (split) => layoutBands(split, 0), () => { phase = 'bands'; updateChrome(); if (!auto || linkHover) return; autoTimer = setTimeout(() => { if (auto && !linkHover && phase === 'bands') openOut(); }, 2000); }); }); } function openOut() { if (busy || phase !== 'bands') return; clearTimeout(autoTimer); phase = 'revealing'; railTicket += 1; applyPush(0); updateChrome(); animateValue(0, 1, 1300, (open) => layoutBands(1, open), () => { setCurtain(100); bandSolo.style.opacity = '0'; layoutBands(0, 0); index = 0; phase = 'scenes'; applyPush(0); updateChrome(); if (auto) schedule(); }); } function retreatCurtain() { if (busy || (phase !== 'bands' && phase !== 'opening')) return; clearTimeout(autoTimer); phase = 'rising'; animateValue(1, 0, 700, (split) => layoutBands(split, 0), () => { animateValue(0, 100, 700, setCurtain, () => { layoutBands(0, 0); slideOff(1); resetShift(); layer(sceneMosaic, 0); layer(sceneStory, 1); phase = 'scenes'; index = LAST; armVerticalHeader(); updateChrome(); if (auto) schedule(); }); }); } function step(dir) { if (busy) return; pauseAuto(); if (phase === 'bands' || phase === 'opening') { if (dir > 0) openOut(); else retreatCurtain(); return; } if (phase !== 'scenes') return; if (dir > 0) { if (index < LAST) goTo(index + 1); else playFinale(); } else if (index > 0) { goTo(index - 1); } } 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; step(delta > 0 ? 1 : -1); }, { passive: false }); window.addEventListener('pointerdown', (event) => { const onLink = event.target instanceof Element && event.target.closest('a'); if (onLink && event.pointerType !== 'mouse') { holdForLink(); return; } if (onLink || event.button !== 0 || busy || phase !== 'scenes') return; drag = { x: event.clientX, index, moved: false }; }); window.addEventListener('pointermove', (event) => { if (!drag || phase !== 'scenes') return; const dx = event.clientX - drag.x; if (!drag.moved) { if (Math.abs(dx) < 10) return; drag.moved = true; pauseAuto(); document.body.classList.add('is-dragging'); } if (drag.index === 0) { applyPush(Math.min(1, Math.max(0, -dx / (window.innerWidth * 0.55)))); } else if (phoneLayout() && drag.index === 1) { const span = window.innerWidth * 0.55; if (dx < 0) slidePhoneGrid(Math.min(1, -dx / span)); else applyPush(Math.max(0, 1 - dx / span)); } else if (!phoneLayout() && drag.index === 1 && dx > 0) { applyPush(Math.min(1, Math.max(0, 1 - dx / (window.innerWidth * 0.55)))); } }); function endDrag(event) { if (!drag) return; const dx = event.clientX - drag.x; const start = drag.index; const moved = drag.moved; drag = null; document.body.classList.remove('is-dragging'); if (!moved || busy || phase !== 'scenes') return; if (phoneLayout() && start === 0) { goTo(dx < -70 ? 1 : 0); return; } if (phoneLayout() && start === 1) { if (dx < -70) goTo(2); else if (dx > 70) goTo(0); else goTo(1); return; } if (start <= 1 && !(start === 1 && dx < -110)) { goTo(push > 0.5 ? 1 : 0); return; } if (dx < -110) { if (start < LAST) goTo(start + 1); else playFinale(); } else if (dx > 110) { goTo(Math.max(0, start - 1)); } else { goTo(start); } } window.addEventListener('pointerup', (event) => { endDrag(event); if (event.pointerType !== 'mouse' && linkHover) releaseLink(); }); window.addEventListener('pointercancel', (event) => { endDrag(event); if (event.pointerType !== 'mouse' && linkHover) releaseLink(); }); window.addEventListener('keydown', (event) => { if (event.key !== 'ArrowRight' && event.key !== 'ArrowDown' && event.key !== 'ArrowLeft' && event.key !== 'ArrowUp') return; event.preventDefault(); const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown'; if (busy) { pauseAuto(); return; } step(forward ? 1 : -1); }); window.addEventListener('pointerover', (event) => { if (event.pointerType === 'touch') return; if (!(event.target instanceof Element) || !event.target.closest('a')) return; holdForLink(); }); window.addEventListener('pointerout', (event) => { if (event.pointerType === 'touch') return; if (!(event.target instanceof Element)) return; const link = event.target.closest('a'); if (!link) return; const next = event.relatedTarget; if (next instanceof Element && next.closest('a')) return; releaseLink(); }); window.addEventListener('resize', () => { if (phase !== 'scenes' || busy) return; if (index <= 1) applyPush(index === 1 ? 1 : 0); else setGridFlow(index); }); sceneMosaic.querySelectorAll('.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); }); applyPush(0); setCurtain(100); schedule();

Bridal

Spring

COLLECTION