/* ==========================================================================
   Enterprise Flow v7 — "one thread", simplified
   No pinning, no stops, no counters. Your headline on the left; on the right a
   single thread of five off-axis problems. As you scroll the page normally, a
   point of light passes down the thread: each row slides onto the axis and
   resolves from problem to capability as the light reaches it, and
   governance closes the thread.
   Everything is namespaced `ef-`. Load after transforming2.css.
   ========================================================================== */

.challenge-section.ef-section { padding: clamp(72px, 10vw, 120px) 0; }

/* ---- Split layout ------------------------------------------------------- */
.ef {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 11vw, 220px);
  align-items: center;
}

@media (max-width: 900px) {
  .ef { grid-template-columns: 1fr; gap: 48px; }
}

/* Slightly calmer type than the global case-section sizes */
.challenge-section.ef-section h2 {
  margin: 0 0 20px;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.015em;
}

.challenge-section.ef-section .eyebrow { margin: 0 0 16px; }
.challenge-section.ef-section .case-lede { margin: 0; font-size: 18px; line-height: 1.6; max-width: 46ch; }

/* ---- The thread --------------------------------------------------------- */
.ef-visual {
  --row: 80px;   /* distance between nodes */
  --ny: 17px;    /* y of each node's centre inside its row */
  position: relative;
  margin-left: 110px;
}

.ef-ledger {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-ledger li {
  --q: 0;        /* aligned onto the axis, 0 → 1 (driven by the light's approach) */
  --t: 0;        /* problem → capability crossfade */
  --cn: 0;       /* how connected to the next row */
  --lit: 0px;    /* how much of the segment below this node the light has already travelled */
  --focus: 0;    /* how close the light is to this node */
  --ox: 0px;     /* starting offset off the axis (set by JS) */
  position: relative;
  display: grid;
  align-content: start;
  height: var(--row);
  padding-left: 44px;
  box-sizing: border-box;
  transform: translateX(calc((1 - var(--q)) * var(--ox)));
}

/* node */
.ef-ledger li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(var(--ny) - 5.5px);
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, calc(.35 + .5 * var(--q)));
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--q));
  box-shadow:
    0 0 0 calc(5px * var(--q) + 4px * var(--focus)) rgba(255, 255, 255, calc(.07 + .07 * var(--focus))),
    0 0 calc(16px * var(--focus)) rgba(184, 239, 255, calc(.8 * var(--focus)));
}

/* thread segment down to the next node.
   Dim and short until both ends are aligned; bright from the top down to the light. */
.ef-ledger li::after {
  content: "";
  position: absolute;
  left: 12px;
  top: calc(var(--ny) + 8px);
  width: 1px;
  height: calc((var(--row) - 13px) * (.28 + .72 * var(--cn)));
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .92) 0,
    rgba(255, 255, 255, .92) var(--lit),
    rgba(255, 255, 255, calc(.22 + .3 * var(--cn))) var(--lit)
  );
}

.ef-ledger li:last-of-type::after { display: none; }

.ef-from,
.ef-to { grid-area: 1 / 1; }

/* the problem: small, muted, then dissolves */
.ef-from {
  padding-top: 7px;
  color: rgba(255, 255, 255, .66);
  font: 500 15px/20px var(--body, inherit);
  opacity: calc(1 - var(--t));
  filter: blur(calc(var(--t) * 6px));
}

/* the capability: larger, lighter, resolves into focus */
.ef-to {
  padding-top: 1px;
  color: #fff;
  font: 300 clamp(21px, 2.2vw, 25px)/1.1 var(--display, inherit);
  letter-spacing: .0025rem;
  opacity: var(--t);
  filter: blur(calc((1 - var(--t)) * 6px));
  transform: translateY(calc((1 - var(--t)) * 6px));
}

/* keep the story visible: what it used to be, in small caps beneath */
.ef-to::after {
  content: "was · " attr(data-was);
  display: block;
  margin-top: 7px;
  color: rgba(184, 239, 255, .66);
  font: 600 10px/1 var(--body, inherit);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* governance closes the thread */
.ef-gov { opacity: var(--q); }

.ef-gov::before {
  left: 5px;
  top: calc(var(--ny) - 7.5px);
  width: 15px;
  height: 15px;
  border-color: rgba(255, 255, 255, .9);
  background: radial-gradient(circle, #fff 0 3px, transparent 3.5px);
}

.ef-gov .ef-to::after { content: attr(data-note); }

/* the light: follows scroll, with a comet tail that lengthens with speed */
.ef-head {
  --tail: 10px;
  position: absolute;
  top: 0;
  left: 12.5px;
  z-index: 3;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.ef-head::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -.75px;
  width: 1.5px;
  height: var(--tail);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .9));
}

.ef-head.is-up::before {
  top: 0;
  bottom: auto;
  background: linear-gradient(to top, transparent, rgba(255, 255, 255, .9));
}

.ef-head::after {
  content: "";
  position: absolute;
  top: -3.5px;
  left: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(184, 239, 255, .65), 0 0 26px 8px rgba(192, 0, 255, .35);
}

/* ---- Without JavaScript: a clean static list ---------------------------- */
.ef:not(.is-ready) .ef-to { display: none; }
.ef:not(.is-ready) .ef-gov { opacity: 1; }
.ef:not(.is-ready) .ef-gov .ef-to { display: block; filter: none; opacity: 1; transform: none; }