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,
.surface-layer,
.light-layer,
.grain-layer,
.vignette-layer {
  position: absolute;
  inset: 0;
}

.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);
  mix-blend-mode: screen;
  animation: roomDrift 18s ease-in-out infinite alternate;
}

.surface-layer {
  background-image: url("../../../assets/materials/surface-curtain.webp");
  background-size: cover;
  background-position: 42% 50%;
  opacity: 0.18;
  filter: saturate(0.7) contrast(0.9) brightness(0.65);
  mix-blend-mode: screen;
  animation: surfaceDrift 24s ease-in-out infinite alternate;
}

.light-layer {
  background-image: url("../../../assets/materials/light-film-burn.webp");
  background-size: cover;
  background-position: 52% 50%;
  opacity: 0.1;
  filter: blur(12px) saturate(0.7) brightness(0.68);
  mix-blend-mode: screen;
  animation: lightBreath 20s ease-in-out infinite;
}

.grain-layer {
  inset: -10%;
  background-image: url("../../../assets/materials/grain-large.webp");
  background-size: 700px 700px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.045;
  mix-blend-mode: soft-light;
  animation: grainShift 14s ease-in-out infinite alternate;
  will-change: transform;
}

.vignette-layer {
  background:
    radial-gradient(
      circle at 54% 50%,
      transparent 18%,
      rgba(0, 0, 0, 0.3) 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.2) 100%
    );
}

@keyframes roomDrift {
  from {
    transform: scale(1.04) translate3d(-2%, -1%, 0);
  }

  to {
    transform: scale(1.08) translate3d(2%, 1%, 0);
  }
}

@keyframes surfaceDrift {
  from {
    transform: scale(1.06) translate3d(1.5%, -1%, 0);
  }

  to {
    transform: scale(1.1) translate3d(-1.5%, 1%, 0);
  }
}

@keyframes lightBreath {
  0%,
  100% {
    opacity: 0.07;
    transform: scale(1.04);
  }

  50% {
    opacity: 0.14;
    transform: scale(1.09);
  }
}

@keyframes grainShift {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1.04);
  }

  to {
    transform: translate3d(3%, 3%, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-layer,
  .surface-layer,
  .light-layer,
  .grain-layer {
    animation: none;
  }
}