/* ===== Heading text motions, six proposals (html[data-hmo="1".."6"]) — 2026-10-15 =====
   The big English headings (.big .lt) are scroll-scrubbed by r.js: --k runs from 1 (before) to 0 (in place) letter by letter,
   --h is the pointer lift, --d the letter's place across the word (-1..1), --r a small random angle.
   These rules outrank the adopted motion (html[data-p="16"][data-mo="2"]) only on the demo pages. */
html[data-p][data-mo][data-hmo] .big .lt {
  opacity: 1; filter: none; clip-path: none; text-shadow: none; background: none;
  -webkit-text-stroke-color: var(--fg);
  transition: transform .5s var(--ease), color .4s var(--ease), opacity .4s var(--ease), filter .4s var(--ease), clip-path .5s var(--ease), text-shadow .4s var(--ease), -webkit-text-stroke-color .4s var(--ease);
}

/* 1 Light: a thin outline fills with the light gradient (blue, teal, violet), which then settles into ink */
html[data-p][data-mo][data-hmo="1"] .big .lt {
  --g: clamp(0, calc((1 - var(--k, 0)) * 2.4), 1); --a: clamp(0, calc(1 - var(--k, 0) * 2.6), 1);
  color: transparent;
  background-image: linear-gradient(rgb(var(--fg-rgb) / var(--a)), rgb(var(--fg-rgb) / var(--a))),
    linear-gradient(120deg, rgb(36 72 230 / var(--g)), rgb(31 181 168 / var(--g)) 55%, rgb(123 92 255 / var(--g)));
  -webkit-background-clip: text; background-clip: text;
  padding-top: .2em; padding-bottom: .35em; margin-top: -.2em; margin-bottom: -.35em;   /* the fill reaches the descenders */
  -webkit-text-stroke-color: color-mix(in srgb, #2448e6 calc(var(--k, 0) * 100%), var(--fg));
  transform: translate3d(0, calc(var(--k, 0) * .18em - var(--h, 0) * .16em), 0);
}

/* 2 Roll: each letter rolls into place like a counter, with fainter copies passing above it */
html[data-p][data-mo][data-hmo="2"] .big .lt {
  color: rgb(var(--fg-rgb) / calc(1 - var(--h, 0) * .9));
  transform: translate3d(0, calc(var(--k, 0) * 3.2em - var(--h, 0) * .16em), 0);
  clip-path: inset(calc(-.2em - var(--k, 0) * 3.2em) -.3em calc(var(--k, 0) * 3.2em - .3em) -.3em);
  text-shadow: 0 -1.6em 0 rgb(36 72 230 / .55), 0 -3.2em 0 rgb(var(--fg-rgb) / .22);
}

/* 3 Scan: a gradient scan line climbs each letter and leaves it drawn behind */
html[data-p][data-mo][data-hmo="3"] .big .lt {
  position: relative;
  color: rgb(var(--fg-rgb) / calc(1 - var(--h, 0) * .9));
  transform: translate3d(0, calc(var(--h, 0) * -.16em), 0);
  clip-path: inset(calc(var(--k, 0) * 115% - .2em) -.3em -.2em -.3em);
}
html[data-p][data-mo][data-hmo="3"] .big .lt::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; height: 2px; pointer-events: none;
  top: calc(var(--k, 0) * 115% - .2em);
  background: linear-gradient(90deg, #2448e6, #1fb5a8 55%, #7b5cff);
  box-shadow: 0 0 12px 2px rgba(36, 72, 230, .45);
  opacity: clamp(0, calc(var(--k, 0) * 8), 1);
}

/* 4 Chroma: blue and teal copies split off each letter and close up into one clean letter */
html[data-p][data-mo][data-hmo="4"] .big .lt {
  color: rgb(var(--fg-rgb) / calc(1 - max(var(--k, 0) * .85, var(--h, 0) * .9)));
  transform: translate3d(calc(var(--d, 0) * var(--k, 0) * .25em), calc(var(--h, 0) * -.16em), 0) skewX(calc(var(--k, 0) * -14deg));
  text-shadow: calc(var(--k, 0) * .16em) 0 0 rgb(36 72 230 / clamp(0, calc(var(--k, 0) * 1.6), .9)),
    calc(var(--k, 0) * -.16em) 0 0 rgb(31 181 168 / clamp(0, calc(var(--k, 0) * 1.6), .9)),
    0 calc(var(--k, 0) * .1em) 0 rgb(123 92 255 / clamp(0, calc(var(--k, 0) * 1.2), .6));
  -webkit-text-stroke-color: rgb(var(--fg-rgb) / calc(1 - var(--k, 0) * .6));
}

/* 5 Zoom: letters fly in from large and soft, and land sharp on the baseline */
html[data-p][data-mo][data-hmo="5"] .big .lt {
  transform-origin: 50% 72%;
  color: rgb(var(--fg-rgb) / calc(1 - max(var(--k, 0), var(--h, 0) * .9)));
  transform: translate3d(calc(var(--d, 0) * var(--k, 0) * .7em), calc(var(--k, 0) * -.35em - var(--h, 0) * .16em), 0) scale(calc(1 + var(--k, 0) * 1.9));
  filter: blur(calc(var(--k, 0) * 8px));
  opacity: clamp(0, calc(1 - var(--k, 0) * 1.1), 1);
}

/* 6 Wave: the letters ride a wave that flattens onto the baseline, turning blue to ink as they settle */
html[data-p][data-mo][data-hmo="6"] .big .lt {
  --w: calc(var(--k, 0) * 4rad + var(--d, 0) * 3rad);
  color: rgb(var(--fg-rgb) / calc(1 - max(var(--k, 0) * .9, var(--h, 0) * .9)));
  -webkit-text-stroke-color: color-mix(in srgb, #2448e6 calc(min(1, var(--k, 0) * 1.6) * 100%), var(--fg));
  transform: translate3d(0, calc(sin(var(--w)) * var(--k, 0) * .6em - var(--h, 0) * .16em), 0) rotate(calc(cos(var(--w)) * var(--k, 0) * 16deg));
}

/* the guides and dimension lines measure the letters at rest */
html.td-measure[data-hmo] .big .lt { transform: none !important; clip-path: none !important; filter: none !important; text-shadow: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-p][data-mo][data-hmo] .big .lt { transform: none !important; filter: none !important; clip-path: none !important; text-shadow: none !important; opacity: 1 !important; color: var(--fg) !important; background: none !important; -webkit-text-stroke-color: var(--fg) !important; }
  html[data-hmo="3"] .big .lt::after { display: none; }
}