:root {
  color-scheme: dark;
  --bg-color: #06030a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--bg-color);
}

#night {
  position: fixed;
  inset: 0;
  overflow: hidden;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

#night:active {
  cursor: grabbing;
}

/* Loading poster, and the still fallback when WebGL is unavailable. */
.photograph, canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.photograph {
  background-image: url('./assets/poster.jpg');
  background-size: cover;
  /* resize() supplies the same framing used by the shader, including ultrawide
     and portrait crops. Cover is the fallback before that calculation runs. */
  background-position: center;
  background-repeat: no-repeat;
  /* The poster sits above the canvas and holds until the live frame is fully
     developed, then dissolves. Fading the two against each other on independent
     timers dipped through black in the middle. */
  opacity: 0;
  z-index: 1;
  transition: opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.poster-ready .photograph {
  opacity: 1;
}

.ready .photograph {
  opacity: 0;
  pointer-events: none;
  transition-duration: 1.7s;
}

@media (prefers-reduced-motion: reduce) {
  .photograph {
    transition: none !important;
  }
}