/* ==========================================================================
   Efficient — Technology scroll experience: ENGINE STYLES
   Host on Bunny; load in Webflow via  <link rel="stylesheet" href="…">.
   Pairs with technology-experience.js.

   NOT included here (lives in Webflow already, or was removed):
   - global resets (*, html, body) — Webflow provides these
   - #xp / .stage / #cv scaffold — built in Webflow
   - .xp-cap / .cn / .cx / .ch / .cb (explainers)  — Webflow style panel
     (except their cross-fade MOTION, which lives here — see below)
   - .hs-card / .hs-t / .hs-b / .hs-x (hotspot cards) — Webflow style panel
   - intro / outro / scroll-% (.page-sec, .cta, #hint, …) — removed
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:wght@300;400;600&display=swap');

:root{
  --carbon:#1E1E1E; --carbon-2:#262626; --carbon-3:#2E2E2E; --carbon-4:#3A3A3A;
  --carbon-line:#404040;
  --ink:#FFFFFF; --ink-2:#C9C9C9; --ink-3:#8A8A8A; --ink-4:#5A5A5A;
  --gold:#FAAA19; --gold-hover:#FFC04A;
  --vista:#50648C; --vista-soft:#7E8FB0; --supernova:#8CDCBE; --turbo:#FF916E;
  --hyperlink:#6464F0;
  --f-mono:'Cascadia Code','JetBrains Mono','Menlo',monospace;
}

/* ---------- section-explainer motion ----------
   The .xp-cap box itself (layout / type / color) is a Webflow element; its
   cross-fade + slide motion lives here with the rest of the engine's
   animations. The script toggles .xp-active to reveal the active scene.
   (This is what makes the explainers fade instead of snapping.) */
.xp-cap{transform:translateY(10px);transition:opacity .3s ease, transform .3s ease}
.xp-cap.xp-active{transform:none}

/* ---------- editor + terminal panels ---------- */
.panel{
  position:absolute;left:50%;top:50%;width:min(680px,88vw);
  transform:translate(-50%,-50%);
  background:var(--carbon-2);border:1px solid var(--carbon-line);
  will-change:transform,opacity;
}
.panel .bar{
  height:34px;display:flex;align-items:center;gap:10px;padding:0 14px;
  border-bottom:1px solid var(--carbon-line);
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.panel .bar .dotrow{display:flex;gap:6px}
.panel .bar .dotrow i{width:8px;height:8px;background:var(--carbon-4);display:block}
.panel .bar .fname{color:var(--ink-2);font-family:var(--f-mono);text-transform:none;letter-spacing:0;font-size:11px}
.codewrap{padding:16px 18px;font-family:var(--f-mono);font-size:12.5px;line-height:1.7;white-space:pre;overflow:hidden}
#codelines{max-height:calc(16px + 20 * 12.5px * 1.7);overflow:hidden}
.sb-deco{position:absolute;top:44px;bottom:10px;right:6px;width:6px;pointer-events:none;z-index:3;
  background:var(--carbon-line);border-radius:3px}
.sb-deco::after{content:'';position:absolute;top:0;left:0;width:6px;height:80%;
  background:var(--carbon-4);border-radius:3px}
.ln{display:flex;opacity:0;transform:translateY(5px);transition:opacity 240ms ease,transform 240ms ease}
.ln.on{opacity:1;transform:none}
.ln.peek.on{opacity:.5;filter:blur(1.6px)}
.ln .no{width:34px;flex-shrink:0;color:var(--ink-4);text-align:right;padding-right:16px;user-select:none}
.kw{color:var(--gold)} .num{color:var(--turbo)} .fn{color:var(--ink)}
.vr{color:var(--ink)} .cm{color:var(--ink-4);font-style:italic} .str{color:var(--supernova)}
.pu{color:var(--hyperlink)} .yl{color:var(--gold-hover)}

#term .codewrap{min-height:262px}
.tline{opacity:0;transition:opacity 200ms ease}
.tline.on{opacity:1}
.tline .lbl{color:var(--ink-3);display:inline-block;width:120px}
.tline .ok{color:var(--supernova)}
#cmdline .prompt{color:var(--gold)}
#caret{display:inline-block;width:7px;height:14px;background:var(--ink-2);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- progress rail ---------- */
#rail{position:absolute;right:clamp(14px,3vw,36px);top:50%;transform:translateY(-50%);z-index:9;
  display:flex;flex-direction:column;align-items:center;gap:0}
#rail .seg{width:1px;height:26px;background:var(--carbon-line)}
#rail button{width:22px;height:22px;background:transparent;border:none;cursor:pointer;position:relative;padding:0}
#rail button::after{content:'';position:absolute;inset:7px;background:var(--carbon-4);
  transition:background 140ms ease,transform 140ms ease}
#rail button:hover::after{background:var(--ink-3)}
#rail button.on::after{background:var(--gold);transform:scale(1.25)}
#rail button .tip{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  background:var(--carbon-2);border:1px solid var(--carbon-line);padding:4px 9px;
  opacity:0;pointer-events:none;transition:opacity 140ms ease;
}
#rail button:hover .tip,#rail button:focus-visible .tip{opacity:1}

/* ---------- hotspot dots (created by the script, appended to .stage) ---------- */
.hs{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:12;
  background:transparent;border:none;cursor:pointer;padding:0;
  opacity:0;pointer-events:none;transition:opacity 240ms ease}
.hs.show{opacity:1;pointer-events:auto}
.hs::before{content:'';position:absolute;inset:11px;background:var(--gold);border-radius:50%}
.hs::after{content:'';position:absolute;inset:5px;border:1px solid rgba(250,170,25,.7);border-radius:50%;
  animation:pulse 2.1s ease-out infinite}
@keyframes pulse{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.hs:hover::before{background:var(--gold-hover)}

/* ---------- reduced motion / mobile ---------- */
@media (prefers-reduced-motion: reduce){
  .hs::after,#caret{animation:none}
  .ln,.tline,.xp-cap{transition:none}
}
@media (max-width:640px){
  .codewrap{font-size:10.5px}
}