/* The sales story in #how: one week at Tolliver Hall, three jobs found and finished, then the week's result. The
   phones, their apps and the notification cards come from flow.css; this file places the pieces in the scene and
   draws the page-level ones: the opening card, the step records and the result. */

/* One record per step; tap one to go back to it. The current one turns while the story plays. */
.fl-records{display:flex;flex-wrap:wrap;margin:16px 0 0 -10px;padding:0;list-style:none}
.fl-records button{display:grid;place-items:center;width:34px;height:44px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.fl-records svg{width:14px;height:14px;opacity:.26;transition:opacity .2s,scale .2s}
.fl-records .is-past svg{opacity:.55}
.fl-records .is-now svg{opacity:1;scale:1.3}
.fl-records button:hover svg{opacity:1}
.fl-records button:focus-visible{outline:2px solid var(--coal);outline-offset:-4px}
.fl-stage.is-playing .fl-records .is-now svg{animation:sd-spin 1.6s linear infinite}
@keyframes sd-spin{to{rotate:1turn}}
@media (prefers-reduced-motion:reduce){.fl-stage.is-playing .fl-records .is-now svg{animation:none}}

/* One column at every width: the beat, who the step waits on and the play control above the view; the records below */
.fl-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;row-gap:6px}
.fl-stage .fl-story{display:contents}
.fl-story>div{grid-row:1;grid-column:1;display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;min-height:44px;padding-right:96px}
.fl-stage .fl-now{display:block;font-size:.9375rem;font-weight:600;color:var(--coal)}
.fl-stage .fl-needs{margin:0}
.fl-stage .fl-replay{grid-row:1;grid-column:1;justify-self:end;align-self:center;position:static;margin:0}
.fl-stage .fl-view{grid-row:2;grid-column:1}
.fl-stage .fl-records{grid-row:3;grid-column:1;justify-self:center;margin:0}

/* Each step opens on its words, large in the view, one sentence at a time; they give way to the step's scene (flow.js
   sets .is-caption). Slow, eased and overlapping only a little: the scene fades out, the words rise in, hold, drift up
   and fade, and the scene comes back once they have gone. One thing moves at a time. Until the story plays, the view
   stays empty (.is-ready). */
.fl-cap{--out:cubic-bezier(.4,0,.2,1);position:absolute;inset:0;z-index:4;display:grid;place-items:center;align-content:center;gap:clamp(20px,3vh,32px);margin:0;padding:0 6%;pointer-events:none;opacity:0;visibility:hidden;translate:0 -10px;transition:opacity .5s var(--out),translate .6s var(--out),visibility 0s .6s}
.fl-cap p{margin:0;max-width:19ch;font-size:clamp(30px,3.6vw,54px);font-weight:600;line-height:1.12;letter-spacing:-.034em;text-align:center;text-wrap:balance;color:var(--coal)}
.fl-stage.is-caption .fl-cap{opacity:1;visibility:visible;translate:0 0;transition:opacity .8s var(--out) .6s,translate 0s .6s,visibility 0s .6s}
.fl-stage.is-caption.is-swap .fl-cap{opacity:0;translate:0 -10px;transition:opacity .5s var(--out),translate .6s var(--out)}
/* Sentence after sentence under a logo that stays: only the sentence fades */
.fl-stage.is-next .fl-cap p{opacity:0;transition:opacity .5s var(--out)}
/* Tolliver Hall's own mark, the teal TH of its app icon, over the words that introduce it. It holds still while its
   sentences change below it, however many lines each one takes. */
.fl-cap-logo{display:none;width:clamp(56px,6vw,84px);height:clamp(56px,6vw,84px);color:#0E6F81}
.fl-cap.has-logo{grid-template-rows:minmax(0,1fr) auto minmax(0,1.5fr);align-content:stretch}
.fl-cap.has-logo .fl-cap-logo{display:block;grid-row:2}
.fl-cap.has-logo p{grid-row:3;align-self:start}
.fl-stage .fl-scene{transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .9s cubic-bezier(.4,0,.2,1) .55s}
.fl-stage:is(.is-caption,.is-ready) .fl-scene{opacity:0;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .55s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.fl-cap,.fl-cap p,.fl-stage .fl-scene{transition:none}}

/* Where each piece sits, in scene pixels: the opening card, Colette's phone, Hollis's MacBook Pro, Thad's phone, the
   week's receipts, the result */
.sd .sd-hook{left:0;top:330px;width:560px}
.sd .dv-who{top:212px;width:330px}
.sd :is(.fl-phone,.mb){top:262px}
.sd .sd-p1{left:640px}
.sd .sd-mac{left:1090px}
.sd .dv-who.sd-mac{left:1120px}
.sd .sd-p3{left:2240px}
.sd .sd-rc{left:2690px;top:380px;width:390px}
.sd .sd-pay{left:3200px;top:330px;width:720px}

.sd-hook{display:grid;justify-items:center;gap:32px;text-align:center}
.sd-hook-title{font-size:32px;font-weight:620;line-height:1.15;letter-spacing:-.02em;color:var(--coal)}
.sd-hook-title span{display:block;margin-top:10px;font-size:16px;font-weight:400;letter-spacing:0;color:var(--pewter)}
.sd-hook-title svg{display:block;width:44px;height:44px;margin:0 auto 14px;color:#0E6F81}
.sd-cast{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.sd-cast li{display:grid;justify-items:center;width:128px;font-size:13px;line-height:1.4;color:var(--pewter)}
.sd-cast :is(.pt,.sd-mark){--s:56px;width:var(--s);height:var(--s);margin-bottom:10px}
.sd-cast b{font-weight:600;color:var(--coal)}

/* Inside the phones: a quoted message and where it came from, the proof behind a job, the money on its card */
.sd-quote{display:grid;gap:1.2cqw;font-style:italic}
.sd-src{display:flex;align-items:center;gap:1.6cqw;font-size:.78em;font-style:normal;color:var(--th-ink3)}
.fl-stage .sd-src .ap{--s:4.6cqw}
.sd-proof{display:grid;gap:2cqw}
.sd-proof li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:2.6cqw}
.fl-stage .sd-proof .ap{--s:6.4cqw}
.sd-proof svg{box-sizing:border-box;width:6.4cqw;height:6.4cqw;padding:1.2cqw;border-radius:23%;background:var(--th-linen);color:var(--th-ink2)}
.sd-proof span{font-size:.84em;line-height:1.3;color:var(--th-ink2)}
.sd-proof b{display:block;font-size:1.07em;font-weight:600;color:var(--th-ink)}
.sd-lines{margin:0;padding:0;list-style:none;display:grid;gap:1cqw;font-size:.88em;line-height:1.3}
.sd-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:3cqw;color:var(--th-ink2)}
.sd-lines b{flex:none;font-weight:600;color:var(--th-ink);font-variant-numeric:tabular-nums}
.sd-lines .is-sum{padding-top:1cqw;border-top:1px solid var(--th-linen)}
.sd-lines .is-sum b{color:var(--th-ok)}
.fl-stage [data-app=instagram]{--app:url("../flow/tools/instagram.png")}

/* Hollis's card in Tolliver Hall's web app: the same pieces as on the phones, in a laptop's pixels. After his click
   the ask gives way to what Serenade did next; the proof stays, and so does the host's email beside the card. */
.wa .sd-proof{margin:0;padding:0;list-style:none;gap:10px}
.wa .sd-proof li{column-gap:12px}
.fl-stage .wa .sd-proof .ap,.wa .sd-proof svg{--s:26px;width:26px;height:26px}
.wa .sd-proof svg{padding:5px}
.wa .sd-deal{margin-top:5px;padding-top:14px;border-top:1px solid var(--th-linen)}
.wa .sd-ask{display:grid;gap:10px}
.wa .sd-ask-q{font-weight:650}
.wa .sd-lines{gap:5px}
.wa .sd-lines li{gap:12px}
.wa .sd-now{display:grid;align-content:start;gap:10px}
.wa .sd-now .wa-done{min-height:0}
.wa .sd-msg{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;column-gap:9px;font-size:14px;line-height:1.4}
.wa .sd-msg>:first-child{justify-self:center;margin-top:1px}
.fl-stage .wa .sd-msg .ap{--s:17px}
.wa .sd-msg b{font-weight:600}
.wa .sd-src{gap:7px;font-size:12.5px}
.fl-stage .wa .sd-src .ap{--s:16px}
.wa .sd-said{font-style:italic}
.wa .sd-mail{gap:10px;align-self:start}
.wa .sd-mail .sd-said{font-size:14px;line-height:1.45;color:var(--th-ink)}
.fl-stage .sd-ask.fade{transition-delay:calc(var(--fl-wait) + 1.2s)}

/* The week's result, in the page's own voice */
.sd-pay{display:grid;gap:28px;padding:40px 44px 36px;border:1px solid var(--hair);border-radius:var(--r);background:#fff}
.sd-pay-head{font-size:15px;font-weight:600;color:var(--pewter)}
.sd-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0}
.sd-nums div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px}
.sd-nums dd{margin:0;font-size:56px;font-weight:600;line-height:1.15;letter-spacing:-.045em;color:var(--orange-ink);font-variant-numeric:tabular-nums}
.sd-nums dt{font-size:15px;line-height:1.35;color:var(--pewter)}
.sd-pay-more{font-size:19px;font-weight:580;letter-spacing:-.01em;color:var(--coal)}
.sd-pay-note{font-size:12.5px;line-height:1.5;color:var(--pewter)}

@media (max-width:760px){
  .sd .sd-hook{width:360px}
  .sd-cast{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .sd-cast li{width:auto;font-size:12.5px}
  .sd-cast :is(.pt,.sd-mark){--s:52px}
  .sd .sd-pay{width:420px}
  .sd-nums{grid-template-columns:minmax(0,1fr);gap:22px}
  .sd-nums div{flex-direction:column-reverse}
}