/* Callouts, the hero scene: one window. hero.js tells the story in it by hand, with AI, with Callouts
   and on the board; the Callouts step is the one without the script. Upwren's pricing page fills its stage edge to edge, the
   product's marks drawn over it by hero.js, and the note being made shows on the paper docked at
   its foot, the way the app's window keeps its note list under the picture. The pause key sits on
   that paper, so the page, the marks, the note and the key are one object. v4.css places the window
   (column 6 off the right edge); this file sets what is inside it. Every colour, face, size, gap and
   radius is a token from tools/ui/tokens.css. The four tag hues come from the kit's balloons,
   through hero.js, and land only on the marks and the tag label. */

.hero-pic{ display: flex; flex-direction: column; position: relative; }

/* the stage: the window's width, and the four notes' shape, 1230 by 757 page px (757/1230 = 61.54cqw),
   never taller than 757 so no view is drawn past 1:1. It is the one part that gives when the window meets
   the first screen's foot (v4.css), so the strip always fits whole. */
.hero-stage{ position: relative; flex: 0 1 auto; min-height: 0; height: min(61.54cqw, 757px); overflow: hidden; background: var(--app-pane);
  container-type: size; }   /* a size container, so the document's screenshots size to the stage's height */
/* the page layer: the picture, the marks and the cursor in one box, so they always move as one */
.hero-page{ position: absolute; inset: 0; transform-origin: 0 0; will-change: transform, opacity;
  box-shadow: 0 0 0 var(--hero-ring, 1px) var(--app-rule); }   /* the ring shows only as the board's tile; hero.js sets it to 1 px after the scale */
.hero-frame{ display: block; width: 100%; height: 100%; }
/* the marks and the cursor: one layer over the picture in page px (hero.js scales it to the view once per
   layout), clipped to the frame. Each mark and the cursor is its own layer with one animation on transform
   and opacity, so the compositor runs the take and the picture is never repainted while it plays. */
.hero-marks-clip{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-marks{ position: absolute; left: 0; top: 0; width: 1440px; height: 757px; transform-origin: 0 0; }
.hero-mark{ position: absolute; overflow: visible; will-change: transform, opacity; }
.hero-cursor{ position: absolute; left: -2px; top: -2px; width: 16px; height: 23px; overflow: visible; transform-origin: 2px 2px; opacity: 0; will-change: transform, opacity; }

/* the paper, docked: no card of its own, one hairline where it meets the page. One padding on all four
   sides, and the key sits in the bottom-right corner at that same inset, the corner of the window you see. */
.hero-foot{
  display: flex; align-items: flex-end; gap: var(--space-6);
  padding: var(--space-6);
  background: var(--bg-sheet); color: var(--ink-sheet);
  box-shadow: inset 0 1px 0 var(--rule-light);
}

/* one line at a time, all stacked in one cell so the window never changes height. Without the script, and
   under Reduce motion, ?motion=off and ?still, note 1 is the one that shows. */
.hero-sheet{ flex: 1; min-width: 0; display: grid; list-style: none; margin: 0; padding: 0; }
/* the story's chapters, over the strip: the scene playing now in ink, the others faint, so the before, with AI and
   with Callouts read as three parts of one story (29 Sep: "those two scenes ... not really obvious that that's what
   those are"). Only while the story plays; hero.js lights them. */
.hero-foot:has(.hero-chapters:not([hidden])){ flex-wrap: wrap; row-gap: var(--space-3); }
.hero-chapters{ flex: 0 0 100%; display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0;
  font: var(--text-label); letter-spacing: var(--track-mark); text-transform: uppercase; color: var(--ink-sheet); }
.hero-chapters[hidden]{ display: none; }
.hero-chapters li{ opacity: .35; will-change: opacity; }
.hero-sheet > li{ grid-area: 1 / 1; }
.hero-sheet > li:not([data-n="1"]){ opacity: 0; }
.hero-note-head{ display: flex; align-items: baseline; gap: var(--space-3); }
.hero-note .label, .hero-note .mono{ color: var(--ink-sheet); }
.hero-note-said{ margin-top: var(--space-2); max-width: 32em; font: var(--text-site-head); color: var(--ink-sheet); text-wrap: pretty; }   /* under 80 a line on any window */

/* the key that stops the take (WCAG 2.2.2): round, a glyph and a name, like a video's own.
   Hover and press darken the disc only. */
.hero-pause{
  flex: none; display: grid; place-items: center;
  width: max(var(--space-8), var(--hit-min)); height: max(var(--space-8), var(--hit-min));
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--paper-100); color: var(--ink-sheet);
  transition: background-color var(--dur-state) var(--ease-standard);
}
.hero-pause[hidden]{ display: none; }
.hero-pause svg{ width: var(--space-3); height: var(--space-3); fill: currentColor; }
.hero-pause:hover{ background: var(--paper-200); }
.hero-pause:active{ background: var(--paper-300); }
.hero-pause:focus-visible{ outline: var(--state-focus-w) solid var(--focus-ring); outline-offset: var(--state-focus-w); }

/* The story's other three steps, over the same stage, hidden until hero.js plays it. Every paper box on
   the pane takes the same ring, radius and ground, and one padding on all four sides; what sits inside is
   square, since the key radius is under the padding. */
.hero-doc, .hero-ai, .hero-board{ position: absolute; inset: 0; margin: 0; padding: var(--space-6); }
.hero-doc[hidden], .hero-ai[hidden], .hero-board[hidden]{ display: none; }
.hero-doc-sheet, .hero-ai-card, .hero-card{
  border-radius: var(--radius-key); background: var(--bg-sheet); color: var(--ink-sheet);
  box-shadow: 0 0 0 1px var(--app-rule);
}
.hero-doc-sheet .label, .hero-ai-card .label, .hero-card .label{ color: var(--ink-sheet); }

/* 1 · by hand: a document, a screenshot pasted in and a line typed under it, twice */
/* the story's layers are made ready at load, not on their first appearance: drawn for the first time mid-loop,
   the AI beat's transcript took one 77 ms frame at 3.2 s on a fresh page, a visible hitch */
.hero-doc, .hero-doc-sheet, .hero-doc-shot, .hero-doc-line, .hero-ai, .hero-ai-card, .hero-board, .hero-card{ will-change: transform, opacity; }
.hero-doc{ display: grid; place-items: center; }
.hero-doc-sheet{ width: min(440px, 100%); padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; }
.hero-doc-shot{ display: block; height: auto; margin-top: var(--space-3); box-shadow: 0 0 0 1px var(--rule-light); }
.hero-doc-shot:not([data-entry]){ width: min(100%, 384px, 80cqh); aspect-ratio: 680 / 170; }   /* the headline, at most a fifth of the stage tall */
.hero-doc-shot[data-entry="2"]{ width: min(100%, 214px, 35.6cqh); aspect-ratio: 288 / 194; margin-top: var(--space-6); }   /* the Team price; under its 288 page px, so inside its pixels at 2x */
.hero-doc-line{ margin-top: var(--space-2); font: var(--text-body); }

/* 2 · with AI: what was said, on the pane, and the notes it wrote on paper beside it. No picture. */
.hero-ai{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.hero-ai-lines, .hero-ai-notes{ list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); font: var(--text-body); }
.hero-ai-lines li{ display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-3); color: var(--app-ink-2); }
.hero-ai-card{ padding: var(--space-6); }
.hero-ai-notes{ gap: var(--space-2); }

/* 4 · on the board: hero.js scales the page into a tile on the left half; the four notes land as cards in
   a column from the middle plus 12, 24 in from the right */
.hero-board{ left: calc(50% + var(--space-3)); padding-left: 0; list-style: none; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }
.hero-card{ display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-3); }
.hero-card-disc{ display: block; width: var(--space-6); height: var(--space-6); }
.hero-card-said{ margin-top: var(--space-1); font: var(--text-body); }

@media (max-width: 759px){
  /* a phone: the Callouts step alone, note 1 (the 112 stage cannot hold a document or a transcript, and
     the window already ends at the screen's foot), the view at 1:1 page px on it (sharp at 2x), a strip of the page and not a tall
     soft crop (his read, 29 Sep: "too long or too low resolution"), and one 16 padding on the sheet. 112:
     note 1's balloon top at 499 page px down to its outline's foot at 587 is 88, so the crop holds both;
     at 128 note 1's 91 characters set three lines at 15px and the window ended 16 under a 390 by 844 screen */
  .hero-stage{ height: calc(var(--space-4) * 7); }
  .hero-foot{ gap: var(--space-4); padding: var(--space-4); }
  .hero-note-said{ font: var(--text-site-note); }   /* 15/22, the size the app's note list sets */
  .hero-sheet > li:not([data-n="1"]){ display: none; }
}