/* ==========================================================================
   Features — Manifesto band (shared)
   ==========================================================================
   The page's one full stop, and the only place it states the problem. The hero
   promised; this band shows what a call costs when nothing catches it.

   The three things a call leaves behind are set as an open row, marked in the
   family's colour code — rose for the two that are lost outright, violet for
   the coach's word. The copy beside them says they are lost; every section
   after this one is what brings them back. That
   contrast is the whole argument, which is why the band carries no picture and
   no metaphor, only type, three hairlines and one arrival, left to right.

   Staged by five pages of the family — every one that opens on a problem
   before it shows the work. The copy comes from the page's own namespace, and
   so does the one thing that varies: which clause the statement turns on.
   ========================================================================== */

.feat-manifesto {
  --fmn-beat: 150ms;

  /* The paint, and which of the statement's two clauses wears it. See the two
     spans further down; a page moves it by re-declaring these six values. */
  --fmn-paint: linear-gradient(100deg, var(--feat-violet-soft), #5a74ff 52%, #68d9ee);
  --fmn-accent-bg: var(--fmn-paint);
  --fmn-accent-ink: transparent;
  --fmn-accent-bleed: 0.05em;
  --fmn-tail-bg: none;
  --fmn-tail-ink: inherit;
  --fmn-tail-bleed: 0em;

  position: relative;
  text-align: center;
}

/* A wide, shallow pool of light under the statement — no edge, no card. */
.feat-manifesto::before {
  content: '';
  position: absolute;
  inset: 12% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle closest-side at 50% 46%,
    rgba(var(--feat-violet-rgb), 0.13),
    transparent
  );
}

.feat-manifesto__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feat-manifesto__stamp {
  margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem);
}

/* --- The statement -------------------------------------------------------- */

.feat-manifesto__line {
  max-width: 18ch;
  margin: 0;
  font-size: var(--feat-title-manifesto-size);
  font-weight: 850;
  letter-spacing: -0.058em;
  line-height: 0.92;
  text-wrap: balance;
}

.feat-manifesto__past,
.feat-manifesto__now {
  display: block;
}

/* The call is behind us: it has stopped speaking, but it is not switched off —
   a hair under the second clause, never dimmed into disabled-looking grey. */
.feat-manifesto__past {
  color: rgba(233, 231, 250, 0.5);
}

.feat-manifesto__now {
  color: var(--feat-text);
}

/* The statement turns on ONE of its two clauses, and that clause is painted in
   the family gradient. Which one is the page's own call — most state the
   problem in the lead clause ("Rien n'a été appris"), one states it in the
   trailing one ("L'essentiel reste invisible").

   So both spans read the same three variables and the family sets the default:
   the paint on the lead clause, plain ink on the tail. A page whose sentence
   lands the other way round swaps the six values from its own tuning sheet —
   no second copy of the gradient, and no page named in this sheet. */
.feat-manifesto__accent {
  padding-inline: var(--fmn-accent-bleed);
  margin-inline: calc(-1 * var(--fmn-accent-bleed));
  color: var(--fmn-accent-ink);
  background: var(--fmn-accent-bg);
}

.feat-manifesto__tail {
  padding-inline: var(--fmn-tail-bleed);
  margin-inline: calc(-1 * var(--fmn-tail-bleed));
  color: var(--fmn-tail-ink);
  background: var(--fmn-tail-bg);
}

/* MUST stay after the two rules above: `background` is a shorthand and resets
   `background-clip` to border-box, which would paint the gradient as a block
   behind the words instead of inside them. */
.feat-manifesto__accent,
.feat-manifesto__tail {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- The debrief ---------------------------------------------------------- */

.feat-manifesto__digest {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  margin: clamp(2.6rem, 5vw, 3.8rem) 0 0;
  list-style: none;
}

.fmn-item {
  --fmn-cue: calc(var(--item) * var(--fmn-beat));
  /* Neutral default: an item that ships without a colour modifier still draws
     its ring and glyph. Without it, `color-mix()` would resolve against an
     undefined property, the border declaration would be dropped altogether,
     and the mark would silently vanish. */
  --fmn-mark: var(--feat-muted);

  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding-block: 0.4rem;
  padding-inline: clamp(1.2rem, 3vw, 2.6rem);
  color: var(--feat-body);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.35;
  text-align: left;
  transition:
    opacity 620ms ease-out var(--fmn-cue),
    translate 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--fmn-cue);
}

/* The rules belong to the list, not to the items: only the gaps get one. */
.fmn-item + .fmn-item {
  border-left: 1px solid var(--feat-line);
}

/* Each slot names the thing the call left behind, in the family's own code:
   rose for what was lost, violet for the coach's word (see Tokens.css). The
   first two slots are both losses on every page that uses this band — what
   worked is forgotten, the miss is never seen — so they carry the same mark;
   a mint tick there read as a win and inverted the sentence. Losses read red,
   not amber — amber is the family's "to fix later" marker, and a lost sale is
   not a nuance. One custom property carries the whole state, so the ring and
   its glyph can never drift apart. */
.fmn-item--missed {
  --fmn-mark: var(--feat-rose);
}

.fmn-item--advice {
  --fmn-mark: var(--feat-violet-soft);
}

.fmn-item__mark {
  display: grid;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--fmn-mark) 52%, transparent);
  border-radius: 50%;
  color: var(--fmn-mark);
  place-items: center;
}

.fmn-item__mark svg {
  width: 0.74rem;
  height: 0.74rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Revealed is the default so the band reads complete without JavaScript; the
   observer only ever takes it away (see the performance.css contract). */
.feat-manifesto__digest.scroll-observer-prepared:not(.is-visible) .fmn-item {
  opacity: 0;
  translate: 0 0.6rem;
  transition-delay: 0s;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
  .feat-manifesto__digest {
    flex-direction: column;
    align-items: center;
  }

  .fmn-item {
    justify-content: flex-start;
    width: min(100%, 24rem);
    padding: 0.85rem 0;
  }

  .fmn-item + .fmn-item {
    border-top: 1px solid var(--feat-line);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .feat-manifesto__line {
    max-width: 14ch;
    font-size: var(--feat-title-manifesto-size-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-manifesto__digest.scroll-observer-prepared:not(.is-visible) .fmn-item {
    opacity: 1;
    translate: 0 0;
  }

  .fmn-item {
    transition: none;
  }
}

/* Forced colours remove the gradient these words are painted with, and the
   glyph under it is transparent. Give the system its own ink back.

   Stated on the two spans rather than through the variables above, and that is
   deliberate: a page moves the paint by re-declaring those variables on a
   selector of its own, which would outrank anything written here. Declaring
   `color` directly cannot be outranked that way — a page tunes the paint, never
   the high-contrast fallback, so whichever clause it painted stays legible. */
@media (forced-colors: active) {
  .feat-manifesto__accent,
  .feat-manifesto__tail {
    color: CanvasText;
    background: none;
  }
}