/* Optional per-letter text effects on the text block (blocks/text.yml),
   wrapped by assets/js/funky-text.js.
   Jumpy/warpy deliberately ignore prefers-reduced-motion — their
   duration is exempted from base.css's site-wide collapse, same
   technique as the header mascot blink. Disperse matches, though
   it's pointer-triggered rather than always-on — flag if that one
   should respect reduced-motion instead. */

.funky-word {
  display: inline-block;
}

.funky-letter {
  display: inline-block;
  white-space: pre; /* preserves a lone space character, which an
    inline-block would otherwise collapse to nothing */
}

.funky-text[data-funky-effect='jumpy'] .funky-letter {
  animation: funky-jump 1s ease-in-out infinite;
  animation-duration: 1s !important;
}

@keyframes funky-jump {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.2em);
  }
}

.funky-text[data-funky-effect='warpy'] .funky-letter {
  animation: funky-warp 1.4s ease-in-out infinite;
  animation-duration: 1.4s !important;
  transform-origin: bottom center; /* pivots from the baseline, reads as
    each letter leaning rather than sliding sideways */
}

@keyframes funky-warp {
  0%,
  100% {
    transform: skewX(0deg);
  }
  25% {
    transform: skewX(8deg);
  }
  75% {
    transform: skewX(-8deg);
  }
}

/* Disperse: still by default, scatters under a pointer. JS sets each
   letter's transform on pointermove; CSS owns the easing — an overshoot
   ("back") curve on the push so it reads as an impact, then after the
   JS-side hold, a plain ease-in return (no overshoot: it should gather
   itself back, not spring). An always-running variant stalled the main
   thread at this letter count — idle-until-touched removes that cost. */
/* Letters pushed past the block's left/right edges must never widen any
   ancestor's scrollable area (= horizontal page scrolling on browsers
   where body's own overflow-x:clip doesn't absorb it). x-axis clip only:
   clip + visible may combine per axis, so vertical flights stay fully
   visible outside the block. */
.funky-text[data-funky-effect='disperse'] {
  overflow-x: clip;
}

.funky-text[data-funky-effect='disperse'] .funky-letter {
  transition: transform 1.1s ease-in;
  transition-duration: 1.1s !important;
}

.funky-text[data-funky-effect='disperse'] .funky-letter.is-pushed {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-duration: 0.18s !important;
}