(function(){"use strict";const infographic=document.getElementById('infographic');const canvas=document.getElementById('routeCanvas');const ctx=canvas.getContext('2d');const grid=document.getElementById('stepsGrid');const cards=Array.from(document.querySelectorAll('.step-card'));const descTitle=document.getElementById('descTitle');const descText=document.getElementById('descText');const GREEN='#44d70f';const PURPLE='#b055e3';const connections=[{from:0,to:1},{from:1,to:2},{from:2,to:3},{from:3,to:4},{from:4,to:5}];let animProgress=0;let animationFrame=null;let animationActive=false;let resizeTimer=null;let observer=null;let animationStarted=false;function setActiveCard(card){if(!card)return;cards.forEach(c=>c.classList.remove('active'));card.classList.add('active');const title=card.dataset.title||card.querySelector('.step-title').textContent;const desc=card.dataset.desc||'';descTitle.textContent=title;descText.textContent=desc;}if(cards.length>0){setActiveCard(cards[0]);}cards.forEach(card=>{card.addEventListener('mouseenter',()=>setActiveCard(card));card.addEventListener('click',()=>setActiveCard(card));});function drawLines(progress=1.0){if(!grid||cards.length<6)return;const container=grid.parentElement;const rect=container.getBoundingClientRect();canvas.width=rect.width;canvas.height=rect.height;canvas.style.width=rect.width+'px';canvas.style.height=rect.height+'px';ctx.clearRect(0,0,canvas.width,canvas.height);const centers=cards.map(card=>{const cardRect=card.getBoundingClientRect();const containerRect=container.getBoundingClientRect();return{x:cardRect.left+cardRect.width/2-containerRect.left,y:cardRect.top+cardRect.height/2-containerRect.top};});ctx.lineCap='round';ctx.lineJoin='round';connections.forEach((conn,idx)=>{const from=centers[conn.from];const to=centers[conn.to];if(!from||!to)return;const dx=to.x-from.x;const dy=to.y-from.y;const dist=Math.sqrt(dx*dx+dy*dy);if(dist<5)return;let perpX=-dy;let perpY=dx;const len=Math.sqrt(perpX*perpX+perpY*perpY);if(len>0){perpX/=len;perpY/=len;}const curveOffset=Math.min(dist*0.35,70)*(idx%2===0?1:-1);const cp1x=from.x+dx*0.25+perpX*curveOffset;const cp1y=from.y+dy*0.25+perpY*curveOffset;const cp2x=from.x+dx*0.75+perpX*curveOffset;const cp2y=from.y+dy*0.75+perpY*curveOffset;const gradient=ctx.createLinearGradient(from.x,from.y,to.x,to.y);gradient.addColorStop(0,GREEN);gradient.addColorStop(0.6,PURPLE);ctx.beginPath();ctx.moveTo(from.x,from.y);ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,to.x,to.y);const pathLength=getBezierLength(from.x,from.y,cp1x,cp1y,cp2x,cp2y,to.x,to.y);const dashLen=pathLength*progress;ctx.strokeStyle=gradient;ctx.lineWidth=3.0;ctx.setLineDash([dashLen,pathLength]);ctx.lineDashOffset=0;ctx.stroke();if(progress>0.99){ctx.setLineDash([]);ctx.beginPath();ctx.arc(to.x,to.y,4.5,0,2*Math.PI);ctx.fillStyle=PURPLE;ctx.shadowColor='#b055e3';ctx.shadowBlur=10;ctx.fill();ctx.beginPath();ctx.arc(from.x,from.y,4,0,2*Math.PI);ctx.fillStyle=GREEN;ctx.shadowColor='#44d70f';ctx.shadowBlur=8;ctx.fill();ctx.shadowBlur=0;}ctx.setLineDash([]);});}function getBezierLength(x0,y0,cp1x,cp1y,cp2x,cp2y,x1,y1){let length=0;let ox=x0,oy=y0;const steps=25;for(let i=1;i<=steps;i++){const t=i/steps;const xt=Math.pow(1-t,3)*x0+3*Math.pow(1-t,2)*t*cp1x+3*(1-t)*t*t*cp2x+Math.pow(t,3)*x1;const yt=Math.pow(1-t,3)*y0+3*Math.pow(1-t,2)*t*cp1y+3*(1-t)*t*t*cp2y+Math.pow(t,3)*y1;length+=Math.hypot(xt-ox,yt-oy);ox=xt;oy=yt;}return length;}function startLineAnimation(){if(animationFrame)cancelAnimationFrame(animationFrame);animProgress=0;animationActive=true;const duration=1800;const startTime=performance.now();function animate(now){const elapsed=now-startTime;const progress=Math.min(elapsed/duration,1);animProgress=easeOutCubic(progress);drawLines(animProgress);if(progress<1){animationFrame=requestAnimationFrame(animate);}else{animationActive=false;animationFrame=null;drawLines(1.0);}}animationFrame=requestAnimationFrame(animate);}function easeOutCubic(t){return 1-Math.pow(1-t,3);}function redrawLinesFull(){if(animationActive)drawLines(animProgress);else drawLines(1.0);}function handleResize(){if(resizeTimer)clearTimeout(resizeTimer);resizeTimer=setTimeout(()=>{redrawLinesFull();resizeTimer=null;},80);}function startAnimation(){if(animationStarted)return;animationStarted=true;infographic.classList.add('animate-cards');drawLines(0);const totalAppearDelay=(cards.length-1)*0.2+0.6;setTimeout(()=>{startLineAnimation();},totalAppearDelay*1000);window.addEventListener('resize',handleResize);}function initObserver(){if(!infographic)return;observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){startAnimation();observer.unobserve(entry.target);}});},{threshold:0.7});observer.observe(infographic);}if(document.readyState==='complete'){initObserver();}else{window.addEventListener('load',initObserver);}window.addEventListener('beforeunload',()=>{if(resizeTimer)clearTimeout(resizeTimer);if(animationFrame)cancelAnimationFrame(animationFrame);if(observer)observer.disconnect();});})();