/* =========================================================================
   Meet Finn
   Page-scoped styles on top of tw-system.css.

   The page introduces a character, so it is the one interior page whose
   subject is artwork rather than a screen capture. That decides most of what
   is here.

   Everything structural is already in the system: the centred hero, the
   bands, the trust panel, the close. What this file adds is the portrait at
   the top, the five rows that show where Finn turns up, the one button
   detail the rest of the site has not needed yet — a mark for a link that
   leaves the site — and Finn winking over the close.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. The portrait and the claim

   Finn, above the headline, at the size of a face rather than a hero image.
   224px is roughly where the glasses stop being a shape and start being
   glasses, and small enough that the headline under it is still the first
   thing read.

   `margin-inline: auto` because the hero is the centred one: the system
   centres the title, the lead and the sub by name (see .hero--centered), and
   an element it does not know about would otherwise sit hard left under
   centred copy.

   That centres the file, which is the wrong object. The file is 649px wide and
   two thirds of it is Finn in his circle; the last third is the speech bubble,
   hanging off the top right on transparent ground. Centring the box therefore
   parks the circle well left of the headline under it, with a bubble making up
   the difference on the right, and the whole hero reads as though it has
   slipped sideways.

   So the circle is centred instead. Its ring is symmetrical about x=216.5 in
   the source: the arc spans 198 to 235 on the top row and 198 to 235 again on
   the bottom row, and the widest row runs to x=433, which puts the centre at
   exactly the same place three times over. 216.5 of 649 is 33.36%, so the art
   moves right by the 16.64% that leaves, and the circle lands on the page's
   centre line.

   `translate` rather than `transform`: the reveal system owns `transform` on
   anything carrying [data-reveal] and resets it to `none` on the way in, which
   would take a horizontal offset with it. The two properties compose, so the
   fade still travels vertically and this holds sideways underneath it.

   The bubble now overhangs to the right. Nothing has to be done about that:
   body carries `overflow-x: clip`, and at 320px the art's right edge still
   lands 10px inside the viewport.

   The art carries its own soft shadow in its alpha channel, so nothing here
   mounts it. See scripts/build-finn-images.mjs.
   ------------------------------------------------------------------------- */

.hero__portrait {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: auto;
  margin-inline: auto;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  translate: 16.64% 0;
}

/* The one line of the hero that is not a sentence: three fragments, sitting
   between the paragraph and the button. It is set small and spaced rather
   than large, so it reads as a caption on the paragraph above it rather than
   as a second sub, and it takes the full-strength text colour so it holds its
   own at that size against the secondary tone of the paragraph over it. */
.hero__claim {
  max-width: 40rem;
  margin: 1.25rem auto 0;
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   02. Lead paragraphs
   The step between a section title and the body under it, as the other
   interior pages set it.
   ------------------------------------------------------------------------- */

.ask__body,
.spots__body {
  margin-top: 1.75rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   03. What to ask

   The legacy page's bullet list, set as four hairline rows rather than as
   bullets or as a second panel. Same device the plain-language pairs use on
   the your-people page, and for the same reason: a hairline over a short
   heading reads as a record of something, where four bullets read as a
   feature list.

   Two columns of two at 24rem, which the container can fit exactly twice and
   never three times, so the last row can never end up alone.
   ------------------------------------------------------------------------- */

.asks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* `align-content: start` so a one-line row does not stretch to the height of
   the two-line one beside it and float its rule away from its own text. */
.asks__row {
  display: grid;
  align-content: start;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--rule);
}

.asks__title {
  font-size: var(--step-body);
  font-weight: 600;
}

.asks__note {
  margin-top: 0.5rem;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   04. The five spots

   Where Finn turns up, one row each: the artwork, what happens there, and the
   way in. The geometry is the your-people beats' geometry, re-cut for
   landscape art — see section 02 of tw-your-people.css for why the pair is a
   fixed block that swings from margin to margin rather than a grid that
   stretches to the measure.

   The numbers differ because the subject does. A handset is 21rem wide and
   these composites are between 4:3 and 1:1, so the art track is 28rem: wide
   enough that the window chrome painted into the map and Finulator pieces is
   still legible, narrow enough that the copy beside it keeps a real measure.
   28 + 5 + 34 is 67rem against a 71rem container, so the row still has 4rem
   of travel between the two margins.

   No frame, no bezel, no window bar. Every one of these files already has its
   own: two of them are drawn inside a browser window and two inside a pair of
   handsets. Mounting them in the system's shot frames would put a second
   device around the first.
   ------------------------------------------------------------------------- */

.spots {
  display: grid;
  gap: clamp(3.5rem, 8vw, 6rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.spot {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

.spot__art {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
}

.spot__copy {
  max-width: 34rem;
}

.spot__name {
  font-size: var(--step-h3);
}

.spot__body {
  margin-top: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Tighter than the shared 2.25rem: inside a row this is the third line of one
   block, not the action closing a section. */
.spot .btn-row {
  margin-top: 1.75rem;
}

/* 62rem is the same breakpoint the beats use, and for the same reason: below
   it the art and a readable measure stop fitting side by side. Both tracks are
   named on both variants rather than reordered, so the art lands on exactly
   the same 28rem whichever side it is on and the DOM order never changes —
   the picture, then the note on it. */
@media (min-width: 62rem) {
  .spot {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 5rem);
    max-width: 67rem;
  }

  .spot__art {
    grid-column: 1;
    grid-row: 1;
  }

  .spot__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .spot--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    margin-left: auto;
  }

  .spot--flip .spot__art {
    grid-column: 2;
  }

  .spot--flip .spot__copy {
    grid-column: 1;
    justify-self: end;
  }
}

/* -------------------------------------------------------------------------
   05. The outbound mark

   Eight buttons on this page leave the site, and two of those open an app
   store. The footer already marks a link that leaves with a small arrow out of
   a corner (.footer__ext); this is that mark at button scale, so the two read
   as one convention rather than two.

   It is drawn at 0.75 opacity rather than in a second colour: the primary
   button's label is the forest green and the ghost's is white, and an arrow
   that held its own colour would be wrong on one of them. Every button that
   carries it also carries a visually-hidden "Opens in a new tab", because the
   arrow is decoration and a screen reader gets the sentence instead.
   ------------------------------------------------------------------------- */

.btn__ext {
  flex: none;
  width: 11px;
  height: 11px;
  opacity: 0.75;
}

/* -------------------------------------------------------------------------
   06. Finn at the close

   The page opens on Finn and closes on Finn: the drawing sits at the end of
   the closing line, set like one more glyph in it. Everything is in em, so it
   follows --step-statement from phone to desktop without a size of its own.

   1.725em tall. The leaf's bottom edge is 78% of the way down the viewBox and
   the stem hangs below it, so a drawing that tall stands the leaf about
   1.35em above the baseline — well over the height of the "ll" and "h" — and
   lets the stem drop 0.37em below it, where a descender would.

   The negative block margins are what keep the line from growing. An
   inline-block contributes its margin box to the line's height, and 1.725em
   is taller than the heading's 1.18 line-height, so without them the last
   line would open up and push the buttons down. -0.45em each way pulls the
   margin box back inside the line. The baseline of an inline SVG is the
   bottom of that margin box, which now sits 0.45em above the stem's tip. The
   tip belongs 0.375em below the baseline, so the margin box's bottom belongs
   0.075em above it, and that is the vertical-align.

   The wink is Finn-27 turning into Finn-23 and back: the right eye folds shut
   onto its lid line, the left cheek rises into the other eye, that pupil
   drops a touch under it, and the open grin gives way to the smirk. Once
   about a second after the drawing arrives, then every seven seconds —
   often enough that a reader who stops on the close sees it, rarely enough
   that it stays a wink rather than a twitch.

   `fill-box` so the percentages below are measured on each part rather than
   on the whole drawing: 62% down the eye is where Finn-23's lid sits, and
   the grin collapses upward from its top lip. The translates are in viewBox
   units, which is what px means inside an SVG.
   ------------------------------------------------------------------------- */

.close__finn {
  white-space: nowrap;
}

.finn {
  display: inline-block;
  width: auto;
  height: 1.725em;
  margin-block: -0.45em;
  margin-inline-start: 0.14em;
  vertical-align: 0.075em;
}

.finn__eye,
.finn__grin,
.finn__smirk {
  transform-box: fill-box;
}

.finn__eye {
  transform-origin: 50% 62%;
}

.finn__grin {
  transform-origin: 50% 30%;
}

.finn__smirk {
  transform-origin: 50% 50%;
  opacity: 0;
}

.finn__lash {
  opacity: 0;
}

/* Parked under the eye, where it is the leaf's own green on the leaf and
   so invisible. */
.finn__cheek {
  transform: translateY(44px);
}

/* Keyed on the heading's reveal, so the first wink lands once the line has
   risen in rather than somewhere off screen. */
@media (prefers-reduced-motion: no-preference) {
  .is-in .finn :is(.finn__eye, .finn__lash, .finn__look, .finn__cheek, .finn__grin, .finn__smirk) {
    animation-duration: 7s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: var(--ease);
  }

  .is-in .finn .finn__eye {
    animation-name: finn-wink-eye;
  }

  .is-in .finn .finn__lash {
    animation-name: finn-wink-lash;
  }

  .is-in .finn .finn__look {
    animation-name: finn-wink-look;
  }

  .is-in .finn .finn__cheek {
    animation-name: finn-wink-cheek;
  }

  .is-in .finn .finn__grin {
    animation-name: finn-wink-grin;
  }

  .is-in .finn .finn__smirk {
    animation-name: finn-wink-smirk;
  }
}

/* 2% of seven seconds is 140ms to shut, held to 10%, open again by 13%. */
@keyframes finn-wink-eye {
  0%,
  13%,
  100% {
    transform: none;
  }
  2%,
  10% {
    transform: scaleY(0.05);
  }
}

@keyframes finn-wink-lash {
  0%,
  1%,
  11%,
  100% {
    opacity: 0;
  }
  2%,
  10% {
    opacity: 1;
  }
}

@keyframes finn-wink-look {
  0%,
  13%,
  100% {
    transform: none;
  }
  3%,
  10% {
    transform: translate(3px, 7px);
  }
}

@keyframes finn-wink-cheek {
  0%,
  14%,
  100% {
    transform: translateY(44px);
  }
  3%,
  10% {
    transform: none;
  }
}

@keyframes finn-wink-grin {
  0%,
  13%,
  100% {
    opacity: 1;
    transform: none;
  }
  2%,
  10% {
    opacity: 0;
    transform: scale(0.7, 0.2);
  }
}

@keyframes finn-wink-smirk {
  0%,
  1%,
  12%,
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
  3%,
  10% {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   07. Reduced motion
   The wink is the one thing on this page that moves of its own accord, and
   it is declared inside a no-preference query above, so a reader who has
   asked for less motion gets Finn with both eyes open. Every other transition
   here is a hover or a reveal that tw-system.css already flattens.

   08. Print
   The art prints. It is the only page on the site where the pictures are the
   content rather than evidence for it, so the one thing to do here is stop a
   row from breaking across a page.
   ------------------------------------------------------------------------- */

@media print {
  .spot {
    break-inside: avoid;
  }
}