/* Subtle light leaks. The red glow breathes around a stationary light source.
   The full-scene container and feathered layer edges prevent rectangular seams. */
.light-leaks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.light-leaks > span {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
  /* Each layer fades to transparent before its top and side edges. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 30%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}

.leak-red {
  left: -10%;
  bottom: -54px;
  width: 65%;
  height: 330px;
  background:
    radial-gradient(ellipse 110px 210px at 15% 66%, #b7461966 0%, #93241435 42%, transparent 100%),
    radial-gradient(ellipse 420px 200px at 30% 100%, #861d154d 0%, #65190f20 52%, transparent 100%);
  /* Match the main radial gradient's center: scaling cannot move the source. */
  transform-origin: 15% 66%;
  opacity: .78;
  animation: red-film-leak 15s ease-in-out infinite;
}

.leak-amber {
  left: -5%;
  bottom: -76px;
  width: 110%;
  height: 270px;
  background:
    radial-gradient(ellipse 620px 145px at 68% 100%, #bd6c2557 0%, #9a501a24 48%, transparent 100%),
    radial-gradient(ellipse 250px 250px at 100% 75%, #8b271d33 0%, transparent 100%);
  transform-origin: 76% 100%;
  animation: amber-film-leak 17.5s ease-in-out -4s infinite alternate;
}

@keyframes red-film-leak {
  0%, 100% { transform: scale(.96); opacity: .70; }
  50% { transform: scale(1.06); opacity: .86; }
}

@keyframes amber-film-leak {
  0% { transform: translate3d(-4%, 8px, 0) scale(.98); opacity: .506; }
  52% { transform: translate3d(2%, -14px, 0) scale(1.08); opacity: .924; }
  100% { transform: translate3d(6%, 1px, 0) scale(1.025); opacity: .638; }
}

html.page-hidden .light-leaks > span {
  animation-play-state: paused;
}

@media (max-width: 640px) {
  .light-leaks { opacity: .78; }
  .leak-red {
    left: -30%;
    bottom: -72px;
    width: 140%;
    height: 290px;
    transform-origin: 24% 70%;
    background:
      radial-gradient(ellipse 95px 175px at 24% 70%, #b7461966 0%, #93241435 42%, transparent 100%),
      radial-gradient(ellipse 260px 180px at 40% 100%, #861d154d 0%, transparent 100%);
  }
  .leak-amber {
    left: -30%;
    bottom: -88px;
    width: 160%;
    height: 245px;
    background: radial-gradient(ellipse 300px 140px at 72% 100%, #bd6c2557 0%, #8b271d24 50%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .light-leaks > span {
    animation: none;
    transform: none;
    opacity: .748;
    will-change: auto;
  }
}