/* ==========================================================================
   /features/answer-engine-insights — hover-driven graphics
   ========================================================================== */
@property --ax-fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.ax { --expo: cubic-bezier(.19, 1, .22, 1); }

/* Cards: pointer spotlight + lift */
.ax .card { position: relative; overflow: hidden; transition: opacity .6s ease, transform .6s var(--expo), border-color .3s; }
.ax .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 70%); }
.ax .card:hover { border-color: #3d3d3d; transform: translateY(-4px); }
.ax .card:hover::after { opacity: 1; }
.ax .card .card-visual { height: 190px; }

/* Mock panels tilt toward the pointer */
.ax .mock-wrap, .ax .ft-banner .inner { perspective: 1100px; }
.ax .mock-wrap .mock, .ax .ft-banner .mock { transition: transform .7s var(--expo), box-shadow .7s var(--expo), border-color .4s; will-change: transform; }
.ax .mock-wrap:hover .mock, .ax .ft-banner .inner:hover .mock { border-color: #3d3d3d; box-shadow: 0 30px 70px rgba(0,0,0,.6); }

/* Bars re-grow whenever the pointer enters their panel */
.ax .mock-bar i { transition: background .4s, filter .4s; }
.ax .mock:hover .mock-bar i { animation: axGrowW .9s var(--expo) backwards; }
.ax .mock:hover .mock-row:nth-child(2) .mock-bar i { animation-delay: .07s; }
.ax .mock:hover .mock-row:nth-child(3) .mock-bar i { animation-delay: .14s; }
.ax .mock:hover .mock-row:nth-child(4) .mock-bar i { animation-delay: .21s; }
@keyframes axGrowW { from { width: 0; } }
.ax .mock-row { transition: background .3s, padding .4s var(--expo); border-radius: 6px; }
.ax .mock-row.ax-hot:hover, .ax .ax-rows .mock-row:hover { background: rgba(255,255,255,.04); padding-left: 8px; padding-right: 8px; }
.ax .ax-rows .mock-row:hover .mock-bar i { filter: brightness(1.25) drop-shadow(0 0 6px currentColor); }
.ax .ax-val { flex: none; min-width: 38px; text-align: right; color: var(--fg-3); font-variant-numeric: tabular-nums; opacity: .0; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--expo), color .3s; }
.ax .mock:hover .ax-val { opacity: 1; transform: none; }
.ax .mock-row:hover .ax-val { color: var(--fg); }

/* Line charts: redraw + scrubber */
.ax-chart { overflow: visible; cursor: crosshair; touch-action: pan-y; }
.ax-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .4s; }
.ax-chart.ax-redraw .ax-line { animation: axDraw 1.3s var(--expo); }
@keyframes axDraw { from { stroke-dashoffset: 1; } }
.ax-cross { stroke: #4a4a4a; stroke-dasharray: 3 3; opacity: 0; transition: opacity .2s; }
.ax-dot { stroke: #0a0a0b; stroke-width: 2; opacity: 0; transition: opacity .2s, fill .4s; }
.ax-chart.ax-scrub .ax-cross, .ax-chart.ax-scrub .ax-dot { opacity: 1; }
.ax .mock-kpi strong { font-variant-numeric: tabular-nums; }
.ax-topic { cursor: pointer; }
.ax-topic.on span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tc); margin-right: 8px; vertical-align: 2px; box-shadow: 0 0 8px var(--tc); }

/* Typing answer */
.ax-type.ax-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--fg); animation: axBlink .8s steps(2) infinite; }
@keyframes axBlink { 50% { opacity: 0; } }
.ax-type b { color: var(--green); font-weight: 500; }

/* FactCheck scan */
.ax-scan .mock-body { position: relative; }
.ax-scanline { position: absolute; left: 0; right: 0; top: 0; height: 36px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(8,255,182,.14) 70%, rgba(8,255,182,.5)); }
.ax .card:hover .ax-scanline { animation: axScan 1.5s var(--expo); }
@keyframes axScan { 0% { opacity: 1; transform: translateY(-36px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(150px); } }
.ax .card:hover .ax-scan .mock-tag { animation: axPop .6s var(--expo) backwards; }
.ax .card:hover .ax-scan .mock-row:nth-child(3) .mock-tag { animation-delay: .25s; }
.ax .card:hover .ax-scan .mock-row:nth-child(4) .mock-tag { animation-delay: .5s; }
@keyframes axPop { from { transform: scale(.6); opacity: 0; } }

/* FactCheck banner: wrong claim gets struck, truth lights up */
.ax-wrong, .ax-right { transition: opacity .5s, box-shadow .6s var(--expo), color .4s, background .5s; }
.ax-wrong { position: relative; }
.ax-wrong::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--expo); }
.ax .ft-banner .inner:hover .ax-wrong { opacity: .55; }
.ax .ft-banner .inner:hover .ax-wrong::after { transform: scaleX(1); }
.ax .ft-banner .inner:hover .ax-right { background: rgba(8,255,182,.1); box-shadow: 0 0 0 1px rgba(8,255,182,.45), 0 0 26px rgba(8,255,182,.25); }
.ax-fixed { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--expo), opacity .5s; }
.ax-fixed > div { overflow: hidden; }
.ax .ft-banner .inner:hover .ax-fixed { grid-template-rows: 1fr; opacity: 1; }
.ax-fixed .mock-row { border-top: 1px solid var(--line-soft); }

/* Sentiment keywords */
.ax-kw { cursor: pointer; transition: opacity .35s, color .3s, border-color .3s, transform .5s var(--expo), background .3s; }
.ax-kw:hover { transform: translateY(-3px); background: rgba(255,255,255,.05); }
.ax-kw[data-s="pos"]:hover, .ax-sentiment[data-s="pos"] .ax-kw[data-s="pos"] { color: var(--green); border-color: rgba(8,255,182,.4); }
.ax-kw[data-s="neu"]:hover, .ax-sentiment[data-s="neu"] .ax-kw[data-s="neu"] { color: var(--amber); border-color: rgba(255,176,32,.45); }
.ax-kw[data-s="neg"]:hover, .ax-sentiment[data-s="neg"] .ax-kw[data-s="neg"] { color: var(--pink); border-color: rgba(224,30,90,.5); }
.ax-sentiment[data-s="pos"] .ax-kw:not([data-s="pos"]), .ax-sentiment[data-s="neu"] .ax-kw:not([data-s="neu"]), .ax-sentiment[data-s="neg"] .ax-kw:not([data-s="neg"]) { opacity: .22; }
.ax-sent { cursor: pointer; }

/* Citation table: row fills to its share */
.ax-cite tbody tr { --ax-fill: 0%; background: linear-gradient(90deg, rgba(8,255,182,.13) var(--ax-fill), transparent var(--ax-fill)); transition: --ax-fill .9s var(--expo), opacity .35s; }
.ax-cite tbody tr:hover { --ax-fill: var(--share); }
.ax-cite tbody:hover tr:not(:hover) { opacity: .4; }
.ax-cite tbody tr:hover td:first-child { color: var(--fg); }
.ax-cite td { transition: color .3s; }

/* Benchmark deltas */
.ax-delta { flex: none; min-width: 64px; text-align: right; font-size: 11px; color: var(--fg-3); opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .5s var(--expo); }
.ax-bench .mock-row:hover .ax-delta { opacity: 1; transform: none; }
.ax-bench .mock-row:hover .mock-bar i { background: var(--green); filter: drop-shadow(0 0 6px rgba(8,255,182,.5)); }
.ax-bench .mock-body:hover .mock-row:not(:hover) { opacity: .5; }
.ax-bench .mock-row { transition: opacity .3s, background .3s, padding .4s var(--expo); }

/* Platform columns */
.ax-cols { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; height: 170px; align-items: end; }
.ax-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.ax-col i { position: relative; display: block; width: 100%; height: calc(var(--h) * .8); background: #3a3a3a; border-radius: 4px 4px 0 0; transform-origin: bottom; transition: background .35s, transform .6s var(--expo), box-shadow .4s; }
.ax-col.hi i { background: var(--green); }
.ax-cols:hover .ax-col.hi:not(:hover) i { background: #3a3a3a; }
.ax-col:hover i { background: var(--green); transform: scaleY(1.06); box-shadow: 0 0 22px rgba(8,255,182,.35); }
.ax-col i::after { content: attr(data-v); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 6px); padding: 2px 6px; border-radius: 5px; background: var(--fg); color: #000; font-style: normal; font-size: 10px; font-weight: 600; opacity: 0; transition: opacity .25s, transform .5s var(--expo); pointer-events: none; white-space: nowrap; }
.ax-col:hover i::after { opacity: 1; transform: translate(-50%, 0) scaleY(.943); }
.ax-col span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--fg-3); transition: color .3s; }
.ax-col:hover span { color: var(--fg); }
.ax .mock:hover .ax-col i { animation: axRise .8s var(--expo) backwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes axRise { from { transform: scaleY(0); } }

/* Platform logo cells */
.ax .logo-grid > * { position: relative; overflow: hidden; cursor: default; transition: color .3s, background .4s; }
.ax .logo-grid > *::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transition: transform .6s var(--expo); }
.ax .logo-grid > *:hover { background: rgba(255,255,255,.04); }
.ax .logo-grid > *:hover::before { transform: scaleX(1); }

/* Security rows */
.ax-sec .mock-row .mock-tag { transition: transform .5s var(--expo), box-shadow .4s; }
.ax-sec .mock-row:hover .mock-tag.good { transform: scale(1.06); box-shadow: 0 0 18px rgba(8,255,182,.3); }

/* Jump pills in the hero */
.ax .ft-hero .pill-tabs .btn { transition: transform .5s var(--expo), border-color .3s, background .3s; }
.ax .ft-hero .pill-tabs .btn:hover { transform: translateY(-3px); border-color: #555; background: var(--bg-3); }

@media (max-width: 640px) { .ax-col span { font-size: 8px; } .ax-cols { gap: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .ax .mock:hover .mock-bar i, .ax .mock:hover .ax-col i, .ax .card:hover .ax-scanline, .ax .card:hover .ax-scan .mock-tag, .ax-chart.ax-redraw .ax-line { animation: none; }
  .ax .mock-wrap .mock, .ax .ft-banner .mock { transform: none !important; }
}

/* ---------- Shopping page extras ---------- */
.sx-fix s { text-decoration: none; transition: opacity .4s, color .4s; }
.sx-fix b { font-weight: 500; color: var(--green); display: inline-block; max-width: 0; opacity: 0; overflow: hidden; vertical-align: bottom; transition: max-width .6s var(--expo), opacity .5s, margin .6s var(--expo); }
.sx-fix:hover s { text-decoration: line-through; color: var(--fg-3); }
.sx-fix:hover b { max-width: 60px; opacity: 1; margin-left: 6px; }
.sx-fix .mock-tag { position: relative; transition: color .4s, border-color .4s; }
.sx-fix .mock-tag i { font-style: normal; display: inline-block; transition: opacity .4s, transform .5s var(--expo); }
.sx-fix .mock-tag i:last-child { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; transform: translateY(8px); }
.sx-fix:hover .mock-tag { color: var(--green); border-color: rgba(8,255,182,.4); }
.sx-fix:hover .mock-tag i:first-child { opacity: 0; transform: translateY(-8px); }
.sx-fix:hover .mock-tag i:last-child { opacity: 1; transform: none; }
.sx-steps li { cursor: pointer; transition: background .3s, color .3s, transform .5s var(--expo); }
.sx-steps li i, .sx-steps li i::after { transition: border-color .3s, background .3s; }
.sx-steps li:hover { background: #1f2422; color: var(--fg); transform: translateX(6px); }
.sx-steps li.pending:hover i { border-color: var(--green); }
.sx-steps li.pending:hover i::after { background: var(--green); }
.ax .ft-hero-visual .mock-panel { transition: border-color .3s, transform .5s var(--expo), background .3s; }
.ax .ft-hero-visual .mock-panel:hover { border-color: #3d3d3d; transform: translateY(-3px); background: #19191a; }