/* About page, shared by every language version. */

/* Keep the compact header box on desktop; mobile shows the square, at 68% of
   the width instead of the shared header's full width. */
header img {
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}

@media (max-width: 480px) {
  header img {
    width: 68%;
    aspect-ratio: auto;
  }
}

/* The same space above and below the counter's cloud at the end of the
   page. */
main {
  --counter-space: 120px;
  padding-bottom: max(var(--counter-space), env(safe-area-inset-bottom));
}

h2 {
  margin-bottom: 28px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The story comes first, so it starts right under the header art. */
section {
  margin-top: 0;
}

/* A short centered rule between the story and the credits. */
.separator {
  width: 48px;
  height: 0;
  margin: 56px auto;
  border: 0;
  border-top: 2px solid var(--yomm-silver);
  border-radius: 1px;
}

.credits {
  text-align: center;
}

/* The story's thought cloud around the counter: the same geometry and
   motion as storyboard.css (1× units, --u), with the counter where the
   wordmark sits. It forms when it scrolls into view, then each circle
   drifts and breathes on its own. */
.counter-cloud {
  /* Narrow screens leave room for the circles' drift beyond the box. */
  --u: min(1px, (100vw - 60px) / 346);
  --drift-x: 12;
  --drift-y: 10;
  --puff-breath: 0.03;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: grid;
  place-items: center;
  width: calc(346 * var(--u));
  height: calc(288 * var(--u));
  margin: var(--counter-space) auto 0;
}

/* A fixed center fill keeps the middle white however the circles move. */
.counter-cloud::before {
  content: "";
  position: absolute;
  top: calc((144 - 98) * var(--u));
  left: calc((173 - 98) * var(--u));
  width: calc(196 * var(--u));
  height: calc(196 * var(--u));
  border-radius: 50%;
  background: var(--yomm-snow);
  transition: transform 800ms var(--ease-pop) 150ms;
}

.counter-cloud .puff {
  position: absolute;
  top: calc((var(--y) - 75) * var(--u));
  left: calc((var(--x) - 75) * var(--u));
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  transition: transform 800ms var(--ease-pop) calc(var(--i) * 110ms);
}

.counter-cloud .puff::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--yomm-snow);
  animation:
    drift-x calc(3.2s + var(--i) * 0.4s) ease-in-out calc(var(--i) * -1.3s) infinite alternate,
    drift-y calc(4.1s + var(--i) * 0.35s) ease-in-out calc(var(--i) * -1.9s) infinite alternate,
    puff-breathe calc(2.8s + var(--i) * 0.3s) ease-in-out calc(var(--i) * -0.9s) infinite alternate;
}

/* Before it comes into view, the cloud and its counter wait unformed. */
.counter-cloud[data-cloud="waiting"]::before,
.counter-cloud[data-cloud="waiting"] .puff {
  transform: scale(0);
}

.counter-cloud[data-cloud="waiting"] .elapsed {
  opacity: 0;
}

@keyframes drift-x {
  from {
    translate: calc(-1 * var(--drift-x) * var(--u)) 0;
  }

  to {
    translate: calc(var(--drift-x) * var(--u)) 0;
  }
}

@keyframes drift-y {
  from {
    transform: translateY(calc(-1 * var(--drift-y) * var(--u)));
  }

  to {
    transform: translateY(calc(var(--drift-y) * var(--u)));
  }
}

@keyframes puff-breathe {
  from {
    scale: calc(1 - var(--puff-breath));
  }

  to {
    scale: calc(1 + var(--puff-breath));
  }
}

/* The seconds this page has been open: heavy, rounded digits in the body
   text color, fading in at the cloud's center as it forms. */
.elapsed {
  position: relative;
  margin: 0;
  color: var(--yomm-charcoal);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: calc(72 * var(--u));
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  transition: opacity 700ms ease 450ms;
}

@media (prefers-reduced-motion: reduce) {
  .counter-cloud *,
  .counter-cloud::before,
  .counter-cloud *::before {
    transition: none !important;
    animation: none !important;
  }
}