/* el-cruce — three words line up on the letter they share.
   Base layout (grid, dock column, notes, coda) lives in styles.css and is what no-JS
   readers get: words at 900 in their natural position, notes visible, no axis.
   .words.is-aligned  — the script measured the shared 'd' (any motion mode).
   .words.is-crossed  — the alignment is complete (reversible).
   .words.has-crossed — the alignment completed once (the coda stays).
   .row.is-reacted    — the row reached 900 once (its note stays).
   Hidden states and transitions are gated by html.fx-cruce. */

/* ---------- The axis ---------- */
.axis { display: none; }

.words.is-aligned .axis {
  display: block;
  position: absolute;
  z-index: 0;
  left: var(--axis, 0px);
  top: var(--axis-top, 0px);
  width: 1px;
  height: var(--axis-h, 0px);
  margin-left: -0.5px;
  background: var(--blue);
  transform-origin: 50% 0;
  transform: scaleY(0);
  pointer-events: none;
}

.words.is-aligned.is-crossed .axis { transform: scaleY(1); }

/* Words and notes sit above the axis: the line threads behind each 'd'. */
.words.is-aligned .row-word,
.words.is-aligned .row-note {
  position: relative;
  z-index: 1;
}

/* Where the axis crosses a note, the note cuts a clean gap in it. The mask runs an
   em past the last glyph, so an axis that falls just after a full stop is cut the
   same way instead of grazing it like a caret. */
.words.is-aligned .row-note {
  justify-self: start;
  padding-inline-end: 1em;
  max-width: calc(34ch + 1em);   /* the measure stays 34ch: the mask never rewraps a note */
  background: var(--ink);
  box-shadow: 0 -0.35em 0 var(--ink), 0 0.35em 0 var(--ink);
}

/* Wide screens set the notes in their own column, clear of the axis: no extra mask
   that would only make them wrap earlier. */
@media (min-width: 1600px) {
  .words.is-aligned .row-note { padding-inline-end: 0; max-width: 34ch; }
}

/* The hairlines sit above the note masks: on short screens a row's padding is
   thinner than the mask, which otherwise erased the next row's rule under the note. */
.words.is-aligned .row::before { z-index: 2; }

/* ---------- The shared letter ---------- */
.words.is-crossed .x { color: var(--blue); }
.words.is-crossed .is-accent .x { color: var(--white); }

/* ---------- The coda settles on the axis ---------- */
@media (min-width: 720px) {
  .words.is-aligned .words-coda {
    margin-left: var(--axis-in, 0px);
    max-width: min(30ch, 100% - var(--axis-in, 0px));
  }
}

/* ---------- Enhanced (motion) states ---------- */
html.fx-cruce .row-word > span:not(.sr-only) { will-change: transform; }

html.fx-cruce .words.is-aligned .axis {
  transition: transform var(--t-short) var(--ease-leave);
}

html.fx-cruce .words.is-aligned.is-crossed .axis {
  transition: transform var(--t-long) var(--ease-react);
}

html.fx-cruce .words .x {
  transition: color 0.15s var(--ease-leave);
}

html.fx-cruce .words.is-crossed .x {
  transition: color var(--t-micro) var(--ease-react);
}

html.fx-cruce .row-note {
  transition:
    opacity var(--t-short) var(--ease-react),
    transform var(--t-short) var(--ease-react);
}

html.fx-cruce .row:not(.is-reacted) .row-note {
  opacity: 0;
  transform: translateY(8px);
}

html.fx-cruce .words-coda {
  transition:
    opacity var(--t-short) var(--ease-react) 0.15s,
    transform var(--t-short) var(--ease-react) 0.15s;
}

html.fx-cruce .words:not(.has-crossed) .words-coda {
  opacity: 0;
  transform: translateY(12px);
}

/* ---------- Releases: reduced motion switched on mid-session, and print ---------- */
@media print, (prefers-reduced-motion: reduce) {
  html.fx-cruce .row:not(.is-reacted) .row-note,
  html.fx-cruce .words:not(.has-crossed) .words-coda {
    opacity: 1;
    transform: none;
  }

  html.fx-cruce .row::before { transform: none; }

  /* Every word at its aligned position, the axis drawn. */
  html.fx-cruce .row-word > span:not(.sr-only) {
    transform: translateX(var(--end, 0px)) !important;
    will-change: auto;
  }

  html.fx-cruce .words.is-aligned .axis { transform: none; }
  html.fx-cruce .words.is-aligned .x { color: var(--blue); }
  html.fx-cruce .words.is-aligned .is-accent .x { color: var(--white); }
}