/* ── 3D JOURNEY (index.html #journey) ── shown only when WebGL works (html.vbj-on); otherwise the photo story #vbox stays */
.vbj{display:none;position:relative;height:100vh;height:100svh;min-height:560px;padding:0!important;background:#0b0e16}
html.vbj-on .vbj{display:block}
html.vbj-on .vbox3d-story{display:none}
.vbj-stage{position:relative;height:100%;overflow:hidden}
.vbj-canvas{cursor:grab}
.vbj-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
html.vbj-ready .vbj-canvas{opacity:1}
.vbj-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#9898b4}
html.vbj-ready .vbj-loading{display:none}

/* panels sit over a bright street, so they stay dark in both themes */
.vbj-head,.vbj-cap{position:absolute;background:rgba(10,13,22,.8);border:1px solid rgba(255,255,255,.12);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff}
.vbj-head{left:24px;top:calc(var(--nav-h) + 16px);z-index:2;max-width:520px;padding:18px 22px;transition:opacity .4s,transform .4s;pointer-events:none}
.vbj-head.off{opacity:0;transform:translateY(-8px)}
.vbj-head .chip{margin-bottom:8px}
.vbj-head h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;margin:0 0 8px;color:#fff;letter-spacing:-.02em}
.vbj-head h2 span{color:#0ea5e9}
.vbj-head p{margin:0;color:#c9cbe0;font-size:.95rem}
.vbj-cap{left:24px;top:50%;transform:translateY(-40%);width:min(380px,32vw);padding:18px 22px}
.vbj-num{margin:0 0 6px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#0ea5e9}
.vbj-title{font-family:var(--font-head);font-weight:800;font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.05;margin:0 0 8px;color:#fff}
.vbj-text{margin:0 0 8px;color:#dfe1ef;font-size:.95rem;line-height:1.5}
.vbj-detail{margin:0;color:#9ea2bd;font-size:.85rem;line-height:1.5}
.vbj-lcd{margin-top:12px}
.vbj-lcd span{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#9ea2bd;margin-bottom:4px}
.vbj-lcd pre{margin:0;background:#1d48d6;color:#eef4ff;font:600 13px/1.4 var(--font-mono),ui-monospace,monospace;padding:10px 12px;border-radius:6px;border:3px solid #10131c;white-space:pre;overflow:hidden}
.vbj-final{display:none;margin-top:14px}
.vbj-final.show{display:block}
.vbj-cap.final .vbj-lcd,.vbj-cap.final .vbj-detail{display:none!important}
.vbj-brand{display:flex;align-items:center;gap:12px}
.vbj-brand img{border-radius:9px}
.vbj-brand b{display:block;font-family:var(--font-head);letter-spacing:.1em}
.vbj-brand small{color:#9ea2bd}
.vbj-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.vbj-wire{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.vbj-wire:hover{border-color:#0ea5e9;color:#0ea5e9}

/* phone screens */
.vbj-phone{position:absolute;right:4vw;top:50%;transform:translateY(-50%) scale(.96);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.vbj-phone.show{opacity:1;transform:translateY(-50%) scale(1)}
.vbj-ph{position:relative;width:240px;height:500px;border-radius:34px;border:8px solid #05070b;background:#0d1220;box-shadow:0 30px 60px rgba(0,0,0,.45);overflow:hidden}
.vbj-ph>*{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.vbj-ph>.on{opacity:1}
.vbj-ph img[data-screen]{width:100%;height:100%;object-fit:cover;object-position:top}
.vbj-sms{background:linear-gradient(160deg,#1d2a44,#0d1220);padding:40px 12px 12px;color:#fff}
.vbj-time{text-align:center;font:500 40px var(--font-head);margin:6px 0 16px}
.vbj-note{background:rgba(255,255,255,.94);color:#121826;border-radius:14px;padding:12px;font-size:13px}
.vbj-note b{display:block;margin:6px 0 4px}
.vbj-note p{margin:2px 0 0;color:#3d4659}
.vbj-app{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#465065;text-transform:uppercase}
.vbj-app img{border-radius:4px}
.vbj-app span{margin-left:auto;font-weight:400;text-transform:none}
.vbj-sendapp{background:#fff;color:#121826;border-radius:14px;padding:14px;font-size:13px;margin-top:20px}
.vbj-sendapp b{display:block;font-size:16px;margin-bottom:10px}
.vbj-sendapp div{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #e3e6ef}
.vbj-sendapp span{color:#6b6b85}
.vbj-sendapp .vbj-code{font-weight:700;color:#0055cc}
.vbj-demo{position:absolute;left:12px;right:12px;bottom:12px;margin:0;text-align:center;font-size:11px;color:#9ea2bd}

/* controls */
.vbj-ui{position:absolute;left:0;right:0;bottom:0;padding:10px 24px 14px;background:linear-gradient(to top,rgba(8,10,16,.9),rgba(8,10,16,0));color:#fff}
.vbj-bar{height:3px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.vbj-bar i{display:block;height:100%;width:0;background:var(--grad)}
.vbj-acts{display:flex;gap:6px;margin:10px 0 4px}
.vbj-acts button,.vbj-btn{font-family:var(--font-head);font-weight:700;font-size:.8rem;min-height:36px;padding:7px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.vbj-acts button.on{background:#0ea5e9;border-color:#0ea5e9;color:#04121c}
.vbj-dots{display:flex;gap:4px;margin:6px 0 8px}
.vbj-dots button{flex:1;min-height:24px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.vbj-dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:rgba(255,255,255,.22)}
.vbj-dots button.done::before{background:rgba(14,165,233,.6)}
.vbj-dots button.on::before{background:#0ea5e9}
.vbj-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.vbj-scene{margin-right:auto;font-size:.85rem;color:#dfe1ef}
.vbj-short{display:none}
.vbj :focus-visible{outline:3px solid #0ea5e9;outline-offset:2px}
.vbj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:760px){
  .vbj-head{left:12px;right:12px;padding:14px 16px}
  .vbj-cap{left:10px;right:10px;width:auto;top:auto;bottom:178px;transform:none;padding:12px 14px;max-height:34svh;overflow:auto}
  .vbj-cap.final .vbj-text{display:none}
  .vbj-final .btn{padding:10px 18px;font-size:.8rem}
  .vbj-title{font-size:1.15rem}
  .vbj-text{font-size:.85rem}
  .vbj-detail{display:none}
  .vbj-lcd pre{font-size:11px}
  .vbj-phone{right:10px;left:auto;top:calc(var(--nav-h) + 8px);transform:scale(.96)}
  .vbj-phone.show{transform:scale(1)}
  .vbj-ph{width:118px;height:240px;border-radius:18px;border-width:4px}
  .vbj-ph .vbj-time{font-size:24px;margin:0 0 8px}
  .vbj-sms{padding:20px 8px 8px}.vbj-note,.vbj-sendapp{font-size:10px;padding:8px}.vbj-sendapp b{font-size:12px}.vbj-demo{font-size:9px}
  .vbj-ui{padding:8px 10px 10px}
  .vbj-scene{width:100%;font-size:.75rem}
  .vbj-long{display:none}.vbj-short{display:inline}
  .vbj-acts button,.vbj-btn{min-height:34px;padding:5px 11px;font-size:.75rem}
}

/* player controls */
.vbj-range{width:100%;height:22px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--fill:0%}
.vbj-range::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(to right,#0ea5e9 var(--fill),rgba(255,255,255,.22) var(--fill))}
.vbj-range::-moz-range-track{height:5px;border-radius:5px;background:linear-gradient(to right,#0ea5e9 var(--fill),rgba(255,255,255,.22) var(--fill))}
.vbj-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:#fff;border:3px solid #0ea5e9}
.vbj-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #0ea5e9}
.vbj-dots{margin:2px 0 8px}
.vbj-dots button{min-height:16px}
.vbj-acts{margin:0}
.vbj-icon{width:38px;justify-content:center;padding:0!important;font-size:.9rem!important}
.vbj-play{width:46px;background:#0ea5e9!important;border-color:#0ea5e9!important;color:#04121c!important}
.vbj-bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:12px;padding:16px 26px 16px 18px;border-radius:100px;border:0;background:var(--grad);color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.vbj-bigplay span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2)}
.vbj-bigplay[hidden]{display:none}
.vbj-hint{position:absolute;right:24px;bottom:132px;padding:8px 14px;border-radius:100px;background:rgba(10,13,22,.7);color:#dfe1ef;font-size:.8rem;pointer-events:none;transition:opacity .5s}
.vbj-hint.off{opacity:0}
.vbj-tip{position:absolute;z-index:4;width:280px;padding:14px 16px;border-radius:14px;background:rgba(10,13,22,.92);border:1px solid rgba(14,165,233,.5);color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.4)}
.vbj-tip b{display:block;font-family:var(--font-head);font-size:1rem;margin:0 22px 4px 0}
.vbj-tip p{margin:0;font-size:.85rem;color:#c9cbe0;line-height:1.5}
.vbj-tip-x{position:absolute;right:8px;top:6px;width:28px;height:28px;border:0;background:none;color:#9ea2bd;font-size:1.2rem;cursor:pointer}
.vbj.playing .vbj-hint{opacity:.85}
@media(max-width:760px){
  .vbj-zin,.vbj-zout,.vbj-speed{display:none!important}
  .vbj-acts{order:5;width:100%}
  .vbj-scene{order:6}
  .vbj-hint{left:12px;right:auto;top:calc(var(--nav-h) + 10px);bottom:auto;font-size:.72rem}
  .vbj-bigplay{top:34%;font-size:.95rem;padding:12px 20px 12px 14px}
  .vbj-tip{left:12px!important;right:12px;width:auto;top:calc(var(--nav-h) + 12px)!important}
  .vbj-cap{bottom:196px!important}
}

/* sound toggle: pulses once when the story starts playing muted, so visitors find it */
.vbj-sound[aria-pressed="true"]{background:#0ea5e9;border-color:#0ea5e9;color:#04121c}
.vbj-sound.nudge{animation:vbj-nudge 1.6s ease-out 3}
@keyframes vbj-nudge{0%{box-shadow:0 0 0 0 rgba(14,165,233,.7)}100%{box-shadow:0 0 0 12px rgba(14,165,233,0)}}
@media (prefers-reduced-motion:reduce){.vbj-sound.nudge{animation:none}}