/* ═══════════════════════════════════════════════════════════════════════
   SCREENCHART — hero product demo
   Auto-playing, looping mini-demo: idle → capture → analyzing → result.
   Lives inside the hero app-window frame (.mock). Pauses on hover.
   Uses landing.css tokens (--accent, --c-blue/teal/amber, --surface, …).
   ═══════════════════════════════════════════════════════════════════════ */

/* the stage replaces .mock-body — all beats stack here and crossfade */
.scd-stage {
  position: relative;
  height: 392px;
  background: var(--surface);
  overflow: hidden;
}
@media (max-width: 560px) { .scd-stage { height: 372px; } }

.scd-layer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(9px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.scd-stage[data-loop="1"][data-beat="1"] .scd-layer[data-loop="1"][data-b="1"],
.scd-stage[data-loop="1"][data-beat="2"] .scd-layer[data-loop="1"][data-b="2"],
.scd-stage[data-loop="1"][data-beat="3"] .scd-layer[data-loop="1"][data-b="3"],
.scd-stage[data-loop="1"][data-beat="4"] .scd-layer[data-loop="1"][data-b="4"],
.scd-stage[data-loop="2"][data-beat="1"] .scd-layer[data-loop="2"][data-b="1"],
.scd-stage[data-loop="2"][data-beat="2"] .scd-layer[data-loop="2"][data-b="2"],
.scd-stage[data-loop="2"][data-beat="3"] .scd-layer[data-loop="2"][data-b="3"],
.scd-stage[data-loop="2"][data-beat="4"] .scd-layer[data-loop="2"][data-b="4"] {
  opacity: 1; transform: none;
}

/* freeze every running animation while hovered (clock is paused in JS) */
.scd-stage.is-paused .scd-layer.run,
.scd-stage.is-paused .scd-layer.run * { animation-play-state: paused !important; }

/* ── BEAT 1 — IDLE ─────────────────────────────────────────────────── */
.scd-idle {
  align-items: center; justify-content: center; text-align: center;
  padding: 26px 40px;
}
.scd-idle-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: var(--accent-soft); color: var(--accent);
}
.scd-idle-icon .ico { font-size: 28px; }
.scd-idle h3 {
  font-size: 22px; font-weight: 800; letter-spacing: -.025em;
  color: var(--tx, #18181B); margin: 0 0 9px; line-height: 1.1;
}
.scd-idle .scd-sub {
  font-size: 13.5px; color: var(--muted); margin: 0 auto 20px;
  max-width: 420px; line-height: 1.55;
}
.scd-steps {
  display: flex; flex-direction: column; gap: 11px;
  text-align: left; margin: 0 auto 24px; max-width: 410px;
}
.scd-step-line { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--tx); }
.scd-step-line .n {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  font-family: var(--mono); color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
}
.scd-step-line b { font-weight: 700; }
.scd-kbd {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 5px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-bottom-width: 2px;
}
.scd-cta {
  position: relative; overflow: visible;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 24px; border-radius: var(--r);
  background: var(--accent); color: #fff; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px var(--accent);
}
.scd-cta .ico { font-size: 20px; }
/* ripple, clipped to the button face */
.cta-rip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cta-rip i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.5); transform: translate(-50%,-50%) scale(0); }
/* arrow cursor that glides in and clicks the button to start the capture */
.scd-pointer { position: absolute; left: 50%; top: 50%; width: 22px; height: 24px; pointer-events: none; opacity: 0; z-index: 3; }
.scd-pointer svg { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.32)); }

@media (prefers-reduced-motion: no-preference) {
  .scd-idle.run .scd-cta { animation: scdPress 1.7s var(--ease) both; }
  .scd-idle.run .cta-rip i { animation: scdRipple 1.7s var(--ease) both; }
  .scd-idle.run .scd-pointer { animation: scdPointer 1.7s var(--ease) both; }
}
@keyframes scdPress {
  0%, 50% { transform: none; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px var(--accent); }
  60% { transform: scale(.955); box-shadow: 0 0 0 6px var(--accent-soft), 0 6px 14px -8px var(--accent); }
  72%, 100% { transform: none; box-shadow: 0 0 0 0 var(--accent-soft), 0 8px 20px -8px var(--accent); }
}
@keyframes scdRipple {
  0%, 54% { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  58% { opacity: .85; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(11); }
}
@keyframes scdPointer {
  0%   { opacity: 0; transform: translate(6px, 38px) scale(1.05); }
  20%  { opacity: 1; }
  50%  { opacity: 1; transform: translate(6px, 6px) scale(1); }
  60%  { transform: translate(6px, 6px) scale(.82); }
  70%, 90% { opacity: 1; transform: translate(6px, 6px) scale(1); }
  100% { opacity: 0; transform: translate(6px, 14px) scale(1); }
}

/* ── BEAT 2 — CAPTURE ──────────────────────────────────────────────── */
.scd-capture { background: var(--surface-2); }
.scd-screen { position: absolute; inset: 0; overflow: hidden; }
/* the captured page sitting on a neutral desktop */
.scd-doc {
  position: absolute; left: 7%; top: 11%; right: 7%; bottom: 12%;
  background: #fff; border-radius: 8px; border: 1px solid #e4e7ec;
  box-shadow: 0 10px 30px -16px rgba(15,23,42,.22);
  padding: 16px 18px; overflow: hidden; color: #1f2733;
}
.scd-doc .doc-kicker { font-size: 11px; font-weight: 800; color: #0f1726; letter-spacing: -.01em; margin: 0 0 8px; }
.scd-doc .doc-title { font-size: 13.5px; font-weight: 700; color: #1d2530; margin: 0 0 11px; }
.scd-doc table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 10px; }
.scd-doc th {
  background: #f3f5f8; color: #44505f; font-weight: 600; text-align: left;
  padding: 6px 8px; border: 1px solid #e4e7ec; font-size: 9.5px; line-height: 1.25;
}
.scd-doc th.num, .scd-doc td.num { text-align: right; }
.scd-doc td { padding: 5px 8px; border: 1px solid #eceef2; color: #2b3340; }
.scd-doc tr:nth-child(even) td { background: #fafbfc; }
.scd-doc .rk { text-align: center; color: #7a8593; }
.scd-doc .src { margin-top: 9px; font-family: var(--mono); font-size: 8px; color: #97a0ad; }

/* dim veil + selection rectangle sweeping open */
.scd-veil { position: absolute; inset: 0; background: rgba(17,22,34,.34); opacity: 0; }
.scd-sel {
  position: absolute; box-sizing: border-box;
  border: 2px dashed var(--c-blue);
  box-shadow: 0 0 0 9999px rgba(17,22,34,.30), 0 0 26px rgba(59,130,246,.35);
  border-radius: 4px; opacity: 0; left: 30%; top: 34%; width: 5%; height: 6%;
}
@media (prefers-reduced-motion: no-preference) {
  .scd-capture.run .scd-sel { animation: scdDrag 1.5s var(--ease) both; }
  .scd-capture.run .scd-veil { animation: scdVeil 1.5s var(--ease) both; }
}
@keyframes scdVeil { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 1; } }
@keyframes scdDrag {
  0%   { opacity: 0; left: 31%; top: 35%; width: 4%;  height: 5%;  }
  12%  { opacity: 1; }
  68%, 100% { opacity: 1; left: 6%; top: 9%; width: 88%; height: 80%; }
}
.scd-sel .sh { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--c-blue); border-radius: 2px; }
.scd-sel .sh-nw { top: -5px; left: -5px; } .scd-sel .sh-ne { top: -5px; right: -5px; }
.scd-sel .sh-sw { bottom: -5px; left: -5px; } .scd-sel .sh-se { bottom: -5px; right: -5px; }
.scd-dim {
  position: absolute; top: 7px; left: 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: var(--c-blue); color: #fff; padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
/* normal arrow cursor pinned to the dragging corner (never a crosshair) */
.scd-cursor { position: absolute; left: 100%; top: 100%; transform: translate(-6px,-6px);
  width: 22px; height: 24px; pointer-events: none; }
.scd-cursor svg { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.32)); }

/* ── BEAT 3 — ANALYZING ────────────────────────────────────────────── */
.scd-analyze { padding: 26px 34px; justify-content: center; }
.scd-an-cap {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
}
.scd-an-cap .strip { flex: 1; height: 1px; background: var(--border); }
.scd-an-head { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.scd-ring {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  border: 3px solid var(--surface-2); border-top-color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) { .scd-analyze.run .scd-ring { animation: scdSpin .85s linear infinite; } }
@keyframes scdSpin { to { transform: rotate(360deg); } }
.scd-an-head h3 { font-size: 16px; font-weight: 700; color: var(--tx); margin: 0 0 2px; }
.scd-an-head p { font-size: 12.5px; color: var(--muted); margin: 0; }

.scd-checklist { display: flex; flex-direction: column; gap: 14px; margin-left: 2px; }
.scd-check { display: flex; align-items: center; gap: 13px; font-size: 14px; transition: color .3s var(--ease); }
.scd-check .ci { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; position: relative; }
/* pending dot */
.scd-check .ci .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); transition: opacity .25s; }
/* active spinner */
.scd-check .ci .spin {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  opacity: 0; transition: opacity .25s;
}
.scd-check.active .ci .spin { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .scd-analyze.run .scd-check.active .ci .spin { animation: scdSpin .8s linear infinite; } }
/* done check */
.scd-check .ci .done { position: absolute; inset: 0; border-radius: 50%; background: var(--ok); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s var(--ease); }
.scd-check .ci .done .ico { font-size: 14px; color: #fff; }
.scd-check.done .ci .dot { opacity: 0; }
.scd-check.done .ci .done { opacity: 1; transform: scale(1); }

.scd-check .ct { color: var(--muted); transition: color .3s, font-weight .3s; }
.scd-check.pending .ct { color: var(--tx-faint, #aeb6c2); }
.scd-check.active .ct { color: var(--tx); font-weight: 700; }
.scd-check.done .ct { color: var(--tx); }

/* ── BEAT 4 — RESULT ───────────────────────────────────────────────── */
.scd-result { padding: 14px 18px 14px; }
.scd-result-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.scd-pills { display: flex; flex-wrap: nowrap; gap: 3px; flex: 1; min-width: 0; }
.scd-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 600; padding: 4px 6px; border-radius: 999px;
  background: var(--surface); color: var(--muted); border: 1px solid var(--border-2);
  white-space: nowrap;
}
.scd-pill .ico { font-size: 11px; }
.scd-pill.on { background: var(--accent); color: #fff; border-color: transparent; }
.scd-pill-more { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.scd-export {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
  background: var(--surface); color: var(--accent); border: 1px solid var(--accent-line);
  cursor: pointer; white-space: nowrap;
}
.scd-export .ico { font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .scd-result.run .scd-pill { animation: scdPop .5s var(--ease) both; }
  .scd-result.run .scd-pill:nth-child(1){animation-delay:.02s} .scd-result.run .scd-pill:nth-child(2){animation-delay:.06s}
  .scd-result.run .scd-pill:nth-child(3){animation-delay:.10s} .scd-result.run .scd-pill:nth-child(4){animation-delay:.14s}
  .scd-result.run .scd-pill:nth-child(5){animation-delay:.18s} .scd-result.run .scd-pill:nth-child(6){animation-delay:.22s}
  .scd-result.run .scd-pill:nth-child(7){animation-delay:.26s} .scd-result.run .scd-pill:nth-child(8){animation-delay:.30s}
  .scd-result.run .scd-pill:nth-child(9){animation-delay:.34s} .scd-result.run .scd-pill:nth-child(10){animation-delay:.38s}
}
@keyframes scdPop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.scd-chart-wrap { flex: 1; min-height: 0; }
.scd-chart-svg { width: 100%; height: 100%; display: block; }
.scd-cat { font-family: var(--font); font-size: 11px; fill: var(--muted); }
.scd-vlabel { font-family: var(--mono); font-size: 9.5px; font-weight: 700; fill: var(--tx); }
.scd-axis { font-family: var(--mono); font-size: 8.5px; fill: var(--tx-dim, #8a93a3); }
.scd-grid { stroke: var(--border); stroke-width: 1; }
.scd-axisline { stroke: var(--border-2); stroke-width: 1; }
.scd-bar { transform-box: fill-box; transform-origin: center bottom; }
.s-blue { fill: var(--c-blue); } .s-teal { fill: var(--c-teal); } .s-amber { fill: var(--c-amber); }
@media (prefers-reduced-motion: no-preference) { .scd-result.run .scd-bar { animation: scdGrow .85s var(--ease) both; } }
@keyframes scdGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.scd-legend { display: flex; justify-content: center; gap: 16px; margin-top: 6px; }
.scd-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 500; }
.scd-legend i { width: 10px; height: 10px; border-radius: 2px; }
.scd-legend i.s-blue { background: var(--c-blue); }
.scd-legend i.s-teal { background: var(--c-teal); }
.scd-legend i.s-amber { background: var(--c-amber); }
.scd-takeaway {
  margin: 0 0 10px; display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--tx); text-align: left;
  padding: 9px 12px; border-radius: var(--r); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.scd-takeaway .ico { font-size: 16px; color: var(--accent); flex: 0 0 16px; margin-top: 1px; }
.scd-takeaway b { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .scd-result.run .scd-takeaway { animation: scdFade .6s var(--ease) both; animation-delay: .12s; }
}
@keyframes scdFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .scd-takeaway { font-size: 11.5px; }
  .scd-pill { font-size: 9.5px; padding: 3px 6px; }
  .scd-export { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOOP 2 — hotkey trigger · search-result capture · animated Sankey
   ═══════════════════════════════════════════════════════════════════════ */

/* ── L2 · BEAT 1 — HOTKEY ──────────────────────────────────────────── */
.scd-hotkey {
  align-items: center; justify-content: center; text-align: center;
  padding: 26px 40px;
}
.scd-hotkey h3 {
  font-size: 22px; font-weight: 800; letter-spacing: -.025em;
  color: var(--tx); margin: 0 0 9px; line-height: 1.1;
}
.scd-hotkey .scd-sub {
  font-size: 13.5px; color: var(--muted); margin: 0 auto 26px;
  max-width: 420px; line-height: 1.55;
}
.scd-hk-keys { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; }
.scd-hk-key {
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  min-width: 46px; height: 48px; padding: 0 15px;
  display: grid; place-items: center;
  border-radius: 11px; color: var(--tx);
  background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: 0 2px 0 var(--border-2);
}
.scd-hk-plus { font-size: 17px; font-weight: 600; color: var(--muted); }
.scd-hk-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}
.scd-hk-hint .ico { font-size: 16px; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .scd-hotkey.run .scd-hk-key { animation: scdKeyPress 1.7s var(--ease) both; }
  .scd-hotkey.run .scd-hk-key:nth-child(1) { animation-delay: 0s; }
  .scd-hotkey.run .scd-hk-key:nth-child(2) { animation-delay: .04s; }
  .scd-hotkey.run .scd-hk-key:nth-child(3),
  .scd-hotkey.run .scd-hk-key:nth-child(4),
  .scd-hotkey.run .scd-hk-key:nth-child(5) { animation-delay: .08s; }
  .scd-hotkey.run .scd-hk-hint { animation: scdFade .5s var(--ease) both; animation-delay: .9s; }
}
@keyframes scdKeyPress {
  0%, 42% { transform: translateY(0); background: var(--surface); border-color: var(--border-2); color: var(--tx); box-shadow: 0 2px 0 var(--border-2); }
  52% { transform: translateY(3px); background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px var(--accent-soft); }
  66% { transform: translateY(3px); background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px var(--accent-soft); }
  76%, 100% { transform: translateY(0); background: var(--surface); border-color: var(--border-2); color: var(--tx); box-shadow: 0 2px 0 var(--border-2); }
}

/* ── L2 · BEAT 2 — GOOGLE SEARCH-RESULT CAPTURE (white, left-aligned) ── */
.scd-doc-search {
  padding: 16px 20px; overflow: hidden; text-align: left;
  background: #ffffff; border-color: #dfe1e5;
  font-family: arial, "Roboto", "Helvetica Neue", sans-serif; color: #202124;
}
/* search box */
.g-bar {
  display: flex; align-items: center; gap: 13px;
  height: 40px; padding: 0 16px; border-radius: 24px;
  background: #ffffff; border: 1px solid #dfe1e5;
  box-shadow: 0 1px 6px rgba(32,33,36,.14); margin-bottom: 18px;
}
.g-mag { font-size: 18px; color: #9aa0a6; }
.g-query { flex: 1; font-size: 14px; color: #202124; }
.g-bar-icos { display: flex; align-items: center; gap: 16px; }
.g-bar-icos .ico { font-size: 18px; color: #4285f4; }
/* featured-snippet title */
.g-snip-title {
  font-family: arial, sans-serif; font-size: 18px; font-weight: 700;
  color: #202124; margin: 0 0 10px; line-height: 1.25; text-align: left;
}
/* snippet list — plain Google bullets */
.g-snip-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.g-snip-list li {
  position: relative; padding-left: 22px; margin-bottom: 7px;
  font-size: 14px; line-height: 1.35; color: #4d5156;
}
.g-snip-list li:last-child { margin-bottom: 0; }
.g-snip-list li::before {
  content: ""; position: absolute; left: 6px; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: #70757a;
}
.g-snip-list .g-b { font-weight: 700; color: #202124; }
/* source attribution chip on the last line */
.g-src {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  margin-left: 5px; padding: 1px 8px 1px 5px; border-radius: 999px;
  background: #f1f3f4; border: 1px solid #e3e6ea; font-size: 11px; color: #5f6368;
}
.g-src-fav { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 3px; background: #6001d2; }
.g-src-more { font-size: 11px; color: #70757a; vertical-align: middle; margin-left: 2px; }
/* "Data detected" pill pinned to the selection corner (replaces the px badge) */
.scd-detected {
  position: absolute; top: 7px; left: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--c-blue); color: #fff; padding: 3px 8px 3px 7px; border-radius: 999px;
  opacity: 0;
}
.scd-detected .ico { font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .scd-capture2.run .scd-detected { animation: scdDetected 1.5s var(--ease) both; }
}
@keyframes scdDetected {
  0%, 60% { opacity: 0; transform: translateY(-4px); }
  72%, 100% { opacity: 1; transform: none; }
}

/* ── L2 · BEAT 4 — SANKEY ──────────────────────────────────────────── */
.scd-sankey-svg { width: 100%; height: 100%; display: block; }
.sk-band { fill-opacity: .92; transform-box: fill-box; transform-origin: left center; }
.sk-node { transform-box: fill-box; transform-origin: center; }
.sk-name { font-family: var(--font); font-size: 12px; font-weight: 700; fill: var(--tx); }
.sk-val  { font-family: var(--mono); font-size: 10px; font-weight: 500; fill: var(--muted); }
.sk-total-name { font-family: var(--font); font-size: 12px; font-weight: 700; fill: var(--tx); }
.sk-total-val  { font-family: var(--font); font-size: 19px; font-weight: 800; fill: var(--tx); }
@media (prefers-reduced-motion: no-preference) {
  .scd-result2.run .sk-band { animation: skFlow .9s var(--ease) both; }
  .scd-result2.run .sk-node,
  .scd-result2.run .sk-total { animation: scdFade .5s var(--ease) both; }
  .scd-result2.run .sk-name,
  .scd-result2.run .sk-val,
  .scd-result2.run .sk-total-name,
  .scd-result2.run .sk-total-val { animation: scdFade .5s var(--ease) both; }
}
@keyframes skFlow {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}