/* premium-motion : typography motion pack  (yewho-web-effects 2.3, Phase 9)
   Pairs with wordfx.js (splits text, adds .in on view). PLAIN TEXT only inside
   these elements — the splitter reads textContent.

     .md-words      — word-by-word cascade: each word rises out of a soft blur
                      (the keynote reveal). Tune: --wf-step (def 70ms)
     .md-chars      — per-character rise (tighter, for short accent lines)
     .md-outline    — headline starts as a hollow outline, fills with ink
                      left→right on view. Tune: --wf-fill (ink), --wf-line
     .md-letterwave — perpetual GENTLE letter bob on a short accent word
                      (armed only after the entrance settles; full tier only)

   All hidden states live under html.js — no-JS users always see text.
   ============================================================ */

/* ---- shared: split spans ---- */
.md-words .w, .md-chars .c, .md-letterwave .c{ display:inline-block; will-change:auto; }
.md-words .w{ margin-right:.28em; }
.md-words .w:last-child{ margin-right:0; }

/* ---- word cascade ---- */
html.js .md-words .w{
  opacity:0; transform:translateY(14px); filter:blur(6px);
  transition: opacity .55s var(--md-ease,cubic-bezier(.22,.61,.2,1)),
              transform .55s var(--md-ease,cubic-bezier(.22,.61,.2,1)),
              filter .55s var(--md-ease,cubic-bezier(.22,.61,.2,1));
  transition-delay: calc(var(--i,0) * var(--wf-step,70ms));
}
html.js .md-words.in .w{ opacity:1; transform:none; filter:blur(0); }
:root[data-motion="lite"] .md-words .w{ filter:none; }  /* skip blur cost on lite */

/* ---- char rise ---- */
html.js .md-chars .c{
  opacity:0; transform:translateY(.55em);
  transition: opacity .45s var(--md-ease,cubic-bezier(.22,.61,.2,1)),
              transform .45s var(--md-ease,cubic-bezier(.22,.61,.2,1));
  transition-delay: calc(var(--i,0) * 28ms);
}
html.js .md-chars.in .c{ opacity:1; transform:none; }

/* ---- outline → ink fill ---- */
.md-outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--wf-line,#98A1AE);
  background:linear-gradient(90deg, var(--wf-fill,#111823) 50%, transparent 50%);
  background-size:200% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
}
html.js .md-outline.in{
  transition: background-position 1.1s var(--md-ease,cubic-bezier(.22,.61,.2,1)) .15s;
  background-position:0 0;
}

/* ---- perpetual letter wave (accent word) ---- */
:root[data-motion="full"] .md-letterwave.in .c{
  animation: md-lw var(--lw-dur,3.2s) ease-in-out infinite;
  animation-delay: calc(var(--i,0) * .12s + .8s);
}
@keyframes md-lw{
  0%,72%,100%{ transform:translateY(0); }
  84%{ transform:translateY(calc(-1 * var(--lw-amp,.14em))); }
}

/* ---- reduced motion: everything lands instantly, no wave ---- */
@media (prefers-reduced-motion: reduce){
  html.js .md-words .w, html.js .md-chars .c{
    opacity:1; transform:none; filter:none; transition:none;
  }
  .md-outline{ color:var(--wf-fill,#111823); -webkit-text-stroke:0;
    background:none; -webkit-background-clip:border-box; background-clip:border-box; }
  .md-letterwave .c{ animation:none !important; }
}
:root[data-motion="off"] .md-words .w, :root[data-motion="off"] .md-chars .c{
  opacity:1; transform:none; filter:none; transition:none;
}