YouTube: hide un-hovered controls ⏸ by myfonj

/* ==UserStyle==
@name           YouTube: hide un-hovered controls ⏸
@namespace      github.com/openstyles/stylus
@version        1.3.1
@description    Makes everything above video (except CC) transparent until hovered over.
@author         myf
@license        CC0
==/UserStyle== */
/*
Changelog
1.3.1 (2025-01-15) + [youtube] Ditched progress seeker right violet gradient.
1.3.0 (2025-01-15) + Added Fb reels.
1.2.3 (2024-08-03) + Show posters and end-screens in embeds.
1.2.2 (2024-07-13) + Show Seeker preview.
1.2.1 (2024-07-01) + Simplified YT rules.
1.2.0 (2024-06-22) + added YT shorts and ("HBO") Max.
1.1.0 (2024-06-22) + applied to YT  embeds.
*/

@-moz-document domain("youtube.com") {
 .ytProgressBarLineProgressBarPlayed, /* shorts and thumbs*/
 .ytp-play-progress {
   background-image: none !important;
   background-color: red !important;
   /*
    original "red" is slightly blue: rgb(255, 39, 145)
   */
 }
 
}
@-moz-document url-prefix("https://www.youtube.com/watch?v=")
, url-prefix("https://www.youtube.com/embed/")
{
 #movie_player > [data-layer]:not(
  /* Show hovered whatever: */
  :hover,
  /* Don't hide the video: */
  :has(video),
  /* Don't hide captions: */
  .ytp-caption-window-container,
  /* Show seeker backdrop when necessary: */
  .ytp-gradient-bottom:has(
   + .ytp-chrome-bottom:hover
  ),
  /* show seeking preview (ytp-preview) and maybe more: */
  .ytp-tooltip,
  /* Show posters and end-screens in embeds: */
  .ytp-cued-thumbnail-overlay,
  .videowall-endscreen
 ) {
  opacity: 0;
 }
}
@-moz-document url-prefix("https://www.youtube.com/shorts/") {
 :is(
  ytd-reel-player-overlay-renderer,
  ytd-shorts-player-controls
 ):not(
   :hover
 ) {
    opacity: 0;
 }
}
@-moz-document domain("play.max.com")
{
 [class*="Protection"],
 [data-testid="protection_layer"] {
  opacity: 0 !important;
 }
 [data-testid="overlay-root"]:not(
    :hover
 ) {
    opacity: 0;
 }
}
@-moz-document domain("facebook.com")
{
 :is(
  [role="button"][tabindex="0"]:has([data-video-id])
 ) {
  & *:has([data-video-id]) + :not(:has(video)):not(:hover) {
   opacity: 0;
  }
 }
}