/* =========================================================
   Secondary-page hero reveal (Phase 1 — #1 label/h1/desc/ctas sequence)

   Applies only on the seven .cx-hero templates listed in
   inc/hero-reveal.php. Gated on html.cx-hero-reveal-pending, set by an
   inline <head> snippet before first paint (same reasoning as the front
   page's html.cx-hero-pin) so the hero never flashes visible and then
   hides. That class is removed once hero-reveal.js has run — by a
   watchdog if the script never runs at all, so the copy can never be
   stuck invisible.

   opacity/transform carry no !important: hero-reveal.js drives the reveal
   by toggling a .cx-hero-in class rather than writing inline styles, so
   the two must stay in the same specificity tier for the transition on
   .cx-hero-in to actually win once it is added.
   ========================================================= */

html.cx-hero-reveal-pending .cx-hero__label,
html.cx-hero-reveal-pending .cx-hero__desc,
html.cx-hero-reveal-pending .cx-hero__ctas {
    opacity: 0;
    transform: translateY(14px);
}

.cx-hero__label,
.cx-hero__desc,
.cx-hero__ctas {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

html.cx-hero-reveal-pending .cx-hero__label.cx-hero-in,
html.cx-hero-reveal-pending .cx-hero__desc.cx-hero-in,
html.cx-hero-reveal-pending .cx-hero__ctas.cx-hero-in {
    opacity: 1;
    transform: translateY(0);
}

/* The h1 itself stays visible throughout — it is its individual words
   (wrapped in .cx-hero-word by hero-reveal.js) that animate, the same
   split-and-stagger approach splitWords() uses for the front page hero.
   overflow: hidden per word, not on the whole line, is what lets each
   word slide up from fully below its own baseline without the still-
   hidden words below it in the paragraph clipping oddly. */
.cx-hero-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.cx-hero-word > span {
    display: inline-block;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

html.cx-hero-reveal-pending .cx-hero-word > span {
    opacity: 0;
    transform: translateY(100%);
}

html.cx-hero-reveal-pending .cx-hero-word.cx-hero-in > span {
    opacity: 1;
    transform: translateY(0);
}

/* No script, or reduced motion: the head gate never adds the pending
   class in either case, so nothing above ever applies and the hero
   simply renders in its normal, fully visible state. */