/* ===========================================================
   IDEAL STAMPI — "Pezzi" immersive 3D stage
   Uses the site's design tokens (green on black, mono captions)
   =========================================================== */
.pz-stage{
  position:relative;
  height:clamp(560px, 84vh, 920px);
  background:#060607;
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.pz-canvas-wrap{position:absolute;inset:0}
.pz-canvas-wrap canvas{display:block;width:100%;height:100%}
.pz-stage.touch{touch-action:none}

.pz-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 100% at 50% 46%,transparent 55%,rgba(0,0,0,.62) 100%)}

.pz-dot{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:rgba(242,243,244,.5);z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen}
.pz-stage.locked .pz-dot{opacity:1}
.pz-stage.touch .pz-dot{display:none}
.pz-stage.playing .pz-canvas-wrap{cursor:grab}
.pz-stage.grabbing .pz-canvas-wrap{cursor:grabbing}
.pz-stage.locked .pz-canvas-wrap{cursor:none}

.pz-hud{position:absolute;top:16px;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;color:var(--muted-on-dark);
  opacity:0;transition:opacity .5s;pointer-events:none}
.pz-stage.playing .pz-hud{opacity:.7}

.pz-now{position:absolute;left:0;right:0;bottom:22px;text-align:center;z-index:3;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;color:#F2F3F4;
  opacity:0;transition:opacity .5s;pointer-events:none}
.pz-now b{color:var(--green-on-dark);font-weight:600}

.pz-stick{position:absolute;left:22px;bottom:22px;width:112px;height:112px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);z-index:4;display:none;touch-action:none}
.pz-stage.touch.playing .pz-stick{display:block}
.pz-nub{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:rgba(242,243,244,.14);border:1px solid rgba(255,255,255,.18)}

.pz-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:6;
  background:#060607;font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;color:var(--muted-on-dark)}

.pz-intro{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:8%;
  background:radial-gradient(90% 90% at 50% 42%,#0d0f11 0%,#060607 72%);transition:opacity 1s ease}
.pz-intro.gone{opacity:0;pointer-events:none}
.pz-eye{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--green-on-dark)}
.pz-title{font-family:var(--font-display);color:#fff;font-weight:600;
  font-size:clamp(2.6rem,8vw,5rem);line-height:1;margin:.2em 0 0;letter-spacing:-.01em}
.pz-rule{width:54px;height:2px;background:var(--green-on-dark);margin:1.1rem 0 1.3rem}
.pz-lede{max-width:46ch;color:#A6ABB0;font-size:clamp(.95rem,1.5vw,1.1rem);line-height:1.6;margin:0 0 2rem}
.pz-enter{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:#06231a;
  background:var(--green-on-dark);border:0;border-radius:2px;padding:15px 26px;cursor:pointer;
  display:inline-flex;gap:.6em;align-items:center;transition:transform .2s var(--ease),filter .2s}
.pz-enter:hover{filter:brightness(1.08);transform:translateY(-1px)}
.pz-enter .arr{transition:transform .2s var(--ease)}
.pz-enter:hover .arr{transform:translateX(3px)}
.pz-hint{margin-top:2rem;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:#7C8186;line-height:2}
.pz-hint kbd{border:1px solid rgba(255,255,255,.18);border-radius:3px;padding:1px 6px;margin:0 1px;color:#cfd3d6}
.pz-count{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:#5f6469}

@media (prefers-reduced-motion:reduce){ .pz-intro,.pz-enter{transition:none} }