(function(){ if (window.MorphSVGPlugin && gsap.registerPlugin) gsap.registerPlugin(MorphSVGPlugin); /* === CARD 2 : Ogive === */ (function(){ const card = document.getElementById('card2'); const path = document.getElementById('path2'); const veil = card.querySelector('.svg-overlay2'); if(!path || !veil) return; const rectPath = "M0 0 L180 0 L360 0 L360 588 L0 588 Z"; const ogivePath = "M0 588 L360 588 L360 388 C360 255 300 140 180 32 C60 140 0 255 0 388 Z"; path.setAttribute('d', rectPath); const enter = ()=>{ gsap.to(path,{duration:.6,morphSVG:{shape:ogivePath},ease:"power2.out"}); gsap.to(veil,{duration:.25,opacity:.95,ease:"power2.out"}); }; const leave = ()=>{ gsap.to(path,{duration:.6,morphSVG:{shape:rectPath},ease:"power2.inOut"}); gsap.to(veil,{duration:.25,opacity:0,ease:"power2.inOut"}); }; card.addEventListener('mouseenter', enter); card.addEventListener('mouseleave', leave); card.addEventListener('touchstart', ()=>{ enter(); setTimeout(leave,1400); }, {passive:true}); })(); /* === CARD 3 : Arc demi-cercle === */ (function(){ const card = document.getElementById('card3'); const path = document.getElementById('path3'); const veil = card.querySelector('.svg-overlay3'); if(!path || !veil) return; const rectPath = "M0 0 L180 0 L360 0 L360 588 L0 588 Z"; const archPath = "M0 588 L0 220 A180 180 0 0 1 360 220 L360 588 Z"; path.setAttribute('d', rectPath); const enter = ()=>{ gsap.to(path,{duration:.6,morphSVG:{shape:archPath},ease:"power2.out"}); gsap.to(veil,{duration:.25,opacity:.95,ease:"power2.out"}); }; const leave = ()=>{ gsap.to(path,{duration:.6,morphSVG:{shape:rectPath},ease:"power2.inOut"}); gsap.to(veil,{duration:.25,opacity:0,ease:"power2.inOut"}); }; card.addEventListener('mouseenter', enter); card.addEventListener('mouseleave', leave); card.addEventListener('touchstart', ()=>{ enter(); setTimeout(leave,1400); }, {passive:true}); })(); })();