/* =========================================================
   Moving parts MCP, take B: one continuous shot, scrubbed by the scroll.
   A tilted macro on the prompt of an assistant; the real component is born
   behind the card while the ask types itself; the camera cranes back and
   levels out onto the editor frame; the file names land; it ends wide on
   the component, full frame. Every class is mb-, nothing here touches mcpm-.
   landing/assets/mcp-shot.css
   ========================================================= */

.mb { --mb-nav: 72px; --mb-acc: var(--accent); }
.mb-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; }
.mb-meta { display: flex; align-items: center; gap: 12px; color: var(--label); }
.mb-soon { padding: 2px 7px 1px; background: var(--text); color: var(--bg); }

/* ---------- the pinned screen, and the viewfinder in it ---------- */
.mb-pin { position: relative; height: 100svh; min-height: 560px; margin-top: clamp(8px, 2vh, 20px); }
.mb-frame { position: absolute; left: 0; right: 0; top: calc(var(--mb-nav) + var(--vfh)); bottom: clamp(18px, 3vh, 32px); --vfh: 34px; }
.mb-frame .vf-bar .rec-dot { background: #ff4b3e; box-shadow: 0 0 8px rgba(255, 75, 62, .45); }
.mb-frame .fx-bar::after { transition: none; }

/* the picture: a dark room with one perspective, everything in it is relative to its own size */
.mb-view { position: absolute; inset: 0; overflow: hidden; container-type: size; perspective: clamp(720px, 92cqw, 1500px); perspective-origin: 50% 50%;
  background: radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 70%), #08080a; }
.mb-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }

/* ---------- the editor frame: the real recording, a strip of tabs over it ---------- */
.mb-screen { position: absolute; left: -44cqw; top: -43cqh; width: 88cqw; height: 86cqh; overflow: hidden; border-radius: clamp(8px, 1.1cqw, 16px);
  background: #f4ece0; box-shadow: 0 3cqh 9cqh rgba(0, 0, 0, .65), 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent); transform-origin: 50% 50%; will-change: transform, filter, opacity; }
.mb-pic { position: absolute; inset: 0; background: #f4ece0; }
.mb-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-chrome { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: clamp(30px, 4.6cqh, 40px); display: flex; align-items: center; gap: 14px; padding: 0 12px; background: rgba(21, 16, 12, .96); border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); will-change: opacity, transform; }
.mb-dots { display: flex; gap: 6px; flex: none; }
.mb-dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--text) 16%, transparent); }
.mb-tabs { display: flex; align-items: stretch; align-self: stretch; flex: 1; min-width: 0; overflow: hidden; }
.mb-tab { position: relative; display: inline-flex; align-items: center; padding: 0 clamp(8px, 1cqw, 14px); color: var(--label); white-space: nowrap; text-transform: none; letter-spacing: .02em; font-size: clamp(10px, 1cqw, 11.5px); opacity: 0; }
.mb-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--mb-acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.mb-tab.on { color: var(--text); }
.mb-tab.on::after { transform: none; }
.mb-path { flex: none; color: var(--label); text-transform: none; letter-spacing: .02em; font-size: clamp(10px, 1cqw, 11.5px); }
@container (max-width: 560px) { .mb-path { display: none; } }

/* ---------- the prompt card, the one thing in focus at the start ---------- */
.mb-card { position: absolute; left: 0; top: 0; width: clamp(252px, 54cqw, 620px); --dof: 1; --sx: 100%; border-radius: clamp(12px, 1.6cqw, 22px);
  background: rgba(31, 26, 21, .9); box-shadow: 0 2cqh 7cqh rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent); transform-origin: 50% 50%; will-change: transform, opacity; }
/* a sweep of light across the glass, moved by the camera */
.mb-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, color-mix(in srgb, var(--text) 0%, transparent) 32%, color-mix(in srgb, var(--text) 7.5%, transparent) 46%, color-mix(in srgb, var(--text) 0%, transparent) 60%) var(--sx) 0 / 220% 100% no-repeat; }
.mb-card-in { position: relative; display: grid; gap: clamp(12px, 1.5cqw, 20px); padding: clamp(14px, 2cqw, 26px) clamp(16px, 2.2cqw, 28px) clamp(14px, 1.8cqw, 22px); }
/* shallow depth of field: the sharp copy fades toward the far corner, a blurred copy takes over there */
.mb-card-in.mb-sharp { -webkit-mask-image: linear-gradient(to top right, #000 calc(28% + 72% * (1 - var(--dof))), transparent calc(78% + 22% * (1 - var(--dof)))); mask-image: linear-gradient(to top right, #000 calc(28% + 72% * (1 - var(--dof))), transparent calc(78% + 22% * (1 - var(--dof)))); }
.mb-card-in.mb-dof { position: absolute; inset: 0; pointer-events: none; filter: blur(2.6px); opacity: var(--dof);
  -webkit-mask-image: linear-gradient(to top right, transparent 30%, #000 76%); mask-image: linear-gradient(to top right, transparent 30%, #000 76%); }
.mb-chip { display: flex; align-items: center; gap: 8px; color: var(--muted); text-transform: none; letter-spacing: .03em; font-size: clamp(10px, 1.05cqw, 12px); }
.mb-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--mb-acc); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 90%, transparent); }
.mb-chip span { color: var(--label); }
.mb-ask { min-height: 2.5em; font-weight: 430; font-size: clamp(16px, 2.25cqw, 29px); line-height: 1.22; letter-spacing: -.03em; color: var(--text); overflow-wrap: anywhere; }
.mb-tok { --k: 0; color: var(--mb-acc); font-weight: 460; border-radius: .22em; padding: 0 calc(.2em * var(--k)); margin: 0 calc(-.02em * var(--k)); background: rgba(45, 91, 255, calc(.14 * var(--k))); box-shadow: 0 0 0 1px rgba(45, 91, 255, calc(.32 * var(--k))); }
.mb-caret { display: inline-block; width: .1em; height: .98em; margin-left: .05em; vertical-align: -.12em; background: var(--mb-acc); box-shadow: 0 0 .5em color-mix(in srgb, var(--accent) 95%, transparent); animation: mb-blink 1s steps(1) infinite; animation-play-state: paused; }
.mb.is-live .mb-caret { animation-play-state: running; }
.mb-caret.off { visibility: hidden; animation: none; }
@keyframes mb-blink { 0%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } }
.mb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: clamp(30px, 3.4cqw, 40px); }
.mb-status { display: grid; gap: 3px; min-width: 0; text-transform: none; letter-spacing: .02em; }
.mb-status b { display: flex; align-items: center; gap: 8px; min-height: 1.6em; font-size: clamp(11px, 1.15cqw, 13.5px); font-weight: 500; color: var(--text); white-space: pre; }
.mb-status b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mb-acc); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 90%, transparent); flex: none; opacity: 0; transition: opacity .3s; }
.mb-status.on b::before { opacity: 1; }
.mb-status.done b::before { width: 0; height: 0; opacity: 0; display: none; }
.mb-status.done b { color: var(--text); }
.mb-status span { font-size: clamp(9.5px, .95cqw, 11px); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-send { display: grid; place-items: center; flex: none; width: clamp(28px, 3cqw, 36px); height: clamp(28px, 3cqw, 36px); border-radius: 50%; background: var(--mb-acc); color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.mb-send svg { width: 46%; height: 46%; }

/* ---------- the end: wide on the component, the line over it ---------- */
.mb-shade { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none; opacity: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 86%, transparent), color-mix(in srgb, var(--bg) 0%, transparent)); }
.mb-end { position: absolute; z-index: 4; left: clamp(16px, 3.2cqw, 48px); right: clamp(16px, 3.2cqw, 48px); bottom: clamp(16px, 3.4cqh, 44px); display: grid; gap: clamp(8px, 1.2cqh, 14px); pointer-events: none; }
.mb-end .mk { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mb-end .mk > span { display: block; will-change: transform; }
.mb-end p { font-weight: 430; font-size: clamp(34px, 6.6cqw, 92px); line-height: .94; letter-spacing: -.05em; color: var(--text); }
.mb-end .mono { color: var(--muted); text-transform: none; letter-spacing: .02em; font-size: clamp(10.5px, 1.05cqw, 12.5px); }
.mb-end .mono b { color: #3ecf8e; font-weight: 500; }

/* ---------- under the screen ---------- */
.mb-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; margin-top: clamp(28px, 5vh, 56px); padding-top: 18px; border-top: 1px solid var(--line-strong); }
.mb-line { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.3; letter-spacing: -.02em; color: var(--muted); max-width: 48ch; }

@media (max-width: 820px) {
  .mb { --mb-nav: 64px; }
  .mb-frame { --vfh: 30px; }
  .mb-pin { min-height: 520px; }
}

/* ---------- still: the shot held on its editor frame, nothing pinned, nothing moving ---------- */
.mb.is-still .mb-pin { height: auto; min-height: 0; margin-top: calc(clamp(24px, 4vh, 48px) + 34px); }
.mb.is-still .mb-frame { position: relative; top: auto; bottom: auto; aspect-ratio: 16 / 10; }
.mb.is-still .mb-caret, .mb.is-still .mb-frame .rec-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .mb-tab::after, .mb-status b::before { transition: none; } }