// ------------------------------------------------------------------------------------------------
// Effect: CRT (greatly simplified)

:root[data-effects='on'] .crt {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: repeating-linear-gradient(
    0deg,
    var(--lg-primary-static),
    var(--lg-primary-static) 2px,
    transparent 4px,
    transparent 8px
  );
  background-size: 100%;
  opacity: 0.125;
  animation: none;
}
:root[data-effects='on'] .crt.animated {
  --duration: 18s;
  animation: crtscroll var(--duration) infinite linear forwards;
  -webkit-animation: crtscroll var(--duration) infinite linear forwards;
  -moz-animation: crtscroll var(--duration) infinite linear forwards;
}
.extra-hologram {
  img {
    filter: sepia(100%) saturate(250%) hue-rotate(180deg);
  }
}

// keyframe animations

@-webkit-keyframes crtscroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 256px;
  }
}
@-moz-keyframes crtscroll {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 0 256px;
  }
}
@keyframes crtscroll {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 0 256px;
  }
}

// ------------------------------------------------------------------------------------------------
// Disable all animations if prefers-reduced-motion is active
// Disable all effects if data-effects is set to off

:root[data-effects='off'] .crt {
  display: none;
}

@media screen and (prefers-reduced-motion) {
  .crt.animated {
    animation: none;
  }
}
