@keyframes crtCrossfade {
  0%      { opacity: 0; }
  2.308%  { opacity: 1; }
  10%     { opacity: 1; }
  12.308% { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes crtFlicker {
  0%, 100% { filter: grayscale(0.55) sepia(0.15) contrast(1.05) brightness(0.95); }
  50%      { filter: grayscale(0.55) sepia(0.15) contrast(1.08) brightness(1.04); }
  52%      { filter: grayscale(0.6)  sepia(0.15) contrast(1.05) brightness(0.85); }
  54%      { filter: grayscale(0.55) sepia(0.15) contrast(1.06) brightness(1.02); }
}

@keyframes crtScan {
  0%   { background-position-y: 0; }
  100% { background-position-y: 6px; }
}

.crt-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  animation: crtCrossfade 65s ease-in-out infinite, crtFlicker 3.6s infinite;
}

.scene img.crt-photo:nth-of-type(1)  { animation-delay: 0s, 0s; }
.scene img.crt-photo:nth-of-type(2)  { animation-delay: 6.5s, 0s; }
.scene img.crt-photo:nth-of-type(3)  { animation-delay: 13s, 0s; }
.scene img.crt-photo:nth-of-type(4)  { animation-delay: 19.5s, 0s; }
.scene img.crt-photo:nth-of-type(5)  { animation-delay: 26s, 0s; }
.scene img.crt-photo:nth-of-type(6)  { animation-delay: 32.5s, 0s; }
.scene img.crt-photo:nth-of-type(7)  { animation-delay: 39s, 0s; }
.scene img.crt-photo:nth-of-type(8)  { animation-delay: 45.5s, 0s; }
.scene img.crt-photo:nth-of-type(9)  { animation-delay: 52s, 0s; }
.scene img.crt-photo:nth-of-type(10) { animation-delay: 58.5s, 0s; }

.crt-scan {
  position: absolute;
  inset: -6px 0 0 0;
  z-index: 1;
  opacity: 0.22;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 3px);
  animation: crtScan 0.4s linear infinite;
}

.crt-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.4);
}

.crt-fringe {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 0, 60, 0.05), transparent 10%, transparent 90%, rgba(0, 140, 255, 0.05));
}

.crt-text-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.55) 15%, rgba(0, 0, 0, 0) 55%);
}