/* Copyright Ayers Electronics Inc. All rights reserved. */

/* js/screensaver-view.js focuses this to catch the remote while it plays; nothing on it is pressed,
   so it carries no ring of its own, only the floor's default outline dropped. */
#screensaver {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 84;
  overflow: hidden;
  background: var(--offair-ground);
  cursor: none;
  outline: none;
}
#screensaver[hidden] {
  display: none;
}
.screensaver-slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: var(--offair-ground);
  opacity: 0;
  transition: opacity var(--screensaver-fade) ease-in-out;
}
/* A cross-fade without a dip: the slide coming in fades over the one going out, which stays whole and
   still drifting beneath it until the fade ends (js/screensaver-view.js leave). Each slide is opaque
   on the ground, so nothing shows through the one on top. */
.screensaver-slide.show {
  z-index: 2;
  opacity: 1;
}
.screensaver-slide.leaving {
  z-index: 1;
  opacity: 1;
  transition: none;
}
.screensaver-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transform: scale(1.025);
}
/* A title with only its cover fills the screen from it, dimmed so the card over it leads. */
.screensaver-slide.from-cover > img {
  opacity: 0.4;
}
/* Continuous transforms keep both art layers gliding between cross-fades. */
.screensaver-slide.show > img,
.screensaver-slide.leaving > img {
  animation: screensaver-drift var(--screensaver-slide) ease-in-out alternate infinite;
}
/* The far layer's scrim, so the near layer's words read on any backdrop. */
.screensaver-slide::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}
/* The near layer: the cover card and the title at the bottom left, drifting the other way from the
   far layer and through a wider span, which is the parallax. */
.screensaver-fore {
  position: absolute;
  left: 6vw;
  bottom: 8vh;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}
.screensaver-fore[hidden] {
  display: none;
}
.screensaver-slide.show .screensaver-fore,
.screensaver-slide.leaving .screensaver-fore {
  animation: screensaver-fore-drift var(--screensaver-slide) ease-in-out alternate infinite;
}
/* The page's card (css/components/on-demand.css): its picture box is .card-art's padding at the
   cover's ratio, so the card stands 38vh tall from its width on the television floor too. */
.screensaver-fore .screensaver-card {
  flex: 0 0 25.33vh;
  border-radius: var(--radius);
  box-shadow: 0 1.2vh 3vh rgba(0, 0, 0, 0.6);
}
.screensaver-fore .screensaver-card[hidden] {
  display: none;
}
.screensaver-fore .screensaver-card .card-art,
.screensaver-fore .screensaver-card .poster {
  border-radius: var(--radius);
}
.screensaver-title {
  margin-left: 2vw;
  max-width: 40vw;
  font-size: var(--type-heading);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0.2vh 1vh rgba(0, 0, 0, 0.8);
}
.screensaver-fore .screensaver-card[hidden] + .screensaver-title {
  margin-left: 0;
}
/* The standalone lockup follows a closed path without restarting at each slide. It stacks above both
   slides, whose opaque ground would otherwise cover it. */
.screensaver-brand {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  transform: translate(-50%, -50%);
  animation: screensaver-brand-drift calc(var(--screensaver-slide) * 4) ease-in-out infinite;
}
.screensaver-brand[hidden] {
  display: none;
}
/* With no art the lockup stands alone. */
.screensaver-brand img {
  width: min(8vw, 110px);
  height: min(10vw, 130px);
  margin-right: 1.4vw;
}
.screensaver-brand .wordmark {
  font-size: clamp(var(--type-title), 4vw, var(--type-card-headline));
}
/* The corner style: the same lockup, the bird with the name beside it, in the lower right over the
   art at full strength. The bird takes the channel watermark's box height and the lockup its
   action-safe inset (the view sets both from parity.watermark). It shifts a little each slide. */
.screensaver-brand.at-corner {
  transform: none;
  animation: none;
  transition:
    right var(--screensaver-slide) ease-in-out,
    bottom var(--screensaver-slide) ease-in-out;
}
.screensaver-brand.at-corner img {
  width: auto;
  height: var(--screensaver-mark-h);
  margin-right: calc(var(--screensaver-mark-h) * 0.15);
}
.screensaver-brand.at-corner .wordmark {
  font-size: calc(var(--screensaver-mark-h) * 0.6);
}
@keyframes screensaver-drift {
  from {
    transform: scale(1.015) translate(-0.6%, -0.4%);
  }
  to {
    transform: scale(1.045) translate(0.6%, 0.4%);
  }
}
@keyframes screensaver-fore-drift {
  from {
    transform: translate(1vw, 0.6vh) scale(1);
  }
  to {
    transform: translate(-1vw, -0.6vh) scale(1.035);
  }
}
@keyframes screensaver-brand-drift {
  0%,
  100% {
    transform: translate(calc(-50% - 25vw), calc(-50% - 18vh));
  }
  25% {
    transform: translate(calc(-50% + 25vw), calc(-50% - 18vh));
  }
  50% {
    transform: translate(calc(-50% + 25vw), calc(-50% + 18vh));
  }
  75% {
    transform: translate(calc(-50% - 25vw), calc(-50% + 18vh));
  }
}
#screensaver.reduce-motion .screensaver-slide > img,
#screensaver.reduce-motion .screensaver-fore,
#screensaver.reduce-motion .screensaver-brand {
  animation: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .screensaver-slide > img,
  .screensaver-fore,
  .screensaver-brand {
    animation: none !important;
    transition: none !important;
  }
}