/*
  Text Scatter  (.scatter)
  ─────────────────────────────────────────────────
  Mouse cursor physically kicks characters away on hover.
  Each character is pushed in the direction AWAY from the
  cursor, like the pointer is shoving them. They spring
  back when the cursor moves away.

  Requires: script.js scatter block

  Usage:
    <h1 class="scatter">Hello World</h1>
    <p class="scatter scatter-wild">Big push</p>
    <p class="scatter scatter-subtle">Gentle nudge</p>
*/

/* ── Base container ── */
.scatter {
  display: inline-block;
  cursor: default;
}

/* ── Per-character span (injected by JS)
   Inherits everything — no visual side-effects ── */
.scatter .scatter-char {
  display: inline-block;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  -webkit-text-stroke: inherit;
  transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--sr, 0deg));
  transition: transform 0.6s ease;
  will-change: transform;
}

/* Whitespace characters preserve width */
.scatter .scatter-char.scatter-space {
  white-space: pre;
}

/* ── Variants ── */

/* Wild — stiffer spring-back (slower return) */
.scatter.scatter-wild .scatter-char {
  transition: transform 1s ease;
}

/* Subtle — snappy spring-back */
.scatter.scatter-subtle .scatter-char {
  transition: transform 0.35s ease;
}