document.addEventListener('DOMContentLoaded',function (){const carousels=document.querySelectorAll('.services-carousel-wrapper, .team-carousel, .taxonomy-carousel');carousels.forEach((carouselWrapper)=>{const isTaxonomyCarousel=carouselWrapper.classList.contains('taxonomy-carousel');const itemsContainer=carouselWrapper.querySelector('.carousel-items') || carouselWrapper.querySelector('.services-carousel');const items=itemsContainer ? itemsContainer.querySelectorAll('.service-card, .team-card, .taxonomy-card') :[];const prevButton=carouselWrapper.querySelector('.prev-button');const nextButton=carouselWrapper.querySelector('.next-button');if (!itemsContainer || items.length===0 || !prevButton || !nextButton) return;// --- CONFIG --- const itemsToShow=isTaxonomyCarousel ? 1 :3;const gap=20;// keep your gap constant (px) // -------------- // Make transforms cheap for the compositor itemsContainer.style.willChange='transform';let currentIndex=0;let cardWidth=0;let rafId=null;prevButton.style.display='block';nextButton.style.display='block';// READ (measure) — do this sparingly function measure(){// Use getBoundingClientRect once;avoid reading during the write phase cardWidth=items[0].getBoundingClientRect().width || 0}// WRITE (apply) — do this inside rAF function apply(){rafId=null;const maxIndex=Math.max(0, items.length - itemsToShow);currentIndex=Math.min(Math.max(currentIndex, 0), maxIndex);const offset=-(currentIndex * (cardWidth+gap));// translate3d avoids layout/paint on each move (GPU-friendly) itemsContainer.style.transform=`translate3d(${offset}px,0,0)`}function scheduleApply(){if (rafId) cancelAnimationFrame(rafId);rafId=requestAnimationFrame(apply)}// Controls prevButton.addEventListener('click',()=>{currentIndex=currentIndex>0 ? currentIndex - 1:(items.length - itemsToShow);scheduleApply()});nextButton.addEventListener('click',()=>{currentIndex=(currentIndex < items.length - itemsToShow) ? currentIndex+1:0;scheduleApply()});// Debounced resize ->re-measure,then apply let resizeT;function onResize(){clearTimeout(resizeT);resizeT=setTimeout(()=>{measure();scheduleApply()},150)}window.addEventListener('resize',onResize,{passive:true});// If fonts/images load later and change widths,observe container size if ('ResizeObserver' in window){const ro=new ResizeObserver(()=>{measure();scheduleApply()});ro.observe(itemsContainer)}// First paint measure();scheduleApply()})});