/* Flows MCP landing — SHARED visual shell.
   The "Flows speaks MCP" hero (border-draw + title→Flows-mark handoff) and the
   right-cell warp scan + streaks. Loaded by BOTH surfaces so they never drift:
     - the in-app Setup MCP page   (api/studio/preview.js)
     - the public marketing page   (marketing/pages/mcp, served at GET /mcp)
   Page-specific chrome (body layout, the site header, the credential copy-boxes)
   lives in each page — NOT here. */
:root{ --bg:#000; --text:#fff; --line:rgba(255,255,255,.55);
       --b1:#1e1e1e; --b2:#2a2a2a; --b3:#3a3a3a; --t2:#666; --t3:#4a4a4a;
       --green:#4ade80; --input:#0d0d0d;
       --fh:'Space Grotesk',sans-serif; --fb:'Wix Madefor Display',sans-serif;
       --mono:'SF Mono',ui-monospace,Menlo,monospace; }
*{box-sizing:border-box}
/* Height uses svh (stable small-viewport) so mobile browser chrome show/hide
   does not reflow the stage mid-intro and re-fire CSS animations. */
.stage{ position:relative; width:min(1200px, 95vw); height:90svh; height:90vh; display:flex; align-items:center; justify-content:center; }
@supports (height: 90svh){ .stage{ height:90svh; } }
.border{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.border rect{ fill:none; stroke:var(--line); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:1; }
.title-scale{ transform-origin:center; }
/* Hidden until JS arms .play once — prevents a half-started intro if CSS/font
   layout settles after first paint (common mobile double-intro bug). */
.hero-title{ font-family:var(--fh); font-weight:700; font-size:120px; letter-spacing:-0.04em;
  line-height:0.95; margin:0; white-space:nowrap; transform-origin:center;
  opacity:0; will-change:transform,opacity,filter; }
.play .hero-title{ animation: heroIn 1s cubic-bezier(.19,.9,.22,1) both; }
/* ONE parent animation (not two with fill-mode both fighting over transform).
   --title-lift is set once in px by landing.js so vh chrome changes can't jump it. */
.play .title-scale{ animation: titleExit 1.45s cubic-bezier(.5,0,.2,1) 1.15s both; }
.play .border rect{ animation: drawBorder 1.05s cubic-bezier(.6,0,.25,1) 1.15s both,
                               borderSettle .6s ease 2.2s both; }
@keyframes heroIn{ 0%{ opacity:0; transform:translateY(34px) scale(1.42); filter:blur(10px); }
  60%{ opacity:1; } 100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
/* 0→~62% = shrink toward logo; rest = scale out. Total 1.45s after 1.15s delay. */
@keyframes titleExit{
  0%{ transform:translateY(0) scale(1); opacity:1; }
  62%{ transform:translateY(var(--title-lift, -40vh)) scale(.5); opacity:1; }
  100%{ transform:translateY(var(--title-lift, -40vh)) scale(0); opacity:0; } }
.logo-wrap{ position:absolute; left:50%; top:calc(5svh + 28px); top:calc(5vh + 28px); transform:translate(-50%,-50%); z-index:5; }
@supports (top: 1svh){ .logo-wrap{ top:calc(5svh + 28px); } }
.logo-wrap svg{ height:44px; width:auto; display:block; overflow:visible; color:#fff; }
.logo-path{ fill:transparent; stroke:currentColor; stroke-width:0; stroke-linejoin:round; stroke-linecap:round; }
.play .logo-path{ animation: logoInk 1.9s cubic-bezier(.45,0,.2,1) 2.35s both; }
@keyframes logoInk{
  0%{ fill:transparent; stroke:#ff7a1a; stroke-width:28; stroke-dasharray:var(--logo-len,5500); stroke-dashoffset:var(--logo-len,5500); }
  60%{ fill:transparent; stroke:#ff7a1a; stroke-width:28; }
  100%{ fill:currentColor; stroke-width:0; stroke-dasharray:var(--logo-len,5500); stroke-dashoffset:0; } }
@keyframes drawBorder{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes borderSettle{ from{ stroke:var(--line); } to{ stroke:#121212; } }
.content{ position:absolute; inset:0; padding:110px 64px 56px; display:grid;
          grid-template-columns:1fr 1.1fr; gap:56px; opacity:0; }
.play .content{ animation: contentIn .8s cubic-bezier(.19,.9,.22,1) 2.35s both; }
@keyframes contentIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:980px){ .content{ grid-template-columns:1fr; } .right{ display:none; } }
/* min-width:0 — grid items default to min-width:auto, so a long personal
   connection URL would force the left column wide and shove the demo cell
   off-stage. With it, the URL ellipsizes inside its box instead. */
.left{ display:flex; flex-direction:column; min-width:0; }
.left::before{ content:''; margin-top:auto; }
.h2{ font-family:var(--fh); font-weight:500; letter-spacing:-.02em; line-height:1.16; font-size:27px; margin:0; color:#fff; }
.h2 .g{ color:var(--t2); }
.find-btn{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
           background:transparent; border:1px solid var(--b2); color:#e6e6e6; border-radius:10px;
           padding:12px 22px; font-family:var(--fh); font-size:13px; font-weight:600; letter-spacing:-.01em;
           cursor:pointer; text-decoration:none; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.find-btn:hover{ border-color:var(--b3); background:rgba(255,255,255,.04); color:#fff; }
.find-btn svg{ width:14px; height:14px; transition:transform .2s ease; }
.find-btn:hover svg{ transform:translateX(3px); }

/* ── Right cell: warped scanlines + shooting streaks ── */
.right{ position:relative; border-radius:20px; background:#000; overflow:hidden; cursor:crosshair; }
.mcp-warp{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.mcp-streaks{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.mcp-flash{
  position:absolute; left:0; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, var(--c, #fff) 50%, transparent);
  box-shadow:0 0 8px var(--c, #fff);
  opacity:0; pointer-events:none; will-change:transform, opacity;
}

.code{ display:flex; align-items:center; gap:8px; background:var(--input);
       border:1px solid var(--b1); border-radius:10px; padding:11px 11px 11px 14px; margin-top:44px; }
/* Ellipsize the visible URL (pair tokens are long) — textContent keeps the
   FULL url, so the Copy button still copies the whole thing. */
.code code{ flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; color:#d4d4d4;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The permanent header-token row (Shopify) — collapsed behind the toggle. */
.key-toggle{ align-self:flex-start; background:none; border:none; padding:0; margin-top:12px;
             color:var(--t3); font-family:var(--fb); font-size:12px; cursor:pointer;
             text-decoration:underline; text-underline-offset:3px; transition:color .15s; }
.key-toggle:hover{ color:#9a9a9a; }
.code.code2{ margin-top:10px; }
.code.code2 code{ font-size:11px; color:#8a8a8a; }
/* .code sets display:flex, which outranks the UA's [hidden] rule — restate it. */
.code[hidden]{ display:none; }
.cbtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:transparent;
       border:1px solid var(--b2); color:#cfcfcf; border-radius:7px; padding:7px 11px;
       font-family:var(--fh); font-size:11.5px; font-weight:600; cursor:pointer; transition:.15s; }
.cbtn:hover{ border-color:var(--b3); color:#fff; }
.cbtn.done{ color:#fff; border-color:var(--b3); }
.cbtn svg{ width:12px; height:12px; }
.foot{ color:var(--t3); font-size:12px; line-height:1.6; margin:16px 0 0; }
.status{ display:flex; align-items:center; gap:9px; margin-top:44px;
         font-family:var(--fh); font-size:12px; font-weight:600; letter-spacing:.02em; color:#8a8a8a; }
.sdot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; animation:sPulse 2s ease infinite; }
.status.building .sdot{ background:#4a9eff; }
@keyframes sPulse{ 50%{ opacity:.35; } }