/* ---------- Inside the camera: WebGL exploded view ---------- */
.explode { display: none; background: var(--ink-950); }
.has-webgl .explode {
  display: block;
  position: relative;
  z-index: 1;
  /* Tucked under the pinned header by exactly one stage height, so the 3D section starts the
     moment the lens dive ends instead of first scrolling in as a black panel */
  margin-top: calc(-1 * max(100svh, 34rem));
}
.reduced-motion .explode { margin-top: 0; }

.explode__stage {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-950);
}
.explode__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}
.explode__flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #e8fbff 40%, rgb(255 255 255 / 0.85) 100%);
  opacity: 0;
  pointer-events: none;
}

.explode__hud {
  position: absolute;
  top: 5.5rem;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(239 232 221 / 0.6);
  pointer-events: none;
}
.explode__hud b { font-weight: 400; color: var(--brass-hot); font-variant-numeric: tabular-nums; }

.explode__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.part-label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
.part-label::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgb(201 162 95 / 0.18);
}
.part-label b {
  position: relative;
  padding-left: 2.25rem;
  font-weight: 400;
  color: var(--brass-hot);
}
.part-label b::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 50%;
  width: 1.75rem;
  height: 1px;
  background: rgb(201 162 95 / 0.7);
}

.explode__copy {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2.5rem, 9svh, 6rem);
  z-index: 4;
  max-width: 30rem;
  opacity: 0;
}
.explode__title { margin: 1rem 0 1.25rem; font-size: var(--text-3xl); }
.explode__copy p:last-child { color: var(--sand-300); }

/* Module/WebGL failed after layout: show the copy as a quiet typographic beat */
.explode.is-static .explode__copy { opacity: 1 !important; transform: none !important; }
.explode.is-static .explode__hud { display: none; }

@media (max-width: 760px) {
  .explode__hud { top: 5rem; }
  .explode__hud span:first-child { display: none; }
  .part-label { font-size: 0.5625rem; }
  .explode__copy { right: var(--gutter); }
  .explode__title { font-size: var(--text-2xl); }
  /* Keeps the copy legible over the exploded parts */
  .explode__stage::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    z-index: 3;
    background: linear-gradient(to top, var(--ink-950) 35%, transparent);
    opacity: var(--copy-o, 0);
    pointer-events: none;
  }
}