Accordion

backdrop-filter applies graphical effects like blur or brightness to the area behind an element. It's what makes the frosted glass look possible — the element itself can be semi-transparent while the background blurs through it.

requestAnimationFrame schedules a callback before the browser's next repaint, syncing naturally with the display refresh rate (usually 60fps). It's the preferred way to run smooth animations since the browser can pause it when the tab is hidden.

Animating grid-template-rows from 0fr to 1fr achieves a smooth height transition without knowing the element's exact height in advance — a clean modern alternative to the old max-height hack.

IntersectionObserver efficiently detects when elements enter the viewport without attaching scroll event listeners, making scroll-triggered animations both performant and battery-friendly.