/* ============================================================
   WTE redesign — global polish layer
   Loaded as a final <link> in each redesigned page.
   Adds: reveal-on-scroll, hover lifts, dotted-rule decoration,
   number-tabular nums, focus rings, subtle vignettes.
   Does NOT redeclare design tokens (uses ones already on page).
   ============================================================ */

/* ---------- reveal on scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);
  will-change:opacity,transform;
}
[data-reveal].is-revealed{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- numerals: tabular for stats so digits don't shift ---------- */
.stat__num, .stats__num, .hero__stat-num, .proof-tile__num, .pg2__score, .verdict-row__score,
.pdf-row__score, .vrow__num, .rcard__num, .data__stat-num, .pipeline__foot b, .pg1__verdict-score b,
.facts__num, .tier__price-num, .mtx__range, .layer__weight b{
  font-variant-numeric:tabular-nums;
}

/* ---------- card hover: subtle perspective lift ---------- */
.sample-card, .step, .vcard, .tier, .inside__cell, .uc, .pmcard,
.conf-card, .mtx, .country, .policy-card{
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1);
}

/* ---------- decorative dotted rule helper ---------- */
.dot-rule{
  display:block; height:1px;
  background-image:radial-gradient(circle,rgba(12,46,43,.25) 1px,transparent 1px);
  background-size:6px 1px; background-repeat:repeat-x;
  margin:24px 0;
}

/* ---------- score-bar fill animation ---------- */
.score-bar__fill, .sample-card__bar i, .pg3__bar-track i, .viz-row__bar i, .pl-row__bar i{
  transform-origin:left center;
  animation:bar-grow 1.1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes bar-grow{
  from{transform:scaleX(.05)}
  to{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  .score-bar__fill, .sample-card__bar i, .pg3__bar-track i, .viz-row__bar i, .pl-row__bar i{
    animation:none;
  }
}

/* ---------- floating-label hint above price tags / score chips ---------- */
.tier--feat .tier__price-num::after{
  content:""; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  margin-left:6px; vertical-align:middle;
  animation:pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.3);opacity:.4}
}

/* ---------- subtle vignette inside dark hero/sections ---------- */
.hero.engine::after, .data::after, .cta-band::after,
section.hero[style*="ink"]::after, .s--dark::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.18),transparent 60%);
}

/* ---------- editorial pull-quote helper ---------- */
.pull{
  margin:32px 0;
  padding:24px 28px;
  border-left:3px solid var(--accent);
  background:rgba(196,93,44,.05);
  border-radius:0 8px 8px 0;
  font:500 19px/1.5 var(--font-display);
  color:var(--ink);
  letter-spacing:-.005em;
  font-style:italic;
}
.pull cite{
  display:block; margin-top:12px;
  font:600 11px/1 var(--font-data);
  font-style:normal;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--grey-500);
}

/* ---------- key-figure callout (used inline in prose) ---------- */
.figure{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:3px 10px; margin:0 2px;
  background:var(--accent-light);
  border-radius:6px;
  font:700 14px/1 var(--font-data);
  color:var(--accent);
  vertical-align:baseline;
  letter-spacing:.02em;
}

/* ---------- focus ring upgrade ---------- */
:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:3px !important;
  border-radius:3px;
  transition:outline-offset .15s ease;
}

/* ---------- selection ---------- */
::selection{background:rgba(196,93,44,.22);color:var(--ink)}

/* ---------- noise/grain overlay helper (opt-in via .grain) ---------- */
.grain{position:relative}
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.6; mix-blend-mode:multiply;
}

/* ---------- sticky-section heading enhancement ---------- */
.section-head h2, .data__head h2, .hero h1{
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga","kern","onum","ss01";
}

/* ---------- crisp first-letter on lede paragraphs ---------- */
.story__lede::first-letter{
  font-feature-settings:"swsh","ss01";
}