/* ==========================================================================
   CoreSpec 3D: build story
   Four-step animation over the connected-building image:
   Foundation, Connect systems, Build workflows & agents, Updates the asset
   automatically. Driven by src/js/build-story.js. Prefix: bx-
   Sits in a .bsec--dark section on boominc.ai.
   Image coordinates are in the source image's 1998 x 1128 pixel space.
   ========================================================================== */

.bx-stage { position:relative; aspect-ratio:1998/1128; overflow:hidden; border-radius:6px; background:#0f0d09;
            margin-top:48px; isolation:isolate; direction:ltr; }
@media (max-width:768px){ .bx-stage { margin-top:36px; } }

/* The world: plate, connectors and cards move together when the camera zooms */
.bx-world { position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
.bx-world img { display:block; }
.bx-reveal { position:absolute; inset:0; clip-path:inset(100% 0 0 0); }
.bx-plate { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
            filter:grayscale(1) brightness(.62) contrast(1.08); transition:filter 2.2s ease; }
.bx-stage.is-lit .bx-plate { filter:none; }
.bx-scan { position:absolute; left:0; right:0; height:2px; top:100%; opacity:0; pointer-events:none;
           background:linear-gradient(90deg, transparent, #FCBF20 18%, #FFE29A 50%, #FCBF20 82%, transparent);
           box-shadow:0 0 18px 4px rgba(252,191,32,.55); }
.bx-stage.is-building .bx-scan { opacity:1; }
.bx-grid { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1s ease;
           background-image:linear-gradient(rgba(252,191,32,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(252,191,32,.10) 1px, transparent 1px);
           background-size:3.2% 5.6%; mask-image:linear-gradient(to top, #000 0%, transparent 85%); -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 85%); }
.bx-stage.is-building .bx-grid { opacity:1; }

.bx-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; transition:opacity .4s ease; }
.bx-links path { fill:none; stroke:#FCBF20; stroke-width:2.4; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(252,191,32,.7)); }
.bx-links .bx-node { fill:#FFD86B; stroke:#FCBF20; stroke-width:3; opacity:0; transition:opacity .3s ease; filter:drop-shadow(0 0 8px rgba(252,191,32,.95)); }
.bx-links .bx-node.is-on { opacity:1; }
.bx-links .bx-ring { fill:none; stroke:#FCBF20; stroke-width:2; opacity:0; }
.bx-links .bx-runner { fill:#fff; stroke:#FCBF20; stroke-width:4; opacity:0; filter:drop-shadow(0 0 10px #FCBF20); }

.bx-card { position:absolute; overflow:hidden; border-radius:14px; opacity:0; transform:scale(.9); transform-origin:center;
           transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.bx-card img { position:absolute; max-width:none; }
.bx-card.is-on { opacity:1; transform:none; }
.bx-card.is-hot { box-shadow:0 0 0 2px #FCBF20, 0 0 30px rgba(252,191,32,.6); }
.bx-stage.is-zoom .bx-card, .bx-stage.is-zoom .bx-links { opacity:0 !important; }
.bx-badge { position:absolute; transform:translate(-50%, -130%) scale(.8); opacity:0; transition:all .4s ease; white-space:nowrap;
            background:#C49A58; color:#211E1A; font-weight:600; font-size:clamp(9px, 1vw, 13px); padding:.35em .8em; border-radius:999px; }
.bx-badge.is-on { opacity:1; transform:translate(-50%, -130%) scale(1); }

/* Conference room close-up */
.bx-room { position:absolute; inset:0; opacity:0; pointer-events:none; overflow:hidden; }
.bx-room__cam { position:absolute; inset:0; transform-origin:30% 30%; }
.bx-room__cam > img { position:absolute; left:0; top:0; width:100%; height:auto; }
.bx-tv { position:absolute; left:16.1%; top:11.3%; width:46.2%; height:44%; background:#F6F4EE; overflow:hidden;
         font-family:var(--font-body); color:#1C1B19; opacity:0; transition:opacity .5s ease; }
.bx-tv.is-on { opacity:1; }
.bx-tv__in { position:absolute; left:0; top:0; width:640px; height:340px; transform-origin:0 0; }
.bx-tv__bar { height:34px; display:flex; align-items:center; gap:8px; padding:0 14px; background:#1d1b15; color:#fff; font-size:12px; }
.bx-tv__bar img { width:16px; height:16px; }
.bx-tv__bar span { opacity:.6; }
.bx-tv__bar b { font-weight:600; }
.bx-tv__sp { flex:1; }
.bx-deploy { background:#FCBF20; color:#1d1b15; font-weight:600; font-size:11px; padding:4px 10px; border-radius:5px; transition:transform .12s ease, background .3s ease; }
.bx-deploy.is-press { transform:scale(.94); }
.bx-deploy.is-live { background:#5a9a52; color:#fff; }
.bx-flow { position:absolute; left:0; right:0; top:34px; bottom:0;
           background-image:radial-gradient(rgba(13,10,2,.13) 1px, transparent 1px); background-size:16px 16px; }
.bx-flow svg { position:absolute; inset:0; width:100%; height:100%; }
.bx-flow path { fill:none; stroke:#FCBF20; stroke-width:2.5; }
.bx-fn { position:absolute; width:170px; background:#fff; border:1px solid rgba(13,10,2,.12); border-radius:8px; padding:9px 11px;
         box-shadow:0 6px 18px rgba(13,10,2,.10); opacity:0; transform:translateY(8px); transition:all .4s ease; font-size:12px; }
.bx-fn.is-on { opacity:1; transform:none; }
.bx-fn small { display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#6E6E73; margin-bottom:3px; font-weight:600; }
.bx-fn b { font-weight:600; display:block; line-height:1.3; }
.bx-fn--agent { border-color:#FCBF20; box-shadow:0 0 0 3px rgba(252,191,32,.22), 0 6px 18px rgba(13,10,2,.10); }
.bx-fn--agent small { color:#a77700; }

/* Caption over the stage, and the step rail under it */
.bx-cap { position:absolute; left:50%; bottom:5%; transform:translate(-50%, 8px); opacity:0; transition:all .5s ease; z-index:5;
          font-size:clamp(13px, 1.7vw, 22px); font-weight:500; color:#fff; font-family:var(--font-body); background:rgba(20,18,12,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
          border:1px solid rgba(196,154,88,.6); padding:.45em 1.1em; border-radius:999px; white-space:nowrap; }
.bx-cap.is-on { opacity:1; transform:translate(-50%, 0); }
.bx-cap i { font-style:normal; color:#C49A58; margin-right:.5em; font-variant-numeric:tabular-nums; }
.bx-fade { position:absolute; inset:0; background:#0f0d09; opacity:0; pointer-events:none; transition:opacity .8s ease; z-index:4; }
.bx-fade.is-on { opacity:1; }

.bx-steps { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
@media (max-width:820px){ .bx-steps { grid-template-columns:1fr 1fr; gap:20px; } }
.bx-step { position:relative; padding-top:16px; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.45); transition:color .3s ease; }
.bx-step__bar { position:absolute; left:0; top:-1px; height:2px; width:0; background:#C49A58; }
.bx-step h3 { margin:0 0 8px; font-size:20px; font-weight:400; color:inherit; line-height:1.2; letter-spacing:.01em; }
.bx-step h3 span { color:#C49A58; font-family:var(--font-eyebrow) !important; margin-right:8px; font-size:13px; }
.bx-step p { margin:0; font-size:14.5px; font-family:var(--font-body); line-height:1.55; color:rgba(255,255,255,.4); transition:color .3s ease; }
.bx-step.is-on { color:#fff; }
.bx-step.is-on p { color:rgba(255,255,255,.7); }
.bx-step.is-done .bx-step__bar { width:100%; }

@media (prefers-reduced-motion: reduce) {
  .bx-stage *, .bx-steps * { transition:none !important; animation:none !important; }
}