/* Native illustration coordinates with the same centered background cover. */
.scene-atmosphere {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.scene-atmosphere, .scene-atmosphere * { pointer-events: none; user-select: none; }
.atmosphere-fish {
  --fish-duration: 23s;
  --fish-offset: -4s;
  animation: atmosphere-fish-swim var(--fish-duration) ease-in-out var(--fish-offset) infinite;
  transform-box: view-box;
  transform-origin: 0 0;
}
.atmosphere-fish--2 { --fish-duration: 29s; --fish-offset: -15s; }
.atmosphere-fish--3 { --fish-duration: 31s; --fish-offset: -23s; }
@keyframes atmosphere-fish-swim {
  0%, 100% { transform: translate(-34px, 0); }
  45% { transform: translate(34px, -3px); }
  50% { transform: translate(36px, -2px); }
  95% { transform: translate(-34px, 2px); }
}
.atmosphere-fish__direction {
  animation: atmosphere-fish-face-right var(--fish-duration) linear var(--fish-offset) infinite;
}
.atmosphere-fish__direction--left {
  opacity: 0;
  animation-name: atmosphere-fish-face-left;
}
/* A brief change of gaze/tail at each end; the solid body never narrows. */
@keyframes atmosphere-fish-face-right {
  0%, 47.5%, 100% { opacity: 1; }
  50%, 97.5% { opacity: 0; }
}
@keyframes atmosphere-fish-face-left {
  0%, 47.5%, 100% { opacity: 0; }
  50%, 97.5% { opacity: 1; }
}
/* Adjacent panes share one apartment's switch; buildings use staggered phases.
   Transitions take about three seconds, with visible changes early in a visit. */
.atmosphere-window, .atmosphere-window-glow {
  --window-duration: 22s;
  --window-offset: -1.5s;
  animation: atmosphere-window-rest var(--window-duration) ease-in-out var(--window-offset) infinite;
}
.atmosphere-window { fill: #27374b; opacity: 0; }
.atmosphere-window-glow {
  fill: #ffe2a1;
  opacity: .28;
  filter: drop-shadow(0 0 1.2px #ffdc8a80);
  animation-name: atmosphere-window-warm;
}
.atmosphere-window--2 { --window-duration: 26s; --window-offset: -10s; }
.atmosphere-window--3 { --window-duration: 28s; --window-offset: -21s; }
.atmosphere-window--4 { --window-duration: 24s; --window-offset: -6s; }
@keyframes atmosphere-window-rest {
  0%, 8%, 62%, 100% { opacity: 0; }
  22%, 48% { opacity: .98; }
}
@keyframes atmosphere-window-warm {
  0%, 8%, 62%, 100% { opacity: .28; }
  22%, 48% { opacity: 0; }
}
[data-atmosphere-paused='true'] .scene-atmosphere *,
.scene-atmosphere[data-atmosphere-paused='true'] * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .scene-atmosphere * { animation: none !important; }
  .scene-atmosphere .atmosphere-fish { transform: none !important; }
  .scene-atmosphere .atmosphere-fish__direction--right { opacity: 1 !important; }
  .scene-atmosphere .atmosphere-fish__direction--left { opacity: 0 !important; }
  .scene-atmosphere .atmosphere-window { opacity: 0 !important; }
  .scene-atmosphere .atmosphere-window-glow { opacity: .28 !important; }
}