/* ==========================================================================
   home-hero-perf.css — Mobile LCP guardrails for the homepage hero
   Created 2026-05-16 (front-end audit, wp-core-expert).

   At ≤860px the home hero grid collapses to a single column and the <h1>
   overtakes the portrait as the LCP candidate. The site-wide `heroRise`
   animation declares `backwards` fill mode with a 0.12s delay on the h1,
   so for the first 120ms the element renders at opacity:0. Chrome's LCP
   algorithm cannot record a paint for an element at zero opacity, so the
   recorded LCP timestamp slides past the animation start.

   The `headingShimmer` animation paints the h1 via background-clip:text
   starting at the transparent end of a linear gradient. On mobile, where
   the h1 is the LCP element, that adds another 0.4s before the readable
   paint completes.

   Desktop keeps both animations — the LCP candidate there is the portrait
   image, not the h1, so text-reveal animation costs nothing in CWV.

   This file is enqueued by inc/setup.php only on `is_front_page()`, loaded
   after home-hero.css so it wins the cascade for the suppression rules.
   It lives in its own file deliberately: home-hero.css is touched by an
   automated reformatter that strips edits to its existing rules, so a
   sibling file keeps the perf override out of that loop.
   ========================================================================== */

@media (max-width: 860px) {
  body.home .hero-copy > *,
  body.home .hero-copy > h1,
  body.home .hero-copy > .eyebrow,
  body.home .hero-copy > p,
  body.home .hero-actions {
    animation: none;
  }

  body.home .hero-copy h1 {
    /* Drop the gradient text-fill so the h1 paints immediately at the
       solid colour rather than starting transparent and shimmering in. */
    background: none;
    -webkit-text-fill-color: var(--color-text);
  }
}