/* ==========================================================================
   NetWorthEx GLOBAL FX layer (nw-gfx) — site-wide technique application
   Companion to: article FX (.nw-fx, fx-production) + slider V6 (.nw-top10).
   Vanilla CSS, no libraries. Scoped under .nw-gfx so it can never collide
   with the base design system (networthex.css) or the article FX layer.

   GRACEFUL DEGRADATION CONTRACT (same as person-fx):
   - Hidden/animated initial states apply ONLY under html.nw-gfx-js, a class
     added by a tiny inline gate script in the layout <head>.
   - If global-fx.js fails to load, the layout watchdog removes the class
     and every element renders fully visible. No JS = fully visible site.
   - All motion is transform/opacity only (no layout properties), so CLS = 0.

   BRAND LOCK: white/light surfaces, NO gradients anywhere (the skeleton uses
   a flat opacity pulse instead of the usual gradient shimmer for this reason),
   red #d8221f, text #111111, muted #5f6b7a, panels #f7f8fa / #eef0f3,
   borders #e3e6eb, Barlow Condensed + Inter (inherited from base tokens).
   ========================================================================== */

/* ---------- 1. Scroll reveal (up / left / right / scale) ---------- */
html.nw-gfx-js .nw-gfx [data-gfx-reveal]:not(.gfx-in) {
    opacity: 0;
    transform: translateY(20px);
}
html.nw-gfx-js .nw-gfx [data-gfx-reveal="left"]:not(.gfx-in)  { transform: translateX(-28px); }
html.nw-gfx-js .nw-gfx [data-gfx-reveal="right"]:not(.gfx-in) { transform: translateX(28px); }
html.nw-gfx-js .nw-gfx [data-gfx-reveal="scale"]:not(.gfx-in) { transform: scale(.96); }
.nw-gfx [data-gfx-reveal] {
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.nw-gfx [data-gfx-reveal].gfx-in { opacity: 1; transform: none; }

/* Stagger: children of [data-gfx-stagger] are auto-tagged by global-fx.js
   and receive an inline transition-delay (70ms steps, capped at 560ms). */

/* ---------- 2. Count-up figures ---------- */
.nw-gfx [data-gfx-countup] { font-variant-numeric: tabular-nums; }

/* ---------- 3. Card hover lift + tilt-lite ---------- */
.nw-gfx .nw-gfx-lift {
    transition: transform .28s ease, box-shadow .28s ease, border-color .2s ease;
}
.nw-gfx .nw-gfx-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(17,17,17,.10);
    border-color: #d8221f;
}
.nw-gfx [data-gfx-tilt] {
    transform-style: preserve-3d;
    transition: transform .25s ease, box-shadow .25s ease;
}
.nw-gfx [data-gfx-tilt].gfx-tilting {
    transition: transform .12s ease-out;
    box-shadow: 0 16px 38px rgba(17,17,17,.12);
}

/* ---------- 4. Marquee (figures ticker / wordmark strip) ----------
   Track holds TWO identical groups (server-rendered, or cloned by JS).
   Animation is transform-only; pauses on hover; static under reduced motion. */
.nw-gfx .nw-gfx-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: none; /* no fade masks: they would need gradients */
}
.nw-gfx .nw-gfx-marquee-track {
    display: flex;
    width: max-content;
    animation: nwGfxMarquee 36s linear infinite;
}
.nw-gfx .nw-gfx-marquee:hover .nw-gfx-marquee-track { animation-play-state: paused; }
.nw-gfx .nw-gfx-marquee-group {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
@keyframes nwGfxMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.nw-gfx .nw-gfx-ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 22px;
    white-space: nowrap;
    border-right: 1px solid #e3e6eb;
}
.nw-gfx .nw-gfx-ticker-rank {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    color: #d8221f;
    font-size: 15px;
}
.nw-gfx .nw-gfx-ticker-name { font-weight: 700; font-size: 14px; color: #111; }
.nw-gfx .nw-gfx-ticker-fig {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #111;
}

/* ---------- 5. Giant wordmark / oversized outline type ---------- */
.nw-gfx .nw-gfx-wordmark {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: .82;
    letter-spacing: -.01em;
    color: transparent;
    -webkit-text-stroke: 2px #2a2a2a;
    user-select: none;
    white-space: nowrap;
}
.nw-gfx .nw-gfx-bigtype {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: .85;
    color: transparent;
    -webkit-text-stroke: 2px #e3e6eb;
    user-select: none;
}
.nw-gfx .nw-gfx-bigtype.is-red { -webkit-text-stroke-color: #d8221f; }

/* ---------- 6. Animated bars (generic + compare split bar) ---------- */
.nw-gfx .nw-gfx-bar-row {
    display: grid;
    grid-template-columns: 132px 1fr 92px;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.nw-gfx .nw-gfx-bar-name {
    font-size: 12.5px; font-weight: 600; color: #111;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nw-gfx .nw-gfx-bar-row.is-self .nw-gfx-bar-name { color: #d8221f; }
.nw-gfx .nw-gfx-bar-track {
    display: block; height: 10px;
    background-color: #eef0f3; border-radius: 2px; overflow: hidden;
}
.nw-gfx .nw-gfx-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-gfx .nw-gfx-bar-row.is-self .nw-gfx-bar-fill { background-color: #d8221f; }
.nw-gfx .nw-gfx-bar-value {
    font-size: 12.5px; font-weight: 700; color: #111;
    text-align: right; font-variant-numeric: tabular-nums;
}
html.nw-gfx-js .nw-gfx [data-gfx-chart]:not(.gfx-in) .nw-gfx-bar-fill { width: 0; }

/* Compare split bar: two segments, widths from --a / --b (percent). */
.nw-gfx .nw-gfx-vsbar {
    display: flex; height: 26px; border-radius: 3px; overflow: hidden;
    border: 1px solid #e3e6eb; background-color: #eef0f3;
}
.nw-gfx .nw-gfx-vsbar-a {
    background-color: #d8221f; height: 100%;
    width: var(--a, 50%);
    transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
.nw-gfx .nw-gfx-vsbar-b {
    background-color: #111; height: 100%;
    width: var(--b, 50%);
    transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
html.nw-gfx-js .nw-gfx [data-gfx-chart]:not(.gfx-in) .nw-gfx-vsbar-a,
html.nw-gfx-js .nw-gfx [data-gfx-chart]:not(.gfx-in) .nw-gfx-vsbar-b { width: 0; }

/* ---------- 7. Skeleton placeholders (flat pulse — NO gradient shimmer) -- */
.nw-gfx .nw-gfx-skel {
    background-color: #eef0f3;
    border-radius: 3px;
    animation: nwGfxPulse 1.3s ease-in-out infinite;
}
.nw-gfx .nw-gfx-skel.is-line   { height: 13px; margin: 7px 0; }
.nw-gfx .nw-gfx-skel.is-title  { height: 22px; margin: 9px 0; width: 62%; }
.nw-gfx .nw-gfx-skel.is-thumb  { aspect-ratio: 1/1; width: 100%; }
.nw-gfx .nw-gfx-skel.is-figure { height: 34px; width: 46%; margin: 8px 0; }
@keyframes nwGfxPulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
/* Overlay mode: wrap async block, JS removes .is-loading when ready */
.nw-gfx .nw-gfx-skel-wrap { position: relative; }
.nw-gfx .nw-gfx-skel-wrap > .nw-gfx-skel-cover {
    position: absolute; inset: 0; background-color: #fff; z-index: 3;
    padding: 16px; transition: opacity .3s ease;
}
.nw-gfx .nw-gfx-skel-wrap:not(.is-loading) > .nw-gfx-skel-cover {
    opacity: 0; pointer-events: none;
}

/* ---------- 8. Table row reveal (richest / matrices / deltas) ---------- */
html.nw-gfx-js .nw-gfx [data-gfx-rows] > tr:not(.gfx-in) {
    opacity: 0;
    transform: translateY(10px);
}
.nw-gfx [data-gfx-rows] > tr {
    transition: opacity .45s ease, transform .45s ease;
}
.nw-gfx [data-gfx-rows] > tr.gfx-in { opacity: 1; transform: none; }
/* Filter mode (richest category chips): rows hidden by JS filter */
.nw-gfx [data-gfx-rows] > tr.gfx-filtered { display: none; }

/* ---------- 9. Switcher tabs (variant-switcher technique) ---------- */
.nw-gfx .nw-gfx-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid #e3e6eb; margin-bottom: 18px;
}
.nw-gfx .nw-gfx-tab {
    appearance: none; background: none; border: none; cursor: pointer;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 16px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #5f6b7a;
    padding: 9px 16px; margin-bottom: -2px;
    border-bottom: 3px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.nw-gfx .nw-gfx-tab:hover { color: #111; }
.nw-gfx .nw-gfx-tab[aria-selected="true"] {
    color: #d8221f; border-bottom-color: #d8221f;
}
.nw-gfx [data-gfx-panel][hidden] { display: none !important; }
/* Chip variant (filter buttons, e.g. richest categories) */
.nw-gfx .nw-gfx-chip {
    appearance: none; cursor: pointer;
    background-color: #fff; border: 1px solid #e3e6eb; border-radius: 999px;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 13px; font-weight: 600; color: #111;
    padding: 6px 14px; transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.nw-gfx .nw-gfx-chip:hover { border-color: #d8221f; }
.nw-gfx .nw-gfx-chip[aria-pressed="true"] {
    background-color: #d8221f; border-color: #d8221f; color: #fff;
}

/* ---------- 10. Hero entrance (load-time stagger, LCP-safe) ----------
   Keyframe animation (not scroll-gated): starts at first paint, total
   sequence <= ~700ms, transform/opacity only. Apply to ABOVE-FOLD heroes
   only; below-fold blocks use scroll reveal instead. */
html.nw-gfx-js .nw-gfx [data-gfx-hero] > * {
    animation: nwGfxHeroIn .55s cubic-bezier(.22,.61,.36,1) both;
}
html.nw-gfx-js .nw-gfx [data-gfx-hero] > *:nth-child(2) { animation-delay: .07s; }
html.nw-gfx-js .nw-gfx [data-gfx-hero] > *:nth-child(3) { animation-delay: .14s; }
html.nw-gfx-js .nw-gfx [data-gfx-hero] > *:nth-child(4) { animation-delay: .21s; }
html.nw-gfx-js .nw-gfx [data-gfx-hero] > *:nth-child(5) { animation-delay: .28s; }
html.nw-gfx-js .nw-gfx [data-gfx-hero] > *:nth-child(n+6) { animation-delay: .35s; }
@keyframes nwGfxHeroIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 11. Proof / stats strip (count-up ready) ---------- */
.nw-gfx .nw-gfx-stat-num {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px; font-weight: 800; line-height: 1; color: #d8221f;
    font-variant-numeric: tabular-nums;
}
.nw-gfx .nw-gfx-stat-lbl {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #5f6b7a; margin-top: 6px;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    .nw-gfx .nw-gfx-bar-row { grid-template-columns: 96px 1fr 74px; gap: 8px; }
    .nw-gfx .nw-gfx-bar-name { font-size: 11.5px; }
    .nw-gfx .nw-gfx-ticker-item { padding: 8px 16px; }
    .nw-gfx .nw-gfx-wordmark { -webkit-text-stroke-width: 1.3px; }
}

/* ---------- Reduced motion: everything lands in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
    .nw-gfx [data-gfx-reveal],
    .nw-gfx [data-gfx-rows] > tr,
    .nw-gfx .nw-gfx-bar-fill,
    .nw-gfx .nw-gfx-vsbar-a, .nw-gfx .nw-gfx-vsbar-b,
    .nw-gfx .nw-gfx-lift, .nw-gfx [data-gfx-tilt],
    .nw-gfx .nw-gfx-skel-cover { transition: none !important; }
    html.nw-gfx-js .nw-gfx [data-gfx-reveal]:not(.gfx-in),
    html.nw-gfx-js .nw-gfx [data-gfx-rows] > tr:not(.gfx-in) {
        opacity: 1; transform: none;
    }
    html.nw-gfx-js .nw-gfx [data-gfx-chart]:not(.gfx-in) .nw-gfx-bar-fill { width: var(--w, 0%); }
    html.nw-gfx-js .nw-gfx [data-gfx-chart]:not(.gfx-in) .nw-gfx-vsbar-a { width: var(--a, 50%); }
    html.nw-gfx-js .nw-gfx [data-gfx-chart]:not(.gfx-in) .nw-gfx-vsbar-b { width: var(--b, 50%); }
    html.nw-gfx-js .nw-gfx [data-gfx-hero] > * { animation: none; }
    .nw-gfx .nw-gfx-marquee-track { animation: none; }
    .nw-gfx .nw-gfx-skel { animation: none; opacity: .8; }
}