/* Blueprint: a drawing of 808 NE Bay Cove Street that completes as you scroll.
   Everything is namespaced .bp-*. One scroll track (.bp) pins a centered stage; section.js maps the scroll position to
   --p (0..1) and --rise on the section, and the stage is driven by stroke-dashoffset, one mask, opacity and transforms only.
   Defaults are the finished state, so no JS (or reduced motion) shows the rendering. Tokens come from site.css. */
.bp{--p:1;--rise:1;position:relative;height:300svh;background:var(--bg)}
.bp-pin{
  position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 var(--pad-x);
}
.bp-stage{
  position:relative;overflow:hidden;isolation:isolate;
  width:min(1040px,100%,calc((100svh - var(--nav-h) - 150px) * 16 / 9));
  aspect-ratio:16/9;background:var(--bg);color:var(--ink);
}
.bp-stage > *{position:absolute;inset:0}
/* the site's muted grade on the colour imagery */
.bp-stage::after{content:"";position:absolute;inset:0;background:#EFE8E3;opacity:.04;pointer-events:none;z-index:5}
.bp-img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) sepia(.06)}
.bp-label{margin-top:22px;text-align:center}

/* colour rises from the ground line; the ink above the rising edge stays, the ink below gives way */
.bp-img{
  -webkit-mask-image:linear-gradient(to top,#000 calc(var(--rise) * 128% - 28%),transparent calc(var(--rise) * 128%));
  mask-image:linear-gradient(to top,#000 calc(var(--rise) * 128% - 28%),transparent calc(var(--rise) * 128%));
}
.bp-ink{
  -webkit-mask-image:linear-gradient(to top,transparent calc(var(--rise) * 128% - 28%),#000 calc(var(--rise) * 128%));
  mask-image:linear-gradient(to top,transparent calc(var(--rise) * 128% - 28%),#000 calc(var(--rise) * 128%));
}
/* the drawing: every path has pathLength=1; section.js gives each a start (--s) and length (--d) in pen order */
.bp-outline{width:100%;height:100%;color:var(--ink)}
.bp-outline path{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0, (var(--p) - var(--s, 0)) / var(--d, 1), 1));
}
.bp-outline [data-w="o"]{stroke-width:1.25}
.bp-outline [data-w="d"]{stroke-width:.9}
.bp-outline [data-w="h"]{stroke-width:.65;opacity:.72}

@media (max-width:700px){
  .bp{height:260svh}
  .bp-stage{aspect-ratio:4/5;width:min(100%,calc((100svh - var(--nav-h) - 130px) * 4 / 5))}
  .bp-label{margin-top:18px}
}
@media (prefers-reduced-motion: reduce){
  .bp{height:auto}
  .bp-pin{position:static;height:auto;padding:var(--sec-y) var(--pad-x)}
}