.alves-wheel-wrapper{ min-height:420px; display:flex; align-items:center; justify-content:center; } @media (max-width:768px){ .alves-wheel-wrapper{width:220px;} } .alves-wheel-svg{ width:100%; display:block; } .alves-intro-text{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; opacity:0; pointer-events:none; z-index:50; /* 👈 MAIS ALTO QUE O SVG */ color:black; } .alves-intro-text strong{ font-size:22px; } .alves-intro-text span{ font-size:14px; opacity:.85; } @media (hover:hover){ .alves-wheel-svg path{ transition:transform .25s ease; transform-origin:center; } .alves-wheel-svg a:hover path{ transform:scale(1.08); } } window.addEventListener(“load”,()=>{ const wrapper = document.getElementById(“alvesWheel”); const svg = document.getElementById(“alvesSvg”); const defs = svg.querySelector(“defs”); const text = document.getElementById(“alvesIntroText”); let started = false; const petals = [ { el: document.getElementById(“woodworking”), img: “https://www.alvesgroup.pt/web/image/2162-fa3e8fb9/wood.jpg”, dx: 20, dy: -20 }, { el: document.getElementById(“composites”), img: “https://www.alvesgroup.pt/web/image/2163-e5829ad3/bg_intro_sp.jpg”, dx: -20, dy: 20 }, { el: document.getElementById(“inovaprotect”), img: “https://www.alvesgroup.pt/web/image/2175-aec98113/pcpilar.jpg”, dx: 20, dy: 30 }, { el: document.getElementById(“ecostruct”), img: “https://www.alvesgroup.pt/web/image/2166-008fae51/3d.jpg”, dx: -20, dy: 20 } ]; function startAnimation(){ if(started) return; started = true; const tl = gsap.timeline(); // Estado inicial gsap.set(text,{opacity:0}); gsap.set(svg,{opacity:1}); // 1️⃣ Logo inicial – 2s tl.to(svg,{opacity:1,duration:2}); // 2️⃣ Esconde logo tl.to(svg,{opacity:0,duration:0.6,ease:”power2.out”}); // 3️⃣ Texto aparece tl.set(text,{opacity:0}); tl.to(text,{opacity:1,duration:0.6,ease:”power2.out”}); // Texto bem legível no centro tl.to(text,{opacity:1,duration:2}); // 4️⃣ Texto desaparece tl.to(text,{opacity:0,duration:0.6,ease:”power2.in”}); // 4️⃣ Logo com imagens tl.call(()=>{ gsap.set(svg,{opacity:1}); petals.forEach(p=>{ const pat = document.createElementNS(“http://www.w3.org/2000/svg”,”pattern”); pat.setAttribute(“id”,”p-“+p.el.id); pat.setAttribute(“patternUnits”,”userSpaceOnUse”); pat.setAttribute(“width”,”140″); pat.setAttribute(“height”,”140″); const img = document.createElementNS(“http://www.w3.org/2000/svg”,”image”); img.setAttribute(“href”,p.img); img.setAttribute(“width”,”160″); img.setAttribute(“height”,”160″); img.setAttribute(“x”,”-30″); img.setAttribute(“y”,”-30″); pat.appendChild(img); defs.appendChild(pat); p.el.setAttribute(“fill”,”url(#p-“+p.el.id+”)”); gsap.to(img,{ x:p.dx, y:p.dy, duration:16, repeat:-1, yoyo:true, ease:”none” }); }); }); } const observer = new IntersectionObserver(entries=>{ if(entries[0].isIntersecting){ startAnimation(); observer.disconnect(); // 👈 muito importante } },{threshold:0.6}); observer.observe(wrapper); });