/* ============================================================
   COMPONENT — Mission, one drawn line  (.ab2-pivot .flow)
   From Charles's standalone handoff, 2026-08-19.

   Layers on assets/css/about-v2.css, which already owns the
   section's type and grid (.ab2-big, .ab2-pillars, .ab2-pn,
   .ab2-pillar h3/p). This file adds the drawing, the staged
   reveal it drives, and the centred close.

   THE IDEA
     One continuous stroke: a tangle that unwinds into a straight
     line and ends in a lit bulb. Pillar I lands while the tangle
     is still unwinding; pillar II lands as the bulb lights. The
     drawing is the argument, not decoration beside it.

   CONTRACT
     Tokens   --ink --ink-soft --muted --muted-2 --line-2
              --serif --fs-support
     Markup   section.ab2-pivot > .wrap
                > h2.ab2-big
                > .flow[aria-hidden] > svg > path.line + circle.bulb + path.ray *5
                > .ab2-pillars > .ab2-pillar *2
                > blockquote.ab2-quote
     Built by tools/build.py :: mission_flow()
     JS       assets/js/mission-flow.js

   PROGRESSIVE ENHANCEMENT — READ BEFORE EDITING
     Every hidden-until-revealed rule is nested under .anim, and
     .anim is added BY THE SCRIPT. With no JS the section renders
     complete and static: line drawn, bulb lit, pillars and quote
     at full opacity. The handoff hid them on the bare class, so a
     script failure left the mission statement blank — on the page
     whose entire job is the mission statement.
   ============================================================ */

/* ---- The drawing -------------------------------------------- */
.flow {
  margin: clamp(46px, 5vw, 76px) 0 clamp(8px, 1.4vw, 20px);
  position: relative;
}
.flow svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--ink);
}

/* Resting state is the FINISHED drawing. .anim rewinds it. */
.ab2-pivot.anim .flow .line { stroke-dasharray: 1; stroke-dashoffset: 1 }
.ab2-pivot.anim .flow .bulb {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}
.ab2-pivot.anim .flow .ray {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.ab2-pivot.anim.on .flow .line { animation: flDraw 2.4s cubic-bezier(.45,.05,.25,1) forwards }
.ab2-pivot.anim.on .flow .bulb { animation: flPop .5s 2.15s cubic-bezier(.3,1.5,.5,1) forwards }
/* Staggered by nth-child, not nth-of-type. The rays are <path> and so is the
   line, so nth-of-type counted the line as the first path — every ray was
   offset by one and the fifth never got an override, so it fired 320ms
   BEFORE its neighbours instead of last. Children are: line(1), bulb(2),
   rays(3-7). */
.ab2-pivot.anim.on .flow .ray { animation: flGlow 3s ease-in-out infinite }
.ab2-pivot.anim.on .flow .ray:nth-child(3) { animation-delay: 2.50s }
.ab2-pivot.anim.on .flow .ray:nth-child(4) { animation-delay: 2.58s }
.ab2-pivot.anim.on .flow .ray:nth-child(5) { animation-delay: 2.66s }
.ab2-pivot.anim.on .flow .ray:nth-child(6) { animation-delay: 2.74s }
.ab2-pivot.anim.on .flow .ray:nth-child(7) { animation-delay: 2.82s }

@keyframes flDraw { to { stroke-dashoffset: 0 } }
@keyframes flPop  { to { transform: scale(1); opacity: 1 } }
@keyframes flGlow { 0%, 64%, 100% { opacity: .24 } 30% { opacity: 1 } }

/* ---- Pillars, timed to the two halves of the drawing -------- */
/* The drawing sits between the headline and the pillars, so the
   pillars pull up against it rather than keeping about-v2's gap. */
.ab2-pivot .ab2-pillars { margin-top: clamp(18px, 2vw, 26px) }

/* The transition lives on the REVEAL, not on the resting state. Declaring it
   alongside opacity:0 meant that adding .anim animated the pillars from
   visible to hidden — a fade-out of the mission statement before it faded
   in. Snapping to hidden and transitioning only into view is what reads as
   one motion. */
.ab2-pivot.anim .ab2-pillar > * { opacity: 0; transform: translateY(14px) }
.ab2-pivot.anim.on .ab2-pillar > * {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

/* I arrives while the tangle unwinds; II as the bulb lights. */
.ab2-pivot.anim.on .ab2-pillar:first-child > *:nth-child(1) { transition-delay: .90s }
.ab2-pivot.anim.on .ab2-pillar:first-child > *:nth-child(2) { transition-delay: .98s }
.ab2-pivot.anim.on .ab2-pillar:first-child > *:nth-child(3) { transition-delay: 1.06s }
.ab2-pivot.anim.on .ab2-pillar:last-child  > *:nth-child(1) { transition-delay: 2.20s }
.ab2-pivot.anim.on .ab2-pillar:last-child  > *:nth-child(2) { transition-delay: 2.28s }
.ab2-pivot.anim.on .ab2-pillar:last-child  > *:nth-child(3) { transition-delay: 2.36s }

/* ---- The close ---------------------------------------------- */
/* Centred, and without the rule the .ab-quote treatment puts down
   the left edge — the line above is doing that job here. */
.ab2-pivot .ab2-quote {
  margin-top: clamp(58px, 6.4vw, 96px);
  border-left: 0;
  padding: 0;
  text-align: center;
}
.ab2-pivot .ab2-quote p {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0 auto;
}
.ab2-pivot .ab2-quote cite { margin-top: 20px }

.ab2-pivot.anim .ab2-quote { opacity: 0 }
.ab2-pivot.anim.on .ab2-quote { opacity: 1; transition: opacity .8s 2.7s ease }

/* ---- Replay -------------------------------------------------- */
/* The script makes the section replay on click. Only advertise
   that with a pointer once the script is actually driving it. */
.ab2-pivot.anim { cursor: pointer }

/* ---- Reduced motion ----------------------------------------- */
/* Show the finished drawing and the full text immediately. The
   script also skips the replay binding, so nothing here re-runs. */
@media (prefers-reduced-motion: reduce) {
  .ab2-pivot.anim .flow .line { stroke-dashoffset: 0 }
  .ab2-pivot.anim .flow .bulb { transform: none; opacity: 1 }
  .ab2-pivot.anim .flow .ray  { opacity: .85 }
  .ab2-pivot.anim .flow .line,
  .ab2-pivot.anim .flow .bulb,
  .ab2-pivot.anim .flow .ray,
  .ab2-pivot.anim.on .flow .line,
  .ab2-pivot.anim.on .flow .bulb,
  .ab2-pivot.anim.on .flow .ray { animation: none !important }
  .ab2-pivot.anim .ab2-pillar > *,
  .ab2-pivot.anim .ab2-quote {
    opacity: 1; transform: none; transition: none;
  }
  .ab2-pivot.anim { cursor: auto }
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 820px) {
  /* about-v2.css already stacks .ab2-pillars here. The drawing is
     940 units wide and scales with the column, so it only needs
     its vertical rhythm tightening. */
  .flow { margin: clamp(30px, 6vw, 46px) 0 clamp(4px, 1vw, 12px) }
}