/* The hero mark and the full screen lockup at /animation.

   The one job this file has that the script cannot do is hold the space. A
   canvas with no width attribute is 300 by 150 until a script says otherwise,
   and on a hero that is a visible jump on every cold load. The aspect ratio
   here is the grid's own, 31 by 11 cells with two cells of air on every side,
   so the box is the right shape before a byte of JavaScript has run and the
   layout shift on / is zero rather than nearly zero. */

.hero-mark {
  display: block;
  width: min(100%, 1000px);
  aspect-ratio: 31 / 11;
  height: auto;
  max-width: 100%;
}

/* The line under the mark: four facts the engine can answer, on the hairline,
   in tabular figures. Not a stat wall, a caption with numbers in it. */
.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 40px;
  padding-top: 16px;
  border-top: var(--rule);
}
.hero-meta div { min-width: 0; }
.hero-meta b {
  display: block;
  font-weight: 400;
  font-size: var(--t-24);
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero-meta span {
  display: block;
  margin-top: 6px;
  font-size: var(--t-11);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--meta);
}

/* ------------------------------------------------------------ the strip -- */

/* Each of the six composes layer by layer once the wordmark is lit. The
   canvas never changes size while it does, so this is a paint, not a layout. */
.zomi-cell[data-composing] { cursor: progress; }

/* --------------------------------------------------------- /animation.html */

/* A page with no navigation, no footer and one job: be a ten second take of
   the mark composing, and hold still on the lockup at the end so the last
   frame of the export is a poster. */

.take {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  background: var(--ground);
  padding: 0 6vw;
}
.take canvas {
  display: block;
  width: min(84vw, 1480px);
  aspect-ratio: 31 / 11;
  height: auto;
}
.take .lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.take .lockup[data-in] { opacity: 1; transform: none; }
.take .tagline {
  margin: 0;
  font-size: clamp(15px, 1.7vw, 24px);
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--text);
  max-width: 56ch;
  text-wrap: balance;
}
.take .under {
  margin: 0;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--meta);
}
.take .rule {
  width: min(52vw, 760px);
  height: 1px;
  background: var(--line);
}

@media (max-width: 720px) {
  .hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gap); margin-top: 26px; }
  .hero-meta b { font-size: var(--t-18); }
  .take { gap: 30px; }
  .take canvas { width: 88vw; }
}