/* Punt Zero · Manifest Vitruvian, v2 motion
   ─────────────────────────────────────────────────────────────────
   Opt-in layer over the original composition in site.css. Everything
   here is scoped to .pz-manifest[data-mf="v2"]; remove that attribute
   from index.html (or open the page with ?mf=v1) and the section falls
   back to the original drawing untouched.

   Construction order follows Vitruvius (De architectura III.1.3):
   the navel as centre → circle → square → homo ad quadratum →
   homo ad circulum → scale of palms and cubits.  The navel is drawn
   as the brand's "punt zero": a point inside a circle, like the logo. */

.pz-mf2-only { display: none; }
.pz-manifest[data-mf="v2"] .pz-mf2-only { display: inline; }
.pz-manifest[data-mf="v2"] ol.pz-mf2-only { display: grid; }

.pz-manifest[data-mf="v2"] {
  --mf-ink: #1f1a15;          /* warm iron-gall ink, a nod to the original sheet */
  --mf-p: 0;                  /* drawing progress, set by manifest-vitruvi.js */
}

/* ── Stage fills the viewport under the sticky nav ─────────────── */
.pz-manifest[data-mf="v2"] .pz-manifest__stage { min-height: 250vh; }
.pz-manifest[data-mf="v2"] .pz-manifest__sticky {
  min-height: 100vh;
  min-height: 100svh;
  justify-content: center;
  padding-top: calc(var(--pz-nav-h, 76px) + clamp(12px, 3vh, 40px));
  padding-bottom: clamp(16px, 3vh, 40px);
}
.pz-manifest[data-mf="v2"] .pz-manifest__grid { align-items: center; }

/* Art column: drawing on top, caption / quote share the slot below. */
.pz-manifest[data-mf="v2"] .pz-manifest__art-col {
  display: grid;
  grid-template-areas: "art" "foot";
  justify-items: center;
  width: min(calc(100svh - var(--pz-nav-h, 76px) - 200px), 560px);
  min-width: 300px;
}
.pz-manifest[data-mf="v2"] .pz-manifest__art { grid-area: art; position: relative; }
.pz-manifest[data-mf="v2"] .pz-mf2-steps,
.pz-manifest[data-mf="v2"] .pz-manifest__cite { grid-area: foot; align-self: start; }

/* Soft sand wash behind the sheet, rising with the drawing. */
.pz-manifest[data-mf="v2"] .pz-manifest__art::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(229, 200, 168, 0.30), rgba(229, 200, 168, 0) 72%);
  opacity: var(--mf-p);
  pointer-events: none;
  z-index: 0;
}
.pz-manifest[data-mf="v2"] .pz-manifest__svg { position: relative; z-index: 1; color: var(--mf-ink); }

/* ── Line weights: both poses in the same hand, as in the original ─ */
.pz-manifest[data-mf="v2"] .pz-mf-rect,
.pz-manifest[data-mf="v2"] .pz-mf-circle { display: none; }
.pz-manifest[data-mf="v2"] .pz-mf2-sq,
.pz-manifest[data-mf="v2"] .pz-mf2-circle { stroke-width: 1.5; }
.pz-manifest[data-mf="v2"] .pz-mf-v1 { stroke-width: 17; }   /* group is scaled ×0.1 → 1.7 */
.pz-manifest[data-mf="v2"] .pz-mf-v2 { stroke-width: 1.7; }

/* Construction aids */
.pz-mf2-guide line {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 4 10;
}
.pz-mf2-guide text {
  font-family: var(--pz-font-mono);
  font-size: 20px;
  letter-spacing: 0.08em;
  fill: currentColor;
  text-anchor: end;
}
.pz-mf2-guides { opacity: 0; }
.pz-mf2-arm {
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-dasharray: 2 7;
  opacity: 0;
  transition: opacity 280ms ease;
}
.pz-mf2-scale-line { stroke-width: 1.4; }
.pz-mf2-scale-tick { stroke: currentColor; stroke-width: 1.4; opacity: 0; }

/* Punt zero + pen tip, in brand yellow */
.pz-mf2-zero,
.pz-mf2-tip,
.pz-mf2-ring {
  transform-box: fill-box;
  transform-origin: center;
}
.pz-mf2-zero {
  fill: var(--pz-yellow);
  stroke: currentColor;
  stroke-width: 2;
  transform: scale(0);
}
.pz-mf2-ring { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; }
.pz-mf2-tip {
  fill: var(--pz-yellow);
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0;
  transition: opacity 240ms ease;
}

/* ── Step caption under the drawing ─────────────────────────────── */
.pz-mf2-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pz-smoke);
  text-align: center;
  pointer-events: none;
}
.pz-mf2-step {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--pz-ease), transform 420ms var(--pz-ease);
}
.pz-mf2-step b {
  font-weight: 500;
  color: var(--pz-ink);
  margin-right: 0.9em;
}
.pz-mf2-step b::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-left: 0.9em;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.4;
}
.pz-mf2-step.is-on { opacity: 1; transform: none; }

/* ── The quote's rule fills in step with the drawing ────────────── */
.pz-manifest[data-mf="v2"] .pz-manifest__title::before { background: rgba(17, 17, 17, 0.12); }
.pz-manifest[data-mf="v2"] .pz-manifest__title::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 2px;
  background: var(--pz-ink);
  transform: scaleY(var(--mf-p));
  transform-origin: top center;
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .pz-manifest[data-mf="v2"] .pz-manifest__art-col {
    width: min(calc(100svh - var(--pz-nav-h, 76px) - 200px), 440px);
  }
  .pz-mf2-guide text { font-size: 24px; }
}

/* ── Mobile: no sticky, the drawing follows natural scroll ──────── */
@media (max-width: 720px) {
  .pz-manifest[data-mf="v2"] .pz-manifest__stage { min-height: 0; }
  .pz-manifest[data-mf="v2"] .pz-manifest__sticky { min-height: 0; padding-top: 56px; }
  .pz-manifest[data-mf="v2"] .pz-manifest__art-col { width: 100%; min-width: 0; }
  .pz-mf2-steps { font-size: 10px; letter-spacing: 0.2em; }
  .pz-mf2-guide text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pz-mf2-arm, .pz-mf2-tip, .pz-mf2-step { transition: none; }
}