/* ══════════════════════════════════════════════════════════════
   WEB DESIGN — blueprint to finished site (see /assets/blueprint.js)
   JS writes --x --y (percent), --k, --rx --rz (deg), --live (0..1)
   on .bp-stage, and --t (0..1) on every animated shape.
   ══════════════════════════════════════════════════════════════ */

.bp-stage {
    --P: min(33vw, 56vh);            /* page width at k = 1 */
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse 50% 55% at 70% 50%, rgba(16, 201, 138, calc(0.08 + var(--live, 0) * 0.12)), rgba(16, 201, 138, 0) 70%),
        #0d110f;
    perspective: 1600px;
    perspective-origin: 50% 30%;
}
.bp-cam {
    position: absolute;
    left: calc(var(--x, 50) * 1%);
    top: calc(var(--y, 52) * 1%);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform:
        scale3d(var(--k, 1), var(--k, 1), var(--k, 1))
        rotateX(calc(var(--rx, 50) * 1deg))
        rotateZ(calc(var(--rz, 0) * 1deg));
}
.bp-plane {
    position: absolute;
    width: var(--P);
    height: calc(var(--P) * 1.25);
    left: calc(var(--P) / -2);
    top: calc(var(--P) * -0.625);
}
.bp-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}

/* reveal kinds */
.bp-draw { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); }
.bp-fill { opacity: var(--t, 0); }

/* drafting */
.bp-grid line { stroke: rgba(16, 201, 138, 0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bp-guides line { stroke: rgba(62, 224, 168, 0.5); stroke-width: 1; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.bp-guides text { font: 700 13px 'Space Mono', monospace; letter-spacing: 1px; fill: rgba(62, 224, 168, 0.75); }
.bp-line {
    fill: none;
    stroke: #3ee0a8;
    stroke-width: 1.3;
    vector-effect: non-scaling-stroke;
    opacity: calc(1 - var(--live, 0) * 0.7);
    filter: drop-shadow(0 0 3px rgba(16, 201, 138, 0.8));
}
.bp-frame { stroke-width: 1.8; opacity: 1; }
.bp-cross { stroke: rgba(62, 224, 168, 0.45); filter: none; }
.bp-ghost-btn { stroke: rgba(240, 240, 237, 0.55); }
.bp-dot { fill: #2d3a33; }
.bp-dot.g { fill: #10c98a; }

/* surfaces and content */
.bp-surface { fill: #0b100d; }
.bp-card { fill: #121a16; }
.bp-footer { fill: #09100c; }
.bp-muted { fill: #1c2621; }
.bp-text { fill: rgba(240, 240, 237, 0.42); }
.bp-text-dim { fill: rgba(240, 240, 237, 0.24); }
.bp-text-hi { fill: rgba(240, 240, 237, 0.9); }
.bp-accent { fill: #10c98a; }
.bp-accent-text { fill: #3ee0a8; }
.bp-photo { fill: url(#bp-photo); }
.bp-photo2 { fill: url(#bp-photo2); }

.bp-live rect { fill: rgba(16, 201, 138, 0.14); stroke: #10c98a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bp-live circle { fill: #3ee0a8; filter: drop-shadow(0 0 5px #10c98a); }
.bp-live text { font: 700 12px 'Space Mono', monospace; letter-spacing: 1.5px; fill: #e9fff6; }

.bp-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 11, 9, 0.72) 0%, rgba(8, 11, 9, 0.25) 42%, rgba(8, 11, 9, 0) 60%),
        radial-gradient(ellipse 85% 80% at 60% 45%, rgba(8, 11, 9, 0), rgba(8, 11, 9, 0.5) 100%);
}

/* ── PAGE CONTENT ON TOP ── */
body.blueprint .page-hero { background: transparent; }
body.blueprint main > section:not(.cta-band) { background: transparent; }
body.blueprint .prose.bp-note {
    max-width: none;
    background: var(--glass-strong);
    border: 1px solid var(--border);
    padding: 40px 40px 36px;
}
body.blueprint .prose.bp-note > * { max-width: 760px; }
body.blueprint .step { background: var(--glass-strong); }
body.blueprint table.cmp { background: rgba(11, 15, 13, 0.9); }

@media (min-width: 1000px) and (min-aspect-ratio: 13/10) {
    body.blueprint .prose.bp-note,
    body.blueprint .steps { max-width: min(600px, 44vw); }
    body.blueprint .prose.bp-note .related-grid { grid-template-columns: 1fr; }
    body.blueprint .pc-band { justify-content: flex-start; padding-left: max(48px, calc((100vw - 1200px) / 2 + 48px)); }
}
@media (max-width: 999px), (max-aspect-ratio: 13/10) {
    .bp-stage { --P: min(78vw, 46vh); }
}
@media (max-width: 700px) {
    body.blueprint .prose.bp-note { padding: 28px 22px; }
}