/* «Від креслення до металу» — scene component. Uses the site tokens only; drawing colours are derived from them.
   States on .bp: (none) = static final state (no JS / reduced motion), .bp-ready = JS loaded,
   .bp-live = scroll scene (sticky stage, drawing animates). Only transform, opacity and stroke-dashoffset animate. */
.bp{--bp-paper:color-mix(in srgb,var(--bg) 55%,#fff);--bp-grid:color-mix(in srgb,var(--line) 55%,transparent);--bp-draw:var(--ink);padding:24px 0 72px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bp{--bp-paper:color-mix(in srgb,var(--bg) 70%,var(--surface))}}
:root[data-theme="dark"] .bp{--bp-paper:color-mix(in srgb,var(--bg) 70%,var(--surface))}

/* layout: text column + drawing; on desktop the text blocks are grid items next to the sheet */
.bp-grid{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;grid-template-areas:"steps sheet" "copy sheet" "mat sheet" "spec sheet" "photo sheet";column-gap:48px;row-gap:20px;align-content:center;align-items:start}
.bp-steps{grid-area:steps}.bp-copy{grid-area:copy}.bp-mat{grid-area:mat}.bp-photo{grid-area:photo}.bp-spec-in{grid-area:spec}.bp-sheet{grid-area:sheet}

.bp-sheet{align-self:center;justify-self:center;width:100%;max-width:560px;aspect-ratio:700/920;background:var(--bp-paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bp-sheet svg{display:block;width:100%;height:100%}

/* steps: the bar fills with transform, no colour transitions */
.bp-steps{display:flex;gap:8px;list-style:none;margin:0;padding:0;counter-reset:bps}
.bp-steps li{counter-increment:bps;flex:1;position:relative;padding-top:11px;font-size:13px;font-weight:600;color:var(--muted)}
.bp-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r);background:var(--line)}
.bp-steps li::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r);background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.bp-steps li.on{color:var(--ink)}
.bp-steps li.on::after{transform:none}
.bp-steps li > *{counter-increment:none}

/* copy: static = all three, live = one at a time, stacked in one grid cell (box as tall as the longest) */
.bp-copy{display:grid;gap:18px}
.bp-copy h3{font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.15;max-width:none}
.bp-copy p{margin-top:10px;color:var(--muted)}
.bp-copy .btn{margin-top:18px}

.bp-mat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px;color:var(--muted)}
.bp-mat [role=radiogroup]{display:flex;flex-wrap:wrap;gap:8px}
.bp-mat button{min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink);font:500 14px var(--body);cursor:pointer}
.bp-mat button[aria-checked="true"]{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.bp:not(.bp-ready) .bp-mat{display:none}

.bp-photo{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);text-decoration:none;transition:border-color .15s ease}
.bp-photo img{width:96px;height:128px;object-fit:cover;border-radius:var(--r);display:block;background:var(--surface)}
.bp-photo b{display:block;font:700 15px/1.3 var(--display)}
.bp-photo small{display:block;margin-top:4px;color:var(--muted);font-size:13px}
.bp-photo:hover{border-color:var(--brand-text)}

.bp-spec{border-collapse:collapse;width:100%;font-size:14px}
.bp-spec caption{text-align:left;font-weight:600;font-size:13px;color:var(--muted);padding-bottom:6px}
.bp-spec td{border-top:1px solid var(--line);padding:6px 8px 6px 0;color:var(--muted)}
.bp-spec td:first-child{width:36px;font-weight:700}
.bp-spec tr.on td{color:var(--ink)}
.bp-spec tr.on td:first-child{color:var(--brand-text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bp-spec tr.on td:first-child{color:var(--brand-text)}}
:root[data-theme="dark"] .bp-spec tr.on td:first-child{color:var(--brand-text)}
.bp-after{display:none}

/* drawing styles (inside the inline SVG) */
.bp .ln{fill:none;stroke:var(--bp-draw);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bp .ln.thin{stroke-width:1}
.bp .ln.frame{stroke-width:1.2}
.bp .ln.dim{stroke-width:1}
.bp .ln.flow{stroke:var(--grain);stroke-width:2.5}
.bp .lbl{font:500 13px var(--body);fill:var(--bp-draw)}
.bp .lbl.small{font-size:11px}
.bp .pos circle{fill:var(--bp-paper)}
.bp .pos text{font:600 14px var(--body);fill:var(--bp-draw);text-anchor:middle;dominant-baseline:central}
.bp .m-fill{fill:#E3A23B}
.bp .m-load{fill:#D4912A}
.bp .cup{fill:none;stroke:#C3CCD1;stroke-width:2.2;stroke-linejoin:round}
/* static/final: metal in front, the drawing stays as a pale overlay */
.bp #drawing{opacity:.28}
.bp .bp-static-buckets{display:none}

/* ===== live scroll scene ===== */
/* live: the track is the scroll distance; the stage sticks inside it; the spec table comes after the track */
.bp.bp-live{padding:0 0 64px}
.bp-live .bp-track{height:340vh}
.bp-live .bp-stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h,0px));height:calc(100svh - var(--top-h,0px));display:flex;align-items:safe center;overflow:hidden}
/* live: the spec table goes under the scene (as on mobile), so the text column always fits the sticky stage */
.bp-live .bp-spec-in{display:none}
.bp-live .bp-after{display:block;margin-top:24px}
.bp-live .bp-grid{grid-template-areas:"steps sheet" "copy sheet" "mat sheet" "photo sheet";row-gap:22px}
.bp-live .bp-grid{width:100%;max-height:100%}
.bp-live .bp-sheet{width:auto;height:calc(100svh - var(--top-h,0px) - 32px);max-width:100%}
.bp-live .bp-copy-item{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);pointer-events:none}
.bp-live .bp-copy-item.on{opacity:1;transform:none;pointer-events:auto}
.bp-live .bp-copy{gap:0}
.bp-live .bp-photo{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);pointer-events:none}
.bp-live .bp-photo.on{opacity:1;transform:none;pointer-events:auto}
.bp-live #drawing{opacity:1}
.bp-live .bp-static-buckets{display:inline}
.bp-live .ln{stroke-dasharray:1;stroke-dashoffset:1}
.bp-live .lbl,.bp-live .pos text{opacity:0;transition:opacity .3s ease}
.bp-live .lbl.on,.bp-live .pos.on text{opacity:1}
.bp-live #mech-static{display:none}
.bp-steps{display:none}
.bp-live .bp-steps{display:flex}

/* lightbox */
.bp-lightbox{border:0;padding:0;margin:auto;max-width:min(92vw,900px);max-height:92dvh;background:transparent;overflow:visible}
.bp-lightbox::backdrop{background:rgb(10 15 18/.86)}
.bp-lightbox figure{margin:0;display:grid;gap:10px;justify-items:center}
.bp-lightbox img{max-width:min(92vw,900px);max-height:80dvh;object-fit:contain;border-radius:var(--r);background:#111}
.bp-lightbox figcaption{color:#E7ECEB;font-size:14px;text-align:center}
.bp-lightbox button{position:fixed;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:var(--r);background:rgb(255 255 255/.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.bp-lightbox button:hover{background:rgb(255 255 255/.26)}
.bp-lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.bp-lb-next{right:16px;top:50%;transform:translateY(-50%)}
.bp-lb-close{right:16px;top:16px}

/* ===== mobile: sheet + photo side by side, text below; spec table after the stage ===== */
@media (max-width:860px){
  .bp-grid{grid-template-columns:1fr auto;grid-template-areas:"sheet photo" "steps steps" "copy copy" "mat mat";column-gap:10px;row-gap:12px;align-content:start}
  .bp-sheet{justify-self:start;max-width:none;width:min(100%,calc(34svh * 700 / 920))}
  .bp-photo{grid-template-columns:1fr;width:84px;padding:0;border:0;gap:6px;align-self:end;background:none}
  .bp-photo img{width:84px;height:112px}
  .bp-photo b{font-size:12px;line-height:1.25}
  .bp-photo small{font-size:11px}
  .bp-spec-in{display:none}
  .bp-after{display:block;margin-top:20px}
  .bp-copy h3{font-size:21px}
  .bp-copy p{font-size:15px;margin-top:6px}
  .bp-copy .btn{margin-top:12px;min-height:46px}
  .bp-live .bp-track{height:300vh}
  .bp-live .bp-grid{grid-template-areas:"sheet photo" "steps steps" "copy copy" "mat mat";row-gap:12px}
  .bp-live .bp-after{margin-top:20px}
  .bp-live .bp-stage{align-items:flex-start;padding-top:10px;height:calc(100svh - var(--top-h,0px) - 76px)}
  .bp-live .bp-sheet{height:auto;width:min(100%,calc(34svh * 700 / 920));max-height:none}
  .bp-mat button{min-height:44px}
}
@media (max-width:860px) and (min-width:761px){.bp-live .bp-stage{height:calc(100svh - var(--top-h,0px))}}
@media (prefers-reduced-motion:reduce){
  .bp-steps li::after,.bp-live .bp-copy-item,.bp-live .bp-photo,.bp-live .lbl,.bp-live .pos text{transition:none}
}