/* ===== Japanese heading text motions (html[data-jhd]) — 2026-10-15 =====
   jh.js wraps every character in .jh-c and adds .jh-in when the heading comes into view.
   --jt runs 1 → 0 for each character (registered, so it can be transitioned); --c is the character's index. */
@property --jt { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --ju { syntax: "<number>"; inherits: false; initial-value: 1; }
:root[data-jhd] .jh-t.sx, :root[data-jhd] .jh-rest.sx, :root[data-jhd] .sec-lead.sx { transform: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important; }
:root[data-jhd] .jh-c { --jt: 1; --ju: 1; }
:root[data-jhd] .jh-in .jh-c { --jt: 0; --ju: 0; }
/* the text under the heading follows once the heading has played */
:root[data-jhd] .jh-rest { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(.5s + var(--n, 20) * 30ms); }
:root[data-jhd] .sec-lead:has(.jh-in) .jh-rest, :root[data-jhd] .pg-intro:has(.jh-in) .jh-rest { opacity: 1; transform: none; }

/* 1 Ink: each character bleeds in from a soft blue haze and dries to sharp ink */
:root[data-jhd="1"] .jh-c {
  transition: --jt 1.2s cubic-bezier(.22, .8, .2, 1); transition-delay: calc(.1s + var(--c) * 34ms);
  opacity: calc(1 - var(--jt)); filter: blur(calc(var(--jt) * 10px));
  text-shadow: 0 0 calc(var(--jt) * 22px) rgb(36 72 230 / calc(var(--jt) * .7));
}

/* 2 Slit: characters rise out of a slit along their own line, one after another */
:root[data-jhd="2"] .jh-c {
  position: relative; top: calc(var(--jt) * 1.05em);
  clip-path: inset(calc(-.35em - var(--jt) * 1.05em) -.15em calc(var(--jt) * 1.05em - .35em) -.15em);
  transition: --jt .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.1s + var(--c) * 26ms);
}

/* 3 Type: typed character by character behind a blue caret that keeps blinking at the end */
:root[data-jhd="3"] .jh-c {
  position: relative; opacity: calc(1 - var(--jt));
  transition: --jt .01s steps(1, start); transition-delay: calc(.15s + var(--c) * 55ms);
}
:root[data-jhd="3"] .jh-c::after { content: ""; position: absolute; right: -.08em; top: .12em; bottom: .02em; width: 2px; background: #2448e6; opacity: 0; pointer-events: none; }
:root[data-jhd="3"] .jh-in .jh-c::after { animation: jh-caret 110ms steps(1, end) calc(.15s + var(--c) * 55ms) both; }
:root[data-jhd="3"] .jh-in .jh-c.jh-last::after { animation: jh-blink 1s steps(1, end) calc(.15s + var(--c) * 55ms) 4 both; }
@keyframes jh-caret { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jh-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }

/* 4 Light: the light gradient sweeps through the whole heading and leaves it in ink */
:root[data-jhd="4"] .jh-t {
  color: transparent !important;
  background: linear-gradient(100deg, var(--fg) 0 34%, #2448e6 40%, #1fb5a8 45%, #7b5cff 50%, rgb(var(--fg-rgb) / .14) 57% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position 2.4s cubic-bezier(.45, .05, .2, 1) .1s;
}
:root[data-jhd="4"] .jh-t.jh-in { background-position: 0 0; }
/* (the characters stay put: the fill is painted from the heading's own background, which skips positioned children) */

/* 5 Gather: scattered, blurred blue characters fly together into the line */
:root[data-jhd="5"] .jh-c {
  position: relative; left: calc(var(--x) * var(--jt)); top: calc(var(--y) * var(--jt));
  opacity: calc(1 - var(--jt)); filter: blur(calc(var(--jt) * 6px));
  color: color-mix(in srgb, #2448e6 calc(var(--jt) * 100%), var(--fg));
  transition: --jt 1.3s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.1s + var(--c) * 18ms);
}

/* 6 Line: a gradient line is drawn under the heading, then each character stands up off it */
:root[data-jhd="6"] .jh-c {
  position: relative; top: calc(var(--jt) * .7em); opacity: calc(1 - var(--jt));
  background: linear-gradient(90deg, #2448e6, #1fb5a8 55%, #7b5cff) 0 100% / calc((1 - var(--ju)) * 100%) 1px no-repeat;
  padding-bottom: .12em;
  transition: --ju .14s linear, --jt .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--c) * 12ms), calc(.55s + var(--c) * 30ms);
}
:root[data-jhd="6"] .jh-in .jh-c { background-image: linear-gradient(90deg, rgb(36 72 230 / var(--jt)), rgb(31 181 168 / var(--jt)) 55%, rgb(123 92 255 / var(--jt))); }

@media (prefers-reduced-motion: reduce) {
  :root[data-jhd] .jh-c, :root[data-jhd] .jh-c::after, :root[data-jhd] .jh-t, :root[data-jhd] .jh-rest { transition: none !important; animation: none !important; }
}