:root {
  color-scheme: dark;
  background: #060813;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.landscape {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #060813;
}

.landscape::before {
  content: "";
  position: absolute;
  inset: -3%;
  background: url("./assets/silk-waves.webp") 50% 50% / cover no-repeat;
  transform: scale(1.015);
  animation: tide 36s ease-in-out infinite alternate;
}

@keyframes tide {
  from { transform: scale(1.015) translate3d(-0.35%, 0.25%, 0); }
  to { transform: scale(1.055) translate3d(0.35%, -0.25%, 0); }
}

@media (max-aspect-ratio: 3/4) {
  .landscape::before { background-position: 24% 50%; }
}

/* Decorative motion stops completely, including after a live OS preference change. */
@media (prefers-reduced-motion: reduce), (update: slow) {
  .landscape::before {
    animation: none;
    transform: none;
  }
}

html[data-paused] .landscape::before { animation-play-state: paused; }