/* ==========================================================================
   3D viewport background (viewport.js).
   ========================================================================== */
body::before{display:none}
.bg-glow{opacity:.3}
.viewport-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 30%,#1a1d18,#0e100d 70%),#0e100d}
.vp-canvas{position:absolute;inset:0;width:100%;height:100%}
/* calmer middle where the text is, darker after the hero */
.vp-shade{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 44% 55% at 50% 48%,rgba(10,11,9,calc(var(--dim,0) + .2)),transparent 100%),
    linear-gradient(rgba(10,11,9,var(--dim,0)),rgba(10,11,9,var(--dim,0)))}
.vp-hud{position:fixed;z-index:40;pointer-events:none;font:500 .7rem 'Poppins',sans-serif;color:#9aa092;letter-spacing:.5px;transition:opacity .5s;direction:ltr}
.vp-tl{top:86px;left:26px;display:grid;gap:2px}
.vp-tl b{color:#d9ddd2;font-weight:600}
/* the hero text starts close to the left edge on laptop widths: only show this label when there is room */
@media (max-width:1440px){ .vp-tl{display:none} }
.vp-bl{bottom:20px;left:20px;display:flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  background:linear-gradient(140deg,rgba(255,255,255,.09),rgba(255,255,255,.03));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.22);letter-spacing:1.5px;text-transform:uppercase}
.vp-bl b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.vp-bl em{display:block;width:60px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.vp-bl u{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
body.door-closed .vp-hud{opacity:0}
@media (max-width:760px){ .vp-tl{display:none} .vp-bl{bottom:12px;left:12px;font-size:.62rem} }