.photo-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
  background: var(--photo-backdrop-base-color);
}
.photo-backdrop-frame {
  --photo-backdrop-frame-width: max(100cqw, calc(100cqh * var(--photo-backdrop-ratio)));
  --photo-backdrop-frame-height: max(100cqh, calc(100cqw / var(--photo-backdrop-ratio)));
  position: absolute;
  left: calc((100cqw - var(--photo-backdrop-frame-width)) * var(--photo-backdrop-focus-x));
  top: calc((100cqh - var(--photo-backdrop-frame-height)) * var(--photo-backdrop-focus-y));
  width: var(--photo-backdrop-frame-width);
  height: var(--photo-backdrop-frame-height);
  transform-origin: calc(var(--photo-backdrop-focus-x) * 100%)
    calc(var(--photo-backdrop-focus-y) * 100%);
  animation: photo-backdrop-drift 26s ease-in-out infinite alternate;
}
.photo-backdrop-image {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-backdrop-light {
  position: absolute;
  left: calc(var(--photo-light-x) * 100%);
  top: calc(var(--photo-light-y) * 100%);
  width: calc(var(--photo-light-size) * 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--photo-light-color), transparent);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  animation: photo-backdrop-light-pulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--photo-light-delay) * -1s);
}
.photo-backdrop-grade {
  position: absolute;
  inset: 0;
}
.photo-cutout {
  filter: drop-shadow(0 0 1px rgba(6, 7, 26, 0.9))
    drop-shadow(0 0 14px color-mix(in srgb, var(--photo-backdrop-rim-light) 55%, transparent))
    drop-shadow(0 10px 12px rgba(6, 7, 26, 0.55));
}
@keyframes photo-backdrop-drift {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.09);
  }
}
@keyframes photo-backdrop-light-pulse {
  0%,
  100% {
    opacity: 0.16;
  }
  42% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.3;
  }
  58% {
    opacity: 0.55;
  }
}