/*
 * The fixed background behind everything (drawn by js/scene.js).
 * The first still is also the CSS background, so the cookie shows instantly.
 * A very slow zoom keeps the resting scene feeling alive.
 */
.scene {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--page-max));
  transform: translateX(-50%);
  overflow: hidden;
  background: #f3cbd9 url("../assets/scenes/sd/still-1.webp") center / cover no-repeat;
}

.scene__canvas {
  display: block;
  width: 100%;
  height: 100%;
  animation: drift 18s ease-in-out infinite alternate;
}

@keyframes drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene__canvas {
    animation: none;
  }
}