/* Variant 2 — design-to-motion (website context): bento cards rise in on
   scroll, then every card's visual acts out a story. The chat retypes itself.
   Text stays live HTML. Reduced motion shows the design at rest. */
:root { --e: cubic-bezier(.16, 1, .3, 1); --e2: cubic-bezier(.33, 1, .68, 1); }

/* Card intro: rise, slight scale, blur to sharp, staggered in reading order */
html.rv .bento .cell { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(6px); transition: transform .9s var(--e), opacity .6s var(--e2), filter .6s var(--e2); transition-delay: calc(var(--i) * 85ms); }
html.rv .bento .cell.in { opacity: 1; transform: none; filter: none; }
html.rv .bento .viz { opacity: 0; transform: translateY(10px); filter: blur(4px); transition: transform 1.05s var(--e), opacity .75s var(--e2), filter .75s var(--e2); transition-delay: calc(var(--i) * 85ms + 150ms); }
html.rv .bento .cell.in .viz { opacity: 1; transform: none; filter: none; }

.viz { position: relative; font: 500 .875rem/1.25rem ui-sans-serif, system-ui, sans-serif; }
.viz b { font-weight: 600; font-variant-numeric: tabular-nums; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: currentColor; }

/* Keyword research: a query gets typed, results land */
.cell-keywords { justify-content: flex-start; }
.cell-keywords .ic:not(.viz .ic) { margin-top: auto; }
.kw-viz { margin-bottom: 24px; padding: 12px; border-radius: 12px; background: rgb(255 248 243 / .12); box-shadow: inset 0 0 0 1px rgb(255 248 243 / .22); }
.kw-q { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px; background: rgb(255 248 243 / .94); color: #1a0d06; font-weight: 600; }
.kw-q .ic { width: 16px; height: 16px; margin: 0; color: #c2410c; }
.kw-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.kw-rows li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 4px 4px; }
.kw-rows b { text-align: right; }
.kw-rows i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: rgb(255 248 243 / .9); }

/* Site audit: pages get crawled, issues land */
.cell-audit { gap: 24px; }
.au-viz { margin-top: auto; padding: 16px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.au-head { display: flex; justify-content: space-between; color: var(--muted); }
.au-head b { color: var(--text); }
.au-bar { height: 6px; margin: 8px 0 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.au-bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.au-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.au-rows li { display: flex; align-items: center; gap: 8px; }
.au-rows b { margin-left: auto; }
.sev { width: 8px; height: 8px; border-radius: 50%; background: #d4a017; flex: none; }
.sev.hi { background: #dc2626; }

/* Rank tracking: a scrubber rides the curve while the position counts */
.rk-viz { margin-top: auto; padding-top: 8px; }
.rk-viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.rk-base { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rk-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rk-dot { fill: var(--accent); }
.rk-ring { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.rk-tip { font: 600 13px ui-sans-serif, system-ui, sans-serif; fill: var(--text); font-variant-numeric: tabular-nums; }

/* Backlinks: new links land on top, the oldest leaves */
.ln-viz { margin-top: auto; height: 140px; overflow: hidden; position: relative; }
.ln-rows { list-style: none; margin: 0; padding: 0; }
.ln-rows li { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transform: translateY(calc(var(--s) * 48px)); }
.ln-rows li[style*="--s:-1"] { opacity: 0; }
.ln-rows b { margin-left: auto; color: var(--muted); }
.ln-new { position: absolute; z-index: 1; left: 4px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ln-new::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.ln-rows li .ic { width: 16px; height: 16px; margin: 0; color: var(--muted); }

/* Your Google data: clicks bars breathe, a marker reads them day by day */
@media (min-width: 901px) { .cell-google { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 48px; align-items: end; } .cell-google > :not(.viz) { grid-column: 1; } .gg-viz { grid-column: 2; grid-row: 1 / span 3; } }
.gg-viz { padding-top: 36px; }
.gg-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.gg-bars i { flex: 1; height: 100%; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--accent) 28%, transparent); transform-origin: bottom; transform: scaleY(var(--h)); }
.gg-bars i.on { background: var(--accent); }
.gg-tip { position: absolute; top: 0; left: 0; white-space: nowrap; padding: 4px 8px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: .75rem; line-height: 1rem; }

/* Chat: the question retypes, the tool runs, the answer resolves */
.chat-user { position: relative; }
.chat.live .typed-full { color: transparent; }
.typed { display: none; }
.chat.live .typed { display: block; position: absolute; inset: 14px 18px; }
.chat-tool .ic { transform-origin: center; }