/* Two quiet depths: a distant photographic film and real coloured porcelain.
   Controllers own both transforms; the mesh's centre comes from its camera. */
html body.nocturne .site-backdrop {
  --sculpture-film-opacity: .14;
  overflow: hidden;
  background: #060509;
}

.sculpture-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.site-backdrop:is([data-sculpture="ready"], [data-sculpture="morphing"], [data-sculpture="paused"]) .sculpture-canvas {
  opacity: .80;
}

/* The original still remains useful while the first optional film is decoding. */
html body.nocturne .site-backdrop .background-plane {
  z-index: 0;
  opacity: .18;
  transition: opacity 1.2s ease;
  will-change: auto;
}
html body.nocturne .site-backdrop .background-photo {
  object-position: 50% 50%;
}
html body.nocturne .site-backdrop:has([data-sculpture-film].is-active) .background-plane {
  opacity: 0;
}

[data-sculpture-film-plane] {
  position: absolute;
  inset: min(-40px, -5vmax);
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  opacity: var(--sculpture-film-opacity, .14);
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
}
[data-sculpture-film] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter: saturate(.82) brightness(.72) contrast(1.02);
  transition: opacity 2.4s ease;
  pointer-events: none;
}
[data-sculpture-film].is-active { opacity: 1; }

/* A broad, very faint highlight moves independently without repainting a
   changing gradient each frame. The film controller supplies percentages. */
[data-sculpture-film-plane]::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 45%, #c4c2df16, transparent 63%);
  transform: translate(
    calc((var(--film-light-x, 50%) - 50%) * .12),
    calc((var(--film-light-y, 50%) - 50%) * .12)
  );
  pointer-events: none;
}
[data-sculpture-film-plane]:is([data-film="paused"], [data-film="idle"], [data-film="error"]) {
  will-change: auto;
}

/* Symmetric falloff preserves the centred sculpture and readable page edges. */
html body.nocturne .site-backdrop::after {
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 50%, #06050916 0%, #06050926 48%, #06050980 100%),
    linear-gradient(180deg, #0605092e, transparent 28% 72%, #0605092e);
}
.site-backdrop .atmosphere-orbits { display: none; }

/* Renderer failure returns to the approved static photograph. */
html body.nocturne .site-backdrop:is([data-sculpture="unsupported"], [data-sculpture="error"], [data-sculpture="context-lost"]) .background-plane {
  opacity: .38;
}
.site-backdrop:is([data-sculpture="unsupported"], [data-sculpture="error"], [data-sculpture="context-lost"]) [data-sculpture-film-plane] {
  visibility: hidden;
}

.sculpture-review-back {
  display: flex;
  align-items: center;
  min-height: 44px;
  position: fixed;
  right: 20px;
  bottom: 85px;
  z-index: 50;
  padding: 9px 14px;
  border: 1px solid #756078;
  background: #0e0b13ed;
  border-radius: 24px;
  color: #d9cddd;
  font: 12px sans-serif;
}

@media (max-width: 760px) {
  html body.nocturne .site-backdrop { --sculpture-film-opacity: .10; }
}
@media (prefers-reduced-motion: reduce) {
  .sculpture-canvas,
  html body.nocturne .site-backdrop .background-plane { transition: none; }
  [data-sculpture-film-plane] { display: none; will-change: auto; }
  html body.nocturne .site-backdrop:has([data-sculpture-film].is-active) .background-plane { opacity: .18; }
}
@media (forced-colors: active) {
  .site-backdrop,
  .sculpture-canvas,
  [data-sculpture-film-plane] { display: none; }
  .sculpture-review-back { color: LinkText; background: Canvas; border-color: LinkText; }
}