/* headline-fx (v3, 2026-09-26; v2 lost on specificity: type-noto's blanket is
 * `#root *:not()x4 !important` = (1,0,4), so the cursive selectors carry #root
 * below and win at (1,1,1). v1 lived four minutes: its cursive rule lost to
 * type-noto.css, which forces --sans on headings with !important, and its
 * script dropped the wrapped tail on its own second pass)
 *
 * Two things the operator asked for on the landing, both add-ons:
 *
 *   1. CURSIVE PASSAGES. One phrase per headline set in Instrument Serif's
 *      italic (the face is declared in /static/jp/type-geist.css):
 *        hero        "first" / "erste" / "premier"   (the <i> the dict has)
 *        #interface  the second line, "At the same time." (.ss-t2)
 *        #features   "Buy it first." / "Zuerst kaufen." / "L'acheter en premier."
 *        #pricing    "covers the month." / "bezahlt dein Abo." / "couvre le mois."
 *      The last two are plain strings in the bundle, so headline-fx.v2.js
 *      splits the text node and wraps the phrase in <i class="jpa-cursive">.
 *      Everything here only styles; nothing changes if the script is off.
 *
 *   2. THE LIGHT HIGHLIGHT. The big headlines are painted with a brightness
 *      that runs left to right (dark ink on the left, lifted towards the
 *      right) and a slow sweep that moves that light band across the words
 *      and back. Background-clip text, so the letterforms are the paint; the
 *      ink is the page's own --fg mixed towards --bg, so the effect follows
 *      the tokens if a scheme ever changes. Guarded by @supports: a browser
 *      without color-mix keeps its plain ink instead of transparent text.
 *
 * TO REVERT: delete this file's <link> (and the script's) in index.html, or
 * run patches/geist_type/UNDO.sh. Nothing else references these rules.
 */

#root .jpa-hero-h1 i,
#root .ss-t2,
#root .jpa-cursive {
  /* !important AND #root: type-noto.css paints the whole landing with
     `#root *:not(code):not(pre):not(kbd):not(samp) { font-family: var(--sans)
     !important }`, so an add-on can only win on importance and, at equal
     importance, on specificity: (1,1,1) here against its (1,0,4) */
  font-family: var(--serif-cursive, "Instrument Serif", Georgia, "Times New Roman", serif) !important;
  font-style: italic !important;
  font-weight: 400;
  letter-spacing: 0;
  /* the serif's x-height is lower than Geist's; a step up keeps the phrase
     at the same optical size as the words around it */
  font-size: 1.07em;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .jpa-hero-h1,
  #interface .ss-title,
  #features > div > h2,
  #features h2.font-semibold,
  #pricing h2.font-semibold,
  #experience h2 {
    --hx-ink: hsl(var(--fg, 60 6% 6%));
    --hx-lift: color-mix(in srgb, var(--hx-ink) 58%, hsl(var(--bg, 220 20% 99%)));
    --hx-lift-2: color-mix(in srgb, var(--hx-ink) 66%, hsl(var(--bg, 220 20% 99%)));
    background-image: linear-gradient(100deg,
      var(--hx-lift) 0%,
      var(--hx-ink) 22%,
      var(--hx-ink) 34%,
      var(--hx-lift-2) 60%,
      var(--hx-lift) 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: jpa-hx-sweep 11s ease-in-out infinite alternate;
  }
  /* an inline span (the interface title) needs the box to span its lines */
  #interface .ss-title { display: inline-block; }
}
@keyframes jpa-hx-sweep {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jpa-hero-h1, #interface .ss-title, #features h2.font-semibold,
  #pricing h2.font-semibold, #experience h2 {
    animation: none;
    background-position: 50% 0;
  }
}