/* =========================================================
   ForGrowth Academy — headings.css
   ISOLATED. One rule set, scoped entirely to .hl-mark.
   No global rule, no existing selector redefined.

   Design language matches the Program heading's [AI Powered] plate, so the
   emphasised keyword reads as one system across the page rather than a
   per-section decoration.
   ========================================================= */

.hl-mark {
  /* The plate is a background image rather than a pseudo-element, so it can
     animate and still wrap cleanly across two lines on narrow screens. */
  background-image: linear-gradient(var(--accent, #D9400B), var(--accent, #D9400B));
  background-repeat: no-repeat;

  /* WHY background-size and not padding:
     On an INLINE element the background paints over the content box, whose
     height comes from the font's own ascender/descender metrics — roughly
     1.25em for this face. line-height does not shrink it, which is why the
     plate stayed tall no matter how much padding came off.

     Sizing the background to ~80% of that box and centring it vertically
     trims the plate down to the glyphs themselves, while the element stays
     inline so a phrase can still wrap onto two lines with its own plate. */
  background-size: 100% 78%;
  background-position: left center;

  color: #fff;
  padding: 0 0.16em;
  border-radius: 2px;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  transition: background-size 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

/* Subtle reveal: the plate wipes in from the left as the heading enters view,
   riding the site's existing `.reveal` / `.in-view` observer. No new observer,
   no JavaScript added.

   The default state above is fully painted, so if the observer never runs the
   highlight is still correct — it degrades to simply being visible. */
.reveal:not(.in-view) .hl-mark {
  background-size: 0% 78%;
}

@media (prefers-reduced-motion: reduce) {
  .hl-mark { transition: none; }
  .reveal:not(.in-view) .hl-mark { background-size: 100% 78%; }
}