/*
 * a3.css (W23g-WEB, draft A3: "Window"; the owner's changes of 28 Sep). Draft
 * A's look: its paper, its serif, its phone (phone.css). See a3.js, end.js.
 *
 *   the hero          the landing page: the words, "Scrollible is free." and
 *                     the store notes, and the phone playing the feed on its
 *                     own screen, turning out and back (a3.js)
 *   feels like reels  the same phone, carried by the scroll to the left, the
 *                     heading on its right
 *   the pictures      the verses' pictures, no words, in two rows sliding
 *                     past each other, each turning over now and then to one
 *                     not yet shown (end.js)
 *   the walkthrough   a phone going round the far half of a level circle
 *                     behind its words, showing the app (end.js)
 *
 * Every phone is given its width AND its height (height = width x 874 / 402),
 * never one of them left to aspect-ratio: iPad Safari can lay an
 * aspect-ratio box out at its picture's full height for a moment before the
 * style sheet applies.
 *
 * One thing is tied to the scroll: the phone's trip from the hero into
 * "Feels like Reels" (a3.js). The browser holds it in the view (sticky)
 * and moves it across (a scroll-driven animation), so it moves with the
 * scroll, never after it. Nothing is pinned or snapped.
 */

/* ------------------------------------------------------------ the frame
   The header in the page's flow, the wordmark alone and centred (the owner,
   27 Sep: no Privacy link in the top bar; the footer keeps it). */
.home main {
  position: relative;               /* the carry's rail is laid in it (a3.js) */
  width: 100%;
  /* the phone's glass in "Feels like Reels" and in the hero: its height. In
     "Feels like Reels" the phone stands beside its heading at every width,
     so it takes 0.52 of the width left by the side margins and the gap
     between them (16 + 16 + 16), and no more than 72svh or 640 px. The
     carried phone is laid out at this size and drawn smaller in the hero, so
     the hero's is never the larger (on a phone, the hero's words, store
     notes, phone and hint all fit one screen at 390 x 844). */
  --feel-h: min(72svh, 640px, calc((100vw - 48px) * 0.52 * 874 / 402));
  --hero-h: min(47svh, 600px, var(--feel-h));
}
@media (min-width: 900px) {
  .home main {
    --hero-h: min(70svh, 640px, var(--feel-h));
  }
}
.home .site-head {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-left: max(20px, 3vw, env(safe-area-inset-left));
  padding-right: max(20px, 3vw, env(safe-area-inset-right));
}
.home .home-head {
  justify-content: center;
}
.home .site-foot {
  max-width: none;
  width: 100%;
}

.a3-hero,
.a3-feel,
.a3-verses,
.a3-walk {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
.a3-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.875rem, 8vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ------------------------------------------------------------ the hero
   On a phone: the words, then the phone. Wide: the words on the left, the
   phone on the right with its hint under it. */
.a3-hero {
  --ph-h: var(--hero-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px max(16px, env(safe-area-inset-left)) 20px;
  text-align: center;
}
.a3-words {
  position: relative;
  z-index: 2;
}
.a3-h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.125rem, 10vw, 4.75rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.a3-lede {
  margin: 10px auto 0;
  max-width: 23rem;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1.4;
}
.a3-free {
  margin-top: 22px;
}
.a3-free-h {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.a3-free-line {
  margin: 4px auto 0;
  max-width: 23rem;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.4;
}
.a3-free .stores {
  margin-top: 8px;
}
.a3-stage {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
}
.a3-ph {
  z-index: 1;
  height: var(--ph-h);
  width: calc(var(--ph-h) * 402 / 874);
}
.a3-hint {
  margin: 14px 0 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}
.a3-mouse {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .a3-touch { display: none; }
  .a3-mouse { display: inline; }
}
html:not(.js) .a3-hint,
.rm .a3-hint {
  visibility: hidden;
}

@media (min-width: 900px) {
  .a3-hero {
    display: grid;
    grid-template-columns: minmax(0, 37rem) auto;
    grid-template-rows: auto auto;
    column-gap: clamp(48px, 7vw, 120px);
    justify-content: center;
    align-content: center;
    min-height: calc(100svh - 64px);
    padding-top: 12px;
    padding-bottom: 28px;
    text-align: left;
  }
  .a3-words {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .a3-lede {
    max-width: 30rem;
    margin-left: 0;
    font-size: 1.25rem;
    text-wrap: balance;    /* even lines, no word alone on the last */
  }
  .a3-free {
    margin-top: 36px;
  }
  .a3-free-h {
    font-size: 1.75rem;
  }
  .a3-free-line {
    max-width: 30rem;
    margin-left: 0;
    font-size: 1.125rem;
  }
  .a3-free .stores {
    justify-content: flex-start;
    margin-top: 10px;
  }
  .a3-stage {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin-top: 0;
  }
  .a3-hint {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
  }
}

/* ------------------------------------------------------------ feels like reels
   The phone on the left and its name on the right, at every width (the
   owner, 28 Sep: "have the phone move to the left and put Feels like Reels
   on the right"). The heading comes first in the page (it names the part);
   row-reverse sets it on the right. */
.a3-feel {
  --ph-h: var(--feel-h);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 7vw, 140px);
  padding: 72px 16px 40px;
  text-align: left;
}
.a3-feel-words {
  flex: 0 1 30rem;
  min-width: 0;
}
.a3-feel-h {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.5rem, 11vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.a3-feel-ph {
  flex: none;
  height: var(--ph-h);
  width: calc(var(--ph-h) * 402 / 874);
}
@media (min-width: 900px) {
  .a3-feel {
    padding-top: 120px;
  }
}

/* ------------------------------------------------------------ the carry
   One phone for both parts (a3.js adds "carry" to main; not with Reduce
   Motion). The hero's stage keeps the hero phone's box; the phone itself
   rides in .carry-rail, laid over both parts from the hero phone's middle
   to its place in "Feels like Reels", in .carry-stick, which is sticky: the
   browser holds it in the middle of the view between the two, with the
   scroll (a3.js sets the rail's top and height, the box's sticky top and
   its left: its place in "Feels like Reels"). The box is that place's size;
   --dx0 and --k0 are where it starts across and how much smaller.
   SMOOTH WHILE SCROLLING (the owner, 5 Oct: "when scrolling up and down in
   part 1 it jitters"): the move across and the growth no longer follow the
   scroll frame by frame (a scroll-driven animation, or the script's own
   writes where there is none, which on a phone trail the scroll that the
   browser runs on another thread: the phone stuttered sideways against it).
   Once the scroll has gone past the middle of the move (a3.js adds
   "across", and takes it off only well back before the middle), the phone
   glides across and grows in one transition of transform, which the
   browser runs on its compositor, on time, whatever the page is doing; the
   heading comes in after it. No script writes the phone's place while the
   page scrolls. The phone inside turns (a3.js, transform), and its place in
   "Feels like Reels" stays in the layout, unseen, as the place it lands. */
.carry .a3-hero,
.carry .a3-feel {
  overflow: visible;
}
.carry .a3-stage {
  display: block;
  width: calc(var(--hero-h) * 402 / 874);
  height: var(--hero-h);
  margin-left: auto;
  margin-right: auto;
}
.carry-rail {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 3;
  pointer-events: none;
  overflow-x: clip;               /* never a sideways scroll; sticky still works (clip is no scroller;
                                     no "hidden" fallback: that would make the rail a scroller and
                                     the phone would stop sticking) */
}
.carry-stick {
  position: sticky;
  width: calc(var(--feel-h) * 402 / 874);
  height: var(--feel-h);
  pointer-events: auto;
  transform: translate3d(var(--dx0, 0px), 0, 0) scale(var(--k0, 1));
  transition: transform 0.55s cubic-bezier(0.45, 0, 0.55, 1);   /* home: done before the words come down (a3.js) */
  will-change: transform;           /* its own layer from the start: none is made as it sets off */
}
.carry-stick.across {
  transform: none;
  transition-duration: 0.75s;
}
.carry #hero-ph {
  width: 100%;
  height: 100%;
}
.carry #hero-ph.turning {
  will-change: transform;
}
.carry #feel-ph {
  opacity: 0;
}
/* the heading, where the phone would otherwise cross it: in on the right
   once the phone has gone across (a3.js adds "carry-in", then "across") */
.carry .a3-feel-words.carry-in {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.carry .a3-feel-words.carry-in.across {
  opacity: 1;
  transition-delay: 0.45s;
}
/* ... and where it stands beside the phone's home when the phone glides
   home early, scrolled back up (a3.js, "away"): out of its way, and back */
.carry .a3-feel-words {
  transition: opacity 0.3s ease;
}
.carry .a3-feel-words.away {
  opacity: 0;
}
/* the hint under the hero's words, gone once the page is scrolled */
.carry .a3-hint {
  transition: opacity 0.3s ease;
}
.carry .a3-hint.gone {
  opacity: 0;
}
/* the review's stills ("#capture", a3.js): every change at once */
.carry.still .carry-stick,
.carry.still .a3-feel-words,
.carry.still .a3-hint {
  transition: none;
}

/* ------------------------------------------------------------ the pictures
   The verses' pictures (the owner, 28 Sep: "just the art + image, no text.
   And 5 big versions per row (keep 2 rows)"), each 2:3, as the app layers
   it. One formula sizes them from the width: five cards and six gaps fill
   it, and no card is narrower than 9.5rem (152 px): 1440 wide shows five
   266 x 400; 390 wide shows two and a bit, 152 x 228. Still (Reduce Motion,
   or no script): two rows of five, centred, cut at the sides. Moving
   (end.js adds "lanes"): each row's cards on a track that slides, the rows
   in opposite directions, and a card now and then turns over (rotateY) to
   show another verse on its back. */
.a3-verses {
  padding: 72px 0 48px;
}
.cards {
  --gap: clamp(12px, 1.25vw, 24px);
  --cw: max(9.5rem, calc((100vw - 6 * var(--gap)) / 5));
  --cr: calc(var(--cw) * 0.06);
  container-type: inline-size;
}
@supports (width: 1cqw) {
  .cards {
    --cw: max(9.5rem, calc((100cqw - 6 * var(--gap)) / 5));
  }
}
.card-row {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  padding: 6px 0 18px;
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;            /* a turning card may stand out above and below */
}
.card-row + .card-row {
  margin-top: calc(var(--gap) - 12px);
}
.card {
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.5);
  perspective: calc(var(--cw) * 3.2);
}
.card-in {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.card-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--cr);
  background: var(--card, #DBE0E4);          /* the theme's card tone until the picture is in */
  box-shadow: 0 1px 2px rgba(11, 16, 20, 0.10), 0 10px 26px -10px rgba(11, 16, 20, 0.34);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-back {
  transform: rotateY(180deg);
}
.cards.lanes .card-row {
  display: block;
}
.card-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
}
/* the heading, centred over the two rows (the owner, 28 Sep: "add some text
   center and overtop of part 3"). Readable over the moving pictures by a
   soft glow of the page's paper behind it (a wide ellipse, solid in its
   middle and fading to nothing, not a box) and a paper halo round each
   letter; neither moves, so the rows slide under a still layer (no blur:
   a backdrop blur would be redrawn every frame). The rows keep their own
   pace; the heading takes no pointer. */
.verses-over {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  bottom: 48px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 max(16px, env(safe-area-inset-left));
  pointer-events: none;
}
.verses-words {
  position: relative;
  isolation: isolate;
  max-width: min(40rem, 100%);
  text-align: center;
}
.verses-words::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * clamp(44px, 7vw, 96px)) calc(-1 * clamp(28px, 12vw, 180px));
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--paper) 0%, var(--paper) 58%, transparent 100%);
  opacity: 0.94;
}
.verses-h,
.verses-line {
  text-shadow: 0 0 2px var(--paper), 0 0 10px var(--paper), 0 0 22px var(--paper);
}
/* its line: the page's smaller line (part 2's, the walkthrough's), in the
   ink of the heading, as the muted grey loses too much over pictures */
.verses-words .verses-line {
  color: var(--ink);
  text-wrap: balance;
}

/* ------------------------------------------------------------ the walkthrough
   The phone stands over the words and moves on a small arc centred on them
   (end.js adds "orbit", works the phone's size, the arc and the eye out
   from the words and the view, places the scene and moves the phone: see
   end.js, THE WALKTHROUGH). Without the script, with Reduce Motion, or
   before it is worked out, the phone simply stands over the words, and its
   shadow on the floor is not there. With the footer it
   fills the view at the page's end (end.js sets --foot-h). */
:root {
  --walk-shadow: rgba(11, 16, 20, 0.26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --walk-shadow: rgba(0, 0, 0, 0.62);
  }
}
:root[data-theme="dark"] {
  --walk-shadow: rgba(0, 0, 0, 0.62);
}
.a3-walk {
  --ph-h: min(56svh, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--foot-h, 0px));
  padding: 72px 16px 32px;
  text-align: center;
}
.walk-scene {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 28px;
}
.walk-ph {
  height: var(--ph-h);
  width: calc(var(--ph-h) * 402 / 874);
}
.walk-words {
  position: relative;
  z-index: 1;
}
.a3-walk-line,
.a3-feel-line,
.verses-line {
  margin: 10px auto 0;
  max-width: 23rem;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1.4;
}
/* "Download Now"'s install path (W24-POLISHWEB, C4): once the app is in the
   App Store, its badge under the line, and on a desktop (a wide window with
   a mouse) a QR code to the same store page beside it, for installing on a
   phone. The build writes both (site/partials/download.html) only once the
   store link is known; until then this part keeps its two lines. The code is
   dark on its own white square in either theme, as a camera reads best. */
.walk-get {
  display: flex;
  justify-content: center;
  align-items: center;     /* the badge's middle level with the code's */
  margin-top: 12px;
}
.get-qr {
  display: none;
  position: relative;
  margin: 0;
}
.get-qr-code {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--edge);
}
/* the caption hangs under the code, centred on it, and takes no width or
   height in the row, so the badge is centred on the code alone and the row
   (badge, gap, code) is centred under the line */
.get-qr figcaption {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--ink-muted);
  font: 500 0.8125rem/1.3 var(--font-ui);
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .walk-get {
    gap: 24px;
    margin-bottom: 24px;   /* room for the caption */
  }
  .get-qr {
    display: block;
  }
  /* the badge's clear space (a quarter of its height, inside its link) hangs
     out of the row on both sides, so the 24 px gap is the gap between the
     badge itself and the code, and the row's middle is theirs */
  .walk-get .stores {
    margin: 0 calc(var(--badge-h) / -4);
  }
}
.a3-walk.orbit .get-qr figcaption {
  text-shadow: 0 0 2px var(--paper), 0 0 10px var(--paper), 0 0 22px var(--paper);
}
/* part 2's line (the owner, 28 Sep: "add some smaller text on Feels like
   Reels"): the walkthrough's line style, set under the heading on its left */
.a3-feel-line {
  margin: 14px 0 0;
  text-wrap: balance;
}
.walk-vid {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0B1014;
}
.walk-floor {
  display: none;
}
.a3-walk.orbit {
  position: relative;
  justify-content: flex-start;
  overflow-x: clip;               /* the glow below never makes a sideways scroll */
}
/* the words over the phone (the owner, 1 Oct), the phone moving behind
   them: a soft glow of the page's paper behind the words (a wide ellipse,
   solid in its middle, fading to nothing, not a box) and a paper halo round
   each letter, as part 3's words over the pictures */
.a3-walk.orbit .walk-words {
  z-index: 2;
  isolation: isolate;
  max-width: min(40rem, 100%);
}
.a3-walk.orbit .walk-words::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * clamp(40px, 6vw, 80px)) calc(-1 * clamp(28px, 9vw, 120px));
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--paper) 0%, var(--paper) 56%, transparent 100%);
  opacity: 0.94;
  pointer-events: none;
}
.a3-walk.orbit .walk-words .a3-h2,
.a3-walk.orbit .walk-words .a3-walk-line {
  text-shadow: 0 0 2px var(--paper), 0 0 10px var(--paper), 0 0 22px var(--paper);
}
.a3-walk.orbit .walk-scene {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
}
/* the phone as a body in space (solid.js: its front, its back, the metal
   band round its edge and its buttons, each face hidden as it turns away;
   phone.css, "the solid phone"). end.js sets the rig's box (the glass) and
   moves it; the body inside it carries part B's rise */
.a3-walk.orbit .walk-rig {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}
.a3-walk.orbit .walk-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.a3-walk.orbit .walk-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* its soft shadow on the floor under it (end.js places it and moves it
   with the phone: wider as it turns side on, fainter as it rises) */
.a3-walk.orbit .walk-floor {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--walk-shadow) 0%, transparent 100%);
  will-change: transform, opacity;
}
@media (min-width: 900px) {
  .a3-walk {
    --ph-h: min(60svh, 560px);
    padding-top: 112px;
  }
  .a3-walk-line,
  .a3-feel-line,
  .verses-line {
    max-width: 34rem;
    font-size: 1.25rem;
  }
}

/* The owner (1 Oct): "make no accounts no ads a bit smaller", then "make it so
   both lines take up the same amount of room horizontally": the second line's
   size is the width ratio measured in the page (Get Scrollible 474.06 px over
   No Account, No Ads 511.16 px at 0.72em, so 0.72 x 0.9274); one face, so the
   two widths stay equal at every screen size. */
.a3-h1-sub {
  display: block;
  font-size: 0.6677em;
  margin-top: 0.12em;
}