/* Marker highlight: a warm swipe behind three short phrases that carry the core promise
   (hero sub-line, team lede, about lede). Never used inside SplitText headings.
   Static without JS and under reduced motion. Otherwise it sweeps in once: body phrases when
   the page's reveal observer marks them .is-visible (script.js, [data-mark]); the hero phrase
   on the hero's own entrance clock, so the first-visit curtain holds it with the rest of the hero. */

.mark {
  --mark-tint: rgba(196, 93, 61, .2);
  padding: 0 .14em;
  margin: 0 -.14em;
  background: linear-gradient(100deg, transparent 0, var(--mark-tint) 1.5%, var(--mark-tint) 98%, transparent 100%) no-repeat 0 90% / 100% 62%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* On the dark hero the swipe is a warmer, brighter amber so it reads as light, not dirt. */
.mark--hero {
  --mark-tint: rgba(226, 142, 88, .3);
}

/* The team lede is set in muted grey (about 4.3:1 on cream before any tint). A tint would sink it,
   so its marked phrase takes the forest ink: emphasis, and 9:1 or better with or without the swipe. */
.team-lede .mark {
  color: var(--forest);
}

.js .mark {
  background-size: 0% 62%;
}

.js .mark.is-visible {
  background-size: 100% 62%;
  transition: background-size 1.05s var(--ease) .3s;
}

.js .mark--hero {
  animation: mark-sweep 1.05s var(--ease) 1.05s forwards;
}

@keyframes mark-sweep {
  to { background-size: 100% 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .mark,
  .js .mark.is-visible,
  .js .mark--hero {
    background-size: 100% 62%;
    transition: none;
    animation: none;
  }
}