fix(website): feather the hero mascot into the page

[New1Direction]

Summary

The hero clip (mascot-loop.mp4 / mascot-poster.jpg) has a grey backdrop baked into the media, so the old .hero-mascot-stage boxed it in a hard grey rounded square that clashed with the site background and had rough edges.

Fix (CSS only, no media re-render): drop the grey box (background, border, overflow, the glass sheen + inner ring) and feather the media edges to transparent with a radial mask-image, plus a soft accent pool beneath Vee so he reads as placed, not floating. Vee now melts into the page on any background.

Notes

• Verified by rendering the real poster + new CSS over the site bg: no square, soft edges, blends cleanly on light.
• Residual: the baked light-grey leaves a faint halo on a dark background. Only a transparent media re-render removes that fully (follow-up). The old box was worse in both modes.

Test plan

• Merge → Pages deploy → confirm the hero looks smooth on the live light site