#screensaver-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: none;
  cursor: none;
  overflow: hidden;
  
  /* Variables for animation - will be updated by JS */
  --container-w: 1920; 
  --container-h: 1080;
  --logo-w: 160px;
  --logo-h: 80px;
  --duration-y: 5s;
  --aspect: calc(var(--container-w) / var(--container-h));
  --duration-x: calc(var(--duration-y) * var(--aspect));
}

.dvd-logo {
  position: absolute;
  width: var(--logo-w);
  height: var(--logo-h);
  animation: 
    x var(--duration-x) linear infinite alternate, 
    y var(--duration-y) linear infinite alternate, 
    colorX calc(var(--duration-x) * 5) step-start infinite, 
    colorY calc(var(--duration-y) * 5) step-start infinite;
  color: hsl(calc(360 / 25 * (var(--color-y) * 5 + var(--color-x)) * 1deg) 100% 50%);
  will-change: transform, left, top; /* Optimization */
}

@keyframes x {
  from { left: 0; }
  to { left: calc(100% - var(--logo-w)); }
}

@keyframes y {
  from { top: 0; }
  to { top: calc(100% - var(--logo-h)); }
}

@keyframes colorX {
  from { --color-x: 0; }
  20% { --color-x: 2; }
  40% { --color-x: 4; }
  60% { --color-x: 1; }
  80% { --color-x: 3; }
  to { --color-x: 0; }
}

@keyframes colorY {
  from { --color-y: 0; }
  20% { --color-y: 2; }
  40% { --color-y: 4; }
  60% { --color-y: 1; }
  80% { --color-y: 3; }
  to { --color-y: 0; }
}