/* Hero preview: "Work, as usual." gets proofread into "Work, rewritten.",
   over a field of small carets that lean toward the cursor.
   Without JS, or with reduced motion, the page shows the finished headline. */

/* --- The rewrite ---------------------------------------------------------- */

.nw { white-space: nowrap; }
.rw { position: relative; display: inline-block; vertical-align: baseline; }

/* Finished state, the default. */
.rw__old { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.rw__new { display: inline-block; background-repeat: no-repeat;
  background-size: 100% 100%; }
.rw__strike { position: absolute; left: -.04em; right: -.04em; top: 50%;
  height: .075em; border-radius: .04em; background: var(--ink);
  transform: scaleX(0); transform-origin: left center; }
/* The proofreader's mark: under the line, at the point of insertion. */
.rw__caret { position: absolute; left: -.17em; bottom: -.16em; width: .34em;
  height: auto; color: var(--yellow); opacity: 0; transform-origin: 50% 100%;
  overflow: visible; }

/* Opening state, held from first paint until the script plays it out. */
.rw-pre .rw__old { position: static; opacity: 1; }
.rw-pre .rw__new { position: absolute; left: 0; top: 0;
  clip-path: inset(0 100% 0 0); background-size: 0% 100%; }

/* --- Caret field ---------------------------------------------------------- */

.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none;
  /* Quiet behind the words, fuller on the right, gone before the next section. */
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.3) 34%, #000 76%),
    linear-gradient(to bottom, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.3) 34%, #000 76%),
    linear-gradient(to bottom, #000 72%, transparent);
  mask-composite: intersect; }

/* --- Preview only --------------------------------------------------------- */

/* Sits under the nav, top right, clear of any viewer controls in the corners. */
.replay { position: fixed; right: 1rem; top: 5.5rem; z-index: 60;
  font-family: var(--f-m); font-size: .8125rem; font-weight: 600; letter-spacing: .06em;
  padding: .7rem 1.15rem; border: 0; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 10px rgba(10,10,10,.12); }
.replay:hover { background: var(--ink); color: var(--paper); }