/* ==================================================================
   HIGHLIGHT.CSS — Dreamy Writing Company
   
   The Brush Wipe: a clean, quiet parchment tone highlight.
   
   Designed to look like tinted paper ground laid behind the type:
   - 12% translucent copper-paper tint
   - Disciplined 3px micro-radii
   - Snug padding around the letterforms
   - Smooth horizontal brush wipe entrance animation
   ================================================================== */

:root {
  --highlight-tone: rgba(180, 128, 94, 0.12);
  --highlight-duration: 3.0s;
}

mark,
.highlight,
.em {
  /* reset default browser yellow */
  background: transparent;
  color: inherit;
  display: inline;

  /* flat parchment tone */
  background-image: linear-gradient(var(--highlight-tone), var(--highlight-tone));
  background-repeat: no-repeat;
  background-size: 100% 100%;

  /* disciplined micro-radii */
  border-radius: 3px;

  /* breathing room around the letterforms */
  padding: 0.12em 0.38em 0.16em;
  margin: 0;

  /* ensures every wrapped line fragment gets its own shape on mobile */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The Brush Wipe Animation */
@keyframes brush-wipe {
  0% { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}

.copy.in-view mark,
.copy.in-view .highlight,
.copy.in-view .em,
.phase.in-view .copy mark,
.phase.in-view .copy .highlight,
.phase.in-view .copy .em {
  animation: brush-wipe var(--highlight-duration) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}