/* ============================================================
   M.O. SYSTEM — Landing · Board flight styles
   Mirrors the standalone About board's visual language, but
   everything is ABSOLUTE inside a STICKY container (not fixed)
   so the whole instrument scrolls away cleanly when the flight
   ends and the footer comes up.
   ============================================================ */

.bf { position: relative; width: 100%; }

/* The board lives in a FIXED full-viewport layer (not a sticky panel) so it
   crossfades in place with no hard sliding edge. It sits inside .lp
   (z-index:1) so it stays below the shell header (z-index:50) but above the
   universe (z-index:0) and the page's static sections. Opacity / transform /
   clip-path are driven per-frame by the chosen transition mode. */
.bf-layer {
  position: fixed; inset: 0;
  z-index: 4;
  overflow: hidden;
  transform-origin: 50% 45%;
  will-change: opacity, transform, clip-path;
  /* no CSS transition — opacity/transform are driven directly from scroll;
     a transition here would stall mid-flight under board render load. */
}
/* takeover: a solid void backdrop is needed only ONCE the board has come
   close enough to take over the screen — otherwise the page sections behind
   it show through the canvas's transparent sky. While the board is still the
   small floating "model" on the node-card, the layer must stay TRANSPARENT so
   the card + universe read behind it. The backdrop opacity is driven per-frame
   as a direct background-color (0 at rest → 1 when taken over). */
.bf-layer--takeover { background-color: rgba(4, 6, 13, 0); }

/* the WebGL board canvas */
.bf-mount { position: absolute; inset: 0; z-index: 0; }
.bf-mount canvas { display: block; width: 100%; height: 100%; }

/* faint vignette + grain over the render */
.bf-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(4,6,13,0.5) 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.015) 0.5px, transparent 1px);
  background-size: 100% 100%, 3px 3px;
}

/* section marker (top-left, under the global shell) */
.bf-mark {
  position: absolute; z-index: 12;
  top: var(--gutter-top); left: var(--gutter);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ghost);
}
.bf-mark__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }

/* ============================================================ CHAPTERS */
.bf-stage { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.bf-ch {
  position: absolute; left: var(--gutter); width: min(460px, 44vw);
  /* the chapter card IS the bottom-left corner — nothing sits under it now */
  bottom: var(--gutter-bot);
  will-change: opacity, transform;
}
.bf-ch__num {
  font-family: var(--ff-serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-d2); line-height: var(--lh-crush); color: var(--signal);
  opacity: 0.92; margin-left: -4px; margin-bottom: var(--s-3);
  text-shadow: 0 0 40px var(--signal-glow);
}
.bf-ch__card {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--signal);
  background: rgba(6,8,13,0.66);
  backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5);
  box-shadow: 0 30px 90px -36px rgba(0,0,0,0.8);
  pointer-events: auto;
}
.bf-ch__kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--signal); }
.bf-ch__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.bf-ch__live { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulse 1.3s var(--e-in-out) infinite; }
.bf-ch__title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--fs-d4); line-height: var(--lh-solid); letter-spacing: var(--tr-display);
  color: var(--bone); margin: 0; text-wrap: pretty;
}
.bf-ch__title em { font-family: var(--ff-serif); font-style: italic; color: var(--signal); }
.bf-ch__body { font-family: var(--ff-display); font-size: var(--fs-d7); line-height: var(--lh-text); color: var(--ash); margin: 0; }
.bf-ch__ref { display: flex; gap: var(--s-4); align-items: baseline; padding-top: var(--s-4); border-top: 1px dashed var(--hairline); }
.bf-ch__refK { font-family: var(--ff-mono); font-size: var(--fs-nano); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ghost); }
.bf-ch__refV { font-family: var(--ff-mono); font-size: var(--fs-small); color: var(--bone); }

/* ============================================================ RAIL / PROG
   There is no probe HUD. REF / STOP / CAM used to sit in the bottom-left
   corner, and all three were already said elsewhere: the chapter card carries
   COMPONENT · <ref>, the waypoint rail carries the stop and marks the active
   one, and the progress hairline carries position. Three readouts restating
   two facts made the corner muddy for no information. The chapter card owns
   that corner now. */
/* Same instrument as the work reel's stop list (.lp-workReel__stops), so it
   is anchored the same way: top-right on the shared gutter, not centred. The
   two used to sit on different levels, and scrolling from the reel into the
   flight made the counter jump down the screen for no reason. Gap and item
   metrics match that list declaration for declaration. */
.bf-rail { position: absolute; top: var(--gutter-top); right: var(--gutter); z-index: 11; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bf-rail__stop { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 3px 0; cursor: pointer; font-family: var(--ff-mono); font-size: var(--fs-nano); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ghost); transition: color var(--d-fast); background: none; border: none; }
.bf-rail__stop:hover { color: var(--bone); }
.bf-rail__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--shadow); transition: background var(--d-fast), box-shadow var(--d-fast); }
.bf-rail__stop.is-active { color: var(--signal); }
.bf-rail__stop.is-active .bf-rail__dot { background: var(--signal); box-shadow: 0 0 8px var(--signal); }

.bf-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); z-index: 11; }
.bf-prog__fill { height: 1px; background: var(--signal); box-shadow: 0 0 6px var(--signal); transform-origin: left center; will-change: transform; }

/* Bottom-RIGHT, not centred: the chapter card now owns the bottom-left and
   runs to 44vw, so a centred cue collides with it between roughly 820px and
   1100px wide. Corner-anchored keeps the two apart at every width and reads as
   a pair — statement left, prompt right. */
.bf-cue { position: absolute; right: var(--gutter); bottom: var(--gutter-bot); z-index: 11; display: inline-flex; align-items: center; gap: var(--s-4); font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--signal); transition: opacity var(--d-slow) var(--e-out); pointer-events: none; }
.bf-cue__line { width: 40px; height: 1px; background: var(--signal); }

/* ============================================================ FOOTER BEAT
   Resolves in-scene over the hero board pullback. Bottom-anchored,
   with a scrim so the contact type reads over the board. */
.bf-foot { position: absolute; inset: 0; z-index: 13; display: flex; align-items: flex-end; justify-content: center; will-change: opacity; }
.bf-foot__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4,6,13,0.92) 0%, rgba(4,6,13,0.72) 30%, rgba(4,6,13,0.18) 62%, transparent 100%);
}
/* Gutter to gutter, the same insets as the shell header, the chapter card and
   the rail. It was a centred min(1100px, 90vw) column (64vw above 1720px),
   which left the contact beat floating mid-screen on wide displays with
   hundreds of px of dead margin each side and broke the email in two. */
.bf-foot__inner {
  position: relative; z-index: 1;
  width: calc(100% - 2 * var(--gutter));
  padding: 0 0 var(--gutter-bot); display: flex; flex-direction: column; gap: var(--s-6);
  will-change: transform;
}
.bf-foot__kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--signal); }
.bf-foot__live { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulse 1.3s var(--e-in-out) infinite; }
.bf-foot__big {
  font-family: var(--ff-display); font-weight: 400; letter-spacing: var(--tr-tighter); line-height: var(--lh-solid);
  font-size: var(--fs-d3); color: var(--bone); text-decoration: none; word-break: break-word;
}
.bf-foot__big:hover { color: var(--signal); }
/* Three channels: GITHUB · TELEGRAM · CV. The design-system reference used to
   sit here as a fourth, but the end screen is a contact beat — an internal
   reference surface is not a way to reach a person. It keeps its entry point
   in the All Projects header. */
.bf-foot__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.bf-foot__link {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: rgba(6,8,13,0.74); text-decoration: none; position: relative;
  transition: background var(--d-fast) var(--e-out);
}
.bf-foot__link:hover { background: var(--signal-ghost); }
.bf-foot__linkKey { font-family: var(--ff-mono); font-size: var(--fs-nano); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ghost); }
.bf-foot__linkVal { font-family: var(--ff-display); font-size: var(--fs-meta); color: var(--bone); }
.bf-foot__arr { position: absolute; top: var(--s-5); right: var(--s-5); font-family: var(--ff-display); color: var(--signal); }
.bf-foot__meta { display: flex; gap: var(--s-6); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px dashed var(--hairline); font-family: var(--ff-mono); font-size: var(--fs-nano); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ghost); }

/* scroll target for the CONTACT nav link — sits ~at the footer beat */
.bf-anchor { position: absolute; left: 0; bottom: 8vh; width: 1px; height: 1px; }

@media (max-width: 820px) {
  .bf-rail { display: none; }
  .bf-ch { left: var(--s-5); right: var(--s-5); width: auto; bottom: calc(var(--gutter-bot) + var(--s-9)); }
  .bf-foot__inner { width: calc(100% - 2 * var(--s-5)); }
  .bf-foot__links { grid-template-columns: repeat(2, 1fr); }
}
/* Phones: one column of link rows with 44px+ targets and a smaller email line. */
@media (max-width: 700px) {
  .bf-foot__links { grid-template-columns: 1fr; }
  .bf-foot__big { word-break: break-all; }
}

/* footer intro line (2026-08 concept pass) */
.bf-foot__line{font-family:var(--ff-display,'Geist',sans-serif);font-size: var(--fs-meta);letter-spacing: var(--tr-mono);color:var(--ghost,#9aa3b3);margin:12px 0 4px}
@media (max-width:700px){.bf-foot__line{font-size: var(--fs-meta)}}