/*
 * THE WRITING.
 *
 * The letter is real HTML text, set in a script face, revealed the way a pen
 * reveals a line — left to right, with a soft leading edge, at a pace that
 * varies with the line rather than a constant tick.
 *
 * Why a soft-edged mask rather than a typewriter or a fade:
 *   - A fade makes whole words materialise at once, which no hand does.
 *   - A typewriter reveals whole glyphs, which no pen does either — a pen is
 *     halfway through the letter "m" at some point.
 *   - Sweeping a soft mask across the line reveals *within* each glyph, so
 *     strokes appear to be drawn. It is the cheapest honest approximation of
 *     handwriting that does not require per-glyph SVG paths for arbitrary text.
 */

.letter {
  position: absolute;
  /* The vertical margins are small percentages because the sheet is long — a
     margin of a tenth of *this* page would be a hand's width of blank paper. */
  inset: 2.4% 8.5% 2.4% 9.5%;
  z-index: 2;
  font-family: var(--font-script);
  /* --type-fit is stepped down by letter.js until the text fits the sheet, so
     editing letterContent.js can never overflow the paper. */
  font-size: calc(var(--type-letter) * var(--type-fit, 1));
  font-weight: 500;
  line-height: 1.62;
  color: var(--c-ink);
  opacity: var(--letter-opacity, 0);
  /* Ink soaks into the sheet instead of sitting on top of it. */
  mix-blend-mode: multiply;
  /* The reveal is visual only. The text is in the accessibility tree and
     selectable from first paint, whatever the scroll position. */
  -webkit-user-select: text;
  user-select: text;
}

.letter p {
  margin: 0 0 0.62em;
}

/*
 * Every size in the letter carries --type-fit, not just the body.
 *
 * The fitter only shrank the body, so adding a paragraph took the body down and
 * left the greeting where it was: the ratio went from 1.86x to 2.72x and the
 * hierarchy broke. letterContent.js invites you to add paragraphs freely, so the
 * whole scale has to move together when you do.
 */
.letter__greeting {
  font-size: calc(var(--type-greeting) * var(--type-fit, 1));
  font-weight: 600;
  margin-bottom: 0.5em !important;
  letter-spacing: 0.004em;
}

.letter__closing {
  margin-top: 0.85em !important;
  font-size: calc(var(--type-letter) * var(--type-fit, 1) * 1.12);
  font-weight: 600;
}

.letter__signature {
  margin-top: 0.15em !important;
  font-size: calc(var(--type-signature) * var(--type-fit, 1));
  font-weight: 600;
  text-align: right;
  padding-right: 6%;
  /* The line inside is shrink-wrapped to its ink (see .hw-line), so it has to be
     pushed right rather than relying on text-align — otherwise the signature's
     pen sweep starts at the left margin and spends most of its time crossing
     blank paper before reaching the first letter. */
}

.letter__signature .hw-line {
  margin-left: auto;
  /* A signature is written faster and looser than the body of a letter. */
  rotate: -1.8deg;
  opacity: 0.92;
}

/* ── the reveal ───────────────────────────────────────────────────────────── */

/*
 * One line of handwriting. `--r` is the pen's position along it, 0 to 1.
 * The mask's leading edge is deliberately soft and slightly wider than a stroke,
 * which reads as ink flowing rather than as a wipe.
 */
/*
 * `width: max-content` is doing something load-bearing here.
 *
 * The mask below sweeps a percentage of this element's box. As a full-width
 * block, that box was the whole measure regardless of how much ink was on the
 * line — so the pen's travel distance was constant while its duration scaled
 * with the number of characters, and the speed came out as 1/fill. A full body
 * line was written over 75px of scroll and the signature over 4.5px: the
 * greeting, the closing and the signature — the three lines that matter most —
 * all appeared in a single wheel notch.
 *
 * Shrink-wrapping the box to the ink makes distance scale with the text too, so
 * every line is written at the same characters-per-second.
 */
.hw-line {
  display: block;
  width: max-content;
  max-width: 100%;
  --r: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(var(--r) * 108% - 9%),
    rgba(0, 0, 0, 0.35) calc(var(--r) * 108% - 3%),
    transparent calc(var(--r) * 108% + 1.5%)
  );
  mask-image: linear-gradient(
    to right,
    #000 calc(var(--r) * 108% - 9%),
    rgba(0, 0, 0, 0.35) calc(var(--r) * 108% - 3%),
    transparent calc(var(--r) * 108% + 1.5%)
  );
}

/*
 * Once a line is finished the mask is dropped entirely. A static gradient still
 * costs a paint on every ancestor change; `none` costs nothing, and there are a
 * lot of finished lines by the end.
 */
.hw-line.is-written {
  -webkit-mask-image: none;
  mask-image: none;
}

/*
 * Human irregularity. Each line carries a seeded, stable offset — a real hand
 * does not hold a perfect baseline, but it also does not jitter differently on
 * every reload, which is what makes most "handwriting" effects feel synthetic.
 */
.hw-line {
  transform: translateY(var(--hw-dy, 0px)) rotate(var(--hw-rot, 0deg));
  transform-origin: 0 50%;
}

/* Ink density varies stroke to stroke as the nib loads and unloads. */
.hw-word {
  opacity: var(--ink, 1);
}

/* ── the page act ─────────────────────────────────────────────────────────────
   Once the sheet fills the viewport it stops being a prop and becomes the page,
   and the writing stops being sized against a prop's width. Full-bleed paper
   with edge-to-edge text would be a wall, so the ink keeps a reading column:
   centred, capped at a hand-written measure, with margins that are paper rather
   than table. The sizes are viewport-keyed clamps — the sheet's width no longer
   says anything about how far away the page is, the screen does.

   Nothing is inked yet when this layout takes effect (the match cut happens on
   a blank sheet, the writing starts after), so the reflow is invisible. */

.is-page .letter {
  inset: 1.4% max(8%, calc(50% - 21rem)) 1.8%;
  font-size: clamp(19px, 12px + 1.55vmin, 30px);
  line-height: 1.66;
}

.is-page .letter__greeting {
  font-size: clamp(27px, 16px + 2.5vmin, 44px);
}

.is-page .letter__closing {
  font-size: clamp(21px, 13px + 1.75vmin, 33px);
}

.is-page .letter__signature {
  font-size: clamp(25px, 15px + 2.3vmin, 41px);
}

/* ── reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hw-line {
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }
}

/* ── selection ────────────────────────────────────────────────────────────── */

::selection {
  background: hsl(14 45% 62% / 0.28);
  color: var(--c-ink);
}