/* ============================================================
   M.O. SYSTEM — Work reel (pieterkoopt-style) + vertical About
   Loads after the landing base styles.
   ============================================================ */

/* ============================================================
   SELECTED WORK · REEL — pin-section, scroll→pan
   • Rail item 0 is the title; everything bottom-aligned
   • Static lens reticle pinned center-bottom
   • Parallax bg grid drifts slower than rail
   ============================================================ */
.lp-workReel {
  position: relative;
  padding: 0;
  /* height set inline */
  background: transparent;
  /* FULL-BLEED, NOT CANVAS-CAPPED. `.lp-section` caps sections at
     --w-canvas (1597px) and centres them. Every piece of reel geometry — slot
     widths, rail translateX, title offset, wide.css card widths — is in vw,
     and the universe centres the locked tile on the camera. Above 1597px the
     cap turned the sticky stage into a centred box: rail, grid, vignette and
     progress hairline clipped at its edges, the locked caption slid
     (W − 1597) / 2 off its tile, and the stop list left the shell gutter that
     .bf-rail mirrors. */
  max-width: none;
  margin: 0;
}
.lp-workReel__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* THE REEL MUST NOT SWALLOW THE FIELD.
   `.lp` in base.css is pointer-events:none so empty page area falls through to
   the fixed universe, and `.lp > *` turns them back on for each direct child.
   This section IS such a child, and its sticky stage is a full-viewport layer —
   so for the whole reel the universe behind it became unhittable. The visible
   "card" a visitor points at is the 3D tile; the DOM .rcard is only its caption
   bar. That is why the card read as dead while the strip under it worked.
   Give the empty area back and let the real controls opt in one at a time. */
.lp-workReel { pointer-events: none; }
.rcard,
.lp-workReel__stopBtn,
.showAllGate { pointer-events: auto; }

/* ── parallax background grid ───────────────────────────── */
.lp-workReel__bg {
  position: absolute;
  inset: 0;
  width: 250%;          /* wide so parallax doesn't run out */
  height: 100%;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(12.5vw - 1px),
      rgba(0, 240, 200, 0.06) calc(12.5vw - 1px) 12.5vw
    ),
    radial-gradient(ellipse at 30% 70%, rgba(0, 240, 200, 0.04), transparent 40%);
  will-change: transform;
}

/* ── the rail (title slot + N card slots) ───────────────── */
.lp-workReel__rail {
  position: absolute;
  bottom: var(--gutter-bot);     /* bottom-aligned, on the shared gutter */
  left: 0;
  display: flex;
  height: auto;
  width: max-content;
  will-change: transform;
}
.lp-workReel__slot {
  flex: 0 0 var(--work-card-slot, 52vw); /* ~50vw so neighbouring cards peek in */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px;
}

/* ── title slot (0) — bottom-aligned giant type ─────────── */
.lp-workReel__slot--title {
  position: relative;        /* anchor for absolutely-positioned inner block */
  flex: 0 0 var(--work-title-slot, 56vw);
}
/* Title block: pinned to the slot's bottom-left. Its horizontal offset is
   published as --work-title-left from the same slot constants as the
   centring math; the previous hardcoded
   calc(56px - 22vw) only matched the desktop 56vw slot and pushed the title
   half off-screen at the responsive widths. */
.lp-workReel__titleInner {
  position: absolute;
  bottom: 0;
  left: var(--work-title-left, calc(var(--gutter) - 22vw));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
}
.lp-workReel__titleNum {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps);
  color: var(--signal);
  align-self: flex-start;
  padding-left: 14px;
  position: relative;
}
.lp-workReel__titleNum::before {
  content: "■";
  position: absolute; left: 0;
}
.lp-workReel__title {
  font-family: var(--ff-display);
  font-size: var(--fs-d1-nowrap);    /* 1.6× smaller */
  line-height: var(--lh-flush);
  letter-spacing: var(--tr-tightest);
  font-weight: 400;
  color: var(--bone);
  margin: 0;
  white-space: nowrap;
  align-self: flex-start;
}
.lp-workReel__title em {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--signal);
}
.lp-workReel__titleSub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ghost);
  padding-bottom: 8px;
}
.lp-workReel__titleSubDot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
  animation: pulse 1.6s var(--e-in-out) infinite;
}

/* ── reel card — caption bar (variant A) ─────────────────
   A low, wide instrument caption. No box brackets, no lens:
   the universe field is the frame. A signal spine + a brighter,
   more opaque backing mark the locked (centered) card so the
   small text stays legible over bright drifting tiles. */
.rcard {
  position: relative;
  width: min(440px, 46vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 20px 15px 16px;
  cursor: pointer;
  text-align: left;
  /* background + backdrop-filter: universe-hud.css (the translucent reel caption) */
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.85);
  transition: opacity 380ms var(--e-out), transform 380ms var(--e-out),
              background var(--d-fast), border-color var(--d-fast), box-shadow var(--d-fast);
  will-change: transform, opacity;
}
/* locked = the centered card. Stronger backing (universe-hud.css) + spine glow = readable + clearly active. */
.rcard--locked {
  border-top-color: var(--signal-dim);
  box-shadow:
    0 24px 64px -22px rgba(0, 0, 0, 0.9),
    0 0 70px -28px var(--signal);
}
.rcard--focused { border-top-color: var(--signal); }

/* signal spine — runs the full height, marks the active card */
.rcard__spine {
  width: 2px;
  align-self: stretch;
  background: var(--hairline);
  transition: background var(--d-fast) var(--e-out), box-shadow var(--d-fast);
}
/* Hover is not selection. The spine marks the ACTIVE stop, so a merely hovered
   card gets a dimmed one — sharing the full signal spine made pointing at any
   card read as "this is the current stop". `--locked` is declared second so a
   card that is both hovered and active still reads as active. */
.rcard--focused .rcard__spine {
  background: var(--signal-dim);
  box-shadow: none;
}
.rcard--locked .rcard__spine {
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
}

.rcard__body { min-width: 0; }
.rcard__top {
  display: flex; align-items: center; gap: 9px;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ghost);
  margin-bottom: 4px;
}
.rcard__topAddr { color: var(--signal); white-space: nowrap; }
.rcard__topSep  { width: 12px; height: 1px; background: var(--hairline); flex: none; }
.rcard__topIdx  { color: var(--ghost); white-space: nowrap; }

.rcard__name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-d5-card);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--bone);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcard__name em {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--signal);
}
.rcard--locked .rcard__name { color: #fff; }

.rcard__sub {
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  color: var(--ash);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rcard__open {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
.rcard:hover .rcard__open,
.rcard--locked .rcard__open { color: var(--signal); }
.rcard__open--forming { color: var(--ghost, #5b6478) !important; letter-spacing: var(--tr-caps); }
.rcard:focus-visible { outline: 1.5px solid var(--signal, #00f0c8); outline-offset: 4px; }
.rcard__arr { transition: transform var(--d-base) var(--e-out); }
.rcard:hover .rcard__arr,
.rcard--locked .rcard__arr { transform: translateX(6px); }

/* ── SHOW-ALL passage gate ──────────────────────────────────
   The final reel stop. Built to share the exact footprint of .rcard
   (so it lands cleanly inside the static lens), but laid out as a
   gateway plate: top progress rail, chrome bar, a 12-node constellation,
   and a footer hosting the primary KeyButton. */
.lp-workReel__slot--showAll {
  flex: 0 0 var(--work-showall-slot, 52vw);
}
.showAllGate {
  position: relative;
  width: min(540px, 50vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 18px 20px 19px 16px;
  text-align: left;
  background: linear-gradient(180deg, rgba(11, 15, 23, 0.90) 0%, rgba(6, 8, 14, 0.90) 100%);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-top: 1px solid var(--signal-dim);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 22px 56px -24px rgba(0, 0, 0, 0.88);
  transition: opacity 380ms var(--e-out), transform 380ms var(--e-out),
              border-color var(--d-fast), box-shadow var(--d-fast);
  will-change: transform, opacity;
}
.showAllGate--locked {
  background: linear-gradient(180deg, rgba(12, 16, 25, 0.95) 0%, rgba(7, 9, 16, 0.95) 100%);
  box-shadow:
    0 26px 66px -22px rgba(0, 0, 0, 0.92),
    0 0 80px -26px var(--signal);
}

/* signal spine */
.showAllGate__spine {
  width: 2px;
  align-self: stretch;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
}

.showAllGate__body { min-width: 0; }
.showAllGate__overline {
  font-family: var(--ff-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 5px;
}
.showAllGate__name {
  font-family: var(--ff-display);
  font-size: var(--fs-d5);
  line-height: var(--lh-solid);
  letter-spacing: var(--tr-display);
  font-weight: 400;
  color: var(--bone);
  margin: 0;
}
.showAllGate__name em {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--signal);
}
.showAllGate__sub {
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  line-height: var(--lh-mono);
  color: var(--ash);
  margin-top: 6px;
  max-width: 42ch;
  text-wrap: pretty;
}
.showAllGate__key {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

/* ── lens vignette (fades edges of the reel) ────────────── */
.lp-workReel__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      var(--void) 0%,
      rgba(4, 6, 13, 0.55) 4%,
      transparent 22%,
      transparent 78%,
      rgba(4, 6, 13, 0.55) 96%,
      var(--void) 100%);
  z-index: 4;
}

/* ── top-right stop buttons ────────────────────────────── */
.lp-workReel__stops {
  position: absolute;
  top: var(--gutter-top);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 5;
}
.lp-workReel__stopBtn {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  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);
}
.lp-workReel__stopBtn:hover { color: var(--bone); }
.lp-workReel__stopDot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--shadow);
  transition: background var(--d-fast), box-shadow var(--d-fast);
}
.lp-workReel__stopBtn.is-active { color: var(--signal); }
.lp-workReel__stopBtn.is-active .lp-workReel__stopDot {
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
}

/* ── progress fill at very bottom ─────────────────────── */
.lp-workReel__progressRail {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline);
  z-index: 5;
}
.lp-workReel__progressFill {
  width: 100%;
  height: 1px;
  background: var(--signal);
  box-shadow: 0 0 6px var(--signal);
  transform-origin: left center;
  transition: transform 60ms linear;
  will-change: transform;
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1100px) {
  .lp-workReel__stops { display: none; }
  .rcard { width: 64vw; }
  .lp-workReel__slot { padding: 0 18px; }
  .lp-workReel__slot--title { padding-left: 32px; }
  /* Breakpoint refits of the nowrap --fs-d1-nowrap title, not ramp drift. */
  .lp-workReel__title { font-size: clamp(56px, 10vw, 120px); }
}
@media (max-width: 700px) {
  /* Smaller carousel: 70vw cards in 78vw slots so neighbours peek through. */
  .rcard { width: 70vw; }
  .lp-workReel__slot { padding: 0 10px; }
  /* The show-all gate fits its 96vw slot. */
  .showAllGate { width: 88vw; gap: 14px; padding: 16px 14px 17px 12px; }
  .showAllGate__sub { display: none; }
  .lp-workReel__title { font-size: clamp(38px, 12.5vw, 54px); }
}

/* ── ABOUT node-card (board-flight lead-in) ─────────────────────────
   The 0x00 node, presented as one more reel card. Fixed, centred in the
   viewport; it resolves in the lens, then scales + blurs + fades away as
   the universe particles stream out into the PCB trace beneath it. Shares
   the work reel's card vocabulary (chrome bar / art / footer). */
.aboutNode-layer {
  position: fixed;
  inset: 0;
  /* below the board layer (bf-layer z-4) so the live board appears through
     the card field before it grows into the viewport */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: opacity;
}

/* ── universe NODE card (0x00 · About) — matches the drifting tile cards:
      portrait, teal corner brackets, compact mono header, a dotted model
      field (the live mini-PCB renders here), big name bottom-left. ── */
.uNode {
  position: relative;
  width: min(384px, 82vw);
  aspect-ratio: 3 / 4;
  max-height: 78vh;
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.96) 0%, rgba(9, 11, 18, 0.96) 100%);
  border: 1px solid #232a3a;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 44px 110px -30px rgba(0, 0, 0, 0.82),
    0 0 70px -26px rgba(0, 240, 200, 0.5);
  will-change: transform;
}
/* corner brackets */
.uNode__cnr {
  position: absolute;
  width: 15px; height: 15px;
  border: 1.5px solid var(--signal, #00f0c8);
  pointer-events: none;
}
.uNode__cnr--tl { top: 11px; left: 11px;  border-right: 0; border-bottom: 0; }
.uNode__cnr--tr { top: 11px; right: 11px; border-left: 0;  border-bottom: 0; }
.uNode__cnr--bl { bottom: 11px; left: 11px;  border-right: 0; border-top: 0; }
.uNode__cnr--br { bottom: 11px; right: 11px; border-left: 0;  border-top: 0; }

.uNode__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 26px 0;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wider);
}
.uNode__headL { display: flex; flex-direction: column; gap: 3px; }
.uNode__id {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ghost); text-transform: uppercase;
}
.uNode__sq { width: 6px; height: 6px; background: var(--signal); box-shadow: 0 0 7px var(--signal); }
.uNode__year { color: var(--ash); padding-left: 13px; text-transform: uppercase; }
.uNode__headR {
  display: flex; flex-direction: column; gap: 3px;
  text-align: right; color: var(--ghost);
}

/* the model field — dotted graph; the live board is composed through this rect */
.uNode__field {
  position: relative;
  margin: 16px 26px;
  min-height: 0;
  background-color: transparent;
  background-image: radial-gradient(rgba(120, 140, 175, 0.16) 1px, transparent 1px);
  background-size: 19px 19px;
  background-position: 2px 2px;
}

.uNode__foot {
  display: flex; flex-direction: column; gap: 9px;
  padding: 0 26px 26px;
}
.uNode__name {
  font-family: var(--ff-display);
  font-size: var(--fs-d4-node);
  line-height: var(--lh-tight); letter-spacing: var(--tr-display);
  font-weight: 400; color: var(--bone); margin: 0;
}
.uNode__name em { font-style: normal; color: var(--signal); }
.uNode__sub {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta); line-height: var(--lh-mono); letter-spacing: var(--tr-mono);
  color: var(--ash); text-wrap: pretty;
}
.uNode__cue {
  display: flex; align-items: center; gap: 9px;
  margin-top: 3px;
  font-family: var(--ff-mono);
  font-size: var(--fs-nano); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--ghost);
}
.uNode__cueLine { width: 24px; height: 1px; background: var(--signal); }

@media (max-width: 560px) {
  .uNode { width: 86vw; }
  .uNode__head { padding: 18px 20px 0; }
  .uNode__field { margin: 13px 20px; }
  .uNode__foot { padding: 0 20px 22px; }
}