/* Proactive, and playful (John, 17 Oct): "Figs don’t wait to be asked."
   The chat, and what it makes (kit/play.js): an empty chat folds into its
   box, and the things a Fig made spring out of it, round the Fig's
   thought. Linked after home3.css, so the old .cx and .pl rules are
   overridden here by specificity. The paper never changes colour; every
   card is a product card: crisp, rounded, a soft shadow, never cut off.
   Calm (John, 17 Oct: "This whole page is quite in-your-face"): the
   heading a step down, the things at their own sizes or under, and the
   thought the one large thing, in the middle, on its own. */

/* ═════ the stage: pinned, driven by the scroll ═════════════════════════ */
/* the section does not clip either (home3.css's .play did, sideways). On an
   iPhone (WebKit, Chrome there too) a sticky element with anything between
   it and the page that clips its overflow is not pinned by the compositor
   but re-placed by the page every frame, a beat behind the finger: the
   scene shook up and down while it scrolled (John, 18 Oct; his phone's
   recording showed the layout itself never moved). The other two pinned
   stages, which hold still, sit under nothing that clips but the page; the
   page (html, body) still clips sideways */
.play { padding: 0; overflow: visible; }
.play .cx { position: relative; height: 340svh; }
/* the pinned stage clips its own sides (the Fig walks in from past the
   edge): a clip on the sticky element itself is no trouble to the
   compositor, only one above it is (.play, above). Up and down nothing
   needs it: the things land inside the scene */
.play .cx-stage { position: sticky; top: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100svh; padding: clamp(48px, 7vh, 84px) var(--gutter) clamp(20px, 4vh, 42px); overflow: visible; overflow-x: clip; }
.play .cx-scene { position: relative; min-height: 0; }
.play .cx .pl-h { font-size: clamp(30px, 3.5vw, 52px); }
.play .cx .pl-cap { margin-top: clamp(14px, 2.2vh, 26px); }
/* reduced motion: no pin, the end state */
.play .cx.is-still { height: auto; }
.play .cx.is-still .cx-stage { position: relative; min-height: 640px; }

/* every thing a Fig made sits at the scene's centre and is moved from there
   (a phone too short for three keeps the map in the box: .is-off) */
.play .cx-card { position: absolute; left: 50%; top: 50%; z-index: 2; opacity: 0; transform: translate(-50%, -50%) scale(0.2); will-change: auto; pointer-events: none; transform-origin: 50% 50%; }
/* layers of their own the whole time the scene is near the screen, not
   taken and dropped each time the easing catches up with the scroll: each
   change redraws every thing, a flicker on a phone */
.play .cx.is-near .cx-card { will-change: transform, opacity; }
.play .cx-card.is-off { visibility: hidden; }
.play .cx-card .lab { position: relative; margin: 0; width: calc(var(--w) * 1px); max-width: none; rotate: none; }
.play .cx-card .lab img { display: block; width: 100%; height: auto; }
.play .cx-card img { -webkit-user-drag: none; user-select: none; }

/* the Fig's thought at the end: the last word and the one large thing, a
   phrase a line that never wraps, always on top. play.js sets its size
   once the things have landed (as large as the room round it allows,
   never covered by a card); this is the size it starts from */
.play .cx-say { position: absolute; left: 50%; top: 50%; z-index: 40; width: max-content; max-width: none; margin: 0; padding: 0.56em 1.05em 0.64em; border-radius: 1.15em; font-size: clamp(21px, calc(29px * var(--s, 1)), 34px); line-height: 1.2; letter-spacing: -0.02em; text-align: center; opacity: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgb(23 23 23 / 0.06), 0 10px 24px rgb(23 21 15 / 0.08), 0 34px 80px rgb(23 21 15 / 0.2); }
.play .cx-say > span { display: block; white-space: nowrap; }
.play .cx-say::before { left: 1.1em; top: -0.8em; width: 0.66em; height: 0.66em; }
.play .cx-say::after { left: 0.42em; top: -1.5em; width: 0.38em; height: 0.38em; }
.play .cx-say::before, .play .cx-say::after { box-shadow: 0 0 0 1px rgb(23 23 23 / 0.06), 0 6px 14px rgb(23 21 15 / 0.1); }
.play .cx-scene > .figcur { z-index: 60; }

/* ═════ the things a Fig makes ══════════════════════════════════════════ */
.fc { position: relative; display: grid; justify-items: start; width: max-content; font-family: var(--sans); text-align: left; color: var(--ink); -webkit-font-smoothing: antialiased; }
.fc i { font-style: normal; }
.fc > .say { z-index: 2; margin: -6px 0 0 -14px; max-width: calc(100% + 4px); font-size: 15px; }
.fc-box { position: relative; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.05), 0 2px 6px rgb(23 21 15 / 0.05), 0 16px 36px rgb(23 21 15 / 0.13); }
.fc-k { display: flex; justify-content: space-between; gap: 10px; margin: 0; font: 500 10.5px/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: rgb(23 23 23 / 0.48); }

/* Timur's muted map, his marks pinned at their places */
.fc-map { width: var(--mw); overflow: hidden; }
.fc-map-h { padding: 14px 16px 12px; }
.fc-map-t { margin: 7px 0 0; font: 500 19px/1.12 var(--sans); letter-spacing: -0.018em; text-wrap: balance; }
.fc-map-m { position: relative; width: var(--mw); height: var(--mh); overflow: hidden; }
.fc-map-m > img { display: block; width: 100%; height: var(--mi, 100%); max-width: none; margin-top: calc(-1 * var(--mo, 0px)); }
.fc-mk { position: absolute; width: 0; height: 0; }
.fc-mk > * { position: absolute; left: 0; top: 0; }
.fc-mk--spot > * { translate: -22px -22px; }
.fc-mk--flip > * { translate: calc(-100% + 22px) -22px; }
.fc-mk--pin > * { translate: calc(-100% + 22px) calc(-100% + 5px); }
.fc-mk .rb-stop { font-size: 12.5px; }
.fc-mk--glyph > * { translate: -50% -50%; }
.fc-mk--glyph .rb-spot.rb-stop { gap: 0; height: 40px; padding: 2px; border-radius: 13px; }
.fc-mk--glyph .rb-spot i { width: 34px; height: 34px; font-size: 17px; }
.fc-you { position: absolute; width: 0; height: 0; }
.fc-you::before { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgb(10 122 255 / 0.16); animation: fc-you 2.6s ease-out infinite; }
.fc-you::after { content: ''; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; background: #0a7aff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); }
.fc-you .rb-ring-label { position: absolute; left: 0; top: -15px; translate: -50% -100%; }
@keyframes fc-you { 0% { scale: 0.45; opacity: 0.9; } 100% { scale: 1.25; opacity: 0; } }

/* a message, drafted: one tap from sent */
.fc-msg { width: 268px; padding: 16px; }
.fc-msg-top { display: flex; align-items: center; gap: 12px; }
.fc-av { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #f2dccb; color: #7a4325; font: 500 19px/1 var(--sans); }
.fc-av::after { content: ''; position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; box-sizing: border-box; border: 2.5px solid #fff; border-radius: 50%; background: #34c759; }
.fc-msg-h { margin: 0; font: 500 21px/1.08 var(--sans); letter-spacing: -0.02em; }
.fc-draft { margin: 14px 0 0; padding: 10px 14px 11px; border-radius: 18px; background: hsl(240 6% 96%); font: 400 15px/1.35 var(--sans); color: hsl(0 0% 8%); }
.fc-draft small { display: block; margin-bottom: 3px; font-size: 11.5px; color: rgb(23 23 23 / 0.48); }
.fc-acts { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; }
.fc-send { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 17px 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 15px/1 var(--sans); white-space: nowrap; box-shadow: 0 6px 16px rgb(23 21 15 / 0.18); }
.fc-send svg { width: 16px; height: 16px; }
.fc-later { font: 400 14px/1 var(--sans); color: rgb(23 23 23 / 0.5); }

/* an app it built, in Pocket Rally's own blue */
.fc-app { width: 236px; padding: 16px; border-radius: 24px; background: linear-gradient(165deg, #3d62c6, #22409a 72%); color: #fff; box-shadow: 0 0 0 1px rgb(20 40 110 / 0.2), 0 2px 6px rgb(20 30 70 / 0.1), 0 18px 40px rgb(25 40 100 / 0.26); }
.fc-app .fc-k { color: rgb(255 255 255 / 0.62); }
.fc-app-t { display: flex; justify-content: space-between; align-items: baseline; margin: 9px 0 3px; }
.fc-app-t b { font: 600 22px/1.05 var(--sans); letter-spacing: -0.02em; }
.fc-app-t span { font: 500 10.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); }
.fc-app-s { margin: 0 0 12px; font: 400 13px/1.3 var(--sans); color: rgb(255 255 255 / 0.72); }
.fc-board { display: grid; grid-template-columns: repeat(3, 44px); gap: 7px; width: max-content; margin: 0 auto 14px; padding: 8px; border-radius: 16px; background: rgb(8 20 66 / 0.3); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2); }
/* the light runs round the board: the lit face is a layer over the tile
   whose opacity is all that animates, so the compositor plays it (the
   tile's own background and glow animated repainted every frame) */
.fc-board i { position: relative; width: 44px; height: 44px; border-radius: 10px; background: #2b4aa3; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.fc-board i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #f3eec6; box-shadow: 0 0 16px rgb(243 238 198 / 0.55); opacity: 0; animation: fc-tile 2.7s linear infinite; animation-delay: var(--d, 0ms); }
@keyframes fc-tile { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
.fc-open { display: flex; justify-content: center; align-items: center; gap: 7px; height: 40px; border-radius: 999px; background: #fff; color: var(--ink); font: 500 15px/1 var(--sans); box-shadow: 0 6px 14px rgb(8 20 66 / 0.25); }
.fc-open svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) {
  .fc-board i::after { animation: none; }
  .fc-board i.on::after { opacity: 1; }
  .fc-you::before { animation: none; opacity: 0.6; }
}

/* ═════ the chat, and what it makes ═════════════════════════════════════ */
.cx-win { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; align-content: center; justify-items: center; gap: 22px; width: min(620px, 90%); height: min(380px, 78%); padding: 52px 28px 28px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.07), 0 24px 70px rgb(23 21 15 / 0.12);
  --fold: 0; translate: -50% -50%; transform-origin: 50% 72%; scale: calc(1 - var(--fold) * 0.86) calc(1 - var(--fold) * 0.94); opacity: calc(1 - var(--fold) * 1.25); }
/* its title bar: three dots and "Assistant", and the box's blinking caret
   (this section's own, so home3.css's old .cx rules can go) */
.play .cx-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 6px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--hair); font: 500 13px/1 var(--apple); color: #777; }
.play .cx-bar span { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #e5e5e5; }
.play .cx-bar b { margin-left: auto; margin-right: auto; font-weight: 500; }
.play .cx-caret { display: inline-block; flex: none; width: 1.5px; height: 1.1em; margin-left: 2px; background: #555; animation: cx-blink 1.1s steps(1) infinite; }
@keyframes cx-blink { 50% { opacity: 0; } }
.cx-hi { margin: 0; font: 400 clamp(22px, 2.1vw, 30px)/1.1 var(--apple); letter-spacing: -0.02em; color: #2b2b2b; }
.play .cx-in { position: relative; display: flex; align-items: center; gap: 2px; width: min(440px, 92%); padding: 15px 20px; border-radius: 999px; background: #f4f4f4; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05); font: 400 16px/1 var(--apple); color: #9a9a9a; text-align: left; }
.cx-in--slot { visibility: hidden; }
/* the box itself, out of the window, so it stays while the chat folds into it */
.play .cx-src { position: absolute; left: 50%; top: 50%; z-index: 7; translate: -50% -50%; transition: background-color 400ms ease, box-shadow 400ms ease; }
.play .cx-src.is-alone { background: #fff; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.07), 0 10px 30px rgb(23 21 15 / 0.12); }
.play .cx-src.is-tap { background: #ececec; }
.play .cx-tired { min-height: 1.2em; margin: -8px 0 0; font: 400 13px/1.2 var(--apple); color: #a3a3a3; }
.cx-tired.is-new { animation: cx-tired 420ms var(--expo); }
@keyframes cx-tired { from { opacity: 0; translate: 0 5px; } }
@media (prefers-reduced-motion: reduce) {
  .play .cx-caret { animation: none; }
}
/* phones and tablets: under 900 wide, or under 1200 and taller than wide
   (play.js stacks the things with the same query) */
@media (max-width: 899px), (max-width: 1199px) and (max-aspect-ratio: 1/1) {
  .play .cx { height: 310svh; }
  .play .cx-stage { padding-top: clamp(44px, 6.5vh, 70px); }
  .play .cx .pl-h { font-size: clamp(27px, 7.4vw, 34px); }
  .play .cx .pl-cap { font-size: 15px; }
  .cx-win { height: min(300px, 56%); padding: 46px 16px 20px; gap: 18px; }
  .fc > .say { font-size: 14px; }
  /* the app sits up by the message: its line hangs from the card's right */
  .play .fc--app > .say { justify-self: end; margin: -6px -12px 0 0; }
  .play .cx-say { padding: 0.54em 0.9em 0.62em; font-size: clamp(19px, 5.5vw, 28px); }
}

/* the thought as the product draws a Fig's balloon (components/SpeechBubble.tsx;
   John, 17 Oct: "Do the thought bubble as we have in the product, so that the
   thoughts are below and the circles below are a bit bigger"): white, round,
   the card's soft shadow, and two dots trailing off its bottom left, the
   larger tucked against the corner, the smaller further down, where the Fig
   rests */
.play .cx-say { box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 28px rgb(0 0 0 / 0.08); }
.play .cx-say::before { left: 1.25em; top: auto; bottom: -0.36em; width: 0.78em; height: 0.78em; }
.play .cx-say::after { left: 0.55em; top: auto; bottom: -1.1em; width: 0.42em; height: 0.42em; }
.play .cx-say::before, .play .cx-say::after { box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 14px rgb(0 0 0 / 0.08); }