/* ============================================================
   InterHive - MOTION + DIAGRAMS
   ------------------------------------------------------------
   All animation styling lives here. Triggered exclusively by the
   classes js/animate.js adds (.is-in, and the per-diagram
   sequence classes declared in each element's data-seq).
   Contains no scroll rules of any kind.

   Standing rule: every diagram animates ONCE on scroll into view,
   then settles. There are no exceptions left: the three that used
   to keep moving (idleGold, hxTravel, alertPulse) went with the
   diagrams they belonged to. Nothing on this site loops.
   ============================================================ */

/* ---------- Generic reveal ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
[data-reveal].is-in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    /* Duration alone was not enough. 73 transition-delay declarations and 10
       --i-driven staggers survived it, so a diagram still resolved piecemeal
       over as much as 600ms: no motion, but not "fully resolved and static"
       either. Zeroing the delays collapses every stagger to a single frame. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
}

/* ---------- Shared diagram frame ---------- */
.viz{
  position: relative;
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background:
    radial-gradient(ellipse 65% 65% at 50% 45%, rgba(200,155,60,.055), transparent 72%),
    var(--surface-2);
  padding: 2.1rem;
  overflow: hidden;
}
.viz__cap{
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 1.05rem;
  display: block;
}

/* ============================================================
   THE AUDIT - week one's three inputs into week two's document
   ------------------------------------------------------------
   Originally built for the sports page as three data sources
   resolving into one player view. The shape was already right for
   this: several inputs, one output, nothing lost in between. Only
   the icons, labels and hub content changed.   [once]
   ============================================================ */
.converge{ width: 100%; }
.converge svg{ width: 100%; display: block; overflow: visible; }
.converge .cv-src{
  opacity: 0;
  transform: translateX(-14px);
  transform-box: fill-box;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.converge.v1 .cv-src{ opacity: 1; transform: none; }
.converge .cv-src:nth-of-type(2){ transition-delay: .15s; }
.converge .cv-src:nth-of-type(3){ transition-delay: .3s; }

.converge .cv-path{
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.15s var(--ease-out);
}
.converge.v2 .cv-path{ stroke-dashoffset: 0; }
.converge .cv-path:nth-of-type(2){ transition-delay: .13s; }
.converge .cv-path:nth-of-type(3){ transition-delay: .26s; }

.converge .cv-hub{
  opacity: 0;
  transform: scale(.7);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .8s var(--ease-out), transform .8s cubic-bezier(.34,1.45,.64,1);
}
.converge.v3 .cv-hub{ opacity: 1; transform: none; }

/* ============================================================
   PROBLEM - a statement that reconciles, and the costs outside it
   ------------------------------------------------------------
   Adapted from the retired sponsor-report diagram, which had the
   same bones: a framed panel with populating rows, plus loose items
   around it. The meaning is inverted. There, the scattered items
   were pulled into the document; here they never make it onto the
   statement at all, which is the entire point. Panel first so the
   numbers read as healthy, then the costs appear outside it.
   [once, then settles]
   ============================================================ */
.offbook{ width: 100%; }
.offbook svg{ width: 100%; display: block; overflow: visible; }

.offbook .ob-panel{
  opacity: 0;
  transform: translateY(14px);
  transform-box: fill-box;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.offbook.b1 .ob-panel{ opacity: 1; transform: none; }

.offbook .ob-row{
  opacity: 0;
  transform: translateX(-12px);
  transform-box: fill-box;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.offbook.b1 .ob-row{ opacity: 1; transform: none; }

.offbook .ob-badge{
  opacity: 0;
  transform: scale(.88);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .6s var(--ease), transform .65s cubic-bezier(.34,1.5,.64,1);
}
.offbook.b2 .ob-badge{ opacity: 1; transform: none; }

/* These arrive last and stay ash. Nothing connects them to the panel,
   because nothing connects them in the business either. */
.offbook .ob-cost{
  opacity: 0;
  transform: translateX(14px);
  transform-box: fill-box;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.offbook.b3 .ob-cost{ opacity: 1; transform: none; }

/* ============================================================
   WHAT COMES AFTER - findings ranked, the top of the list built
   [once, then settles]
   ============================================================ */
.ranked{ width: 100%; }
.ranked svg{ width: 100%; display: block; overflow: visible; }

.ranked .rk-find{
  opacity: 0;
  transform: translateX(-14px);
  transform-box: fill-box;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.ranked.r1 .rk-find{ opacity: 1; transform: none; }

.ranked .rk-bar{
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.ranked.r1 .rk-bar{ transform: none; }

.ranked .rk-axis{ opacity: 0; transition: opacity .6s var(--ease); }
.ranked.r1 .rk-axis{ opacity: 1; }

.ranked .rk-carry{
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1s var(--ease-out);
}
.ranked.r2 .rk-carry{ stroke-dashoffset: 0; }
.ranked .rk-carry:nth-of-type(2){ transition-delay: .14s; }

.ranked .rk-build{
  opacity: 0;
  transform: scale(.9);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .7s var(--ease-out), transform .75s cubic-bezier(.34,1.4,.64,1);
}
.ranked.r3 .rk-build{ opacity: 1; transform: none; }

.ranked .rk-rest{ opacity: 0; transition: opacity .6s var(--ease) .3s; }
.ranked.r3 .rk-rest{ opacity: 1; }

/* ============================================================
   HOMEPAGE HERO - what the P&L shows, and what it doesn't
   ------------------------------------------------------------
   Four measured cost lines resolve, a rule is drawn, then a fifth
   line appears below it with an empty dashed bar and fills.
   That is the whole pitch: the expensive one is the one with no
   figure against it.

   Replaces the Africa-centred network globe, which at 460x460 with
   four capability labels read as multi-division agency scale. This
   is 440x260 and says one thing. The .globe rules above are still
   retained, unused, in case the globe is wanted back.
   [once, then settles]
   ============================================================ */
.ledger{ width: 100%; max-width: 460px; margin: 0 auto; }
.ledger svg{ width: 100%; display: block; overflow: visible; }

.ledger .lg-row{
  opacity: 0;
  transform: translateX(-10px);
  transform-box: fill-box;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.ledger.a1 .lg-row{ opacity: 1; transform: none; }

.ledger .lg-rule{ opacity: 0; transition: opacity .6s var(--ease); }
.ledger.a2 .lg-rule{ opacity: 1; }

.ledger .lg-gap{
  opacity: 0;
  transform: translateX(-10px);
  transform-box: fill-box;
  transition: opacity .6s var(--ease-out) .12s, transform .6s var(--ease-out) .12s;
}
.ledger.a2 .lg-gap{ opacity: 1; transform: none; }

/* The figure nobody had. Grows from the left, so it reads as being
   measured rather than as having been there all along. */
.ledger .lg-fill{
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .95s var(--ease-out);
}
.ledger.a3 .lg-fill{ transform: none; }

.ledger .lg-tag{
  opacity: 0;
  transition: opacity .6s var(--ease) .5s;
}
.ledger.a3 .lg-tag{ opacity: 1; }

/* ============================================================
   NOTE - a called-out caveat block
   Kept from the retired package-rows block, which is gone; the
   homepage still uses this for the no-obligation callout.
   ============================================================ */
.note{
  border-left: 2px solid var(--gold-35);
  background: var(--gold-06);
  padding: 1.2rem 1.5rem;
  border-radius: 0 3px 3px 0;
  margin-top: 2.4rem;
}
.note__k{
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: .7rem;
}
.note p{ font-size: .95rem; color: var(--ink-3); margin: 0; }