How to make cards lift as you scroll on a phone

.card {
  display: flex;
  flex-direction: column;
  background: #fffdfa;
  border: 1px solid rgb(11 14 26 / 0.22);
  border-radius: 4px;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
  border-color: #0b0e1a;
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -20px rgb(11 14 26 / 0.35);
}

@media (max-width: 900px), (hover: none) {
  .card.is-lifted {
    border-color: #0b0e1a;
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -20px rgb(11 14 26 / 0.35);
  }

  .is-lifted .card-cta {
    opacity: 1;
    transform: translateX(0);
  }
}

const CARDS = '.card'
const small = window.matchMedia('(max-width: 900px), (hover: none)')
let mouse = false
const inBand = new Set<Element>()

const apply = () => {
  const on = small.matches && !mouse
  document.querySelectorAll(CARDS).forEach((el) =>
    el.classList.toggle('is-lifted', on && inBand.has(el)),
  )
}

const io = new IntersectionObserver(
  (entries) => {
    for (const e of entries) {
      if (e.isIntersecting) inBand.add(e.target)
      else inBand.delete(e.target)
    }
    apply()
  },
  // a thin band across the middle of the screen
  { rootMargin: '-40% 0px -40% 0px' },
)

'use client'

import { usePathname } from 'next/navigation'
import { useEffect } from 'react'

export function CardLift() {
  const pathname = usePathname()

  useEffect(() => {
    // small, mouse, inBand, apply and io from the previous step go here

    const seen = new WeakSet<Element>()
    const watch = () =>
      document.querySelectorAll('.card').forEach((el) => {
        if (seen.has(el)) return
        seen.add(el)
        io.observe(el)
      })
    watch()
    const mo = new MutationObserver(watch)
    mo.observe(document.body, { childList: true, subtree: true })

    const onPointer = (e: PointerEvent) => {
      const isMouse = e.pointerType === 'mouse'
      if (isMouse !== mouse) {
        mouse = isMouse
        apply()
      }
    }
    window.addEventListener('pointermove', onPointer, { passive: true })
    window.addEventListener('pointerdown', onPointer, { passive: true })
    small.addEventListener('change', apply)

    return () => {
      io.disconnect()
      mo.disconnect()
      window.removeEventListener('pointermove', onPointer)
      window.removeEventListener('pointerdown', onPointer)
      small.removeEventListener('change', apply)
    }
  }, [pathname])

  return null
}