body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #070605;
}

.room-layer,
.light-layer,
.grain-layer,
.vignette-layer {
  position: absolute;
  inset: 0;
}

/* Dominant photograph: composed as room/architecture. */
.room-layer {
  background-image: url("../../assets/materials/room-doorway.webp");
  background-size: cover;
  background-position: 61% 50%;
  opacity: 0.46;
  filter: saturate(0.72) contrast(1.02) brightness(0.68);
  transform: scale(1.025);
  mix-blend-mode: screen;
  animation: roomDrift 52s ease-in-out infinite alternate;
}

/* Light, not effect. */
.light-layer {
  background-image: url("../../assets/materials/light-film-burn.webp");
  background-size: cover;
  background-position: 52% 50%;
  opacity: 0.115;
  filter: blur(8px) saturate(0.75) brightness(0.72);
  transform: scale(1.035);
  mix-blend-mode: screen;
  animation: lightBreath 36s ease-in-out infinite;
}

.grain-layer {
  inset: -10%;
  background-image: url("../../assets/materials/grain-large.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.038;
  mix-blend-mode: soft-light;
  animation: grainShift 2.2s steps(2) infinite;
}

.vignette-layer {
  background:
    radial-gradient(
      circle at 54% 50%,
      transparent 18%,
      rgba(0, 0, 0, 0.30) 58%,
      rgba(0, 0, 0, 0.88) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.18) 0%,
      transparent 34%,
      transparent 64%,
      rgba(0, 0, 0, 0.20) 100%
    );
}