/* v3. Blower filter 3D section. UI variables map to the shared NEU-JKF token layer
   (main.css :root, generated from design-system tokens.json). 3D model/JS untouched. */
:root{
  --night:var(--almost-black); --night-2:var(--brand-blue-dark); --night-rule:var(--brand-blue-hover); --fog:var(--surface); --fog-2:var(--njk-border-strong);
  --hazard:var(--azure); --hazard-ink:var(--almost-black); --beige:var(--tok-color-web-azure-lighter); --blue:var(--brand-blue);
  --display:var(--font-display);
  --body:var(--font-sans);
  --mono:var(--font-sans);
  --gut:var(--page-edge);
}
/* Minimal base so the section works on its own. Remove if your site already sets these. */
.xray,.xray *{box-sizing:border-box}
.xray [hidden]{display:none!important}
.xray h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1;margin:0;text-wrap:balance;color:var(--fog)}
.xray p{margin:0}
.xray .eyebrow{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.xray .btn{display:inline-flex;align-items:center;gap:.6em;padding:14px 22px;border-radius:var(--radius-md);font:500 var(--fs-button)/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s}
.xray .btn:hover{transform:translateY(-2px)}
.xray .btn-hazard{background:var(--brand-blue);color:var(--surface);border-color:var(--brand-blue)}.xray .btn-hazard:hover{background:var(--brand-blue-hover);border-color:var(--brand-blue-hover)}
.xray .btn .arr{font-family:var(--mono)}
.xray :focus-visible{outline:2px solid var(--hazard);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.xray *{transition:none!important}}
/* 3D filter x-ray */
.xray{background:var(--night);color:var(--fog)}
.xray-track{height:620vh;position:relative}
.xray{--xray-offset:var(--njk-nav-h,72px)} /* match the site's fixed header */
.xray-stick{position:sticky;top:var(--xray-offset);height:calc(100vh - var(--xray-offset));height:calc(100svh - var(--xray-offset));overflow:hidden}
#fcanvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
#fcanvas.ready{opacity:1}
.xray-poster{position:absolute;left:50%;top:50%;height:78%;width:auto;max-width:100%;object-fit:contain;transform:translate(-50%,-46%)}
.xray-ui{position:absolute;inset:0;pointer-events:none;max-width:1320px;margin-inline:auto;padding:calc(88px + env(safe-area-inset-top,0px)) var(--gut) 40px;display:grid;grid-template-rows:auto 1fr}
.xray-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.xray-top .eyebrow{color:var(--beige)}
.xray-bar{display:flex;gap:6px;width:min(280px,40vw)}
.xray-bar i{flex:1;height:3px;border-radius:2px;background:var(--night-rule);transition:background .4s}
.xray-bar i.on{background:var(--hazard)}
.xray-cards{position:relative;align-self:end}
.xc{position:absolute;left:0;bottom:0;width:min(420px,100%);background:rgba(var(--tok-color-brand-almost-black-rgb),.82);backdrop-filter:blur(8px);border:1px solid var(--night-rule);border-radius:var(--radius-md);padding:24px;display:grid;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .45s,transform .45s;pointer-events:none}
.xc.on{opacity:1;transform:none;pointer-events:auto}
.xc .eyebrow{color:var(--beige)}
.xc h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.xc p{color:var(--fog-2);font-size:15px}
.xc .btn{justify-self:start}
.xc-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--night-rule);border:1px solid var(--night-rule);border-radius:var(--radius-sm);overflow:hidden}
.xc-facts div{background:var(--night-2);padding:12px 14px;display:grid;gap:2px}
.xc-facts b{font:800 1.3rem/1.1 var(--display);color:var(--fog)}
.xc-facts span{font:400 12px var(--mono);color:var(--fog-2)}
.xray-labels span{position:absolute;left:0;top:0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fog);padding:6px 10px;border:1px solid var(--hazard);border-radius:999px;background:rgba(var(--tok-color-brand-almost-black-rgb),.82);white-space:nowrap;opacity:0;will-change:transform}
.xray-fallback{position:absolute;inset:auto 0 50% 0;text-align:center;color:var(--fog-2)}
@media (max-width:760px){
  .xray-ui{padding-bottom:20px}
  .xc{padding:18px}
  .xray-labels span{font-size:10px;padding:4px 8px}
}


#section-configurators{scroll-margin-top:var(--njk-nav-h)}