/* ============================================================
   THE THREAD — one line down the whole page.

   The export draws three separate curves: one in the hero, one in
   "when life happens", one in the closing screen. Each stops at its
   own section's edge and nine of the twelve chapters have no line at
   all, so they read as three unrelated flourishes rather than a path
   you are following. thread.js removes all three and draws a single
   hairline instead, from the top of the page down into the closing
   signature, where it flattens out and writes the words.

   Nothing here positions the line: every coordinate is measured from
   the laid-out document. This file only says how it looks.
   ============================================================ */

main {
  /* the overlay is absolutely positioned against the whole document */
  position: relative;
}

.thread {
  /* One slice per chapter: absolutely placed, sized to its own band, and left
     with the SVG default of clipping to its own viewport so neighbouring
     slices cannot paint over each other. thread.js sets top and height. */
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.thread path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* the SVG is stretched to the document box, so the stroke must not be */
  vector-effect: non-scaling-stroke;
}

/* A section's own background paints before any positioned element, so the
   overlay would otherwise sit on top of the copy. Content is lifted, not the
   thread lowered: at a negative z-index it would disappear behind the section
   backgrounds instead. Passing behind a photo or a phone mock-up is the point. */
.thread-above {
  position: relative;
  z-index: 1;
}

/* The stroke colour is per slice, set from the chapter's own background, so
   the line changes shade on exactly the pixel row the paper does. */
.thread--lane .lane { stroke-width: 1.3; }
@media (max-width: 899px) { .thread--lane .lane { stroke-width: 1.6; } }

/* The pen's tip. Positioned by thread.js from the lane's own geometry; it sits
   at z-index 0 with the line, so it passes behind copy and mock-ups the way
   the line does. */
.thread-nib {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: #b8873a;
  box-shadow: 0 0 0 4px rgb(184 135 58 / .16);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
  will-change: transform;
}
.thread-nib.is-on { opacity: 1; }

/* The last stretch, where the line stops being decoration and becomes
   handwriting. Both paths live in one SVG so they can share the gradient that
   warms the hairline's cream into the signature's own gold over the run-in: by
   the time the line reaches the first letter it is already the colour of the
   words it is about to write. */
.thread--hand .tail,
.thread--hand .write {
  stroke: url(#d1-thread-warm);
  stroke-width: 1.8;
}

.closing-script {
  /* The export tags this `script`, which both carries the Sacramento face and
     opts the phrase into a generic wipe on a timer of its own. The unpacker
     takes that class off so the line can own the reveal — see the "closing
     script" patch in scripts/site/unpack-export.js — so the face is restated
     here.

     No clip by default: if the overlay never runs, or never gets as far as
     measuring, the sentence is simply there. It is the last thing the page
     says; it does not get to depend on JavaScript. */
  font-family: Sacramento, cursive;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Set only once thread.js has measured the line box and knows where the words
   begin. Reduced motion and the page's own motion toggle keep it at `none`. */
.closing-script.thread-written {
  clip-path: var(--script-clip, none);
}