/* =====================================================================
   TWO SCENES ON THE LANDING PAGE.

   The home page used to explain the product in prose: eleven bands of
   headings and paragraphs, most of which also existed word for word on
   another page. It is a landing page now — the hero, these two moments,
   the community scene, and a way in. Everything that was written out
   down it lives on a page of its own, reached from the header's menus
   and the footer's columns.

   These two hold the same two rules the hero and the community scene do:

   1. SHAPE AND REST ONLY. No @keyframes, and no transition on anything
      the story touches. Every moving value arrives from scenes.js as a
      transform, an opacity or a custom property, so the frame at
      t = 4.2s is the same frame every time.
   2. THE CAPTION IS THE PROSE. One line under each, and a link. If a
      scene needs a paragraph to be understood, the scene is wrong.

   Namespaced `sc-`. Nothing here reaches the network: both scenes draw
   in the site's own faces through --font-ui and --font-mono.
   ===================================================================== */

.sc-stage {
  position: relative;
  padding: var(--s-20) var(--s-8);
  background: var(--bg);
  isolation: isolate;
}

/* A step up from the ground, the same one .band-alt takes, so two scenes
   in a row are two moments rather than one long field. */
.sc-stage.sc-alt {
  background: var(--surface-2);
}

@media (max-width: 900px) {
  .sc-stage {
    padding: var(--s-16) var(--s-4);
  }
}

/* Narrower than a band: these are objects, not layouts. Measured at 1440 —
   at 62rem the window read as a stretched panel with four short lines lost in
   it, which is the opposite of "this is one window on your desk". */
.sc-fld {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
}

/* The one line under each scene. It is a caption, not a section: the
   size stays close to body text so it never reads as a heading the
   scene is illustrating. */
.sc-cap {
  margin: var(--s-6) 0 0;
  font-size: var(--t-base);
  color: var(--text-quiet);
  text-align: center;
}

.sc-cap b {
  font-weight: 600;
  color: var(--text-primary);
}

.sc-cap a {
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}

.sc-cap a:hover {
  text-decoration: underline;
}

/* The drawn object itself. A window and a browser are both rectangles
   with a bar on top, so they share the shell and differ inside it. */
.sc-obj {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  /* Dark mode has no drop shadow at all — see --shadow-1 — so the 1px top
     highlight is what says "lifted off the ground" there instead. */
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-top);
  overflow: hidden;
  user-select: none;
}

/* The strip scrolls sideways rather than losing its last tab, which is what
   .frame-bar does for the same reason — measured at 390, where the browser tab
   was cut in half by the frame's own overflow. */
.sc-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.sc-bar::-webkit-scrollbar {
  display: none;
}


/* ------------------------------------------------------ scene 1: the window */

.sc-tab {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  white-space: nowrap;
  color: var(--text-muted);
  /* --on is 0 or 1, written by scenes.js. One property, so the selected
     tab and the tab losing selection are the same expression. */
  background: color-mix(in srgb, var(--bg-active) calc(var(--on, 0) * 100%), transparent);
}

.sc-tab b {
  font-weight: 500;
  color: color-mix(in srgb, var(--text-primary) calc(var(--on, 0) * 100%), var(--text-muted));
}

.sc-pip {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--sc-pip, var(--status-idle));
  box-shadow: 0 0 0 calc(var(--halo, 0) * 4px) color-mix(in srgb, var(--sc-pip, var(--status-idle)) 22%, transparent);
}

.sc-tab-plain {
  color: var(--text-muted);
}

.sc-body {
  position: relative;
  min-height: 16.5rem;
  padding: var(--s-5) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.85;
  color: var(--text-secondary);
}

@media (max-width: 40rem) {
  .sc-body {
    min-height: 14rem;
    padding: var(--s-4);
    font-size: var(--t-xs);
  }
}

.sc-line {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
}

.sc-line i {
  flex: none;
  font-style: normal;
  color: var(--text-muted);
}

.sc-caret {
  display: inline-block;
  width: 0.5rem;
  height: 1em;
  vertical-align: -0.15em;
  background: var(--accent);
}

/* The question one session stops on. It sits in the body rather than in
   a corner, because that is where it is in the app. */
.sc-ask {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--status-input);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  color: var(--text-primary);
  will-change: transform, opacity;
}

.sc-ask-who {
  font-size: var(--t-xs);
  color: var(--text-muted);
}

.sc-ask-btns {
  display: flex;
  gap: 0.4rem;
  margin-top: var(--s-3);
}

.sc-btn {
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  font-size: var(--t-xs);
  color: var(--text-secondary);
}

.sc-btn-yes {
  position: relative;
  border-color: transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.sc-ripple {
  position: absolute;
  inset: -6px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--accent);
  opacity: 0;
}

/* ----------------------------------------------------- scene 2: the browser */

.sc-url {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-inspect {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  white-space: nowrap;
  color: color-mix(in srgb, var(--accent) calc(var(--on, 0) * 100%), var(--text-muted));
  background: color-mix(in srgb, var(--accent-soft) calc(var(--on, 0) * 100%), transparent);
}

/* The bottom padding is the prompt's room. It is positioned against the foot
   of this box, so anything the mock page draws has to stop above it — measured
   at 390, where the selector wrapped onto a second line and the prompt grew up
   into the button it had just been given. */
.sc-page {
  position: relative;
  min-height: 15rem;
  padding: var(--s-6) var(--s-6) 4.5rem;
}

@media (max-width: 40rem) {
  .sc-page {
    min-height: 15rem;
    padding: var(--s-4) var(--s-4) 5.5rem;
  }
}

.sc-mock {
  display: grid;
  gap: var(--s-3);
  max-width: 34rem;
}

.sc-mock h4 {
  margin: 0;
  font-size: var(--t-lg);
  color: var(--text-primary);
}

.sc-rule {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

.sc-rule-short {
  width: 62%;
}

.sc-mockbtn {
  justify-self: start;
  margin-top: var(--s-2);
  padding: 0.42rem 0.9rem;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-md);
}

/* The inspect box. Drawn where the button is, measured from the real
   DOM by scenes.js so it is right at any width. */
.sc-ring {
  position: absolute;
  left: 0;
  top: 0;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* The selector, travelling. */
.sc-chip {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  white-space: nowrap;
  color: var(--text-secondary);
  opacity: 0;
  will-change: transform, opacity;
}

/* Where it lands: the session's prompt, at the foot of the frame. */
.sc-prompt {
  position: absolute;
  left: var(--s-6);
  right: var(--s-6);
  bottom: var(--s-5);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-secondary);
  overflow: hidden;
}

@media (max-width: 40rem) {
  .sc-prompt {
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-4);
  }
}

.sc-prompt-mark {
  flex: none;
  color: var(--accent);
}

/* The caret has to sit at the end of the sentence, not at the end of the box.
   One inline run holding both is what does that once the selector is long
   enough to wrap, which at 390 it always is. */
.sc-prompt-txt {
  min-width: 0;
}

.sc-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 17px;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  will-change: transform, opacity;
}

.sc-cursor svg {
  width: 100%;
  height: 100%;
  fill: var(--text-primary);
  stroke: var(--surface);
  stroke-width: 1.4;
}