/* tools-hub-visual-max.css — dramatic layer for the tools hub (tools.html), in the
   welcome-visual-max language: compositor-safe, reduced-motion-gated, every layer
   carries hierarchy or data. Registered in enhancement_css_delivery_test.js. */

/* 1. section eyebrows: kicker treatment with accent tick */
.sec-eyebrow { letter-spacing: .14em; text-transform: uppercase; }
.sec-eyebrow::before { content: "// "; color: var(--action-ink, #60a5fa); }

/* 2. section numbers: oversized ghost numerals anchor the scan path */
.sec-num {
  font-variant-numeric: tabular-nums; opacity: .28; font-weight: 800;
  background: linear-gradient(180deg, var(--text, #eef2f8), transparent 140%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 3. tool rows: unified hover elevation + accent left-rail on hover */
.row { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.row::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(180deg, var(--action, #2563eb), var(--teal-ink, #2dd4bf));
  transition: width .18s ease;
 pointer-events: none;
}
.row:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(0,0,0,.55); }
.row:hover::before { width: 3px; }

/* 4. live readouts: instrument glass + tabular numerals (data reads as data) */
.out {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface, #11131a) 80%, transparent), transparent);
  backdrop-filter: blur(4px); border-radius: 8px;
}

/* 5. stat band: proof numbers get weight + glow underline */
.stat .num { font-variant-numeric: tabular-nums; }
.stat { position: relative; }
.stat::after {
  content: ""; position: absolute; left: 25%; right: 25%; bottom: -4px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--action, #2563eb), transparent);
  opacity: .5;
 pointer-events: none;
}

/* 6. take-gym CTAs: depth + lift (the conversion path earns the emphasis) */
.take-gym { box-shadow: 0 4px 18px -8px var(--action, #2563eb); transition: transform .18s ease, box-shadow .18s ease; }
.take-gym:hover { transform: translateY(-2px); box-shadow: 0 8px 26px -8px var(--action, #2563eb); }

/* 7. how-body explainers: quiet reveal below the fold (native, no JS) */
@supports (animation-timeline: view()) {
  .how { animation: thvm-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  @keyframes thvm-rise { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* 8. motion honesty */
@media (prefers-reduced-motion: reduce) {
  .row, .take-gym { transition: none !important; }
  .row:hover, .take-gym:hover { transform: none; }
  .row::before { transition: none; }
  .how { animation: none !important; opacity: 1; transform: none; }
}

/* --- Marketing motion pass (2026-07-22): START-HERE sheen + row icon nudge ---- */
@media (prefers-reduced-motion: no-preference){
  .featured{ position: relative; overflow: hidden; }
  .featured::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 48%, rgba(45,212,191,.08) 52%, transparent 70%);
    background-size: 260% 100%; animation: thvm-sheen 7s ease-in-out infinite; }
  @keyframes thvm-sheen{ 0%,100%{ background-position: 200% 0; } 45%,55%{ background-position: 0% 0; } }
  .row:hover{ transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
}