/* NetWorthEx Article FX layer (person-fx)
   Scoped under .nw-fx (progress bar uses the nw-fx- prefix). Vanilla CSS, no libraries.
   Graceful degradation contract: hidden/animated initial states apply ONLY under
   html.nw-fx-js, a class added by an inline gate script and removed again if
   fx.js fails to load. With no JS, everything below renders fully visible. */

.nw-fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none}
.nw-fx-progress>span{display:block;height:100%;background:#d8221f;transform:scaleX(0);transform-origin:0 50%}

/* Scroll reveal */
html.nw-fx-js .nw-fx [data-fx-reveal]:not(.fx-in),
html.nw-fx-js .nw-fx .fx-pre:not(.fx-in){opacity:0;transform:translateY(18px)}
.nw-fx [data-fx-reveal],.nw-fx .fx-pre{transition:opacity .6s ease,transform .6s ease}
.nw-fx [data-fx-reveal].fx-in,.nw-fx .fx-pre.fx-in{opacity:1;transform:none}
.nw-fx .card-grid>.fx-pre:nth-child(2),.nw-fx .quick-facts-grid>.fx-pre:nth-child(2){transition-delay:.06s}
.nw-fx .card-grid>.fx-pre:nth-child(3),.nw-fx .quick-facts-grid>.fx-pre:nth-child(3){transition-delay:.12s}
.nw-fx .card-grid>.fx-pre:nth-child(4),.nw-fx .quick-facts-grid>.fx-pre:nth-child(4){transition-delay:.18s}
.nw-fx .card-grid>.fx-pre:nth-child(5),.nw-fx .quick-facts-grid>.fx-pre:nth-child(5){transition-delay:.24s}
.nw-fx .card-grid>.fx-pre:nth-child(6),.nw-fx .quick-facts-grid>.fx-pre:nth-child(6){transition-delay:.3s}

/* Hero answer card: 3D tilt stage (transform itself is set by fx.js) */
.nw-fx .nw-answer-card{transform-style:preserve-3d}
.nw-fx .nw-answer-card.fx-tilting{transition:transform .18s ease-out;box-shadow:0 18px 44px rgba(17,17,17,.13)}
.nw-fx .nw-answer-figure{font-variant-numeric:tabular-nums}

/* Key Takeaways + cards: hover lift */
.nw-fx .key-takeaways-standalone-card{transition:transform .3s ease,box-shadow .3s ease}
.nw-fx .key-takeaways-standalone-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(17,17,17,.10)}
.nw-fx .key-takeaways-standalone-card li{transition:background-color .2s ease,transform .2s ease}
.nw-fx .key-takeaways-standalone-card li:hover{background-color:#f7f8fa;transform:translateX(3px)}
.nw-fx .entity-card{transition:transform .25s ease,box-shadow .25s ease,border-color .15s ease}
.nw-fx .entity-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(17,17,17,.10)}
.nw-fx .quick-fact-item{transition:background-color .2s ease,transform .2s ease}
.nw-fx .quick-fact-item:hover{background-color:#f7f8fa;transform:translateY(-2px)}

/* Comparison graphs (mini in the answer card, full in Comparisons) + wealth bars */
.nw-fx .nw-fx-graph{margin-top:16px;padding-top:14px;border-top:1px solid #e3e6eb}
.nw-fx .nw-fx-graph-full{margin:0 0 20px 0;padding:18px;background-color:#f7f8fa;border:1px solid #e3e6eb;border-radius:4px}
.nw-fx .nw-fx-graph-title{font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#111;margin-bottom:10px}
.nw-fx .nw-fx-graph-full .nw-fx-graph-title{font-size:19px}
.nw-fx .nw-fx-graph-note{font-size:12px;color:#5f6b7a;margin:10px 0 0 0}
.nw-fx .nw-fx-bar-row{display:grid;grid-template-columns:132px 1fr 92px;align-items:center;gap:10px;margin:6px 0}
.nw-fx .nw-fx-graph-full .nw-fx-bar-row{grid-template-columns:170px 1fr 110px;margin:9px 0}
.nw-fx .nw-fx-bar-name{font-size:12.5px;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-fx .nw-fx-graph-full .nw-fx-bar-name{font-size:14px}
.nw-fx .nw-fx-bar-row.is-self .nw-fx-bar-name{color:#d8221f}
.nw-fx .nw-fx-bar-track{display:block;height:9px;background-color:#eef0f3;border-radius:2px;overflow:hidden}
.nw-fx .nw-fx-graph-full .nw-fx-bar-track{height:13px}
.nw-fx .nw-fx-bar-fill{display:block;height:100%;width:var(--w,0%);background-color:#111;border-radius:2px;transition:width 1.05s cubic-bezier(.22,.61,.36,1)}
.nw-fx .nw-fx-bar-row.is-self .nw-fx-bar-fill{background-color:#d8221f}
.nw-fx .nw-fx-wealth .nw-fx-bar-fill{background-color:#d8221f}
.nw-fx .nw-fx-wealth .nw-fx-bar-row{grid-template-columns:190px 1fr 52px}
.nw-fx .nw-fx-wealth .nw-fx-bar-name{white-space:normal;line-height:1.3}
html.nw-fx-js .nw-fx [data-fx-chart]:not(.fx-in) .nw-fx-bar-fill{width:0}
.nw-fx .nw-fx-bar-value{font-size:12.5px;font-weight:700;color:#111;text-align:right;font-variant-numeric:tabular-nums}
.nw-fx .nw-fx-graph-full .nw-fx-bar-value{font-size:15px}
.nw-fx .nw-fx-bar-row.is-self .nw-fx-bar-value{color:#d8221f}

/* FAQ smooth accordion (height animation is driven by fx.js) */
.nw-fx .faq-answer{overflow:hidden}
.nw-fx .faq-icon{transition:transform .25s ease}
.nw-fx .faq-item.fx-open .faq-icon{transform:rotate(180deg)}

@media (max-width:700px){
  .nw-fx .nw-fx-bar-row{grid-template-columns:96px 1fr 74px;gap:8px}
  .nw-fx .nw-fx-graph-full .nw-fx-bar-row{grid-template-columns:110px 1fr 84px}
  .nw-fx .nw-fx-bar-name{font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){
  .nw-fx [data-fx-reveal],.nw-fx .fx-pre,.nw-fx .nw-fx-bar-fill,
  .nw-fx .key-takeaways-standalone-card,.nw-fx .entity-card,.nw-fx .quick-fact-item,
  .nw-fx .key-takeaways-standalone-card li,.nw-fx .faq-icon{transition:none!important}
  html.nw-fx-js .nw-fx [data-fx-reveal]:not(.fx-in),
  html.nw-fx-js .nw-fx .fx-pre:not(.fx-in){opacity:1;transform:none}
  html.nw-fx-js .nw-fx [data-fx-chart]:not(.fx-in) .nw-fx-bar-fill{width:var(--w,0%)}
}