/*
 * miaword.com — the landing page only.
 *
 * The app has no desktop layout language at all: every prototype in docs/ is
 * phone-width and capped at 520px. So the two-column compositions below are
 * invented here, but nothing else is -- the colours, lips, curves and the
 * card artwork are the app's, transcribed rather than reinterpreted.
 */

/* ------------------------------------------------------------------ hero */

.hero {
  z-index: 1;
  padding-top: clamp(130px, 17vw, 190px);
  padding-bottom: clamp(70px, 10vw, 120px);
  overflow: clip;
}

/* How the brand orange gets into a dark page without a single orange block. */
.hero__glow {
  position: absolute;
  top: -18%;
  left: 50%;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 140, 26, 0.2), rgba(255, 140, 26, 0) 62%);
}

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 34px;
}

.soon {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-faint);
}

.soon--big {
  font-size: 16px;
  padding: 14px 22px;
  border-radius: var(--r-lg);
  background: var(--well);
  box-shadow: var(--sunk);
  color: var(--text-muted);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  list-style: none;
  margin: 44px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--border);
}

.hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.hero__facts strong {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}

.hero__facts span {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-faint);
}

/* ------------------------------------------------------------- word card */

.hero__card {
  --p: 0.5;
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

/*
 * The card leans as the page moves under it.
 *
 * Driven by `--p` from site.js rather than by a scroll-linked CSS animation,
 * because the value is also wanted at rest: with no JavaScript at all the
 * fallback above puts it at 0.5, which is the card sitting square.
 */
.wordcard {
  position: relative;
  width: min(380px, 100%);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 26px 34px;
  border-radius: 26px;
  background: linear-gradient(170deg, #fff6ea, #ffe2c0);
  box-shadow: 0 8px 0 var(--orange-edge), 0 26px 50px rgba(0, 0, 0, 0.45);
  transform: rotateX(calc((0.5 - var(--p)) * 16deg)) rotateY(calc((var(--p) - 0.5) * 12deg));
  transition: transform 0.1s linear;
}

.wordcard__tag {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #c05f00;
}

/* All faces stack in one grid cell so the card never resizes as the word
   changes -- a card that grows for "gracias" and shrinks for "danke" reads
   as a layout bug rather than as a deck. */
.wordcard__faces {
  display: grid;
  place-items: center;
  width: 100%;
}

.face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--settle), transform 0.4s var(--settle);
}

.face--on {
  opacity: 1;
  transform: none;
}

.face b {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.04;
  color: #221d1a;
}

.face i {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: #7b6f67;
}

.face em {
  font-style: normal;
  font-size: 17px;
  font-weight: 800;
  color: #c05f00;
}

.wordcard__speak {
  position: absolute;
  bottom: -20px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--orange-ink);
  box-shadow: 0 4px 0 var(--orange-edge);
}

.hero__cat {
  position: absolute;
  right: -6px;
  bottom: -54px;
  width: clamp(92px, 11vw, 124px);
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45));
}

@media (max-width: 900px) {
  .hero__in {
    grid-template-columns: 1fr;
  }

  .hero__card {
    order: -1;
    margin-bottom: 34px;
  }

  .hero__cat {
    right: 4%;
  }
}

/* -------------------------------------------------------- the three ages */

/* Above the deck, so the cards that reach down into this section tuck behind
   its writing instead of across it. */
.ages {
  z-index: 1;
}

/* Three or one, never two-and-a-stray: the three ages are one sequence, and
   a 2 + 1 wrap reads as the third one having been left behind. */
.ages__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 52px;
}

@media (max-width: 900px) {
  .ages__row {
    grid-template-columns: 1fr;
  }
}

/*
 * Orange, blue, green: new, young, mature. These three colours mean exactly
 * one thing each in this product and nothing else on this page may borrow
 * them -- which is why the week-ahead bars elsewhere are purple.
 */
.age {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sheen), 0 4px 0 var(--edge);
  overflow: hidden;
}

.age::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--tint);
}

.age--new { --tint: var(--new); }
.age--young { --tint: var(--young); }
.age--mature { --tint: var(--mature); }

.age__chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  color: var(--orange-ink);
  background: var(--tint);
  margin-bottom: 16px;
}

.age h3 {
  margin-bottom: 8px;
}

.age p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* ------------------------------------------------------------- the stack */

.split__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}

@media (max-width: 900px) {
  .split__in {
    grid-template-columns: 1fr;
  }
}

/* The wall that a thousand words filed on one date builds. The bars are
   purple because blue already means a young card. */
.stack {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 260px;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--well);
  box-shadow: var(--sunk);
}

.stack__bar {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--h);
  padding-bottom: 8px;
  border-radius: 10px 10px var(--r-sm) var(--r-sm);
  background: linear-gradient(180deg, #db9bff, #a961e0);
  transition: height 0.75s var(--springy);
}

.stack__bar span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #2a1636;
  writing-mode: vertical-rl;
  rotate: 180deg;
}

.stack__bar--wall {
  background: linear-gradient(180deg, #ff6b6b, #e23a3a);
}

.stack__bar--wall span {
  color: #4a0f0f;
}

/* --------------------------------------------------------------- oyunlar */

.games {
  height: 300vh;
  padding-block: 0;
}

.games__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vh, 48px);
  overflow: clip;
}

.games__head .lede {
  margin-top: 14px;
}

/*
 * The track is 4 panels of 38vw plus three 2vw gaps = 158vw, and the stage
 * shows 100vw of it, so the journey is 58vw plus the two gutters. Written as
 * a constant because the alternative is measuring the element in script and
 * writing a second number that can disagree with the first.
 */
.games__track {
  --travel: 66vw;
  /* Measured: four 38vw panels and three 2vw gaps overflow a 1440px stage by
     947px, which is 66vw. Written here rather than read in script so there is
     one number instead of two that can disagree.

     The journey finishes at 0.86 rather than at 1 so the last panel comes to
     rest and is read for a beat before the section unpins; a track still
     moving when the pin releases reads as the page snatching it away. */
  --t: clamp(0, calc((var(--p, 0) - 0.05) / 0.81), 1);
  display: flex;
  gap: 2vw;
  padding-inline: var(--gutter);
  transform: translate3d(calc(var(--t) * var(--travel) * -1), 0, 0);
  will-change: transform;
}

.game {
  flex: 0 0 38vw;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 46vh;
  padding: 32px 30px 28px;
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--g1), var(--g2));
  box-shadow: var(--sheen), 0 6px 0 var(--g3), var(--lift);
}

.game:nth-child(1) { --g1: #4c8fd6; --g2: #1e4c86; --g3: #163a68; }
.game:nth-child(2) { --g1: #8a63e8; --g2: #4b2ab0; --g3: #331c80; }
.game:nth-child(3) { --g1: #2f8a73; --g2: #154c3e; --g3: #0e362c; }

/* The three timed drills are not a fourth game and do not get a scene
   colour of their own; they ride on the app's own surface. */
.game--drills {
  --g1: var(--surface-2);
  --g2: #2a231f;
  --g3: var(--edge);
}

.game h3 {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  color: #fff;
}

.game p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.game--drills p {
  color: var(--text-muted);
}

.game--drills b {
  color: var(--text);
  font-weight: 900;
}

.game__gate {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.58);
}

.game--drills .game__gate {
  color: var(--text-faint);
}

/* A pinned sideways scroll is a desktop idea. On a phone the panels are
   simply a column, and the section stops being three screens tall. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .games {
    height: auto;
    padding-block: clamp(64px, 8vw, 112px);
  }

  .games__stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .games__track {
    flex-direction: column;
    gap: 16px;
    transform: none;
  }

  .game {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ---------------------------------------------------------------- diller */

.langs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}

.lang {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 22px 22px 20px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sheen), 0 4px 0 var(--edge);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-faint);
}

.lang b {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.lang span {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--orange);
}

.langs__note {
  margin-top: 28px;
  max-width: 76ch;
}

.langs__note p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* -------------------------------------------------------------- gizlilik */

.nots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
}

.nots li {
  position: relative;
  padding: 16px 16px 16px 46px;
  border-radius: var(--r-lg);
  background: var(--well);
  box-shadow: var(--sunk);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}

/* A struck-through circle, drawn rather than fetched. */
.nots li::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.6px solid var(--mature);
  background: linear-gradient(135deg, transparent 45%, var(--mature) 45%, var(--mature) 55%, transparent 55%);
}

.privacy__fine {
  margin-top: 30px;
  font-size: 16px;
  color: var(--text-faint);
}

.privacy__fine a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- deneme */

.trial__card {
  position: relative;
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--surface-2), #2a231f);
  box-shadow: 0 0 0 2px rgba(255, 140, 26, 0.32), var(--sheen), 0 4px 0 var(--edge),
    var(--lift);
  overflow: hidden;
}

/* The smaller bloom, the one the selected plan panel carries. */
.trial__card::before {
  content: '';
  position: absolute;
  top: -90px;
  left: 50%;
  translate: -50% 0;
  width: 420px;
  height: 280px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 140, 26, 0.16), rgba(255, 140, 26, 0) 65%);
}

.trial__card > * {
  position: relative;
}

.trial__why {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 62ch;
}

/* --------------------------------------------------------------- scatter */

/*
 * A pile of cards that comes apart as the page moves, and goes back
 * together on the way up.
 *
 * The section is three screens tall and holds one screen-high sticky stage,
 * so the reader's scroll becomes the animation's clock rather than its
 * trigger. Every value below is a function of `--p`, which site.js writes
 * once per frame; nothing here is a transition or a keyframe, which is why
 * it can be scrubbed in both directions.
 *
 * `var(--p, 1)` throughout: with no JavaScript the deck is simply open.
 */

/*
 * The deck is not kept inside its own section: eleven of the twenty-four
 * cards finish outside it, reaching about 240px into the hero above and the
 * same into the section below. A pile that stops dead at an invisible line
 * reads as a box with cards in it rather than as cards on a page.
 *
 * What it must not do is cover the writing it reaches. Measured at the open
 * position, five cards landed across the next section's heading, one of them
 * over 54px of it. So the deck sits *below* its neighbours and they keep
 * their own backgrounds and text on top -- the cards show through every gap
 * and tuck behind every line. Sections are positioned, so this is a z-index
 * on both sides rather than source order.
 *
 * The pile also keeps `pointer-events: none`, so a card lying over the
 * section above or below never eats a click meant for it.
 */
.scatter {
  height: 300vh;
  padding-block: 0;
  z-index: 0;
}

.scatter__stage {
  --P: var(--p, 1);
  /* Each card's own clock: starts at `--d`, runs out over the next stretch. */
  --open: clamp(0, calc((var(--P) - 0.26) * 3.4), 1);
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  /* Clipped sideways, open vertically. `clip` is the one overflow value that
     does not force the other axis to compute to `auto`, so the deck can still
     reach into the sections above and below while a card thrown past the
     window's edge stops widening the document. */
  overflow-x: clip;
  overflow-y: visible;
}

/*
 * The heading sits above the pile and is uncovered by it.
 *
 * Above rather than below, so a card that drifts across the middle can never
 * take a word with it. At rest the pile is stacked over this spot and the
 * heading is at zero opacity, so nothing shows through the deck either.
 */
.scatter__say {
  position: relative;
  grid-area: 1 / 1;
  z-index: 3;
  text-align: center;
  max-width: 560px;
  padding-inline: var(--gutter);
  opacity: var(--open);
  transform: scale(calc(0.95 + 0.05 * var(--open)));
}


.scatter__say .lede {
  margin-inline: auto;
}

/*
 * The sentence carries its own darkness instead of sitting on a panel.
 *
 * A rectangle of background behind the words was the obvious fix and the
 * wrong one: it is the same shape wherever the deck happens to be, so on a
 * narrow window it greyed out cards at the edges that were never in the way.
 * A shadow hugs the glyphs, so it only ever darkens what is directly behind
 * a letter.
 */
.scatter__say .eyebrow,
.scatter__say h2,
.scatter__say .lede {
  text-shadow:
    0 2px 10px rgba(34, 29, 26, 0.96),
    0 0 28px rgba(34, 29, 26, 0.92),
    0 0 48px rgba(34, 29, 26, 0.7);
}

/* Two spreads, not one: a phone is tall and narrow, so the horizontal throw
   has to shrink far more than the vertical one or the deck lands offscreen. */
.scatter__pile {
  --spread-x: 1;
  --spread-y: 1;
  grid-area: 1 / 1;
  z-index: 1;
  position: relative;
  width: 100%;
  /*
   * Taller than the stage, and faded out at both ends.
   *
   * Putting the deck under its neighbours was not enough to keep their
   * writing readable: the text still won the paint order, but light type over
   * a cream card is type nobody can read. So the cards dissolve on their way
   * out instead of crossing the boundary at full strength -- they are solid
   * until just past the stage edge and gone 140px later, before the next
   * section's first line begins.
   *
   * The box has to be taller than the stage because a mask is sized to the
   * element it is on, and the cards reaching furthest are outside it. Height
   * is centred, so the chips' 50%/50% origin is still the stage's centre.
   */
  height: 132%;
  align-self: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
  pointer-events: none;
}

.chip {
  --q: clamp(0, calc((var(--P) - var(--d)) * 2.6), 1);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 152px;
  height: 94px;
  margin: -47px 0 0 -76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-style: normal;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(170deg, var(--c1), var(--c2));
  box-shadow: 0 3px 0 var(--c3), 0 16px 28px rgba(0, 0, 0, 0.42);
  /*
   * The deck does not start stacked on one spot, and it does not start as a
   * small copy of where it ends up.
   *
   * It starts as a heap with positions of its own (`--sx`/`--sy`): a jittered
   * block whose spacing is tighter than a card is wide, so fourteen words
   * overlap across the middle of the stage the way a board of stones sits
   * before the first one is lifted. Deriving the heap from the open layout
   * instead -- the same ring, scaled down -- keeps the hole in the middle,
   * which is a small ring rather than a pile.
   *
   * So each axis is a straight interpolation between two independent places,
   * each with its own scale: the heap wants to stay large on a phone while
   * the open spread has to shrink or it lands offscreen.
   *
   * Scale runs the other way -- oversized in the heap, true size once out --
   * so the opening reads as the pile relaxing rather than as cards merely
   * sliding apart.
   *
   * Rotation interpolates between two independent angles for the same reason
   * the positions do. Deriving the resting angle from the open one -- a
   * fraction of it -- makes every card at rest lean the way its neighbour
   * leans, and the pile squares itself up into something that reads as a
   * stack rather than a heap.
   */
  --heap-x: 1.2;
  --heap-y: 1.3;
  --heap-scale: 1.32;
  transform:
    translate3d(
      calc((var(--sx) * var(--heap-x) * (1 - var(--q))
          + var(--x) * var(--spread-x) * var(--q)) * 1px),
      calc((var(--sy) * var(--heap-y) * (1 - var(--q))
          + var(--y) * var(--spread-y) * var(--q)) * 1px),
      0)
    rotate(calc((var(--sr) + (var(--r) - var(--sr)) * var(--q)) * 1deg))
    scale(calc(var(--heap-scale) - (var(--heap-scale) - 1) * var(--q)));
  will-change: transform;
}

/* The deck's three tints, the same ones the app paints a card with. */
.chip--new { --c1: #fff6ea; --c2: #ffe2c0; --c3: #e6b07a; }
.chip--young { --c1: #d9edff; --c2: #a9d3ff; --c3: #7db8f5; }
.chip--mature { --c1: #e3f8d2; --c2: #b9ec93; --c3: #8fd35c; }

/* The language code, in the corner rather than in the stack, so adding it
   does not shift the word off the card's centre. */
.chip em {
  position: absolute;
  top: 7px;
  left: 10px;
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(34, 29, 26, 0.38);
}

/* Baloo carries no Arabic glyphs, so the Arabic cards fall through to the
   system face -- the same thing the app does, and the reason you will find
   `fontFamily: 'System'` in its own script handling. Slightly smaller and
   looser, because the diacritics need the room. */
.chip[lang='ar'] b {
  font-family: system-ui, 'Geeza Pro', 'Noto Naskh Arabic', serif;
  font-size: 19px;
  line-height: 1.5;
}

.chip b {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: #221d1a;
}

.chip s {
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  color: rgba(34, 29, 26, 0.56);
}

@media (max-width: 900px) {
  .scatter {
    height: 260vh;
  }

  .scatter__pile {
    /* Wider than it looks: a phone has no room for twenty-four cards and a
       sentence, so the open spread throws most of them past the edges and
       keeps the middle for the words. */
    --spread-x: 0.44;
    --spread-y: 0.9;
  }

  /*
   * And the sentence gives up the full width to make that work.
   *
   * The cards that end up level with the text are the ones thrown furthest
   * sideways, and on a 375px screen a full-width paragraph leaves them
   * nowhere to be. Measured at the open position: a 300px column puts their
   * inner edge clear of the text, a full-width one puts five of them on top
   * of it.
   */
  .scatter__say {
    max-width: 300px;
    padding-inline: 0;
  }

  .chip {
    /* A phone is tall and narrow, so the heap is stretched and the cards are
       shrunk: at the desktop's 1.32 they bury each other at this width, and
       at the desktop's vertical reach they leave the top and bottom of the
       screen empty. */
    --heap-x: 0.62;
    --heap-y: 1;
    --heap-scale: 1.12;
  }

  .chip {
    width: 104px;
    height: 68px;
    margin: -34px 0 0 -52px;
    border-radius: 11px;
  }

  /* The language code, in the corner rather than in the stack, so adding it
   does not shift the word off the card's centre. */
.chip em {
  position: absolute;
  top: 7px;
  left: 10px;
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(34, 29, 26, 0.38);
}

/* Baloo carries no Arabic glyphs, so the Arabic cards fall through to the
   system face -- the same thing the app does, and the reason you will find
   `fontFamily: 'System'` in its own script handling. Slightly smaller and
   looser, because the diacritics need the room. */
.chip[lang='ar'] b {
  font-family: system-ui, 'Geeza Pro', 'Noto Naskh Arabic', serif;
  font-size: 19px;
  line-height: 1.5;
}

.chip b { font-size: 15px; }
  .chip s { font-size: 10px; }
}

/* The deck is the one thing on the page that must not move for a reader who
   asked for stillness, so it rests fully open. */
@media (prefers-reduced-motion: reduce) {
  .scatter {
    height: auto;
    padding-block: clamp(64px, 8vw, 112px);
  }

  .scatter__stage {
    position: static;
    height: 560px;
  }
}

/* ------------------------------------------- continuous bits elsewhere */

/* The cat drifts against the card it sits beside, at a third of its rate. */
.hero__cat {
  transform: translateY(calc((var(--p, 0.5) - 0.5) * -54px));
}

/* The wall builds itself as the reader arrives at it rather than snapping
   to full height the moment the section is seen. */
.stack {
  --grow: clamp(0, calc((var(--p, 1) - 0.14) * 2.4), 1);
}

.stack__bar {
  height: calc(var(--h) * var(--grow));
  transition: none;
}