/* Ported from Lorenzo Portfolio commit 400617b, site/assets/css/scene.css (scene round 8), re-synced to 94102af (round 9). Kept line for line so later fixes re-sync by diff; every change for farroapp.com is marked [farro]. */
/* ============================================================
   Product scenes (2026-09-27): one pinned scroll scene per product that shows what it does,
   built from the app's real screens. Markup: products/scenes/<slug>.html; motion: assets/js/scene-<slug>.js.
   Without .is-live (no JS, GSAP missing, reduced motion) the scene is its own last frame, laid out still.
   Positions inside the screen are in the screenshot's own pixels (620 x 1341), turned into % here.
   ============================================================ */

.sc { position: relative; --ph: min(calc(100svh - 200px), 780px); --ink-app: #041826; --cream: #F8F4EC; }
/* [farro] the portfolio's tokens, mapped to farro.css: margin = the site gutter, grey = the --muted floor, Bricolage for
   everything, no bottom bar. The margin is the site's own: the scene's words start on the nav's 1180 grid. --ink is farro.css's own (#031826). --ink-app, --cream and the flood's #F9D05C stay as
   sampled: they must match the screenshots' own pixels */
.sc { --pad: max(var(--gutter), (100% - 1180px) / 2); --mute: var(--muted); --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --bar: 0px; }
.sc-pin { position: relative; }

/* ---------- still: head beside the finished list, the three steps under the head ---------- */

.sc-pin {
  padding: clamp(104px, 14vh, 136px) var(--pad) clamp(64px, 10vh, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.sc-stage { display: contents; }
.sc-hero { grid-column: 1; grid-row: 1; }
.sc-beats { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; max-width: 34rem; }
.sc-device { grid-column: 2; grid-row: 1 / span 2; }
.sc-flood, .sc-chips, .sc-steps, .sc-mask, .sc-mark, .sc-veil, .sc-today, .sc-tabs, .sc-patch { display: none; }
.sc:not(.is-live) .sc-layer--week { display: none; }

.sc-beat { display: grid; gap: 8px; }
.sc-beat__n { color: color-mix(in srgb, var(--ink) 60%, transparent); font-size: 0.95rem; font-weight: 600; }
.sc-beat__t { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.sc-ln, .sc-ln > span, .sc-beat__s > span { display: block; }
.sc-beat__s { color: var(--mute); font-size: 1.05rem; line-height: 1.45; max-width: 32ch; }

/* the phone: the app's screen in an ink body, radius of the screenshot's own corners */
.sc-phone {
  --bz: calc(var(--ph) * 0.0135);
  height: var(--ph);
  width: calc((var(--ph) - 2 * var(--bz)) * 620 / 1341 + 2 * var(--bz));
  padding: var(--bz);
  box-sizing: border-box;
  background: var(--ink);
  border-radius: calc(var(--ph) * 0.068);
  box-shadow: 0 2px 4px rgba(107, 74, 18, 0.10), 0 30px 70px -20px rgba(107, 74, 18, 0.40); /* [farro] warm brown-gold, never black (farro.css:42-48) */
}
.sc-screen {
  position: relative;
  height: 100%;
  border-radius: calc(var(--ph) * 0.058);
  overflow: hidden;
  background: var(--cream);
  isolation: isolate;
}
.sc-layer { position: absolute; inset: 0; }
.sc-shot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- live: pinned stage ---------- */

.sc.is-live .sc-pin { display: block; height: 100svh; padding: 0; overflow: hidden; }
.sc.is-live .sc-stage { display: block; position: absolute; inset: 0; }

/* the yellow world: born from the app's "today" card, it leaves by the List tab (clip-path set by the script) */
.sc.is-live .sc-flood { display: block; position: absolute; inset: 0; z-index: 0; background: #F9D05C; clip-path: inset(50% 50% 50% 50%); }

/* desktop composition: head and step words in the left column, the phone, the ingredients to its right */
.sc { --hw: clamp(340px, 34vw, 540px); --gap: clamp(32px, 4vw, 72px); } /* [farro] 37vw, 620px on the portfolio: the head column gives the ingredients their room on the 1180 grid */
.sc.is-live .sc-hero { position: absolute; z-index: 2; left: var(--pad); top: 50%; width: var(--hw); transform: translateY(-46%); }
.sc.is-live .sc-hero .pp-facts { margin-top: clamp(28px, 4.5vh, 48px); }
@media (min-width: 1000px) {
  .sc.is-live .sc-hero .pp-name { font-size: clamp(4.5rem, 9.4vw, 9.5rem); letter-spacing: -0.055em; }
  .sc.is-live .sc-hero .pp-icon { width: clamp(64px, 6.6vw, 104px); }
  .sc.is-live .sc-hero .pp-pitch { font-size: clamp(1.45rem, 2.3vw, 2.3rem); max-width: 20ch; }
}
.sc.is-live .sc-beats { position: absolute; z-index: 2; left: var(--pad); top: 50%; width: var(--hw); max-width: none; display: block; transform: translate(var(--sx, 0px), -50%); }
.sc.is-live .sc-beat { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-50%); visibility: hidden; gap: 22px; }
.sc.is-live .sc-beat__n { display: none; }
/* two authored lines, the longest twelve characters: the size is what fits the column */
.sc.is-live .sc-beat__t { font-size: min(calc(var(--hw) / 6.5), 7rem); line-height: 0.9; letter-spacing: -0.05em; }
.sc.is-live .sc-ln { overflow: hidden; padding-bottom: 0.07em; margin-bottom: -0.07em; }
.sc.is-live .sc-beat__s { overflow: hidden; font-size: clamp(1.05rem, 1.4vw, 1.35rem); color: color-mix(in srgb, var(--ink) 72%, transparent); max-width: 30ch; }

/* one progress device: the three step words, the current one in ink */
.sc.is-live .sc-steps {
  display: flex;
  gap: 22px;
  position: absolute;
  z-index: 2;
  left: var(--pad);
  bottom: calc(var(--bar) + 26px);
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  visibility: hidden;
  transform: translateX(var(--sx, 0px));
}
.sc-steps span { opacity: 0.64; } /* [farro] 0.35 on the portfolio: 2.1:1 on the yellow (measured by the verifier) */

/* --sx: on a desk the words and the phone move to the middle while nothing is beside the phone (set by the scene) */
.sc.is-live .sc-device { position: absolute; z-index: 1; left: calc(var(--pad) + var(--hw) + var(--gap)); top: calc(50% + 14px); transform: translate(var(--sx, 0px), -50%); }
/* the site's nav stays away while a scene holds the screen, scrolling back up too (set by the scene) */
.is-scene .nav { transform: translateY(-102%); }
.sc.is-live .sc-layer--list { z-index: 3; }
.sc.is-live .sc-layer--week { z-index: 1; }

.sc.is-live .sc-mask, .sc.is-live .sc-patch {
  display: block;
  position: absolute;
  left: calc(var(--x, 34) / 620 * 100%);
  width: calc(var(--w, 540) / 620 * 100%);
  top: calc((var(--y) - var(--h) / 2) / 1341 * 100%);
  height: calc(var(--h) / 1341 * 100%);
  background: #fff;
}
.sc.is-live .sc-mask--sum { background: var(--cream); }
.sc.is-live .sc-mask--bar { background: #CFD2CA; transform-origin: 100% 50%; }
.sc.is-live .sc-patch { --x: 150; --w: 320; --y: 1229; --h: 96; background: var(--cream); }

/* a highlighter over the real screenshot: multiply keeps the app's ink on top of the yellow */
.sc.is-live .sc-mark {
  display: block;
  position: absolute;
  left: calc(var(--x0) / 620 * 100%);
  width: calc((var(--x1) - var(--x0)) / 620 * 100%);
  top: calc((var(--y) - 17) / 1341 * 100%);
  height: calc(34 / 1341 * 100%);
  border-radius: 6px;
  background: #F8D05C;
  mix-blend-mode: multiply;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* the week steps back while its ingredients are out */
.sc.is-live .sc-veil { display: block; position: absolute; inset: 0; background: var(--ink-app); opacity: 0; }
.sc.is-live .sc-today { display: block; position: absolute; inset: 0; z-index: 2; background: #F9D05C; visibility: hidden; }

/* the tab bar, cut from the screenshots (x 166-456; y 1176-1250 on the week, 1192-1266 on the list) */
.sc.is-live .sc-tabs {
  display: block;
  position: absolute;
  z-index: 4;
  left: calc(166 / 620 * 100%);
  width: calc(290 / 620 * 100%);
  top: calc(1176 / 1341 * 100%);
  height: calc(74 / 1341 * 100%);
  border-radius: 999px;
  background: var(--ink-app);
  box-shadow: 0 6px 16px rgba(4, 24, 38, 0.16);
  visibility: hidden;
}
/* each piece shows its own patch of a screenshot: --cx --cy --cw --ch in the shot, --l --t inside the bar */
.sc-tabs > i {
  position: absolute;
  left: calc(var(--l) / 290 * 100%);
  top: calc(var(--t) / 74 * 100%);
  width: calc(var(--cw) / 290 * 100%);
  height: calc(var(--ch) / 74 * 100%);
  background-image: var(--src);
  background-size: calc(620 / var(--cw) * 100%) calc(1341 / var(--ch) * 100%);
  background-position: calc(var(--cx) / (620 - var(--cw)) * 100%) calc(var(--cy) / (1341 - var(--ch)) * 100%);
}
.sc-tabs { --wk: url(/assets/img/farro-week.webp); --ls: url(/assets/img/farro-list.webp); }
.sc-tabs__pill { --l: 11; --t: 11; --cw: 134; --ch: 53; background: #F9D05C; clip-path: inset(0 round 999px); }
/* the labels are only the icon and the word (week shot x 203-283, list shot x 335-398), placed in the pill's own
   134 x 53 units, so the round ends are the pill's and no antialiased edge from a screenshot shows while it slides */
.sc-tabs__pill > i {
  position: absolute;
  left: calc((var(--l) - 11) / 134 * 100%);
  top: calc((var(--t) - 11) / 53 * 100%);
  width: calc(var(--cw) / 134 * 100%);
  height: calc(var(--ch) / 53 * 100%);
  background-image: var(--src);
  background-size: calc(620 / var(--cw) * 100%) calc(1341 / var(--ch) * 100%);
  background-position: calc(var(--cx) / (620 - var(--cw)) * 100%) calc(var(--cy) / (1341 - var(--ch)) * 100%);
}
.sc-tabs__on--week { --src: var(--wk); --cx: 195; --cy: 1187; --cw: 96; --ch: 53; --l: 29; --t: 11; }
.sc-tabs__on--list { --src: var(--ls); --cx: 327; --cy: 1203; --cw: 80; --ch: 53; --l: 161; --t: 11; }
/* the grey icons sit under the pill, so the pill uncovers or covers them as it passes */
.sc-tabs__off--week { --src: var(--ls); --cx: 196; --cy: 1216; --cw: 28; --ch: 27; --l: 30; --t: 24; }
.sc-tabs__off--list { --src: var(--wk); --cx: 396; --cy: 1200; --cw: 29; --ch: 28; --l: 230; --t: 24; }
/* the notebook passes under the pill from its Week-state slot (x 330 in the shot) to its List-state slot (x 262) */
.sc-tabs__nb { --src: var(--wk); --cx: 330; --cy: 1200; --cw: 28; --ch: 27; --l: 164; --t: 24; }
.sc-tabs > .sc-tabs__veil { left: 0; top: 0; width: 100%; height: 100%; background: var(--ink-app); border-radius: 999px; opacity: 0; }

.sc.is-live .sc-chips { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* a chip speaks the list's own type: Bricolage 600, the app's ink, so it can become its row */
.sc-chip {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--ink-app);
  font-family: "Bricolage Grotesque", var(--display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transform-origin: 0 50%;
  opacity: 0;
  /* no will-change: it froze each chip's raster at scale 1, so the onions read blurred at 2x */
}
/* the pill is its own layer under the words: on the way in it is cut at the screen's edge (--pill, set by the
   scene), so what is inside the phone is already words on the list and what is still outside is still a pill */
.sc-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 2px 6px rgba(107, 74, 18, 0.1), 0 14px 30px rgba(107, 74, 18, 0.16);
  clip-path: var(--pill, none);
}
.sc-chip b { font-weight: 700; }
.sc-chip em { font-style: normal; font-size: 0.84em; display: inline-block; }
/* the onion's quantity rolls from 1 to 2 when the two onions meet */
.sc-odo { position: relative; overflow: hidden; vertical-align: bottom; height: 1.15em; }
.sc-odo s { display: block; text-decoration: none; text-align: right; }

/* ---------- below 1000px: the head scrolls away above, only the stage pins ---------- */

@media (max-width: 999px) {
  .sc-pin { grid-template-columns: 1fr; }
  .sc-device { grid-column: 1; grid-row: 3; justify-self: center; }
  .sc { --ph: min(calc(100svh - 300px), 560px, calc(56vw * 1341 / 620)); }
  /* the phone and the column of ingredients beside it (about 130px) sit as one group in the middle of a tablet, the
     words aligned on it; on a phone the group is wider than the frame and starts at the margin (critic r7, N24) */
  .sc { --gx: max(var(--pad), (100% - var(--ph) * 0.4769 - 130px) / 2); }

  .sc.is-live .sc-pin { height: auto; overflow: visible; }
  .sc.is-live .sc-hero { position: relative; left: auto; top: auto; width: auto; transform: none; padding: 96px var(--pad) 8px; }
  .sc.is-live .sc-stage { position: relative; inset: auto; height: 100svh; overflow: hidden; }
  .sc.is-live .sc-steps { left: var(--gx); top: 28px; bottom: auto; gap: 18px; font-size: 14px; transform: none; }
  .sc.is-live .sc-beats { left: var(--gx); right: var(--pad); top: 62px; width: auto; transform: none; }
  .sc.is-live .sc-beat { transform: none; gap: 10px; }
  .sc.is-live .sc-beat__t { font-size: clamp(2.1rem, 9.6vw, 3.4rem); }
  .sc.is-live .sc-beat__s { font-size: 0.98rem; max-width: 34ch; }
  /* --sx: the phone alone glides to the middle at the end (set by the scene; critic r8, 768) */
  .sc.is-live .sc-device { left: var(--gx); top: auto; bottom: calc(var(--bar) + 14px); transform: translateX(var(--sx, 0px)); }
  /* on a phone a chip is two lines, name over quantity, so a column of them fits beside the screen */
  .sc-chip { display: inline-grid; gap: 1px; padding: 6px 10px 7px; border-radius: 12px; font-size: 13px; }
  .sc-chip em { font-size: 0.86em; opacity: 0.72; justify-self: start; } /* as wide as its text, so it lands on the quantity column */
  .sc-odo s { text-align: left; }
}