/* Earthshine Creative: the moon scene (from _source/prototypes/moon-scene-clean.html). */

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

html, body { background: #03050c; color: #eef2f8; }
body { -webkit-font-smoothing: antialiased; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


.moon {
  --void: #03050c;                       /* the prototype's night sky */
  position: relative;
  height: calc(9 * 115vh);               /* nine scroll chapters = one lunar month */
  height: calc(9 * 115svh);
  background: var(--void);
}

.moon__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.moon__still img,
.moon__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.moon__still img { object-fit: cover; }

/* When the 3D scene is on its way, skip the still frame (it's a different phase) and fade the 3D in. */
.moon-3d .moon__still { display: none; }
.moon__canvas { opacity: 0; transition: opacity 0.8s ease; }
.moon.is-live .moon__canvas { opacity: 1; }

/* Reduced motion: a single still frame, no long scroll journey. */
@media (prefers-reduced-motion: reduce) {
  .moon { height: auto; }
  .moon__stage { position: relative; }
  .moon__canvas { display: none; }
}

/* Developer-only light tuner, shown with ?tuner in the URL. */
.tuner {
  position: fixed; z-index: 10;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 230px; padding: 12px 14px 14px;
  background: rgba(12, 18, 32, 0.62);
  border: 1px solid rgba(127, 216, 255, 0.22); border-radius: 10px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: #9aa6b8;
  max-height: calc(100vh - 140px); overflow-y: auto;
}
.tuner summary { cursor: pointer; letter-spacing: 0.14em; text-transform: uppercase; color: #eef2f8; list-style: none; }
.tuner summary::-webkit-details-marker { display: none; }
.tuner summary::after { content: "+"; float: right; color: #7fd8ff; }
.tuner[open] summary::after { content: "\2013"; }
.tuner label { display: grid; gap: 4px; margin-top: 12px; }
.tuner .row { display: flex; justify-content: space-between; }
.tuner output { color: #eef2f8; font-variant-numeric: tabular-nums; }
.tuner input[type=range] { width: 100%; accent-color: #7fd8ff; }
.tuner__copy {
  margin-top: 14px; width: 100%; padding: 7px 0;
  font: inherit; letter-spacing: 0.14em; text-transform: uppercase;
  color: #03050c; background: #7fd8ff; border: 0; border-radius: 6px; cursor: pointer;
}
.tuner :focus-visible { outline: 2px solid #7fd8ff; outline-offset: 3px; }
@media (max-width: 640px) { .tuner { width: 190px; } }