/* ============================================================
   FAB3 ELEVATE - Fable polish pass, 18 Jul 2026
   costandprofitability.com - Instrument design system.
   Load AFTER cnp-method-instrument.css (wp_head priority 10001,
   see fab3_elevate-enqueue.php). Pure additive layer.

   What it does:
   1. Entrance cadence for the three text-hero families that
      have no motion today: .pf-hero (method profiles),
      .hero-dark (pillar pages), revived .seo-hero (variant-A
      pillar pages). Eyebrow, headline, lede, CTA settle in
      once, 520-620ms, using the praxis motion easings.
   2. Readout hairline above the injected Instrument diagram
      legend (.cnp-diagram-fig figcaption) - the "ticket rule".
   3. Scroll settle for injected Instrument diagrams. The
      hidden state (.fab3-pre) is ONLY ever applied by
      fab3_elevate.js to figures below the fold, so with JS
      off, JS failing, or reduced motion nothing is hidden.

   Zero layout shift: opacity + transform only (the hairline
   padding is applied at load, not later). Reversible: remove
   fab3_elevate-enqueue.php. No colors changed; the one drawn
   line uses the Instrument hairline token.
   ============================================================ */

/* ---------- 1. hero entrance cadence (one-time, CSS only) ---------- */
@media (prefers-reduced-motion: no-preference){

  @keyframes fab3Rise{
    from{ opacity:0; transform:translateY(12px); }
    to{   opacity:1; transform:none; }
  }

  .pf-hero .pf-eyebrow,
  .hero-dark .eyebrow,
  .seo-hero .eyebrow-badge{
    animation: fab3Rise 520ms cubic-bezier(.22,.61,.36,1) both;
  }

  .pf-hero h1,
  .hero-dark h1,
  .seo-hero h1{
    animation: fab3Rise 620ms cubic-bezier(.22,.61,.36,1) 70ms both;
  }

  .pf-hero .pf-lede,
  .hero-dark .lede,
  .seo-hero .hero-lede{
    animation: fab3Rise 620ms cubic-bezier(.22,.61,.36,1) 150ms both;
  }

  .hero-dark .cta-row{
    animation: fab3Rise 620ms cubic-bezier(.22,.61,.36,1) 220ms both;
  }
}

/* ---------- 2. readout hairline above the diagram legend ---------- */
.cnp-diagram-fig figcaption{
  position: relative;
  margin-top: 12px;
  padding-top: 12px;
}
.cnp-diagram-fig figcaption::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 56px;
  height: 1px;
  transform: translateX(-50%);
  background: var(--hairline, #DED3BF);
}

/* ---------- 3. Instrument diagram settle (classes set by JS) ---------- */
.cnp-diagram-fig.fab3-pre{
  opacity: 0;
  transform: translateY(16px);
}
.cnp-diagram-fig.fab3-pre.fab3-in{
  opacity: 1;
  transform: none;
  transition: opacity 680ms cubic-bezier(.22,.61,.36,1),
              transform 680ms cubic-bezier(.22,.61,.36,1);
}
.cnp-diagram-fig.fab3-pre figcaption{ opacity: 0; }
.cnp-diagram-fig.fab3-pre.fab3-in figcaption{
  opacity: 1;
  transition: opacity 480ms ease 360ms;
}

/* ---------- reduced motion: everything lands instantly ---------- */
@media (prefers-reduced-motion: reduce){
  .cnp-diagram-fig.fab3-pre,
  .cnp-diagram-fig.fab3-pre figcaption{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}