/* =====================================================================
   Scoopmachine.nl: blauwdruk (sectie #blauwdruk, hoofdstuk 'blueprint')
   Hoort bij js/blueprint.js. De 3D-machine (js/machine3d.js) tekent zichzelf als gouden
   lijnmodel; deze sectie legt er de labels overheen.
   Lagen: .bpx-back (technisch blad, onder de 3D-laag) < #machine-host (z 1) < .bpx-stage (labels, z 2).
   Standen (klasse op de sectie, gezet door blueprint.js):
     .is-cols    breed scherm: labels in twee kolommen met aanwijslijnen
     .is-legend  smal scherm: genummerde punten op de machine, labels als legenda onderaan
     .is-still   zonder 3D: stilstaande foto met de legenda
   Gebruikt de tokens uit site.css (--gold-*, --fc, --fb, --nav-h, --gut, --ease, --t2).
   ===================================================================== */

.bpx {
  --bpx-ink: rgba(251, 214, 140, .55);
  --bpx-line: rgba(251, 214, 140, .8);
  --bpx-amt: 0;      /* hoe ver de blauwdruk in beeld is (0..1), gezet door blueprint.js */
  --bpx-out: 1;      /* uitfaden aan het eind van de sectie */
  position: relative;
  height: 260vh; height: 260svh;
  color: var(--t2, rgba(255, 255, 255, .74));
}

/* ---------------------------------------------------------- technisch blad (achter de machine) */
.bpx-back { position: sticky; top: 0; height: 100vh; height: 100svh; pointer-events: none; }
.bpx-sheet {
  position: absolute; inset: 0; overflow: hidden;
  opacity: calc(var(--bpx-amt) * var(--bpx-out));
}
/* blueprint.js zet --bpx-amt elke scrollframe: als eigen laag verandert alleen de dekking (geen nieuw schilderwerk
   van raster en kader). Alleen in dit hoofdstuk, daarna is de laag weer weg. */
html[data-chapter="blueprint"] .bpx-sheet { will-change: opacity; }
/* fijn raster, vervaagt naar de randen */
.bpx-sheet::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(215, 184, 101, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 184, 101, .026) 1px, transparent 1px),
    linear-gradient(rgba(215, 184, 101, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 184, 101, .055) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 58% 64% at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 48%, transparent 82%);
  mask-image: radial-gradient(ellipse 58% 64% at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 48%, transparent 82%);
}
/* kader met hoekmerken en maatstreepjes (zonder getallen) */
.bpx-sheet::after {
  content: ""; position: absolute;
  inset: calc(var(--nav-h, 92px) + 14px) var(--gut, 32px) 22px;
  border: 1px solid rgba(215, 184, 101, .09);
  background:
    linear-gradient(var(--bpx-ink), var(--bpx-ink)) left top / 24px 1px no-repeat,
    linear-gradient(var(--bpx-ink), var(--bpx-ink)) left top / 1px 24px no-repeat,
    linear-gradient(var(--bpx-ink), var(--bpx-ink)) right top / 24px 1px no-repeat,
    linear-gradient(var(--bpx-ink), var(--bpx-ink)) right top / 1px 24px no-repeat,
    linear-gradient(var(--bpx-ink), var(--bpx-ink)) left bottom / 24px 1px no-repeat,
    linear-gradient(var(--bpx-ink), var(--bpx-ink)) left bottom / 1px 24px no-repeat,
    linear-gradient(var(--bpx-ink), var(--bpx-ink)) right bottom / 24px 1px no-repeat,
    linear-gradient(var(--bpx-ink), var(--bpx-ink)) right bottom / 1px 24px no-repeat,
    repeating-linear-gradient(90deg, rgba(215, 184, 101, .2) 0 1px, transparent 1px 5%) left top / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(215, 184, 101, .2) 0 1px, transparent 1px 5%) left bottom / 100% 5px no-repeat,
    repeating-linear-gradient(180deg, rgba(215, 184, 101, .2) 0 1px, transparent 1px 5%) left top / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(215, 184, 101, .2) 0 1px, transparent 1px 5%) right top / 5px 100% no-repeat;
}

/* ---------------------------------------------------------- de laag met de labels (boven de machine) */
.bpx-stage {
  position: sticky; top: 0; z-index: 2;
  height: 100vh; height: 100svh;
  margin-top: -100vh; margin-top: -100svh;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.bpx-head {
  position: absolute; left: var(--gut, 32px); right: var(--gut, 32px); top: calc(var(--nav-h, 92px) + 3.2vh);
  text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--ease, ease), transform 1.1s var(--ease, ease);
}
.bpx.is-head .bpx-head { opacity: var(--bpx-out); transform: none; }
.bpx-head .eyebrow { margin-bottom: 14px; }
.bpx-title { margin: 0; font-size: clamp(24px, 2.7vw, 44px); letter-spacing: .05em; }

/* aanwijslijnen en punten (SVG over de hele laag) */
.bpx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: calc(var(--bpx-amt) * var(--bpx-out)); }
.bpx-lead {
  fill: none; stroke: var(--bpx-line); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .75s var(--ease, ease) .12s, stroke .4s, opacity .4s;
}
.bpx-g.is-on .bpx-lead { stroke-dashoffset: 0; }
.bpx-dot > * { transform-box: fill-box; transform-origin: center; }
.bpx-pt { fill: #FBD68C; transform: scale(0); transition: transform .5s var(--ease, ease); filter: drop-shadow(0 0 4px rgba(251, 214, 140, .9)); }
.bpx-ring { fill: none; stroke: rgba(251, 214, 140, .55); stroke-width: 1; transform: scale(0); opacity: 0; transition: transform .7s var(--ease, ease), opacity .7s; }
.bpx-num { display: none; font: 700 10px/1 var(--fb, sans-serif); fill: #fff; text-anchor: middle; dominant-baseline: central; }
.bpx-g.is-on .bpx-pt { transform: scale(1); }
.bpx-g.is-on .bpx-ring { transform: scale(1); opacity: 1; }
.bpx-g.is-on.is-pulse .bpx-ring { animation: bpxPulse 1.6s var(--ease, ease) 1; }
@keyframes bpxPulse { 0% { transform: scale(.6); opacity: 1; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.bpx-g.is-back .bpx-lead { stroke-dasharray: .012 .01; opacity: .45; }
.bpx-g.is-back .bpx-pt { fill: transparent; stroke: #FBD68C; stroke-width: 1; }
.bpx-g.is-gone { opacity: 0; }
.bpx-g.is-hot .bpx-lead { stroke: #FFE7B5; }
.bpx-g.is-hot .bpx-ring { stroke: #FFE7B5; }

/* labels */
.bpx-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.bpx-co {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 12px;
  width: 270px; max-width: 42vw;
  pointer-events: auto; cursor: default;
  opacity: 0; transform: translateX(var(--bpx-dx, -12px));
  transition: opacity .6s var(--ease, ease) .45s, transform .9s var(--ease, ease) .45s;
}
.bpx-co[data-side="l"] { flex-direction: row-reverse; text-align: right; --bpx-dx: -12px; }
.bpx-co[data-side="r"] { --bpx-dx: 12px; }
.bpx-co.is-on { opacity: calc(var(--bpx-amt) * var(--bpx-out)); transform: none; }
.bpx-co.is-back { opacity: calc(.5 * var(--bpx-amt) * var(--bpx-out)); }
.bpx-co.is-gone { opacity: 0; }
.bpx-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--bpx-line); background: rgba(0, 0, 0, .6);
  color: var(--gold-2, #FBD68C); font: 600 11.5px/1 var(--fb, sans-serif); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 16px rgba(251, 214, 140, .16), inset 0 0 8px rgba(251, 214, 140, .12);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.bpx-t { display: block; min-width: 0; }
.bpx-t b {
  display: block; color: #fff;
  font-family: var(--fc, sans-serif); font-weight: 600; font-size: 13px; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase;
}
.bpx-t span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--t2, rgba(255, 255, 255, .74)); letter-spacing: .01em; }
.bpx-co.is-hot .bpx-n { background: linear-gradient(135deg, #8a6328, #b8924a); color: #fff; box-shadow: 0 0 22px rgba(251, 214, 140, .45); }

/* ---------------------------------------------------------- smal scherm: genummerde punten, één label onderaan */
.bpx.is-legend .bpx-co {
  left: 50%; top: auto; bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px));
  width: min(340px, calc(100% - 2 * var(--gut, 16px))); max-width: none;
  translate: -50% 0 !important;
  flex-direction: row; text-align: left; gap: 14px;
  padding: 14px 18px; border-radius: 14px;
  /* geen backdrop-filter (telefoon): een bijna dichte achtergrond leest net zo rustig */
  background: rgba(4, 4, 4, .88); box-shadow: inset 0 0 0 1px rgba(215, 184, 101, .22), 0 18px 40px rgba(0, 0, 0, .6);
  transform: translateY(10px); transition: opacity .45s var(--ease, ease), transform .6s var(--ease, ease);
  pointer-events: none;
}
.bpx.is-legend .bpx-co.is-on { opacity: 0; transform: translateY(10px); }
.bpx.is-legend .bpx-co.is-cur { opacity: calc(var(--bpx-amt) * var(--bpx-out)); transform: none; }
.bpx.is-legend .bpx-n { width: 32px; height: 32px; font-size: 13px; }
.bpx.is-legend .bpx-t b { font-size: 12.5px; letter-spacing: .14em; }
.bpx.is-legend .bpx-t span { margin-top: 4px; font-size: 13.5px; }
.bpx.is-legend .bpx-num { display: block; opacity: 0; transition: opacity .4s; }
.bpx.is-legend .bpx-g.is-on .bpx-num { opacity: 1; }
.bpx.is-legend .bpx-pt { fill: rgba(0, 0, 0, .72); stroke: var(--bpx-line); stroke-width: 1; filter: none; }
.bpx.is-legend .bpx-g.is-cur .bpx-pt { fill: #9B7232; stroke: #FBD68C; }
.bpx.is-legend .bpx-ring { display: none; }
.bpx.is-legend .bpx-lead { display: none; }

/* ---------------------------------------------------------- zonder 3D: legenda onderaan */
.bpx.is-still .bpx-list {
  inset: auto 0 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
  padding: 0 var(--gut, 16px) max(20px, env(safe-area-inset-bottom));
  width: min(640px, 100%); margin: 0 auto;
}
.bpx.is-still .bpx-co {
  position: relative; width: auto; max-width: none; translate: none !important;
  flex-direction: row; text-align: left; gap: 9px; align-items: flex-start;
  transform: translateY(8px);
  transition-delay: 0s;
}
.bpx.is-still .bpx-co.is-on { transform: none; opacity: var(--bpx-out); }
.bpx.is-still .bpx-n { width: 20px; height: 20px; font-size: 10px; margin-top: -1px; }
.bpx.is-still .bpx-t b { font-size: 11px; letter-spacing: .12em; }
.bpx.is-still .bpx-t span { margin-top: 3px; font-size: 12px; line-height: 1.3; }

/* zonder 3D: de machine als foto */
.bpx-still {
  position: absolute; left: 50%; top: calc(var(--nav-h, 92px) + 3.2vh + 110px); bottom: 210px; margin: 0;
  transform: translateX(-50%); display: flex; justify-content: center;
}
.bpx-still img { height: 100%; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .8)); }
.bpx.is-still .bpx-sheet { opacity: 1; }
.bpx:not(.is-still) .bpx-still { display: none; }

@media (max-height: 780px) and (min-width: 761px) {
  .bpx-head { top: calc(var(--nav-h, 92px) + 1.6vh); }
  .bpx-head .eyebrow { margin-bottom: 8px; }
  .bpx-title { font-size: clamp(22px, 2.3vw, 36px); }
}
@media (max-width: 760px) {
  .bpx { height: 220vh; height: 220svh; }
  .bpx-head { top: calc(var(--nav-h, 70px) + 2vh); }
  .bpx-head .eyebrow { margin-bottom: 10px; }
  .bpx-title { font-size: clamp(22px, 6.4vw, 30px); }
  .bpx-sheet::after { inset: calc(var(--nav-h, 70px) + 8px) 10px 12px; }
  .bpx-still { top: calc(var(--nav-h, 70px) + 2vh + 86px); bottom: 220px; }
}

@media (max-width: 900px), (pointer: coarse) {
  /* de lijnen en punten worden elke frame opnieuw getekend: zonder gloedfilter */
  .bpx-pt { filter: none; }
}
/* telefoon liggend: de machine staat in het midden; de kop links ernaast en het label rechtsonder, nooit eroverheen */
@media (orientation: landscape) and (max-height: 520px) {
  .bpx-head { left: var(--gut, 16px); right: auto; width: min(30vw, 260px); top: calc(var(--nav-h, 56px) + 14px); text-align: left; }
  .bpx-head .eyebrow { justify-content: flex-start; margin-bottom: 8px; }
  .bpx-title { font-size: clamp(18px, 5.4vh, 24px); }
  .bpx.is-legend .bpx-co { left: auto; right: var(--gut, 16px); width: min(300px, 36vw); translate: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bpx-head, .bpx-co, .bpx-lead, .bpx-pt, .bpx-ring { transition: none !important; animation: none !important; }
}
html.rm .bpx-head, html.rm .bpx-co, html.rm .bpx-lead, html.rm .bpx-pt, html.rm .bpx-ring { transition: none !important; animation: none !important; }

/* zonder JavaScript: foto met de lijst eronder, gewoon in de flow */
html:not(.js) .bpx { height: auto; }
html:not(.js) .bpx-back, html:not(.js) .bpx-svg { display: none; }
html:not(.js) .bpx-stage { position: relative; height: auto; margin-top: 0; overflow: visible; padding: calc(var(--nav-h, 92px) + 6vh) var(--gut, 16px) 10vh; }
html:not(.js) .bpx-head { position: relative; left: auto; right: auto; top: auto; opacity: 1; transform: none; }
html:not(.js) .bpx .bpx-still { position: relative; left: auto; top: auto; bottom: auto; transform: none; display: flex; height: 62vh; margin: 5vh auto; }
html:not(.js) .bpx-list { position: relative; inset: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 28px; max-width: 920px; margin: 0 auto; }
html:not(.js) .bpx-co { position: relative; width: auto; max-width: none; flex-direction: row; text-align: left; opacity: 1; transform: none; }