fix bounding box calculations for the accelerometer tilt effect

[riknoll]

fixes #6103

this fixes the accelerometer tilt effect.

previously, all calculations for determining the mouse position within the board were based on getBoundingClientRect(). the problem with that approach is that the CSS transformation we apply to make the micro:bit look like it's tilting changes the bounds returned by that function (getBoundingClientRect() is calculated post CSS). as a result, we get some weird results for certain screen sizes and aspect ratios where the board moves itself out from underneath the mouse pointer when it tilts.

to fix this, this PR makes two changes:

• the event listeners are now registered on the document rather than the SVG element
• the bounding box calculations are now performed relative to the page bounds rather than the transforming bounding box

together, these two changes give us a constant bounding box instead of a moving target.

while i was here, i also switched the tilt decay function to use requestAnimationFrame instead of setInterval, so the decay is now much smoother than before (and a little quicker, but I think it looks nice).