/* ==========================================================================
   About hero  —  Figma "About us" (1028:104754), the dark band at y 0.
   1920 x 1042 on Mono/Dark; the dots band that follows is its own section.

   The masthead is the landing page's, markup and all, so its positioning
   comes from hero.css -- which places .hero__* without scoping to .hero,
   exactly so it can be dropped into any positioned section.
   ========================================================================== */

.about-hero {
  top: 0;
  height: calc(1042 * var(--s));
  background: var(--c-mono-dark);
  overflow: clip;
  z-index: 2;
}

.about-hero__item { position: absolute; }

.about-hero__haze {
  left: calc(-733 * var(--s));
  top: 0;
  width: calc(1400 * var(--s));
  height: calc(1080 * var(--s));
  opacity: 0.5;
  pointer-events: none;
}
.about-hero__haze img { width: 100%; height: 100%; max-width: none; }

/* --- headline ------------------------------------------------------------
   Two blocks, not one: they sit above-left and below-right of the disc, and
   the gap between them is where the disc goes. */
.about-hero__h {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: calc(64 * var(--s));
  line-height: 1.34;
  letter-spacing: calc(-1.92 * var(--s));
  color: var(--c-mono-light);
}
.about-hero__h .mask { display: block; }
.about-hero__h .rv { display: block; white-space: nowrap; }

.about-hero__h--a { left: calc(182 * var(--s)); top: calc(240 * var(--s)); width: calc(820 * var(--s)); }
.about-hero__h--b { left: calc(1095 * var(--s)); top: calc(710 * var(--s)); width: calc(700 * var(--s)); text-align: right; }

/* --- the disc -----------------------------------------------------------
   Figma: x 340, y 380, 940.67 x 540. Still: it fades up with the section and
   then holds. No transform, so nothing about it reads as motion. */
/* The tilt box holds the perspective; the disc inside takes the rotation.
   Splitting them keeps the galaxy's own transforms -- and its canvas -- clear
   of the lean entirely. */
.about-hero__tilt {
  left: calc(340.164 * var(--s));
  top: calc(380.5 * var(--s));
  width: calc(940.675 * var(--s));
  height: calc(540 * var(--s));
  z-index: 1;
  perspective: calc(1400 * var(--s));
  transform-style: preserve-3d;
  opacity: 0;
  transition: opacity calc(var(--rv-dur) * 1.2) var(--rv-ease);
  pointer-events: none;
}
.about-hero.is-in .about-hero__tilt { opacity: 1; }

.about-hero__galaxy {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.about-hero__galaxy img { display: block; width: 100%; height: 100%; }

/* The canvas takes over once it has a frame down; the SVG stays as the first
   paint and as the no-JS state. */
.galaxy-spin__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 400ms linear;
}
.about-hero__galaxy.is-spinning .galaxy-spin__canvas { opacity: 1; }
.about-hero__galaxy.is-spinning img { opacity: 0; }

/* The headline has to clear the disc, which is painted behind it. */
.about-hero__h { position: absolute; z-index: 2; }

/* --- the two mono labels ------------------------------------------------- */

.about-hero__label--a,
.about-hero__label--b {
  margin: 0;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-mono-light);
  z-index: 2;
}
.about-hero__label--a { left: calc(1257 * var(--s)); top: calc(240 * var(--s)); width: calc(170 * var(--s)); }
.about-hero__label--b { left: calc(1444 * var(--s)); top: calc(240 * var(--s)); width: calc(180 * var(--s)); }

/* The dots band is the front page's partial, unchanged, so it carries the
   same cursor interaction. Figma runs it from 1042 to 1306 with its first row
   on 1050; the partial's own grid starts 217 in, so it is pulled up to put
   that row back where the design has it and the section is cut to suit.

   284, not Figma's 264. The rows land on 8 / 91 / 174 / 257 once the grid is
   pulled up, and each cell is 19 tall with its dot on the centre line -- so a
   264 cut falls at 264 and takes the fourth row's dots, which sit at 266.5,
   with 2.5 to spare. 284 clears that row's cell (276) and leaves 8 below it,
   the same margin the first row has above. The fifth row stays outside, as
   the design has it. */
.o-page--about .dots {
  top: auto;
  height: calc(284 * var(--s));
}
/* Scoped to the dots SECTION. Unscoped, this also caught the grid inside the
   standards band -- the one other place on this page that reuses the dot
   markup -- and dragged it 209 above its own band, out of sight. */
.o-page--about .dots .dots__grid {
  top: calc(-209 * var(--s));
  bottom: auto;
  height: calc(600 * var(--s));
}

/* 1306 to 1466. The band took 20 of this gap to fit its fourth row, so the
   gap gives 20 back and everything below it stays exactly where it was. */
.o-page--about > main > .dots + .about-what { margin-top: calc(140 * var(--s)); }

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1500px) {
  .about-hero__h { font-size: calc(52 * var(--s)); }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .about-hero { height: auto; padding: 24px 20px 40px; }
  .about-hero__item { position: static; width: auto; height: auto; }
  .about-hero__haze { display: none; }

  .about-hero__h {
    margin-top: 40px;
    font-size: clamp(30px, 8vw, 48px);
    letter-spacing: -0.5px;
    text-align: left;
  }
  .about-hero__h--b { margin-top: 0; }
  .about-hero__h .rv { white-space: normal; }

  /* The disc keeps its 941:540 shape and takes the width it is given. No
     tilt on a touch screen -- there is no pointer to lean toward. */
  .about-hero__tilt {
    display: block;
    width: 100%;
    aspect-ratio: 941 / 540;
    margin: 20px 0;
    perspective: none;
  }
  .about-hero__galaxy { position: absolute; inset: 0; transform: none !important; }

  .about-hero__label--a { margin-top: 24px; }
  .about-hero__label--b { margin-top: 10px; }
  .about-hero__label--a,
  .about-hero__label--b { font-size: 12px; }

  .o-page--about .dots { height: auto; }
  .o-page--about .dots .dots__grid { top: 0; height: auto; bottom: 0; }
  .o-page--about > main > .dots + .about-what { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__tilt { opacity: 1; transition: none; }
  .about-hero__galaxy { transform: none !important; }
}