/* ============================================================================
   SWORT reveal effects: scramble text, dither image
   ---------------------------------------------------------------------------
   Both are opt-in per element and both are additive: with the stylesheet or
   the script absent, the label reads normally and the photograph is simply
   visible. Nothing here changes layout, so neither effect can shift the page.
   ========================================================================= */

/* ── Scramble ─────────────────────────────────────────────────────────────
   The glyphs are painted by a real child, not a pseudo-element. ::after on the
   host was already spoken for on .section-kicker (it is the 48x1px rule after
   the label), and the overlay was being drawn inside that box: correct, and
   completely invisible.

   The host's transparency and the overlay's colour are both set inline by the
   script, so no rule here has to win a specificity argument against whatever
   colours the host. This file only positions the overlay. */
.sx-ghost::after { content: attr(data-g); }
.sx-ghost {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  pointer-events: none;
  /* Inherit every metric so the glyphs land exactly on the real text and the
     label cannot change width mid-animation. */
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
}

/* ── Dither ───────────────────────────────────────────────────────────────
   The canvas is drawn OVER the photograph and removed when finished, so the
   published markup is unchanged and the image is never replaced. */
.dither-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 1;
  transition: opacity 220ms cubic-bezier(.2, .8, .2, 1);
}
.dither-layer.is-done { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: the scripts already refuse to schedule anything under
     reduced motion, so this only matters if one is mid-flight when the
     preference changes. */
  .sx-ghost { display: none; }
  .dither-layer { display: none; }
}