/* Ambient interaction layer: decorative, input-transparent and motion-safe. */
.atmosphere-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.atmosphere-vignette,
.atmosphere-light {
  position: absolute;
  inset: 0;
}

.atmosphere-vignette {
  background:
    radial-gradient(circle at var(--atmos-x, 50%) var(--atmos-y, 46%), transparent 0 24%, rgba(1, 5, 14, .12) 58%, rgba(1, 4, 12, .58) 100%);
  transition: background-position .7s ease;
}

.atmosphere-light {
  opacity: .52;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--atmos-x, 50%) var(--atmos-y, 45%), var(--scene-glow, rgba(242, 181, 92, .2)), transparent 42%);
  animation: room-breathe 7s ease-in-out infinite alternate;
}

.atmosphere-mote {
  --size: 3px;
  --drift: 18px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  background: var(--mote, rgba(255, 218, 144, .72));
  box-shadow: 0 0 10px var(--mote, rgba(255, 218, 144, .72));
  animation: mote-float var(--duration) var(--delay) ease-in-out infinite;
}

.atmosphere-ripple {
  position: fixed;
  z-index: 100;
  width: 18px;
  height: 18px;
  margin: -9px;
  border: 1px solid rgba(255, 225, 166, .8);
  border-radius: 50%;
  pointer-events: none;
  animation: atmosphere-ripple .65s ease-out forwards;
}

.room-world {
  --room-look-x: 0px;
  --room-look-y: 0px;
}

.room-world #roomArt {
  transform: scale(1.018) translate3d(var(--room-look-x), var(--room-look-y), 0);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.hotspot.is-reacting,
.room-puzzle button.is-reacting,
.arcade-hotspot.is-reacting {
  filter: brightness(1.18);
}

#porch { --scene-glow: rgba(110, 171, 220, .16); --mote: rgba(188, 218, 235, .58); }
#house { --scene-glow: rgba(255, 180, 87, .20); --mote: rgba(255, 215, 137, .66); }
#basement { --scene-glow: rgba(55, 219, 255, .19); --mote: rgba(101, 235, 255, .7); }
#room[data-room="observatory"] { --scene-glow: rgba(93, 165, 255, .22); --mote: rgba(176, 214, 255, .8); }
#room[data-room="library"] { --scene-glow: rgba(205, 149, 78, .19); --mote: rgba(238, 198, 121, .65); }
#room[data-room="kitchen"] { --scene-glow: rgba(255, 150, 73, .18); --mote: rgba(255, 188, 101, .64); }
#room[data-room="workshop"],
#room[data-room="clockmaker"],
#room[data-room="passage"] { --scene-glow: rgba(123, 205, 194, .17); --mote: rgba(151, 227, 211, .65); }
#room[data-room="garden"] { --scene-glow: rgba(91, 205, 140, .18); --mote: rgba(138, 244, 178, .72); }
#room[data-room="courtyard"] { --scene-glow: rgba(255, 166, 74, .19); --mote: rgba(255, 198, 108, .7); }
#room[data-room="heart"] { --scene-glow: rgba(246, 98, 124, .18); --mote: rgba(255, 161, 177, .7); }

@keyframes room-breathe {
  from { opacity: .32; transform: scale(1); }
  to { opacity: .62; transform: scale(1.035); }
}

@keyframes mote-float {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.6); }
  22% { opacity: .65; }
  70% { opacity: .3; }
  100% { opacity: 0; transform: translate3d(var(--drift), -38px, 0) scale(1.15); }
}

@keyframes atmosphere-ripple {
  to { opacity: 0; transform: scale(5); }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere-light, .atmosphere-mote { animation: none; }
  .atmosphere-mote { display: none; }
  .room-world #roomArt { transform: none; transition: none; }
  .atmosphere-ripple { display: none; }
}