/* text.css — live HTML text layers (they replaced the PSD's rasterised text cutouts).
 *
 * GEOMETRY CONTRACT
 * Every text line is an ordinary .plx layer, so it inherits the whole motion stack
 * (.plx parallax → .jny journey scrub → .enter entrance → .reveal scroll reveal)
 * with no special-casing anywhere else.
 *
 * The .plx box for a text line is NOT the glyph bounding box (as it was for the image
 * cutouts) — it is the *line box*: exactly one em tall, full stage width, so the line
 * centres horizontally and its baseline lands at a predictable offset from the box top:
 *
 *     baselineFromBoxTop = font-size x (1 + ascent - descent) / 2      (line-height: 1)
 *
 * build_page.py owns that arithmetic: give it a baseline + size in canvas px and it
 * emits the `top` / `height` percentages. Tune type by editing TEXT in the generator,
 * never by hand-editing index.html.
 *
 * Sizes are `cqw` against the .stage container, so type scales with the canvas on
 * every viewport instead of needing breakpoints. */

.plx p.ly.tx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-size: calc(var(--fs, 4) * 1cqw);
  letter-spacing: var(--tk, 0em);
  /* letter-spacing also trails the LAST glyph, which pulls a centred line half a
     step left. Push it back by half so the optical centre is the true centre. */
  text-indent: calc(var(--tk, 0em) / 2);
  color: var(--ink, #fef1ac);
  /* Real text should behave like text (the image cutouts could not be selected). */
  -webkit-user-select: text;
  user-select: text;
}

/* Type roles — one per face in the source artwork (see fonts.css / FONTS.md). */
/* Cormorant ships old-style figures by default; build_fonts.py rewires the digit
   codepoints to the lining set, so the dates need no font-variant-numeric here. */
.tx--roman  { font-family: "Cormorant Garamond", Cormorant, Garamond, Georgia, serif; }
.tx--engrav { font-family: "Crimson Text", Garamond, Georgia, "Times New Roman", serif; }
.tx--script { font-family: "Allura", "Snell Roundhand", cursive; }
.tx--callig { font-family: "Mrs Saint Delafield", "Snell Roundhand", cursive; }

/* The source art sets these lines in caps. Keep the markup in natural case (so the
   copy stays readable/translatable and screen readers don't spell it out) and let
   CSS do the casing. Safe here — neither serif is a small-caps-only face. */
.tx--caps { text-transform: uppercase; }

/* True small caps (Cormorant Garamond ships smcp) for the month line. */
.tx--smallcaps { font-variant-caps: small-caps; }

/* Per-stage ink colour, sampled from the original PSD cutouts. */
.stage--slide2 .tx { --ink: #684326; }
.stage--slide3 .tx { --ink: #fef1ac; }

/* --- Gold sheen sweep ----------------------------------------------------- *
 * The image cutouts got a `.sheen` overlay masked by the glyph alpha. Live text
 * uses background-clip:text instead: same moving highlight, no mask image.
 *
 * Deliberately limited to the engraved CAPS lines. background-clip:text shears ink
 * that overflows the inline box, which is exactly what a script face's swashes do —
 * so the script lines keep their flat ink and never risk a clipped tail.
 *
 * The gradient must ALWAYS cover the glyphs: with -webkit-text-fill-color:transparent
 * any glyph the background image doesn't reach paints as nothing at all (that bug ate
 * the "UTK" of UTKARSH the first time round). So the strip is 3x the box and
 * background-position only travels 100% -> 0% — percentage positions align the image
 * INSIDE the box and can never push it off. Both ends of the travel are flat ink; the
 * highlight exists only mid-sweep. */
.tx__sheen {
  background-image: linear-gradient(
    115deg,
    var(--ink) 40%,
    #fff6d8 47%,
    #fffdf0 50%,
    #ffe29e 53%,
    var(--ink) 60%
  );
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: background-position;
  animation: tx-sheen 8s ease-in-out infinite;
  animation-delay: var(--sheen-delay, 0s);
}

@keyframes tx-sheen {
  0%   { background-position: 100% 0; }
  /* the light crosses the glyphs early, then rests off-strip for the rest of the loop */
  22%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tx__sheen {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--ink);
  }
}

/* Fallback: no background-clip:text support → flat ink, no sweep. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .tx__sheen {
    background-image: none;
    -webkit-text-fill-color: var(--ink);
  }
}