[QUAR-801][BpkOverlay] Update video overlay to align with heavy overlay design

[kirstybryce]

Jira: https://skyscanner.atlassian.net/browse/QUAR-801

In January we added the video overlay style for the BpkOverlay component in #3717 to be used in the homepage video advert POC. In the next version of the ad we have to align the video overlay with the backpack heavy overlay design.

• Slack thread in #backpack-design-chat for context: https://skyscanner.slack.com/archives/CUQ587E5D/p1743775241236679
• Video homepage ad design: https://www.figma.com/design/o7vYhyVecpNyC92vTDPNTf/Video-Moments?node-id=2622-16895&t=ugMReV4E1xVklJKZ-0

We're renaming the overlay type from video to heavy, which would normally be a breaking change release, but since it's only used in one place, we can make sure to update the overlay name there after doing the next Backpack release.

Before	After

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/3787 to see this build running in a browser.

[Copilot]

Copilot reviewed 3 out of 5 changed files in this pull request and generated no comments.

Files not reviewed (2)

• packages/bpk-component-overlay/src/BpkOverlay.module.scss: Language not supported
• packages/bpk-component-overlay/src/snapshots/BpkOverlay-test.tsx.snap: Language not supported

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/3787 to see this build running in a browser.

[skyscanner-backpack-bot]

	Warnings
⚠️	Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 66e9002

[Faye-Xiao]

Hi @kirstybryce I noticed you changed this. I didn't see the Percy has a failure due to the color change. Does it cause a visual change? 🤔

[kirstybryce]

Yes it does, it might not be a big enough change to be picked up by percy though 🤔 you can see in the screenshots the visual differences. It's only extending dark part of the gradient to take up more of the height, it's the same colour and opacity otherwise

[Faye-Xiao]

That's very interesting. I'll take a look at the Percy-related document later.
The code looks good to me!

[Faye-Xiao]

LGTM.