/* ============================================================
   ONRYO OS 95 - video wallpaper
   A track marked  video: true  in js/playlist.js promotes the
   YouTube player from its off-screen corner to the desktop
   background. It is the same iframe that is producing the audio,
   so picture and sound cannot drift apart - seeking the ONRYAMP
   bar seeks the wallpaper too.
   ============================================================ */

/* the player's normal home: parked off-screen, audio only.
   (off-screen rather than display:none - a hidden player is
   allowed to suspend itself, an off-screen one is not) */
.yt-host {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 320px;
  height: 180px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* promoted to wallpaper */
.yt-host.vidbg {
  left: 0;
  top: 0;
  right: 0;
  bottom: var(--taskbar-h);
  width: auto;
  height: auto;
  opacity: 1;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

/* ---------- the badge mask ----------
   YouTube's play/pause badge and its end card are drawn inside a
   cross-origin iframe, so they cannot be styled away. They can be
   covered at the moments they appear - which is what this is.
   It reads as the signal dropping out, rather than as a bug. */
.yt-host.vidbg .vidmask {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s linear;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .045) 0 1px,
      transparent 1px 3px),
    radial-gradient(ellipse at center, #141414 0%, #050505 100%);
}
/* going up is instant, coming down fades */
.yt-host.vidbg .vidmask.on { opacity: 1; transition-duration: .04s; }

.yt-host.vidbg .vidmask.on::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 0, 90, .09) 0 2px,
      rgba(0, 255, 210, .07) 2px 4px,
      transparent 4px 9px);
  animation: vm-static .13s steps(3) infinite;
}
@keyframes vm-static {
  0%   { background-position: 0 0; opacity: .9; }
  50%  { background-position: 18px -11px; opacity: .55; }
  100% { background-position: -14px 15px; opacity: .8; }
}

/* a light scrim so icon labels stay readable over bright footage.
   Drop the alpha to 0 if you want the video at full strength. */
.yt-host.vidbg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .22);
  pointer-events: none;
}

/* fill the desktop without letterboxing, cropping the overspill */
.yt-host.vidbg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;          /* 100vw at 16:9 */
  min-height: 100vh;
  min-width: 177.78vh;      /* 100vh at 16:9 */
  border: 0;
  pointer-events: none;
}

/* let the video show through the desktop, and keep icons above it */
body.vidbg-on { background: #000; }
/* !important because Shell.applyTheme() writes the wallpaper and desk
   colour as inline styles, which would otherwise sit on top of the video */
body.vidbg-on #desktop {
  background-color: transparent !important;
  background-image: none !important;
  z-index: 1;
}
/* icon labels have to survive whatever is playing behind them */
body.vidbg-on .dicon .lbl {
  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
}

/* ---------- the channel-change glitch ---------- */
#vidbg-fx {
  position: fixed;
  inset: 0;
  z-index: 19800;
  pointer-events: none;
  display: none;
  overflow: hidden;
}
#vidbg-fx.on { display: block; }

/* white bloom, like a tube being switched */
#vidbg-fx .bloom {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: vb-bloom .62s ease-out;
}
@keyframes vb-bloom {
  0%   { opacity: 0; }
  8%   { opacity: .85; }
  22%  { opacity: .12; }
  40%  { opacity: .45; }
  100% { opacity: 0; }
}

/* the picture tearing and rolling as it locks on */
#vidbg-fx .tear {
  position: absolute;
  left: -6%;
  right: -6%;
  height: 14%;
  background: rgba(255, 255, 255, .5);
  mix-blend-mode: overlay;
  animation: vb-roll .62s steps(9) ;
}
@keyframes vb-roll {
  from { top: -20%; transform: translateX(-4%) scaleY(1.6); }
  to   { top: 110%; transform: translateX(5%) scaleY(.4); }
}

/* RGB split smeared across the whole screen for a moment */
#vidbg-fx .split {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 0, 90, .35) 0 2px,
      rgba(0, 255, 210, .28) 2px 4px,
      transparent 4px 9px);
  mix-blend-mode: difference;
  animation: vb-split .62s steps(5);
}
@keyframes vb-split {
  0%   { opacity: .95; background-position: 0 0; }
  50%  { opacity: .6;  background-position: 26px -14px; }
  100% { opacity: 0;   background-position: -18px 20px; }
}

/* the whole screen jolts once */
body.vidbg-glitching #desktop,
body.vidbg-glitching .yt-host.vidbg {
  animation: vb-jolt .62s steps(6);
}
@keyframes vb-jolt {
  0%   { transform: translate(0, 0) skewX(0deg); }
  20%  { transform: translate(-9px, 3px) skewX(-2deg); }
  45%  { transform: translate(7px, -4px) skewX(1.5deg); }
  70%  { transform: translate(-4px, 2px) skewX(-.8deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  #vidbg-fx .bloom { animation: vb-bloom-soft .4s ease-out; }
  #vidbg-fx .tear, #vidbg-fx .split { display: none; }
  body.vidbg-glitching #desktop,
  body.vidbg-glitching .yt-host.vidbg { animation: none; }
  /* the mask still covers the badge, it just holds still */
  .yt-host.vidbg .vidmask.on::after { animation: none; opacity: .5; }
  @keyframes vb-bloom-soft { 0% { opacity: 0; } 30% { opacity: .5; } 100% { opacity: 0; } }
}