/** Before first paint: keep a route handoff covered, then fail open if runtime fails. */ export function experienceArrivalBootstrap(pauseKey='vitris-experience-paused'):string { return `(()=>{try{if(matchMedia('(prefers-reduced-motion:reduce)').matches||document.documentElement.dataset.motionPolicy==='off'||localStorage.getItem(${JSON.stringify(pauseKey)})==='true')return;const key='vitris-experience-handoff',raw=sessionStorage.getItem(key);sessionStorage.removeItem(key);const handoff=raw?JSON.parse(raw):null;const route=handoff&&handoff.path===location.pathname&&Date.now()-handoff.at<15000;const initial=!sessionStorage.getItem('vitris-experience-arrived');if(!route&&!initial)return;document.documentElement.dataset.experienceArrival=route?'route':'initial';window.VitrisExperienceArrival={mode:route?'route':'initial',title:route?handoff.title:null,timer:setTimeout(()=>{delete document.documentElement.dataset.experienceArrival;delete window.VitrisExperienceArrival;},3500)};}catch{}})();`; } /** Opt-in interaction choreography. Customer markup/styles own the composition. */ export const experienceJs = String.raw`(()=>{ if(window.VitrisExperience)return; let cleanup=()=>{}; const reduce=matchMedia('(prefers-reduced-motion:reduce)'),fine=matchMedia('(hover:hover) and (pointer:fine)'); const allowed=()=>!reduce.matches&&document.documentElement.dataset.motionPolicy!=='off'&&!document.hidden; const clamp=(n,min,max)=>Math.max(min,Math.min(max,n)); function init(){ cleanup();const abort=new AbortController(),cancels=[];let raf=0; const on=(el,event,fn,options={})=>el?.addEventListener(event,fn,{...options,signal:abort.signal}); const preview=document.querySelector('[data-experience-preview]'),cursor=document.querySelector('[data-experience-cursor]'); let active=null,mode='',last=0,target={x:0,y:0},position={x:0,y:0},cursorPosition={x:0,y:0}; const stop=()=>{active=null;cancelAnimationFrame(raf);raf=0;preview?.setAttribute('data-visible','false');cursor?.setAttribute('data-visible','false');}; function bounds(x,y){const w=preview?.offsetWidth||310,h=preview?.offsetHeight||230;return {x:clamp(x,w/2+12,innerWidth-w/2-12),y:clamp(y,h/2+12,innerHeight-h/2-12)};} function paint(){if(preview)preview.style.transform='translate3d('+(position.x-(preview.offsetWidth/2))+'px,'+(position.y-(preview.offsetHeight/2))+'px,0)';if(cursor)cursor.style.transform='translate3d('+(cursorPosition.x-(cursor.offsetWidth/2))+'px,'+(cursorPosition.y-(cursor.offsetHeight/2))+'px,0)';} function follow(t){if(!active||!allowed()){stop();return;}const dt=Math.min(48,t-last||16);last=t;const approach=(v,to,ms)=>v+(to-v)*(1-Math.exp(-dt/ms));position={x:approach(position.x,target.x,190),y:approach(position.y,target.y,190)};cursorPosition={x:approach(cursorPosition.x,target.x,110),y:approach(cursorPosition.y,target.y,110)};paint();if(Math.abs(position.x-target.x)+Math.abs(position.y-target.y)>.15){raf=requestAnimationFrame(follow);}else raf=0;} const focusPosition=el=>{const r=el.getBoundingClientRect();return bounds(innerWidth*.72,r.top+r.height/2);}; function show(el,x,y,input){if(!preview||!fine.matches||!allowed()||innerWidth<=Number(preview.dataset.experienceMinWidth||1024)||el.closest('[data-view="grid"]'))return;active=el;mode=input;target=position=cursorPosition=bounds(x,y);last=0;const image=preview.querySelector('img');if(image){image.src=el.dataset.experienceImage;image.alt='';}const label=cursor?.querySelector('[data-experience-label]')||preview.querySelector('[data-experience-label]');if(label)label.textContent='View '+(el.dataset.experienceName||el.textContent.trim());paint();preview.dataset.visible='true';if(cursor)cursor.dataset.visible='true';} document.querySelectorAll('[data-experience-image]').forEach(el=>{ on(el,'pointerenter',e=>show(el,e.clientX,e.clientY,'pointer')); on(el,'pointermove',e=>{if(active!==el)return;target=bounds(e.clientX,e.clientY);if(!raf)raf=requestAnimationFrame(follow);}); on(el,'pointerleave',()=>{if(document.activeElement!==el)stop();}); on(el,'focus',()=>{const p=focusPosition(el);show(el,p.x,p.y,'keyboard');});on(el,'blur',stop);on(el,'click',stop); }); on(window,'scroll',()=>{if(active&&mode==='keyboard'){target=position=cursorPosition=focusPosition(active);paint();}else stop();},{passive:true});on(window,'resize',stop);on(document,'visibilitychange',stop);on(reduce,'change',stop);on(fine,'change',stop); const magnets=[...document.querySelectorAll('[data-experience-magnetic]')]; magnets.forEach(el=>{let x=0,y=0;const reset=()=>{x=y=0;el.style.transition=allowed()?'transform 1.2s cubic-bezier(.2,1.5,.5,1)':'none';el.style.transform='';};on(el,'pointermove',e=>{if(!allowed()||!fine.matches)return;const r=el.getBoundingClientRect();x=clamp((e.clientX-r.left-r.width/2+x)*.1,-8,8);y=clamp((e.clientY-r.top-r.height/2+y)*.1,-8,8);el.style.transition='transform .4s';el.style.transform='translate3d('+x+'px,'+y+'px,0)';});on(el,'pointerleave',reset);cancels.push(reset);}); const drifts=[...document.querySelectorAll('[data-experience-drift]')],tracks=[...document.querySelectorAll('[data-experience-marquee-speed]')];let previousY=scrollY,scrollRaf=0; const settleDrift=()=>drifts.forEach(el=>{const trigger=document.getElementById(el.dataset.experienceTrigger)||el.parentElement;const r=trigger.getBoundingClientRect(),factor=Number(el.dataset.experienceDrift||.13),max=Number(el.dataset.experienceDriftMax||40);const value=allowed()&&r.bottom>0&&r.top{const copy=el.firstElementChild;if(copy)el.style.animationDuration=(copy.getBoundingClientRect().width/Number(el.dataset.experienceMarqueeSpeed||73))+'s';});} function scroll(){settleDrift();const delta=scrollY-previousY;if(Math.abs(delta)>2&&allowed())tracks.forEach(el=>{const animation=el.getAnimations()[0];if(!animation)return;const duration=Number(animation.effect.getTiming().duration);if(Number(animation.currentTime)=0?1:-1);});previousY=scrollY;scrollRaf=0;} on(window,'scroll',()=>{if(!scrollRaf)scrollRaf=requestAnimationFrame(scroll);},{passive:true});on(window,'resize',()=>{sizeTracks();settleDrift();});sizeTracks();document.fonts?.ready.then(()=>{if(!abort.signal.aborted)sizeTracks();});settleDrift(); const observer=new IntersectionObserver(entries=>entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('experience-seen');if(e.target.hasAttribute('data-experience-intro')&&allowed())e.target.querySelectorAll('[data-experience-line]').forEach((el,i)=>{const animation=el.animate([{transform:'translateY(24px)',opacity:.75},{transform:'none',opacity:1}],{duration:650,delay:Math.min(i*90,270),easing:'cubic-bezier(.2,1,.3,1)'});cancels.push(()=>animation.cancel());});observer.unobserve(e.target);}}),{threshold:.15});document.querySelectorAll('[data-experience-seam],[data-experience-intro]').forEach(el=>observer.observe(el)); const curtain=document.querySelector('[data-experience-transition]');let navigating=false; const opening=()=>{if(allowed())document.querySelectorAll('[data-experience-opening]').forEach((el,i)=>{const a=el.animate([{transform:'translateY(32px)'},{transform:'translateY(0)'}],{duration:1000,delay:Math.min(i*60,180),easing:'cubic-bezier(.15,1,.2,1)',fill:'backwards'});cancels.push(()=>a.cancel());});}; const arrival=window.VitrisExperienceArrival; if(arrival&&curtain){clearTimeout(arrival.timer);delete window.VitrisExperienceArrival;try{sessionStorage.setItem('vitris-experience-arrived','seen');}catch{} if(allowed()){ const title=document.createElement('span');title.textContent=arrival.title||curtain.dataset.experienceArrival||document.title;curtain.replaceChildren(title);curtain.dataset.state='arrival-hold';curtain.style.visibility='visible';curtain.style.transform='translateY(0)';curtain.style.borderRadius='0';curtain.style.pointerEvents='auto'; const reveal=()=>{if(abort.signal.aborted)return;if(!allowed()){delete document.documentElement.dataset.experienceArrival;curtain.style.visibility='';curtain.style.transform='';curtain.style.borderRadius='';curtain.style.pointerEvents='';return;}opening();curtain.dataset.state='revealing';const a=curtain.animate([{transform:'translateY(0)',borderRadius:'0'},{transform:'translateY(-115%)',borderRadius:'0 0 50% 50% / 0 0 12% 12%'}],{duration:800,easing:'cubic-bezier(.65,0,.2,1)',fill:'forwards'});cancels.push(()=>a.cancel());a.finished.catch(()=>{}).finally(()=>{delete document.documentElement.dataset.experienceArrival;curtain.style.visibility='';curtain.style.transform='';curtain.style.borderRadius='';curtain.style.pointerEvents='';curtain.dataset.state='idle';a.cancel();});}; const timer=setTimeout(reveal,arrival.mode==='initial'?420:0);cancels.push(()=>clearTimeout(timer)); }else delete document.documentElement.dataset.experienceArrival; }else opening(); const arrivalSettled=()=>new Promise(resolve=>{if(!document.documentElement.dataset.experienceArrival){resolve();return;}let timer;const done=()=>{observer.disconnect();clearTimeout(timer);abort.signal.removeEventListener('abort',done);resolve();};const observer=new MutationObserver(()=>{if(!document.documentElement.dataset.experienceArrival)done();});observer.observe(document.documentElement,{attributes:true,attributeFilter:['data-experience-arrival']});timer=setTimeout(done,3500);abort.signal.addEventListener('abort',done,{once:true});}); on(document,'click',async e=>{const a=e.target.closest('a[href]');if(!curtain||!a||e.defaultPrevented||e.button!==0||e.ctrlKey||e.metaKey||e.shiftKey||e.altKey||a.hasAttribute('download')||a.target&&a.target!=='_self'||!allowed())return;const url=new URL(a.href,location.href);if(url.origin!==location.origin||url.pathname===location.pathname||url.hash||!/^https?:$/.test(url.protocol))return;e.preventDefault();if(navigating)return;navigating=true;await arrivalSettled();if(abort.signal.aborted)return;if(!allowed()){location.assign(url.href);return;}document.dispatchEvent(new Event('vitris:before-navigate'));const label=document.createElement('span');label.textContent=a.dataset.experienceTitle||a.dataset.chapterName||a.textContent.trim().split('\n')[0];label.style.opacity='0';curtain.replaceChildren(label);curtain.dataset.state='covering';curtain.style.visibility='visible';curtain.style.pointerEvents='auto';try{const cover=curtain.animate([{transform:'translateY(115%)',borderRadius:'50% 50% 0 0 / 12% 12% 0 0'},{transform:'translateY(0)',borderRadius:'0'}],{duration:500,easing:'cubic-bezier(.7,0,.9,.4)',fill:'forwards'});cancels.push(()=>cover.cancel());await cover.finished;const title=label.animate([{opacity:0,transform:'translateY(20px)'},{opacity:1,transform:'none'}],{duration:650,fill:'forwards'});cancels.push(()=>title.cancel());await new Promise(resolve=>setTimeout(resolve,430));if(curtain.hasAttribute('data-experience-arrival')&&allowed())try{sessionStorage.setItem('vitris-experience-handoff',JSON.stringify({path:url.pathname,title:label.textContent,at:Date.now()}));}catch{}}catch{}finally{location.assign(url.href);}}); const settlePolicy=()=>{if(!allowed()){stop();magnets.forEach(el=>{el.style.transition='none';el.style.transform='';});document.querySelectorAll('[data-experience-opening],[data-experience-line]').forEach(el=>el.getAnimations().forEach(a=>a.cancel()));if(curtain){curtain.getAnimations().forEach(a=>a.cancel());delete document.documentElement.dataset.experienceArrival;curtain.style.visibility='';curtain.style.transform='';curtain.style.borderRadius='';curtain.style.pointerEvents='';}}settleDrift();}; const policy=new MutationObserver(settlePolicy);policy.observe(document.documentElement,{attributes:true,attributeFilter:['data-motion-policy']});on(reduce,'change',settlePolicy);on(fine,'change',()=>{magnets.forEach(el=>{el.style.transition='none';el.style.transform='';});});on(document,'visibilitychange',settlePolicy); cleanup=()=>{stop();cancelAnimationFrame(scrollRaf);abort.abort();observer.disconnect();policy.disconnect();cancels.forEach(fn=>fn());drifts.forEach(el=>el.style.transform='');delete document.documentElement.dataset.experienceArrival;if(curtain){curtain.style.visibility='';curtain.style.pointerEvents='';curtain.style.transform='';curtain.style.borderRadius='';}}; } window.VitrisExperience={init,dispose:()=>cleanup()};init(); addEventListener('pagehide',()=>cleanup());addEventListener('pageshow',e=>{if(e.persisted)init();}); })();`;