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

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.scene {
  height: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.well {
  position: relative;
  flex: none;
  width: min(115vmin, 1000px);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  /* The surrounding stone disappears into the darkness of the page. */
  mask-image: radial-gradient(ellipse 49% 49% at center, #000 40%, transparent 100%);
}

.opening {
  position: absolute;
  left: 35%;
  top: 30%;
  width: 30%;
  height: 40%;
  overflow: hidden;
  border-radius: 50%;
  background: #a8bdca;
}

.clouds {
  position: absolute;
  inset: -75%;
  background: url('assets/clouds.jpg') center / cover no-repeat;
  filter: brightness(1.22) saturate(.7);
  animation: drift 100s ease-in-out infinite alternate;
  will-change: transform;
}

.stone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

@keyframes drift {
  from { transform: translate(-12%, -7%) scale(1.05); }
  to { transform: translate(12%, 9%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .clouds { animation: none; will-change: auto; }
}