/* The homepage's two plain sections under the hero: Proof (Phil's video, what Snapy changed at
   Cheapskates) and How it works (the app, in three frames, and the Box). Their motion: stories/home/home.js,
   which adds .home-motion to <html>; without it (or with reduced motion) everything simply shows, finished.
   Patrick's face, the number cards and the brush stroke are /stories' own (pages/stories/img). */

/* Nothing here may reach past the sides of the screen: on a phone the browser would widen the whole page
   to fit it (and so shrink it), even with body's overflow-x clipped. */
.proof, .how2 { overflow-x: clip; }

/* ---------------------------------------------------------------- Proof
   phone: the video and Phil's words, then Cheapskates; desktop: the video on the left, Cheapskates beside it */
.proof {
  --shop: #135065;
  display: grid; gap: 48px;
  max-width: 1160px; margin: clamp(56px, 10vw, 120px) auto 0; padding: 0 var(--gutter);
}
.proof-video { width: min(100%, 340px); justify-self: center; }

/* the video: YouTube's own cover until it is played, then YouTube's player in its place */
.yt { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 16px 30px -18px rgba(42, 33, 29, .7); -webkit-tap-highlight-color: transparent; }
/* (the cover is 16:9 with the short's frame in its middle third; cropping to 9:16 keeps that frame) */
.yt picture { display: contents; }
.yt-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; translate: -50% -50%; fill: #212121; fill-opacity: .8; transition: fill .15s, fill-opacity .15s; }
.yt-play .yt-tri { fill: #fff; fill-opacity: 1; }
a.yt:hover .yt-play, a.yt:focus-visible .yt-play { fill: #f00; fill-opacity: 1; }
a.yt:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.proof-phil { margin: 20px 0 0; }
.proof-phil blockquote { margin: 0; }
.proof-phil p { margin: 0; font: 500 1.02rem/1.55 var(--body); color: var(--ink); text-wrap: pretty; }
.proof-phil p::before { content: "\201C"; }
.proof-phil p::after { content: "\201D"; }
.proof-phil figcaption { margin-top: 10px; font: 500 .95rem/1.35 var(--body); color: var(--ink-soft); }
.proof-phil figcaption b, .proof-quote figcaption b { color: var(--ink); font-weight: 700; }

.proof-where { margin: 0 0 8px; font: 600 .95rem/1.3 var(--body); color: var(--ink-soft); }
.proof-cs h2 { margin: 0; font: 400 clamp(1.8rem, 1.3rem + 2.1vw, 2.75rem)/1.1 var(--display); color: var(--ink); text-wrap: balance; }

/* the numbers, each on a painted card (a 9-slice: see pages/stories/stories.css) */
.proof-nums { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.proof-nums .num {
  margin: 0; padding: 20px 24px 18px;
  border: 0 solid transparent;
  border-image: url("../../pages/stories/img/card-cheapskates.webp") 100 fill / 40px / 16px stretch;
}
.proof-nums .num:nth-child(1) { rotate: -.6deg; }
.proof-nums .num:nth-child(2) { rotate: .5deg; }
.proof-nums .num b { display: block; font: 600 clamp(2.5rem, 10vw, 3.2rem)/1 var(--label); color: var(--shop); letter-spacing: .01em; }
.num-what { display: block; margin-top: 4px; font: 700 1.02rem/1.3 var(--body); color: var(--ink); }

.proof-quote { position: relative; margin: 30px 0 0; }
.proof-quote blockquote { position: relative; margin: 0; }
.proof-quote blockquote::before { content: "\201C"; content: "\201C" / ""; position: absolute; left: -.04em; top: -.18em; font: 400 4rem/1 var(--display); color: var(--shop); }
.proof-quote p { margin: 0; padding-top: 2.4rem; font: 500 clamp(1.1rem, 1rem + .55vw, 1.32rem)/1.5 var(--body); color: var(--ink); text-wrap: pretty; }
.proof-quote mark { color: inherit; padding: 0 .08em; margin: 0 -.04em; background: url("../../pages/stories/img/hl-cheapskates.webp") no-repeat 0 64% / 100% .8em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.proof-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; font: 500 1rem/1.3 var(--body); color: var(--ink-soft); }
.proof-face { width: 62px; height: auto; rotate: -3deg; }
.proof-source { margin: 22px 0 0; font: 400 .82rem/1.5 var(--body); color: var(--ink-soft); }
.proof-more { margin: 14px 0 0; }

@media (min-width: 600px) {
  .proof-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .proof { grid-template-columns: 340px minmax(0, 1fr); column-gap: clamp(56px, 6vw, 96px); align-items: start; }
  .proof-video { justify-self: stretch; position: sticky; top: 24px; }
}

/* ---------------------------------------------------------------- How it works: the app and the Box */
.how2 { max-width: 1160px; margin: clamp(72px, 12vw, 140px) auto 0; padding: 0 var(--gutter); }
.how2-title { margin: 0 0 26px; text-align: center; font: 400 clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem)/1.1 var(--display); color: var(--ink); }
.how2-grid { display: grid; gap: 52px; }
.how2-panel { margin: 0; }
/* the pictures were painted on white, so each panel (pictures and words) is multiplied onto the paper: it
   sits in it as the washes did. (On the panel, not the picture: the panel's fade-up makes it a group of
   its own, inside which a multiplied picture would only meet its own transparent backdrop.) */
.how2-panel { mix-blend-mode: multiply; }
.how2-art { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

/* above each picture: what it takes, then the step it shows (the app's three steps turn: home.js) */
.how2-kicker { margin: 0; text-align: center; font: 400 clamp(1.3rem, 1.05rem + 1vw, 1.65rem)/1.2 var(--display); color: var(--red); }
.how2-steps { margin: 6px 0 0; padding: 0; list-style: none; text-align: center; font: 600 1.02rem/1.4 var(--body); color: var(--ink); min-height: 1.4em; }
.how2-steps li { display: inline; }
/* without the turning, the three steps read as one line: Snap a few photos → Check… → Go live… */
.how2-steps li + li::before { content: " \2192  "; color: var(--ink-soft); }
.how2-panel h3 { margin: 10px 0 8px; font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem)/1.15 var(--display); color: var(--ink); }
.how2-panel > p:last-child { margin: 0; max-width: 32rem; font: 400 1.06rem/1.6 var(--body); color: var(--ink-soft); }
.how2-tagline { margin: 44px 0 0; text-align: center; font: 400 clamp(1.3rem, 1rem + 1.3vw, 1.8rem)/1.25 var(--display); color: var(--red); text-wrap: balance; }
@media (min-width: 860px) {
  .how2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px); }
}

/* the app's frames share one place; without the turning only the last (going live) shows */
.how2-frames { display: grid; max-width: 560px; margin: 8px auto 0; }
.how2-frames .how2-art { grid-area: 1 / 1; }
.how2-frames .how2-art:not(:last-child) { visibility: hidden; }
/* turning (home.js adds .is-turning and marks the current frame and step .is-on) */
.how2-app.is-turning .how2-steps li { display: none; }
.how2-app.is-turning .how2-steps li.is-on { display: inline; }
.how2-app.is-turning .how2-steps li.is-on::before { content: attr(data-n) " \00b7  "; color: var(--red); }
.how2-app.is-turning .how2-frames .how2-art { visibility: visible; opacity: 0; transition: opacity .7s ease; }
.how2-app.is-turning .how2-frames .how2-art.is-on { opacity: 1; }
/* each step's words write themselves in (as on /stories): swept in under a soft edge */
.how2-app.is-turning .how2-steps li.is-on { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 300% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 300% 100% no-repeat; animation: home-write .7s cubic-bezier(.3, .4, .3, 1) both; }
@keyframes home-write {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* ---------------------------------------------------------------- arriving: a short fade up, once */
.home-motion [data-in] { opacity: 0; translate: 0 18px; transition: opacity .6s ease var(--d, 0s), translate .8s cubic-bezier(.2, .8, .3, 1) var(--d, 0s); }
.home-motion [data-in].is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .yt-play { transition: none; }
}
@media print {
  .home-motion [data-in] { opacity: 1 !important; translate: none !important; }
  .proof-video { position: static; }
}