/* ==========================================================================
   ARCHINEERS interactive project story (arch-story.js)
   Reference story: Mr. Nagaraj Residence. The real ground floor plan, vectorised
   from the project PDF, is drawn layer by layer; the real first and second floor
   plans lift to their levels; elevation linework traced from the project's own
   render is drawn; the render follows. 2.5D only: no 3D model, no invented geometry.

   Base rules (no class) = static presentation: no JS, reduced motion, or a story
   that failed to load. `.pb.is-live` = the pinned, scroll-driven version, added by
   arch-story.js only when motion is allowed and the story mounted.
   Needs the site tokens (--ink, --dust, --rule …) from arch-public.css, or the
   scoped copy in arch-project.css on the projects page.
   ========================================================================== */
.pb { --accent: #28414B; background: var(--dust); padding-block: var(--sec); }
.pb__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); row-gap: 32px; align-items: start; }
.pb__text { grid-column: 1 / span 4; }
.pb__title { font-size: clamp(28px, 3vw, 42px); margin-bottom: 28px; }
.pb__steps { border-top: 1px solid var(--ink); }
.pb__steps li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule-strong); }
.pb__no { grid-row: span 2; font-family: var(--ff-num); font-size: 13px; color: var(--text-3); padding-top: 3px; }
.pb__steps b { font-weight: 500; font-size: 17px; }
.pb__d { font-size: 14.5px; color: var(--text-2); line-height: 1.45; }
.pb__meta { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; color: var(--text-2); }
.pb__meta b { font-weight: 500; color: var(--text); }
.pb__stage { grid-column: 5 / span 8; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pb__view { display: flex; justify-content: center; }
.pb__plane { position: relative; width: min(100%, 560px); }
.pb__still { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 0 0 1px var(--rule-strong); }
.pb__render { overflow: hidden; background: var(--placeholder); }
.pb__render img { display: block; width: 100%; height: auto; }
.pb__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13.5px; color: var(--text-3); }
.pb__count { color: var(--text); }
.pb .scene__bar { display: none; }

/* ---------- Pinned, scroll-driven ---------- */
.pb.is-live { padding-block: 0; height: calc(var(--n, 4.8) * 55vh + 100vh); }
.pb.is-live .scene__pin { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.pb.is-live .scene__bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); }
.pb.is-live .scene__bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--gold); }
.pb.is-live .pb__grid { align-items: center; }

/* Active stage: ARCHINEERS accent number, title and rule; every other stage muted. */
.pb.is-live .pb__steps li b, .pb.is-live .pb__steps li .pb__no, .pb.is-live .pb__steps li .pb__d { color: var(--text-3); transition: color 0.35s ease; }
.pb.is-live .pb__steps li::before { content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.4s cubic-bezier(.2, .7, .2, 1); }
.pb.is-live .pb__steps li.is-now::before { transform: scaleY(1); }
.pb.is-live .pb__steps li.is-now .pb__no { color: var(--accent); font-weight: 600; }
.pb.is-live .pb__steps li.is-now b { color: var(--accent); font-weight: 600; }
.pb.is-live .pb__steps li.is-now .pb__d { color: var(--text); }

.pb.is-live .pb__stage { position: relative; gap: 12px; --vh: min(calc(100vh - var(--nav-h) - 120px), 780px); }
.pb.is-live .pb__view { position: relative; height: var(--vh); align-items: center; perspective: 1600px; perspective-origin: 50% 10%; }
.pb.is-live .pb__plane { width: auto; height: 100%; aspect-ratio: var(--pa-w, 715) / var(--pa-h, 890); transform-style: preserve-3d; transform-origin: 50% 64%;
  transform: translateY(var(--ty, 0%)) translateZ(var(--lz, 0px)) rotateX(var(--rx, 0deg)) scale(var(--sc, 1)); opacity: var(--pv, 1); }
.pb.is-live .pb__plane > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.pb.is-live .pb__still { display: none; box-shadow: none; }
.pb.is-live.pb--fallback .pb__still { display: block; }
.pb.is-live .pb__render { display: none; }
.pb.is-live .pb__field { display: block; background-color: #fff; opacity: var(--fp, 0);
  background-image: linear-gradient(rgba(43, 63, 78, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 63, 78, 0.08) 1px, transparent 1px),
                    linear-gradient(rgba(43, 63, 78, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 63, 78, 0.035) 1px, transparent 1px);
  background-size: 10% 8%, 10% 8%, 2% 1.6%, 2% 1.6%;
  box-shadow: 0 0 0 1px var(--rule-strong), 0 calc(var(--lf, 0) * 26px) calc(var(--lf, 0) * 40px) rgba(17, 20, 24, calc(var(--lf, 0) * 0.18)); }
.pb.is-live .pb__ov { display: block; object-fit: fill; }
.pb.is-live .pb__ov[data-reveal="ltr"] { clip-path: inset(0 calc((1 - var(--rv, 0)) * 100%) 0 0); }
.pb.is-live .pb__ov[data-reveal="ttb"] { clip-path: inset(0 0 calc((1 - var(--rv, 0)) * 100%) 0); }
.pb.is-live .pb__ov[data-reveal="btt"] { clip-path: inset(calc((1 - var(--rv, 0)) * 100%) 0 0 0); }
.pb.is-live .pb__ov[data-reveal="fade"] { opacity: var(--rv, 0); }
.pb.is-live .pb__draw { display: block; }
.pb.is-live .pb__ex { display: block; transform-style: preserve-3d; }
.pb.is-live .pb__wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; transform: translateZ(calc(var(--i) * var(--lift, 0px))); opacity: calc(var(--xo, 0) * (0.55 - var(--i) * 0.04)); }
.pb.is-live .pb__floor { display: block; object-fit: fill; transform: translateZ(calc(var(--fv, 0) * var(--fh, 60px) * var(--lv, 1))); opacity: calc(var(--fv, 0) * 0.9); }
.pb.is-live .pb__tag { display: flex; flex-direction: column; inset: auto 4% 3% auto; width: auto; height: auto; padding: 6px 10px; border: 1px solid var(--ink); background: #fff;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); line-height: 1.4; opacity: var(--tg, 0); }
.pb.is-live .pb__tag b { color: var(--ink); font-weight: 600; }

/* Sequence: linework → day → dusk → night … one after another, over the plan. */
.pb__seq { display: none; }
.pb.is-live .pb__seq { display: block; position: absolute; left: 0; right: 0; top: calc(var(--vh) / 2); margin-inline: auto; overflow: hidden;
  width: min(100%, calc(var(--vh) * var(--ra-w, 1600) / var(--ra-h, 1127))); aspect-ratio: var(--ra-w, 1600) / var(--ra-h, 1127); transform: translateY(-50%); opacity: var(--so, 1); }
.pb.is-live .pb__seq img { display: block; width: 100%; height: 100%; }
.pb.is-live .pb__seq[data-kind="linework"] { background: #fff; box-shadow: 0 0 0 1px var(--rule-strong); overflow: visible; }
.pb.is-live .pb__seq[data-kind="image"] img { object-fit: cover; transform: scale(calc(1.08 - var(--sp, 0) * 0.08)); transform-origin: 50% 100%; }
.pb.is-live .pb__seq[data-reveal="ltr"] { clip-path: inset(0 calc((1 - var(--sp, 0)) * 100%) 0 0); }
.pb.is-live .pb__seq[data-reveal="btt"] { clip-path: inset(calc((1 - var(--sp, 0)) * 100%) 0 0 0); }
.pb.is-live .pb__seq[data-reveal="ttb"] { clip-path: inset(0 0 calc((1 - var(--sp, 0)) * 100%) 0); }
.pb.is-live .pb__seq[data-reveal="fade"] { opacity: calc(var(--sp, 0) * var(--so, 1)); }

/* Prepared SVG drawing: each group is drawn stroke by stroke. */
.nd { display: block; width: 100%; height: 100%; }
.nd .nl { opacity: clamp(0, var(--lp, 1) * 12, 1); }
.nd .nl path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--lp, 1) - var(--d, 0) * 0.72) * 3.6, 1)); }
.nd .nl .fl, .nd .nl .tx { stroke-dasharray: none; stroke-dashoffset: 0; opacity: clamp(0, (var(--lp, 1) - var(--d, 0) * 0.72) * 3.6, 1); }
.nd .nl--site path { stroke-width: 9; stroke: #3E4952; }
.nd .nl--grid path { stroke: var(--gold); stroke-width: 0.6; stroke-opacity: var(--gfade, 0.8); }
.nd .nl--cols path { stroke-width: 4; }
.nd .nl--walls path { stroke-width: 11; }
.nd .nl--open path { stroke-width: 9; }
.nd .nl--stair path { stroke-width: 7; }
.nd .nl--park path { stroke-width: 6; stroke-opacity: 0.7; }
.nd .nl--detail path { stroke-width: 5; stroke-opacity: 0.85; }

@media (max-width: 1080px) {
  .pb__text { grid-column: 1 / span 5; }
  .pb__stage { grid-column: 6 / span 7; }
}
@media (max-width: 760px) {
  .pb__text, .pb__stage { grid-column: 1 / -1; }
  .pb__title { font-size: 28px; }
  .pb.is-live .scene__pin { justify-content: center; padding-block: 12px 24px; }
  .pb.is-live .pb__grid { row-gap: 12px; }
  .pb.is-live .pb__text { order: 2; }
  .pb.is-live .pb__stage { order: 1; --vh: min(60svh, 560px, calc((100vw - var(--gutter) * 2) * var(--pa-h, 890) / var(--pa-w, 715))); }
  .pb.is-live .kicker, .pb.is-live .pb__title, .pb.is-live .pb__meta { display: none; }
  .pb.is-live .pb__steps { position: relative; border-top: 2px solid var(--rule); }
  .pb.is-live .pb__steps::after { content: ""; position: absolute; top: -2px; height: 2px; width: calc(100% / var(--sn, 4)); left: calc(var(--si, 0) * 100% / var(--sn, 4));
    background: var(--accent); transition: left 0.4s cubic-bezier(.2, .7, .2, 1); }
  .pb.is-live .pb__steps li { display: none; border: 0; padding: 4px 0 0 0; min-height: 5em; }
  .pb.is-live .pb__steps li.is-now { display: grid; }
  .pb.is-live .pb__steps li::before { left: -12px; top: 6px; bottom: 6px; }
  .pb.is-live .pb__seq { width: 100%; }
  .pb__src { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pb .pb__steps li, .pb .pb__steps li * , .pb .pb__steps li::before, .pb .pb__steps::after { transition: none !important; }
}