/* ============================================================================
   The homepage's use cases (stage.js): one prompt per use case, and the app it
   made. Claude Code and Codex side by side first, then a sticky stage: one
   window holds still while the steps scroll past, and each step's prompt
   takes the window over before it becomes that step's app. On a phone the
   steps stack, each with its own window. Every shot is the whole app window.
   ========================================================================== */
:root {
  /* the window while it holds only the prompt, and the prompt's bubble once it lands (the app's own colors) */
  --uc-win: #ffffff;
  --uc-bubble: 247, 247, 248;
  --uc-prompt: #242426;
  --uc-shadow: 0 0 0 1px rgba(17,18,22,0.10), 0 34px 64px -30px rgba(20,28,45,0.42), 0 2px 6px -2px rgba(20,28,45,0.08);
  --uc-gap: 136px;
}
html[data-mode="dark"] {
  --uc-win: #131519;
  --uc-bubble: 36, 38, 45;
  --uc-prompt: #eceef1;
  --uc-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 34px 64px -30px rgba(0,0,0,0.75), 0 2px 6px -2px rgba(0,0,0,0.4);
}
.uc { position: relative; z-index: 1; margin: 24px 0 0; }

/* ── a window: the app's own corners (16 of 920 by 621), one shadow, the app's color while it
   holds only the prompt ── */
.ucw { position: relative; }
.fr { position: relative; aspect-ratio: 920 / 621; border-radius: 1.739% / 2.576%; overflow: hidden; background: var(--uc-win); box-shadow: var(--uc-shadow); }
.fr img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fr img.st-a { opacity: 0; }

/* the flying prompt: sized by stage.js from the shot's bubble */
.fly { position: absolute; left: 0; top: 0; z-index: 3; box-sizing: border-box; transform-origin: 0 0; pointer-events: none; white-space: nowrap; color: var(--uc-prompt); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
.fly .ln { display: block; }
.fly .lt { display: inline-block; }
.fly .w { opacity: 0; }
.fly .caret { display: inline-block; width: 0.085em; height: 1.12em; margin-left: 0.06em; vertical-align: -0.2em; border-radius: 1px; background: var(--persimmon); animation: ucBlink 1.06s steps(1) infinite; }
html[data-agent="codex"] .fly .caret { background: var(--codex); }
.fly.no-caret .caret, .fly.sent .caret, html.uc-manual .fly .caret { animation: none; }
.fly.no-caret .caret { display: none; }
@keyframes ucBlink { 50% { visibility: hidden; } }

/* ── text ── */
.uc-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin: 0 0 14px; }
.uc h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.028em; font-weight: 700; margin: 0 0 12px; color: var(--ink); }
.uc .lede { font-size: 17px; line-height: 1.5; color: var(--stone); margin: 0; max-width: 36ch; }
.uc-motion .rise { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.uc-motion .rise.in { opacity: 1; transform: none; }

/* ── Claude Code and Codex: two windows, one prompt ── */
.cmp-block { margin: 0 0 96px; }
.cmp-text { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.cmp-text .lede { margin: 0 auto; max-width: 44ch; }
.ucw.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ucw.cmp figure { margin: 0; }
.ucw.cmp figcaption { margin: 16px 0 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--graphite); }
@media (min-width: 1180px) { .ucw.cmp { margin: 0 -72px; } }
/* one card over both windows while the prompt holds; it parts as they appear */
.ucw.cmp .veil { position: absolute; z-index: 2; background: var(--uc-win); border-radius: 18px; box-shadow: var(--uc-shadow); pointer-events: none; }
.ucw.cmp .fly { z-index: 3; }

/* ── the sticky stage ── */
.stk { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.8fr); gap: 64px; align-items: start; }
.stk-media { position: sticky; top: calc(50vh - 250px); }
@media (min-width: 1180px) { .stk-media { margin-right: -72px; } }
.steps { padding: 4vh 0 18vh; }
.step { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; }
.step:first-child { min-height: 70vh; }
.step-in { opacity: 0.3; transition: opacity 450ms ease; }
.step.on .step-in { opacity: 1; }
html:not(.uc-motion) .step-in { opacity: 1; }
.stage .grp img { opacity: 0; }
/* without script, the stage shows its first step done (its noscript shot) */
.stage .grp noscript img.st-b { opacity: 1; }
.step-shot { display: none; }
/* every scroll comes to rest on a stop: the top, the comparison, each step
   centered beside the window, the mark and the end. The browser aims the
   flick itself, so it lands in one motion. Phones scroll freely */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y mandatory; }
  .topnav { scroll-snap-align: start; }
  .cmp-block, .step { scroll-snap-align: center; }
  /* the mark sits near the top, clear of the window scrolling away; on a tall
     screen this is the end */
  .outro { scroll-snap-align: start; scroll-margin-top: 48px; }
  .foot { scroll-snap-align: end; }
}

/* ── the small mark, closing the scroll: ring, mochi and both marbles ── */
.outro { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 120px auto 0; max-width: 520px; }
.outro .mini { margin: 0 0 28px; }
.outro .lede { margin: 0 auto; }
.mini .spin { --orbit: 112px; position: relative; }
.mini .orbit .mb { --mb-size: 29px; }
.mini .orbit .ring { border-width: calc(var(--orbit) * 0.045); }

/* ── tablet ── */
@media (max-width: 1000px) {
  .stk { gap: 40px; }
}

/* ── phone: the whole window, scaled to the column. Every step stacks: its
   text, then its own window ── */
@media (max-width: 640px) {
  :root { --uc-gap: 84px; }
  .uc h2 { font-size: 26px; }
  .uc .lede { font-size: 16px; }
  .cmp-block { margin-bottom: var(--uc-gap); }
  .cmp-text { margin-bottom: 28px; }
  .ucw.cmp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ucw.cmp figcaption { margin-top: 10px; font-size: 13px; }
  .stk { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stk-media { display: none; }
  .steps { padding: 0; }
  .step, .step:first-child { min-height: 0; margin: 0 0 var(--uc-gap); }
  .step:last-child { margin-bottom: 0; }
  .step-in { opacity: 1; }
  .step-shot { display: block; margin: 24px 0 0; }
  .outro { margin-top: 84px; }
}