jQuery(function ($) {
	const topOffset = 250
	const fadeRange = 500

	let ticking = false

	function onScroll() {
		if (!ticking) {
			window.requestAnimationFrame(() => {
				$('.services-tile').each(function () {
					const $el = $(this)
					const next = $el.next('.services-tile')

					if (!next.length) {
						$el.css('opacity', 1)
						return
					}

					const nextTop = next[0].getBoundingClientRect().top

					let opacity = (nextTop - topOffset) / fadeRange
					opacity = Math.max(0, Math.min(1, opacity))
					$el.css({
						opacity: opacity,
					})
				})
				ticking = false
			})
			ticking = true
		}
	}

	onScroll()

	$(window).on('scroll resize', onScroll)
})
