/* ═══════════════════════════════════════════════════════════════════════
   /scrape — hub for the ready-made site scrapers.
   NOUN = the target, returned as a clean record. Signature: a live target
   catalog that cycles URL → structured JSON; each row links to its spoke.
   Accent TEAL. Hairline-on-transparent, no card fills. Mobile: the catalog
   auto-cycles on a timer (no scroll dependency).
   ═══════════════════════════════════════════════════════════════════════ */
@import url("../_ds/fonts.css");
@import url("../_ds/theme.css");
@import url("../_shared/chrome.css");
@import url("../_shared/components.css");
@import url("../_shared/audience-switcher.css");

.scr-main { position: relative; z-index: 1; overflow-x: clip; }
.blur-t { opacity: 0; filter: blur(12px); transition: opacity 720ms cubic-bezier(0.22,1,0.36,1), filter 720ms cubic-bezier(0.22,1,0.36,1); transform: translateZ(0); backface-visibility: hidden; will-change: filter, opacity; }
.blur-t.is-in { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .blur-t { opacity: 1; filter: none; transition: none; } }

/* ── Act 1 — Hero + target catalog ────────────────────────────────────── */
.scr-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px,4vw,72px); align-items: center; max-width: 1500px; margin-inline: auto; padding: clamp(120px,15vh,176px) clamp(20px,5vw,72px) clamp(64px,9vh,110px); }
.scr-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px,5.4vw,82px); line-height: 0.97; letter-spacing: -0.032em; color: var(--text-primary); margin: 0; max-width: 13ch; }
.scr-h1 em { font-style: normal; color: var(--text-primary); }
.scr-sub { font-family: var(--font-base); font-size: clamp(15px,1.25vw,19px); line-height: 1.5; color: var(--text-secondary); margin: 22px 0 0; max-width: 46ch; }
.scr-hero-cta { margin-top: clamp(26px,4vh,40px); }
.scr-hero-cta .link-cta { align-self: center; padding-top: 4px; }

.scr-board { border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 0.82fr 1.18fr; }
.scr-targets { border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; }
.scr-target { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: clamp(13px,1.5vw,17px) clamp(16px,1.6vw,20px); text-decoration: none; border-bottom: 1px solid var(--border-subtle); transition: background 200ms ease; }
.scr-target:last-child { border-bottom: none; }
.scr-target-n { font-family: var(--font-display); font-size: clamp(16px,1.4vw,20px); color: var(--text-secondary); transition: color 200ms ease; }
.scr-target-k { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.04em; color: var(--text-quaternary); }
.scr-target:hover .scr-target-n, .scr-target.is-active .scr-target-n { color: var(--text-primary); }
.scr-target.is-active { background: color-mix(in srgb, #7ADAE6 8%, transparent); }
.scr-target.is-active .scr-target-k { color: #7ADAE6; }

.scr-preview { display: flex; flex-direction: column; min-height: clamp(240px,32vh,320px); }
.scr-pv-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); }
.scr-pv-url { font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-pv-ok { font-family: var(--font-code); font-size: 11px; color: #7ADAE6; flex: none; margin-left: 12px; }
.scr-pv-rec { margin: 0; padding: clamp(18px,2vw,26px); font-family: var(--font-code); font-size: clamp(12px,1.05vw,13.5px); line-height: 1.7; color: var(--text-secondary); white-space: pre; overflow-x: auto; }
.scr-pv-rec .k { color: #7ADAE6; }
.scr-pv-rec .s { color: var(--text-primary); }
.scr-pv-rec .n { color: var(--text-primary); }

/* ── Act 2 — Any site (SOLID teal band, bottom-left bloom) ────────────── */
.scr-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(90px,14vh,184px) clamp(20px,5vw,72px); }
.scr-band-fill { position: absolute; inset: 0; z-index: -1; background: #7ADAE6; clip-path: circle(0% at 0% 100%); transition: clip-path 920ms cubic-bezier(0.22,1,0.36,1); }
.scr-band.is-in .scr-band-fill { clip-path: circle(150% at 0% 100%); }
.scr-band-inner { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; }
.scr-band-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px,4.8vw,64px); line-height: 0.98; letter-spacing: -0.03em; color: #14100D; margin: 0; }
.scr-band-lead { font-family: var(--font-base); font-size: clamp(15px,1.3vw,19px); line-height: 1.55; color: rgba(20,16,13,0.82); margin: 22px 0 0; max-width: 52ch; }
.scr-run { font-family: var(--font-code); font-size: clamp(12px,1.2vw,15px); color: rgba(20,16,13,0.7); margin: clamp(26px,3.5vh,40px) 0 0; }
.scr-run-cmd { color: #14100D; }
.scr-run-arrow { margin: 0 8px; }
.scr-run-ok { color: #14100D; }

/* ── Act 3 — Closer ───────────────────────────────────────────────────── */
.scr-end { padding: clamp(96px,16vh,200px) clamp(20px,5vw,72px); text-align: center; }
.scr-end-frame { max-width: 800px; margin-inline: auto; }
.scr-end-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px,5.6vw,82px); line-height: 0.96; letter-spacing: -0.03em; color: var(--text-primary); margin: 0; }
.scr-end-h2 em { font-style: normal; color: var(--text-primary); }
.scr-end-cta { margin-top: clamp(28px,4vh,44px); }
.scr-end-links { font-family: var(--font-base); font-size: 14px; color: var(--text-tertiary); margin: 22px 0 0; }
.scr-end-links a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border); }
.scr-end-links a:hover { color: var(--text-primary); }

@media (max-width: 600px) {
  /* stack is a column here (global cta-stack--inline rule): left-align the
     secondary link under the button instead of the row's vertical-centering */
  .scr-hero-cta .link-cta { align-self: flex-start; padding-top: 0; }
}
@media (max-width: 900px) {
  .scr-hero { grid-template-columns: 1fr; gap: 38px; }
  .scr-board { grid-template-columns: 1fr; }
  .scr-targets { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .scr-target { flex: 1 1 30%; flex-direction: column; align-items: flex-start; gap: 3px; border-bottom: none; }
}
@media (min-width: 1600px) { .scr-hero { max-width: 1600px; } }