/* Edge words converge / spread. A heading made of rows of words (2 per row reads best) whose rows animate their
   WIDTH: with space-between, a row at full width throws its words to the far edges, a row at content width
   holds them together in the middle.
   converge (Leome home hero): words rise in at the edges, the rows close in, a picture grows out between them.
   spread (Leome about/contact titles): words rise in together in the middle, then the row throws them apart.
   Without JS (or once played) the page shows the final state; part.js sets the start state before first paint
   when it is loaded in <head>. Timings are data- attributes, see part.js. */
.ewc {
  --ewc-size: clamp(2.6rem, 6.1vw, 5.5rem);   /* source: 5.5em of a 100vw/90 unit = 88px at 1440 */
  --ewc-line: 1.2;
  --ewc-tracking: -.02em;
  --ewc-gap: 1.1em;                            /* minimum space between the two words of a row (source 1.1em) */
  --ewc-row-gap: .5em;                         /* space between rows and the picture (in heading ems) */
  --ewc-media-w: 32rem;                        /* picture box (source 32em = 512px at 1440, 3:2) */
  --ewc-media-ratio: 3 / 2;

  display: flex; flex-direction: column; align-items: center;
  gap: var(--ewc-row-gap);
  width: 100%;
  font-size: var(--ewc-size); line-height: var(--ewc-line); letter-spacing: var(--ewc-tracking);
}
.ewc__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ewc-gap);
  width: max-content; max-width: 100%;
  box-sizing: border-box;
}
.ewc[data-ewc-mode="spread"] .ewc__row { width: 100%; }
.ewc__word { display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; margin: 0; font: inherit; }
.ewc__word > span { display: inline-block; will-change: transform; }

.ewc__media { container-type: inline-size; position: relative; width: min(var(--ewc-media-w), 100%); aspect-ratio: var(--ewc-media-ratio); font-size: 1rem; }
.ewc__wipe { position: absolute; inset: 0; margin: 0 auto; width: 100%; overflow: hidden; }
.ewc__wipe > * { position: absolute; top: 0; left: 50%; height: 100%; width: 100cqw; max-width: none; transform: translateX(-50%); object-fit: cover; }

.ewc__foot { display: flex; justify-content: space-between; gap: 1em; width: 100%; overflow: hidden; font-size: .75rem; letter-spacing: normal; line-height: 1.3; }
.ewc__foot > * { display: inline-block; will-change: transform; }

/* start state, only while part.js is running and the part hasn't finished (html.ewc-js is set from <head>) */
html.ewc-js .ewc:not(.is-done) .ewc__word > span,
html.ewc-js .ewc__foot:not(.is-done) > * { transform: translateY(100%); }
html.ewc-js .ewc[data-ewc-mode="converge"]:not(.is-done) .ewc__row { width: 100%; }
html.ewc-js .ewc[data-ewc-mode="spread"]:not(.is-done) .ewc__row { width: max-content; }
html.ewc-js .ewc:not(.is-done) .ewc__wipe { width: 0; }