/* Home's moving pictures (Oct 2026): the How it works drawings and the
   feedback phone, built by tools/home-drawings.py. Every rule outside
   `.is-armed` is the finished frame; the animations run only once motion.js
   has armed a picture and then sees it (motion.css). */

/* Only the moving parts get an origin: one on a positioned group would move it. */
.d-card, .t-fill, .t-st, .t-bar, .h-pill, .h-fig1, .h-fig2, .h-dot, .h-used, .h-tip { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes mo-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes mo-fade-in { from { opacity: 0; } }
@keyframes mo-pop { from { opacity: 0; transform: translateY(5px) scale(0.86); } }
@keyframes mo-grow-x { from { transform: scaleX(0); } }

/* ---------- How it works ---------- */
.steps-ill .step-ill { grid-column: 1 / -1; margin-bottom: 10px; border-radius: var(--r-panel); background: var(--parchment); border: 1.5px solid var(--parchment-100); overflow: hidden; }
.ill { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.ill text { font-family: var(--sans); }
@container site (min-width: 760px) { .steps-ill { gap: 28px; } }

/* 1. Draw a card: the top card lifts off the deck and turns over. */
.d-deck { fill: #F6EBD2; stroke: var(--stone); stroke-width: 1.5; }
.d-deck2 { fill: #F9F0DD; }
.d-card { transform: translate(0, 0) rotate(-2deg) scaleX(1); }
.d-shadow { fill: var(--parchment-100); }
.d-face { fill: var(--parchment-50); stroke: var(--forest); stroke-width: 1.5; }
.d-chip { fill: var(--ink-butter-bg); }
.d-chip-t { font-size: 12px; font-weight: 600; fill: var(--ink-butter-fg); }
.d-diff { fill: none; stroke: var(--stone); stroke-width: 1.5; stroke-dasharray: 3 3; }
.d-diff-t { font-size: 12px; font-weight: 600; fill: var(--ash-600); }
.d-rule { stroke: var(--clay); stroke-width: 2; }
.d-ruled { stroke: var(--line); stroke-width: 1; fill: none; }
.ill .d-q { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 520; font-size: 14.75px; fill: var(--forest); } /* The long line sits 16px from both edges of the card. */
.d-cover { opacity: 0; }
.d-coverbg { fill: var(--forest); }
.d-coverln { fill: none; stroke: var(--moss); stroke-width: 1.2; stroke-dasharray: 2 4; }
.d-sprout { fill: var(--sage); }
@keyframes d-flip {
  0% { transform: translate(5px, 9px) rotate(4deg) scaleX(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  30% { transform: translate(0, -12px) rotate(0deg) scaleX(1); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  46% { transform: translate(0, -14px) rotate(-1deg) scaleX(0.02); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { transform: translate(0, 0) rotate(-2deg) scaleX(1); }
}
@keyframes d-turn { 0%, 45.9% { opacity: 1; } 46%, 100% { opacity: 0; } }
.is-armed .d-card { animation: d-flip 1150ms 150ms both; }
.is-armed .d-cover { animation: d-turn 1150ms 150ms both; }

/* 2. Talk: the clock runs to 1:48, green then amber come on, the words
   change with them, and the sound bars move while you speak. The clock's
   figures are counted by motion.js (data-count). */
.t-g { fill: var(--light-green); }
.t-a { fill: var(--light-amber); }
.t-edge { fill: none; stroke: var(--ash-400); stroke-width: 2; stroke-linecap: round; }
.ill .t-time { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 600; font-size: 46px; fill: var(--forest); }
.t-of { font-size: 13px; font-weight: 600; fill: var(--ash-600); }
.t-st { font-size: 15px; font-weight: 600; fill: var(--forest); }
.t-st0, .t-st1 { opacity: 0; }
.t-dot { fill: var(--clay-ink); }
.t-rec { font-size: 13px; font-weight: 600; fill: var(--clay-ink); }
.t-bar { fill: var(--clay-ink); }
@keyframes t-light { from { opacity: 0; transform: scale(0.55); } }
@keyframes t-word-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes t-word-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes t-word { 0% { opacity: 0; transform: translateY(4px); } 30%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes t-pulse { 50% { opacity: 0.3; } }
@keyframes t-level { 0%, 100% { transform: scaleY(1); } 22% { transform: scaleY(0.45); } 48% { transform: scaleY(0.9); } 74% { transform: scaleY(0.3); } }
/* The clock runs from 250ms for 2600ms: 1:00 comes at 1694ms, 1:30 at
   2417ms. Each set of words leaves before the next arrives. */
.is-armed .t-g { animation: t-light 300ms var(--ease-out-expo) 1694ms both; }
.is-armed .t-a { animation: t-light 300ms var(--ease-out-expo) 2417ms both; }
.is-armed .t-st0 { opacity: 1; animation: t-word-out 140ms linear 1694ms both; }
.is-armed .t-st1 { animation: t-word 723ms linear 1834ms both; }
.is-armed .t-st2 { animation: t-word-in 380ms var(--ease-out-expo) 2557ms both; }
.is-armed .t-dot { animation: t-pulse 900ms ease-in-out 250ms 3 both; }
.is-armed .t-bar0 { animation: t-level 560ms ease-in-out 250ms 5 both; }
.is-armed .t-bar1 { animation: t-level 440ms ease-in-out 250ms 6 both; }
.is-armed .t-bar2 { animation: t-level 500ms ease-in-out 250ms 5 both; }
.is-armed .t-bar3 { animation: t-level 400ms ease-in-out 250ms 7 both; }
.is-armed .t-bar4 { animation: t-level 520ms ease-in-out 250ms 5 both; }

/* 3. Hear how it went: it listens back along your answer, marks the filler
   words, then pace, time used and one thing to try arrive. */
.h-base { fill: var(--stone); opacity: 0.55; }
.h-bar { fill: var(--forest); }
.h-bar.is-filler { fill: var(--butter); }
.h-pill rect { fill: var(--note-warn); stroke: var(--note-warn-edge); stroke-width: 1; }
.h-pill text { font-size: 11.5px; font-weight: 600; fill: var(--note-warn-ink); }
.h-k { font-size: 11.5px; font-weight: 600; fill: var(--clay-ink); }
.ill .h-big { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 600; font-size: 24px; fill: var(--forest); }
.h-rest { font-size: 12px; fill: var(--ash-600); }
.h-zone, .h-track { fill: var(--parchment-100); }
.h-zone.is-on { fill: var(--sage); }
.h-dot { fill: var(--forest); stroke: var(--parchment); stroke-width: 2; }
.h-used { fill: var(--moss); }
.ill .h-used { transform-origin: 0 50%; }
.h-tip-sh { fill: var(--parchment-100); }
.h-tip-bg { fill: var(--parchment-50); stroke: var(--forest); stroke-width: 1.5; }
.h-tip-k { font-size: 11px; font-weight: 600; fill: var(--clay-ink); }
.h-tip-t { font-size: 13px; fill: var(--ink); }
@keyframes h-slide { from { transform: translateX(-62px); } }
.is-armed .h-bar { animation: mo-fade-in 220ms linear calc(120ms + var(--i) * 30ms) both; }
.is-armed .h-pill { animation: mo-pop 420ms var(--ease-out-expo) calc(200ms + var(--i) * 30ms) both; }
.is-armed .h-fig1 { animation: mo-rise 600ms var(--ease-out-expo) 1200ms both; }
.is-armed .h-fig2 { animation: mo-rise 600ms var(--ease-out-expo) 1300ms both; }
.is-armed .h-dot { animation: h-slide 900ms var(--ease-out-expo) 1350ms both; }
.is-armed .h-used { animation: mo-grow-x 1000ms var(--ease-out-expo) 1450ms both; }
.is-armed .h-tip { animation: mo-rise 600ms var(--ease-out-expo) 1700ms both; }

/* ---------- Feedback phone ---------- */
.fb-phone { display: grid; justify-items: center; }
/* The end of an answer, "Well spoken.", listening back, then the feedback
   filling in: the free plan's screen, in the app's own words. */
.mphone .ph { position: relative; display: block; height: 600px; padding: 0; overflow: hidden; }
.ph-run, .ph-fb { position: absolute; inset: 0; padding: 26px 16px 18px; display: grid; align-content: start; gap: 12px; }
.ph-run { opacity: 0; pointer-events: none; }
.ph-eye { font-size: 13px; font-weight: 600; color: var(--clay-ink); }
.ph-deck { padding: 10px 8px 8px; margin-inline: -4px; }
.ph-deck::before, .ph-deck::after { inset: 10px 8px 8px; }
.ph-card { position: relative; z-index: 1; display: grid; gap: 10px; padding: 12px 14px 16px; border-radius: var(--r-card); border: 1.5px solid var(--forest); background: var(--parchment-50); box-shadow: var(--shadow-lift); transform: rotate(-0.8deg); justify-items: start; }
.ph-card .chip { font-size: 12px; padding: 6px 10px; }
.ph-card p { width: 100%; padding-top: 10px; border-top: 2px solid var(--clay); font-family: var(--serif); font-weight: 520; font-size: 18px; line-height: 1.3; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ph-clock { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ph-clock .lights { gap: 6px; }
.ph-clock .l, .ph-clock .l svg { width: 26px; height: 26px; }
.ph-tm { display: flex; align-items: baseline; gap: 6px; }
.ph-time { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ph-time .dg { display: inline-block; width: 0.66em; text-align: center; }
.ph-time .dc { display: inline-block; width: 0.3em; text-align: center; }
.ph-roll { position: relative; }
.ph-roll span { display: block; }
.ph-s7 { position: absolute; inset: 0; opacity: 0; }
.ph-of { font-size: 13px; font-weight: 600; color: var(--ash-600); }
.ph-state { font-size: 15px; font-weight: 600; color: var(--forest); margin-top: -4px; }
.ph-rec { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--clay-ink); }
.ph-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay-ink); }
.ph-bars { display: inline-flex; align-items: center; gap: 3px; height: 20px; margin-left: 2px; }
.ph-bars i { width: 4px; border-radius: 2px; background: var(--clay-ink); height: 11px; }
.ph-bars i:nth-child(2), .ph-bars i:nth-child(4) { height: 16px; }
.ph-bars i:nth-child(3) { height: 20px; }
.ph-btn { position: relative; display: block; margin-top: 6px; }
.ph-btn .btn { min-height: 54px; font-size: 16px; }
.ph-over { text-align: center; font-size: 14px; font-weight: 600; color: var(--forest); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ph-tap { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--parchment-50); opacity: 0; }
.ph-head { display: flex; align-items: center; gap: 12px; }
.ph-sprout { width: 44px; height: 45px; flex: none; fill: var(--moss); transform-origin: 50% 100%; }
.ph-head .fb-hello { font-size: 25px; }
.ph-line { font-size: 13.5px; line-height: 1.45; color: var(--ash-600); margin-top: 2px; }
.ph-streak { position: relative; display: inline-block; color: var(--ink); }
.ph-streak::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--butter); z-index: -1; transform-origin: 0 50%; }
.ph-streak { z-index: 0; isolation: isolate; }
.ph-area { position: relative; display: grid; }
.ph-wait { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 10px; padding: 16px; border-radius: 18px; border: 1.5px dashed var(--stone); background: var(--parchment); opacity: 0; }
.ph-wait b { font-size: 14.5px; color: var(--forest); }
.ph-wave { display: flex; align-items: center; gap: 3px; height: 32px; }
.ph-wave i { width: 4px; height: var(--h); border-radius: 2px; background: var(--forest); opacity: 0.3; }
.ph-res { display: grid; gap: 10px; }
.ph-kick { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--clay-ink); }
.ph-kick svg { width: 15px; height: 15px; color: var(--clay); }
.ph-fig { display: grid; gap: 4px; padding: 10px 12px 12px; border-radius: 14px; background: var(--parchment-50); border: 1.5px solid var(--parchment-100); }
.ph-k { font-size: 12px; font-weight: 600; color: var(--clay-ink); }
.ph-fig p { font-size: 13.5px; color: var(--ash-600); line-height: 1.3; }
.ph-fig p b { font-family: var(--serif); font-weight: 600; font-size: 23px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ph-scale { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 3px; margin-top: 4px; }
.ph-scale i { height: 6px; background: var(--parchment-100); }
.ph-scale i:first-child { border-radius: 3px 0 0 3px; }
.ph-scale i:nth-child(3) { border-radius: 0 3px 3px 0; }
.ph-scale i.on { background: var(--sage); }
/* The dot sits at 142 words a minute on the 60 to 215 scale (pacePosition in the app). */
.ph-pdot { position: absolute; inset: -3px 0 auto; height: 12px; }
.ph-pdot::after { content: ""; position: absolute; left: 53%; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 2px var(--parchment); }
.ph-zones { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 3px; text-align: center; font-size: 11px; color: var(--ash-600); }
.ph-zones .on { font-weight: 600; color: var(--forest); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ph-chips span { padding: 3px 9px; border-radius: 999px; background: var(--note-warn); font-size: 12px; font-weight: 600; color: var(--note-warn-ink); }
.ph-used { height: 6px; border-radius: 3px; background: var(--parchment-100); overflow: hidden; margin-top: 4px; }
.ph-used i { display: block; height: 100%; width: 90%; border-radius: 3px; background: var(--moss); transform-origin: 0 50%; }
.ph-tip { gap: 4px; padding: 12px 13px; }
.ph-tip p { font-size: 14px; line-height: 1.5; }
.ph-lock { display: grid; gap: 7px; padding: 12px 13px; border-radius: 14px; border: 1.5px dashed var(--stone); background: var(--parchment-50); }
.ph-lock .k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ash-600); }
.ph-lock .k svg { width: 14px; height: 14px; }
.ph-lt { font-size: 13px; font-weight: 600; color: var(--ash-600); }
.ph-lock .bar { height: 8px; border-radius: 4px; background: var(--parchment-100); }

@keyframes ph-run { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
@keyframes ph-tap { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 0.35; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ph-sprout { from { opacity: 0; transform: translateY(10px) scale(0.7); } }
@keyframes ph-wait { 0% { opacity: 0; transform: translateY(8px); } 18% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ph-glow { 0%, 100% { opacity: 0.3; transform: scaleY(0.8); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes ph-slide { from { transform: translateX(-53%); } }
@keyframes ph-digit-up { to { opacity: 0; transform: translateY(-6px); } }
@keyframes ph-digit-in { from { opacity: 0; transform: translateY(6px); } }
/* 0 to 2.1s: the last seconds of the answer, then "I'm done". */
.is-armed .ph-run { animation: ph-run 300ms var(--ease-out-expo) 1950ms both; }
.is-armed .ph-s7 { opacity: 1; animation: ph-digit-up 260ms var(--ease-out-expo) 900ms both; }
.is-armed .ph-s8 { animation: ph-digit-in 320ms var(--ease-out-expo) 900ms both; }
.is-armed .ph-dot { animation: t-pulse 650ms ease-in-out 3 both; }
.is-armed .ph-bars i { transform-origin: 50% 50%; animation: t-level 520ms ease-in-out 3 both; }
.is-armed .ph-bars i:nth-child(2) { animation-duration: 420ms; animation-iteration-count: 4; }
.is-armed .ph-bars i:nth-child(3) { animation-duration: 480ms; }
.is-armed .ph-bars i:nth-child(4) { animation-duration: 380ms; animation-iteration-count: 4; }
.is-armed .ph-tap { animation: ph-tap 600ms var(--ease-out-expo) 1650ms both; }
/* 2.1 to 4.3s: well spoken, and listening back. */
.is-armed .ph-sprout { animation: ph-sprout 900ms var(--ease-out-expo) 2150ms both; }
.is-armed .ph-head > div { animation: mo-rise 450ms var(--ease-out-expo) 2250ms both; }
.is-armed .ph-streak::after { animation: mo-grow-x 600ms var(--ease-out-expo) 2900ms both; }
.is-armed .ph-wait { animation: ph-wait 2000ms linear 2450ms both; }
.is-armed .ph-wave i { animation: ph-glow 520ms ease-in-out calc(2650ms + var(--i) * 48ms) both; }
/* 4.4s on: the feedback fills in. */
.is-armed .ph-kick { animation: mo-rise 500ms var(--ease-out-expo) 4400ms both; }
.is-armed .ph-f1 { animation: mo-rise 500ms var(--ease-out-expo) 4480ms both; }
.is-armed .ph-f2 { animation: mo-rise 500ms var(--ease-out-expo) 4560ms both; }
.is-armed .ph-f3 { animation: mo-rise 500ms var(--ease-out-expo) 4640ms both; }
.is-armed .ph-pdot { animation: ph-slide 1000ms var(--ease-out-expo) 4600ms both; }
.is-armed .ph-chips span { animation: mo-pop 420ms var(--ease-out-expo) 4760ms both; }
.is-armed .ph-chips span + span { animation-delay: 4840ms; }
.is-armed .ph-used i { animation: mo-grow-x 1100ms var(--ease-out-expo) 4760ms both; }
.is-armed .ph-tip { animation: mo-rise 500ms var(--ease-out-expo) 4960ms both; }
.is-armed .ph-lock { animation: mo-rise 500ms var(--ease-out-expo) 5060ms both; }