/* The content of each screen dissolves into the space around it. */
.apps-section .app-scene { isolation: isolate; }
.app-atmosphere {
  position: absolute;
  z-index: 0;
  top: -110px;
  bottom: -95px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 21%, #000 73%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 21%, #000 73%, transparent);
}
.app-atmosphere__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(.22,.61,.36,1);
}
.app-atmosphere__scene::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  background: var(--scene-image) var(--scene-position, 68% 50%) / var(--scene-size, cover) no-repeat;
  filter: blur(var(--scene-blur, 20px)) saturate(var(--scene-saturation, 1));
  transform: translateY(var(--atmosphere-y, 0px)) scaleX(var(--scene-flip, 1));
  opacity: var(--scene-opacity, .25);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 64% 50%, #000 23%, transparent 82%);
  mask-image: radial-gradient(ellipse 80% 75% at 64% 50%, #000 23%, transparent 82%);
}
/* Keep the copy clear while the image opens out around the device. */
.app-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fafafa 4%, #fafafae0 18%, #fafafa9c 32%, #fafafa00 58%);
}
.apps-section[data-active-app="music"] .app-atmosphere__scene--music,
.apps-section[data-active-app="weather"] .app-atmosphere__scene--weather { opacity: 1; }

/* Silver, gold and the original cover, enlarged beyond the screen. */
.app-atmosphere__scene--music {
  --scene-image: url('assets/optimized/music-artwork-800.webp');
  --scene-position: 50% 50%;
  --scene-size: 145% 115%;
  --scene-blur: 18px;
  --scene-opacity: .32;
  --scene-saturation: 1.1;
}
/* The same procedural sky as the app, without its interface. */
.app-atmosphere__scene--weather {
  --scene-image: url('assets/optimized/weather-atmosphere.webp');
  --scene-blur: 2px;
  --scene-opacity: .67;
  --scene-position: center 110px;
  --scene-size: 100% 100%;
  --scene-flip: -1;
}
@media (max-width: 760px) {
  .app-atmosphere { top: 10%; bottom: -65px; }
  .app-atmosphere::after {
    background: linear-gradient(to bottom, #fafafa 0%, #fafafae6 22%, #fafafa00 56%);
  }
  .app-atmosphere__scene::before {
    inset: 5% -25% -12%;
    -webkit-mask-image: radial-gradient(ellipse 70% 64% at 50% 65%, #000 25%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 64% at 50% 65%, #000 25%, transparent 90%);
  }
  .app-atmosphere__scene--music { --scene-size: 145% 115%; --scene-position: center; --scene-opacity: .26; }
  .app-atmosphere__scene--weather { --scene-position: center 60px; --scene-opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .app-atmosphere__scene { transition: none; }
  .app-atmosphere__scene::before { transform: scaleX(var(--scene-flip, 1)); }
}