/*! WAPI Connect, "Kuwait Time": motion module "words" (M05). Plan: .router/MOTION.md §4.1 H0, §4.3 F1, principle 9.
    Blur Text adapted from React Bits (https://reactbits.dev). React Bits: Copyright (c) 2026 David Haz.
    MIT + Commons Clause License Condition v1.0. Used as part of the wapiconnect.net website only.
    1. The h1 (split before its first paint by motion-split.js): each word comes in from a light blur, 12 px lower,
       760 ms, 80 ms + 70 ms per word. Only the animation's backwards fill hides a word, so the words are never left
       hidden. motion/words.js adds .w-words--done after the last word: the animation is dropped but the words stay
       inline-block, so the lines break exactly as they did during the entrance (an inline Latin run such as
       "WAPI Connect Pro" may wrap inside itself, an inline-block word cannot: going back to inline re-wrapped the
       Arabic /videos/ h1 at 1280 px, a 0.02 layout shift).
    2. Section headings are plain ink from the start (no light-to-ink scrub since the clarity rollout, 2026-10-31); a
       heading below the fold rises once by words (.w-rise, words inline-block while it runs), then is plain text again.
    Every rule needs html.w-motion (set pre-paint only without reduced motion) and sits inside
    (prefers-reduced-motion: no-preference). No colour, no new token. */
@media (prefers-reduced-motion: no-preference) {
  /* the h1 has its own entrance now: the hero's [data-load] rise is not run on it as well */
  html.w-motion h1.w-words[data-load] { opacity: 1; transform: none; animation: none; }
  html.w-motion h1.w-words .w-w {
    display: inline-block;
    animation: w-word-in 760ms cubic-bezier(.23, 1, .32, 1) backwards;
    animation-delay: calc(80ms + var(--wi, 0) * 70ms);
  }
  html.w-motion h1.w-words.w-words--done .w-w { animation: none; }
  /* motion-split.js: the h1's font is not in yet (<= 600 ms): nothing shown, the entrance waits */
  html.w-motion h1.w-words.w-words--wait { visibility: hidden; }
  html.w-motion h1.w-words.w-words--wait .w-w { animation-play-state: paused; }

  html.w-motion .w-rise .w-w { display: inline-block; }
}
@keyframes w-word-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(12px); }
  to { opacity: 1; filter: none; transform: none; }
}