(() => { if (window.__primerProductPlatformController) { return; } window.__primerProductPlatformController = true; const clamp = (value, min, max) => Math.min(max, Math.max(min, value)); const smoothStep = (value) => { const t = clamp(value, 0, 1); return t * t * (3 - 2 * t); }; const easeOutCubic = (value) => { const t = clamp(value, 0, 1); return 1 - Math.pow(1 - t, 3); }; let activeHero = null; let activeCleanup = null; let refreshFrame = 0; function connect(hero) { const stepsList = hero.querySelector(".product-platform-hero__steps"); const steps = Array.from(hero.querySelectorAll("[data-platform-step]")); const slides = Array.from(hero.querySelectorAll("[data-platform-slide]")); const captionEyebrow = hero.querySelector("[data-platform-caption-eyebrow]"); const captionTitle = hero.querySelector("[data-platform-caption-title]"); const captionCopy = hero.querySelector("[data-platform-caption-copy]"); if (!steps.length || !slides.length) { return undefined; } let frame = 0; let snapTimer = 0; let snapAnimationFrame = 0; let isSnapping = false; let lastDirection = 0; let lastScrollY = window.scrollY; let snapReferenceProgress = null; let wheelGestureDirection = 0; let wheelGestureMagnitude = 0; let wheelGestureOppositeMagnitude = 0; let wheelGestureLastAt = 0; let wheelSuppressScrollSnapUntil = 0; let activeIndex = -1; const scrollTargets = [ window, document.querySelector(".framer-page-shell"), document.querySelector(".page-transition-main"), ].filter((target, index, targets) => target && targets.indexOf(target) === index); function getTimelineConfig() { const isMobile = window.innerWidth <= 760; const desktopStepInterval = 0.28; const desktopFirstStepCenter = desktopStepInterval; const stepStart = isMobile ? 0.035 : 0.08; const stepVisibleStart = isMobile ? stepStart : 0.25; const storyStart = isMobile ? 0.04 : 0.26; const storyDuration = isMobile ? 0.86 : 0.68; return { desktopFirstStepCenter, desktopStepInterval, isMobile, stepStart, stepVisibleStart, storyDuration, storyStart, }; } function getScrollMetrics(config) { const stickyTop = config.isMobile ? 107 : 122; const rect = hero.getBoundingClientRect(); const stickyHeight = Math.max(1, window.innerHeight - stickyTop); const scrollRange = Math.max(1, hero.offsetHeight - stickyHeight); const progress = clamp(-rect.top / scrollRange, 0, 1); return { progress, rect, scrollRange }; } function getSnapTargets(config) { return [ 0, ...steps.map( (_, index) => config.desktopFirstStepCenter + config.desktopStepInterval * index, ), ]; } function cancelSnapAnimation() { if (snapAnimationFrame) { window.cancelAnimationFrame(snapAnimationFrame); } snapAnimationFrame = 0; isSnapping = false; } function setScrollTop(top) { const scrollingElement = document.scrollingElement || document.documentElement; if (scrollingElement) { const htmlScrollBehavior = document.documentElement.style.scrollBehavior; const bodyScrollBehavior = document.body.style.scrollBehavior; document.documentElement.style.scrollBehavior = "auto"; document.body.style.scrollBehavior = "auto"; scrollingElement.scrollTop = top; document.documentElement.style.scrollBehavior = htmlScrollBehavior; document.body.style.scrollBehavior = bodyScrollBehavior; } else { window.scrollTo({ top, behavior: "auto" }); } } function animateSnapTo(targetY) { const startY = window.scrollY; const distance = targetY - startY; if (Math.abs(distance) < 2) { return; } const reduceMotion = window.matchMedia( "(prefers-reduced-motion: reduce)", ).matches; cancelSnapAnimation(); if (reduceMotion) { setScrollTop(targetY); lastScrollY = window.scrollY; return; } const snapDistance = Math.abs(distance); const duration = clamp(220 + snapDistance * 0.72, 340, 640); const animationStart = window.performance.now(); isSnapping = true; function finishSnap() { snapAnimationFrame = 0; isSnapping = false; setScrollTop(targetY); lastScrollY = window.scrollY; } function tick(now) { const progress = clamp((now - animationStart) / duration, 0, 1); const easedProgress = easeOutCubic(progress); setScrollTop(startY + distance * easedProgress); if (progress < 1) { snapAnimationFrame = window.requestAnimationFrame(tick); } else { finishSnap(); } } snapAnimationFrame = window.requestAnimationFrame(tick); } function snapInScrollDirection() { snapTimer = 0; if (isSnapping || !lastDirection) { return; } const config = getTimelineConfig(); if (config.isMobile) { return; } const { progress, rect, scrollRange } = getScrollMetrics(config); if ( rect.top > window.innerHeight * 0.35 || rect.bottom < window.innerHeight * 0.2 ) { return; } const targets = getSnapTargets(config); const firstTarget = targets[0]; const lastTarget = targets[targets.length - 1]; const snapTolerance = 0.012; if ( targets.some( (target) => Math.abs(target - progress) <= snapTolerance * 1.5, ) ) { snapReferenceProgress = null; return; } const referenceProgress = snapReferenceProgress === null ? progress : snapReferenceProgress; let targetProgress = null; if (lastDirection > 0) { if (referenceProgress >= lastTarget - snapTolerance) { snapReferenceProgress = null; return; } targetProgress = targets.find( (target) => target > referenceProgress + snapTolerance, ) ?? null; if ( targetProgress !== null && targetProgress <= progress + snapTolerance ) { targetProgress = targets.find((target) => target > progress + snapTolerance) ?? null; } } else { if (referenceProgress <= firstTarget + snapTolerance) { snapReferenceProgress = null; return; } for (let index = targets.length - 1; index >= 0; index -= 1) { if (targets[index] < referenceProgress - snapTolerance) { targetProgress = targets[index]; break; } } if ( targetProgress !== null && targetProgress >= progress - snapTolerance ) { targetProgress = null; for (let index = targets.length - 1; index >= 0; index -= 1) { if (targets[index] < progress - snapTolerance) { targetProgress = targets[index]; break; } } } } if (targetProgress === null) { snapReferenceProgress = null; return; } snapReferenceProgress = null; animateSnapTo(window.scrollY + rect.top + targetProgress * scrollRange); } function setActive(nextIndex) { const boundedIndex = clamp(nextIndex, 0, steps.length - 1); if (boundedIndex === activeIndex) { return; } activeIndex = boundedIndex; const activeStep = steps[boundedIndex]; steps.forEach((step, index) => { step.classList.toggle("is-active", index === boundedIndex); if (index === boundedIndex) { step.setAttribute("aria-current", "step"); } else { step.removeAttribute("aria-current"); } }); slides.forEach((slide, index) => { slide.classList.toggle("is-active", index === boundedIndex); }); if (captionEyebrow) { captionEyebrow.textContent = activeStep?.dataset.platformEyebrow || ""; } if (captionTitle) { captionTitle.textContent = activeStep?.dataset.platformTitle || ""; } if (captionCopy) { captionCopy.textContent = activeStep?.dataset.platformCaption || ""; } } function update() { frame = 0; const { desktopFirstStepCenter, desktopStepInterval, isMobile, stepStart, stepVisibleStart, storyDuration, storyStart, } = getTimelineConfig(); const introExitStart = 0.02; const introExitEnd = desktopFirstStepCenter * 0.94; const { progress } = getScrollMetrics({ isMobile }); const introExitProgress = isMobile ? 0 : smoothStep( (progress - introExitStart) / (introExitEnd - introExitStart), ); const stepped = progress > stepStart; const showSteps = progress > stepVisibleStart; const stepRevealProgress = isMobile ? showSteps ? 1 : 0 : clamp( (progress - stepVisibleStart) / (desktopFirstStepCenter - stepVisibleStart), 0, 1, ); const rawStoryProgress = clamp( (progress - storyStart) / storyDuration, 0, 1, ); const storyPosition = isMobile ? rawStoryProgress * (steps.length - 1) : clamp( (progress - desktopFirstStepCenter) / desktopStepInterval, 0, steps.length - 1, ); const storyProgress = storyPosition / Math.max(1, steps.length - 1); const nextIndex = Math.min( steps.length - 1, Math.round(storyPosition), ); hero.classList.toggle("is-stepped", stepped); hero.style.setProperty("--platform-progress", progress.toFixed(4)); hero.style.setProperty( "--platform-intro-exit", introExitProgress.toFixed(4), ); hero.style.setProperty( "--platform-steps-opacity", stepRevealProgress.toFixed(4), ); hero.style.setProperty( "--platform-story-progress", storyProgress.toFixed(4), ); stepsList?.style.setProperty( "--platform-step-align-y", "-22px", ); stepsList?.classList.toggle("is-visible", showSteps); steps.forEach((step, index) => { const delta = index - storyPosition; const absDelta = Math.abs(delta); const opacityDistance = isMobile ? 0.62 : 0.74; const opacity = absDelta <= 0.12 ? 1 : Math.pow( clamp( 1 - (absDelta - 0.12) / (opacityDistance - 0.12), 0, 1, ), 1.22, ); const scale = 1 - Math.min(absDelta, 1) * 0.028; step.style.setProperty("--platform-step-y", delta * 150 + "px"); step.style.setProperty("--platform-step-opacity", opacity.toFixed(4)); step.style.setProperty("--platform-step-scale", scale.toFixed(4)); }); slides.forEach((slide, index) => { const absDelta = Math.abs(index - storyPosition); const opacity = absDelta <= 0.1 ? 1 : absDelta >= 1 ? 0 : Math.cos(((absDelta - 0.1) / 0.9) * (Math.PI / 2)); const scale = 1 + Math.min(absDelta, 1) * 0.012; slide.style.setProperty( "--platform-slide-opacity", opacity.toFixed(4), ); slide.style.setProperty("--platform-slide-scale", scale.toFixed(4)); }); setActive(nextIndex); } function scheduleUpdate() { if (!frame) { frame = window.requestAnimationFrame(update); } } function beginWheelGesture(direction, now) { wheelGestureDirection = direction; wheelGestureMagnitude = 0; wheelGestureOppositeMagnitude = 0; wheelGestureLastAt = now; snapReferenceProgress = getScrollMetrics(getTimelineConfig()).progress; } function resolveWheelGesture(deltaY) { const now = window.performance.now(); const absDelta = Math.abs(deltaY); const eventDirection = deltaY > 0 ? 1 : -1; const isNewGesture = !wheelGestureDirection || now - wheelGestureLastAt > 180; let switchedDirection = false; let ignoredOppositeTail = false; if (isNewGesture) { beginWheelGesture(eventDirection, now); switchedDirection = true; } else { wheelGestureLastAt = now; } if (eventDirection === wheelGestureDirection) { wheelGestureMagnitude += absDelta; wheelGestureOppositeMagnitude = 0; } else { wheelGestureOppositeMagnitude += absDelta; if ( wheelGestureOppositeMagnitude >= Math.max(72, wheelGestureMagnitude * 0.42) ) { beginWheelGesture(eventDirection, now); wheelGestureMagnitude = absDelta; switchedDirection = true; } else { ignoredOppositeTail = true; } } return { delay: absDelta >= 18 ? 70 : 10, direction: wheelGestureDirection || eventDirection, ignoredOppositeTail, isTinyTail: absDelta < 18 && !switchedDirection, }; } function scheduleDirectionalSnap() { const nextScrollY = window.scrollY; const deltaY = nextScrollY - lastScrollY; lastScrollY = nextScrollY; if (window.performance.now() < wheelSuppressScrollSnapUntil) { return; } if (isSnapping) { return; } if (Math.abs(deltaY) > 0.5) { lastDirection = deltaY > 0 ? 1 : -1; if (snapReferenceProgress === null) { snapReferenceProgress = getScrollMetrics( getTimelineConfig(), ).progress; } } if (!lastDirection) { return; } window.clearTimeout(snapTimer); snapTimer = window.setTimeout(snapInScrollDirection, 10); } function scheduleSnapFromDirection(direction, delay, preserveReference) { window.clearTimeout(snapTimer); cancelSnapAnimation(); lastDirection = direction; if (!preserveReference || snapReferenceProgress === null) { snapReferenceProgress = getScrollMetrics(getTimelineConfig()).progress; } lastScrollY = window.scrollY; snapTimer = window.setTimeout(snapInScrollDirection, delay); } function handleWheelInput(event) { if ( Math.abs(event.deltaY) < 2 || Math.abs(event.deltaY) <= Math.abs(event.deltaX) ) { return; } const gesture = resolveWheelGesture(event.deltaY); wheelSuppressScrollSnapUntil = window.performance.now() + Math.max(120, gesture.delay + 40); if ( isSnapping && (gesture.ignoredOppositeTail || gesture.isTinyTail) ) { return; } scheduleSnapFromDirection(gesture.direction, gesture.delay, true); } function cancelSnapOnInput() { if (isSnapping) { cancelSnapAnimation(); } lastScrollY = window.scrollY; } update(); scrollTargets.forEach((target) => { target.addEventListener("scroll", scheduleUpdate, { passive: true }); target.addEventListener("scroll", scheduleDirectionalSnap, { passive: true, }); }); window.addEventListener("wheel", handleWheelInput, { passive: true }); window.addEventListener("touchstart", cancelSnapOnInput, { passive: true }); window.addEventListener("keydown", cancelSnapOnInput); window.addEventListener("resize", scheduleUpdate); window.addEventListener("pageshow", scheduleUpdate); return () => { if (frame) { window.cancelAnimationFrame(frame); } scrollTargets.forEach((target) => { target.removeEventListener("scroll", scheduleUpdate); target.removeEventListener("scroll", scheduleDirectionalSnap); }); window.clearTimeout(snapTimer); cancelSnapAnimation(); window.removeEventListener("wheel", handleWheelInput); window.removeEventListener("touchstart", cancelSnapOnInput); window.removeEventListener("keydown", cancelSnapOnInput); window.removeEventListener("resize", scheduleUpdate); window.removeEventListener("pageshow", scheduleUpdate); }; } function refresh() { refreshFrame = 0; const hero = document.querySelector(".product-platform-hero"); if (hero === activeHero) { return; } activeCleanup?.(); activeCleanup = null; activeHero = null; if (!hero) { return; } const cleanup = connect(hero); if (cleanup) { activeHero = hero; activeCleanup = cleanup; } } function scheduleRefresh() { if (!refreshFrame) { refreshFrame = window.requestAnimationFrame(refresh); } } window.addEventListener("DOMContentLoaded", scheduleRefresh); window.addEventListener("load", scheduleRefresh); window.addEventListener("pageshow", scheduleRefresh); window.addEventListener("popstate", scheduleRefresh); new MutationObserver(scheduleRefresh).observe(document.documentElement, { childList: true, subtree: true, }); scheduleRefresh(); })();