/* Kamera — the rig from the front page, in real perspective.
   Two nested transform layers so the pointer-driven orbit can ease while
   the scroll-driven dolly updates every frame without fighting it. */

.stage-track { position: relative; }
.js .stage-track { height: 320vh; }

.stage {
  position: relative;
  height: 76vh;
  display: grid; place-items: center;
  overflow: hidden;
  border-block: 1px solid var(--rail);
  background:
    radial-gradient(62% 52% at 50% 42%, color-mix(in srgb, var(--glass) 9%, transparent), transparent 74%),
    var(--ground);
}
.js .stage { position: sticky; top: 0; height: 100vh; }

.viewport {
  perspective: 1100px;
  perspective-origin: 50% 44%;
  width: min(62vmin, 560px);
  aspect-ratio: 4 / 3;
}

.rig-orbit {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 15deg)) rotateY(var(--ry, -34deg));
  transition: transform .3s cubic-bezier(.22,.7,.28,1);
}
/* Dolly sits inside the orbit, so it travels along the rig's own optical
   axis — which is what a multiplane camera actually does. */
.rig-dolly {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(var(--tz, 0px));
}

.cel {
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--glass) 62%, transparent);
  background: color-mix(in srgb, var(--lit) 55%, transparent);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--glass) 16%, transparent);
  display: grid; place-items: center;
}
.k1 { transform: translateZ(-320px); }
.k2 { transform: translateZ(0); }
.k3 { transform: translateZ(320px); }

.cel-tag {
  position: absolute; top: .6rem; left: .7rem;
  color: var(--brass);
}
.cel-name {
  position: absolute; bottom: .6rem; left: .7rem; right: .7rem;
  font: 600 .72rem/1.3 var(--mono);
  color: var(--ink);
}

.cel-art { width: 58%; aspect-ratio: 1; position: relative; }
.art-ring {
  border: 2px solid color-mix(in srgb, var(--glass) 60%, transparent);
  border-radius: 50%;
}
.art-hatch {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--glass) 42%, transparent) 0 1px,
    transparent 1px 11px);
}
.art-cross::before, .art-cross::after {
  content: ""; position: absolute; background: var(--brass-fill);
}
.art-cross::before { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.art-cross::after  { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }

.stage-hint {
  position: absolute; left: var(--gut); bottom: 1.4rem;
  color: var(--dim);
}
.calm .stage-hint { display: none; }

@media (max-width: 560px) {
  .viewport { width: min(66vmin, 320px); }
  .js .stage-track { height: 260vh; }
}

/* Motion off: one legible fixed angle, no dolly, no orbit. */
.calm .rig-orbit { transform: rotateX(12deg) rotateY(-22deg); }
.calm .rig-dolly { transform: none; }