/* ==========================================================================
   What we do  —  Figma "About us" (1028:104754), the light band at y 1466.
   1920 x 1616. Mono/Light-Grey plate, Mono/White cards, Mono/Dark type.

   Reveal:
     plate    inset -> full bleed, the same move the FAQ's plate makes
     head     eyebrows then heading, behind the plate
     cards    each opens from a seed to full size, one behind the next --
              the landing page's Smart Search frames, which is what these
              were asked to move like
     row 2    on its own scroll, so the grid fills in two beats
   ========================================================================== */

.about-what {
  height: calc(1616 * var(--s));
  background: var(--c-mono-dark);
  overflow: clip;   /* not `hidden` -- that would trap the sticky stage */
}

/* --- the pin -------------------------------------------------------------
   ui.js measures the runway and adds `has-pin`. The section then grows by it
   and the stage sticks; scroll position inside the runway chooses which row
   is up. Both rows sit at the SAME offset, so the second arrives where the
   first was rather than below it -- which is the whole point.

   Without the class -- no JS, reduced motion, or below the breakpoint -- none
   of this applies and the rows stack as they were. */
.about-what__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-what.has-pin { height: calc(var(--what-stage, 0px) + var(--what-runway, 0px)); }

.about-what.has-pin .about-what__stage {
  position: sticky;
  top: var(--what-top, 0px);
  height: var(--what-stage, auto);
}

.about-what.has-pin .about-what__row {
  top: calc(332 * var(--s));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 520ms var(--ui-ease),
    visibility 0s linear 520ms;
}
.about-what.has-pin .about-what__row.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

/* The plate grows from inset to full bleed, the move the FAQ's plate makes.

   It hangs off the STAGE, not the section. Pinned, the section is stage plus
   runway -- getting on for twice the viewport -- and a 30 inset at the top
   and bottom of something that tall is invisible, so the grow read as
   horizontal only and the whole gesture was lost. On the stage it is the box
   the reader is actually looking at.

   A second plate on the section itself, full bleed from the start, keeps the
   page light for the rest of the runway. */
.about-what::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-light-grey, #F2F2F2);
}

.about-what__stage::before {
  content: "";
  position: absolute;
  inset: calc(30 * var(--s)) calc(48 * var(--s));
  background: var(--c-light-grey, #F2F2F2);
  transition: inset calc(var(--rv-dur) * 1.2) var(--rv-ease);
  z-index: -1;
}
.about-what.is-in .about-what__stage::before { inset: 0; }

/* Until it has grown, the ground behind it has to be the section's dark or
   the inset would show nothing. */
.about-what { background: var(--c-mono-dark); }
.about-what:not(.is-in)::before { background: var(--c-mono-dark); }

/* --- head ---------------------------------------------------------------- */

.about-what__eyebrow {
  position: absolute;
  top: calc(48 * var(--s));
  margin: 0;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-mono-dark);
}
.about-what__eyebrow--a { left: calc(48 * var(--s));  width: calc(180 * var(--s)); }
.about-what__eyebrow--b { left: calc(280 * var(--s)); width: calc(180 * var(--s)); }

.about-what__h {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(150 * var(--s));
  width: calc(1300 * var(--s));
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(48 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-1.44 * var(--s));
  color: var(--c-mono-dark);
}
.about-what__h .mask { display: block; }
.about-what__h .rv { display: block; white-space: nowrap; }

/* The dot sphere behind the bare cell -- the same one the Features section
   carries on the landing page: the same sphere.svg, the same .dotring that
   turns it, the same Primary-blue tint at the same 0.1.

   It used to be a square dot lattice faded out by a radial mask. That turned
   on the same keyframe, but a masked grid is not a sphere: the dots keep one
   spacing everywhere instead of closing up toward the rim, so it read as
   wallpaper behind a hole rather than as a body. The artwork is the sphere
   now, and the mask is gone with it -- the drawing already falls away at its
   own edges, which is what the mask was standing in for. */
.about-what__glow {
  position: absolute;
  left: calc(345 * var(--s));
  top: calc(492 * var(--s));
  width: calc(800 * var(--s));
  height: calc(800 * var(--s));
  overflow: hidden;
  opacity: 0;
  transition: opacity calc(var(--rv-dur) * 1.4) var(--rv-ease) 300ms;
  pointer-events: none;
}
/* Primary blue at the 0.1 Figma specifies for the Features glow. */
.about-what__glow .dotring > i { --ring-fill: #0063E0; }
.about-what.is-in .about-what__glow { opacity: 0.1; }

/* --- the grid ------------------------------------------------------------ */

.about-what__row {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(600 * var(--s));
}
.about-what__row--1 { top: calc(332 * var(--s)); }
.about-what__row--2 { top: calc(952 * var(--s)); }

.about-what__cell {
  position: absolute;
  top: 0;
  margin: 0;
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: var(--c-mono-dark);
}
.about-what__cell p { margin: 0; }

/* The Smart Search move -- a card opening from a seed at its own top-left
   corner -- but clipped rather than resized.

   Transitioning width and height animates LAYOUT: every frame reflows the
   card and the absolutely-placed text inside it, and with four of them going
   at once that is what the stutter was. clip-path animates on the compositor
   and touches no layout at all. The card is its full size throughout and only
   the visible region grows, so the edge still travels and the contents are
   still uncovered rather than sliding -- the same gesture, off the main
   thread. */
.about-what__cell.card {
  background: var(--c-mono-white, #FFFFFF);
  overflow: clip;
  clip-path: inset(0 94% 94% 0);
  opacity: 0;
  transition:
    clip-path calc(var(--rv-dur) * 1.1) var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.5) var(--rv-ease);
  will-change: clip-path, opacity;
}
.about-what__row.is-in .about-what__cell.card {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* The bare cell has no edge to travel, so it only rises. */
.about-what__cell:not(.card) {
  opacity: 0;
  transform: translateY(calc(28 * var(--s)));
  transition:
    opacity calc(var(--rv-dur) * 0.7) var(--ui-ease),
    transform var(--rv-dur) var(--rv-ease);
}
.about-what__row.is-in .about-what__cell:not(.card) { opacity: 1; transform: none; }

.about-what__row .about-what__cell:nth-child(2) { transition-delay: 110ms; }
.about-what__row .about-what__cell:nth-child(3) { transition-delay: 220ms; }
/* Row 1 comes in behind the plate; row 2 has its own trigger further down,
   by which time the plate is long since open. */
.about-what__row--1 .about-what__cell:nth-child(1) { transition-delay: 380ms; }
.about-what__row--1 .about-what__cell:nth-child(2) { transition-delay: 490ms; }
.about-what__row--1 .about-what__cell:nth-child(3) { transition-delay: 600ms; }

/* Row 1 */
.about-what__cell--demo    { left: calc(84 * var(--s));   top: calc(244 * var(--s)); width: calc(470 * var(--s)); }
.about-what__cell--users   { left: calc(663 * var(--s));  width: calc(594 * var(--s)); height: calc(600 * var(--s)); }
.about-what__cell--mission { left: calc(1277 * var(--s)); width: calc(595 * var(--s)); height: calc(600 * var(--s)); }

.about-what__cta { margin-top: calc(184 * var(--s)); width: calc(172 * var(--s)); height: calc(48 * var(--s)); }
.about-what__cta .btn { width: 100%; height: 100%; }

/* Five circles, largest in the middle, the outer pairs stepping down. */
.about-what__faces {
  position: absolute;
  left: calc(169 * var(--s));
  top: calc(40 * var(--s));
  display: block;
  width: calc(255 * var(--s));
  height: calc(120 * var(--s));
}
/* The stack opens on hover -- enough to see the faces behind, not so far that
   it stops being a stack. The x offsets are inline (they are the frame's own),
   so the spread is a transform on top rather than a second set of positions
   fighting the first. */
.about-what__faces img {
  position: absolute;
  top: 50%;
  transform: translate(var(--spread, 0px), -50%);
  border-radius: 50%;
  object-fit: cover;
  transition:
    transform var(--ui-dur) var(--ui-ease),
    box-shadow var(--ui-dur) var(--ui-ease);
}
.about-what__faces img:nth-child(3) {
  box-shadow: 0 0 0 calc(5 * var(--s)) var(--c-mono-white, #FFFFFF);
}

.about-what__cell--users:hover .about-what__faces img:nth-child(1) { --spread: calc(-30 * var(--s)); }
.about-what__cell--users:hover .about-what__faces img:nth-child(2) { --spread: calc(-15 * var(--s)); }
.about-what__cell--users:hover .about-what__faces img:nth-child(4) { --spread: calc(15 * var(--s)); }
.about-what__cell--users:hover .about-what__faces img:nth-child(5) { --spread: calc(30 * var(--s)); }
/* The ring thickens a little as they part, so the middle one still reads as
   the one in front. */
.about-what__cell--users:hover .about-what__faces img:nth-child(3) {
  box-shadow: 0 0 0 calc(7 * var(--s)) var(--c-mono-white, #FFFFFF);
}

.about-what__stat {
  position: absolute;
  left: calc(40 * var(--s));
  top: calc(444 * var(--s));
  font-family: var(--f-display);
  font-weight: 700;
  font-size: calc(64 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.92 * var(--s));
  color: #0087FF;
}
.about-what__statlabel {
  position: absolute;
  left: calc(40 * var(--s));
  top: calc(537 * var(--s));
  width: calc(400 * var(--s));
}

.about-what__cell--mission h3,
.about-what__cell--why h3 {
  position: absolute;
  left: calc(36 * var(--s));
  top: calc(40 * var(--s));
  width: calc(483 * var(--s));
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: calc(40 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.2 * var(--s));
  color: var(--c-mono-dark);
}
.about-what__cell--mission p {
  position: absolute;
  left: calc(36 * var(--s));
  top: calc(444 * var(--s));
  width: calc(443 * var(--s));
}

/* Row 2 */
.about-what__cell--owned { left: calc(48 * var(--s));  width: calc(594 * var(--s));  height: calc(600 * var(--s)); }
.about-what__cell--why   { left: calc(662 * var(--s)); width: calc(1210 * var(--s)); height: calc(600 * var(--s)); }

.about-what__flag {
  position: absolute;
  left: calc(40 * var(--s));
  top: calc(40 * var(--s));
  width: calc(146 * var(--s));
  height: calc(77 * var(--s));
  object-fit: contain;
}
.about-what__cell--owned p {
  position: absolute;
  left: calc(40 * var(--s));
  top: calc(420 * var(--s));
  width: calc(503 * var(--s));
}
.about-what__cell--why p {
  position: absolute;
  left: calc(40 * var(--s));
  top: calc(136 * var(--s));
  width: calc(480 * var(--s));
}

/* The photograph is the card's own right half, and it arrives from the right
   -- travelling in from off the card's edge, behind the card's own opening.
   The card clips, so it is uncovered by the card rather than sliding over the
   page. */
/* Anchored by left and a fixed height, NOT by right and a percentage. The
   card opens by growing its own width and height, so anything pinned to its
   right edge was being carried right and down as it grew -- the photograph
   came in on a diagonal even though its own transform was pure X. Fixed
   geometry takes it out of the card's growth entirely; the card clips, so it
   is uncovered rather than moved, and the only thing travelling is the X. */
.about-what__shot {
  position: absolute;
  left: calc(617 * var(--s));
  top: 0;
  display: block;
  width: calc(593 * var(--s));
  height: calc(600 * var(--s));
  overflow: clip;
  opacity: 0;
  transform: translateX(100%);
  transition:
    opacity calc(var(--rv-dur) * 0.6) var(--ui-ease) 360ms,
    transform calc(var(--rv-dur) * 1.15) var(--rv-ease) 360ms;
}
.about-what__row--2.is-in .about-what__shot { opacity: 1; transform: none; }
.about-what__shot img { width: 100%; height: 100%; object-fit: cover; }

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

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .about-what { height: auto; padding: 48px 20px 56px; background: var(--c-light-grey, #F2F2F2); }
  .about-what::before,
  .about-what__stage::before,
  .about-what__glow { display: none; }

  .about-what__eyebrow,
  .about-what__h,
  .about-what__row,
  .about-what__cell,
  .about-what__cell--mission h3,
  .about-what__cell--mission p,
  .about-what__cell--owned p,
  .about-what__cell--why h3,
  .about-what__cell--why p,
  .about-what__stat,
  .about-what__statlabel,
  .about-what__flag,
  .about-what__shot {
    position: static;
    left: auto;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
  }

  .about-what__eyebrow { font-size: 12px; }
  .about-what__eyebrow--b { margin-top: 8px; }
  .about-what__h { margin-top: 20px; font-size: clamp(26px, 7vw, 40px); letter-spacing: -0.5px; }
  .about-what__h .rv { white-space: normal; }

  .about-what__row { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
  /* No seed to open from in a stacked column: the cards fade up instead. */
  .about-what__cell.card {
    width: auto;
    height: auto;
    padding: 24px 20px;
    clip-path: none;
    transform: translateY(20px);
    transition:
      opacity calc(var(--rv-dur) * 0.6) var(--ui-ease),
      transform calc(var(--rv-dur) * 0.8) var(--rv-ease);
  }
  .about-what__row.is-in .about-what__cell.card { clip-path: none; }
  .about-what__row.is-in .about-what__cell.card { transform: none; }
  .about-what__cell--users,
  .about-what__cell--mission,
  .about-what__cell--owned,
  .about-what__cell--why { width: auto; height: auto; }
  .about-what__cell { font-size: 16px; letter-spacing: normal; }
  .about-what__cell:not(.card) { padding: 4px 0; }

  .about-what__faces { --s: 0.68px; display: block; width: calc(255 * var(--s)); height: calc(120 * var(--s)); margin-bottom: 20px; }
  .about-what__stat { margin-top: 20px; font-size: 44px; letter-spacing: -1px; }
  .about-what__cell--mission h3,
  .about-what__cell--why h3 { font-size: 26px; letter-spacing: -0.5px; margin-bottom: 12px; }
  .about-what__cell--mission p,
  .about-what__cell--owned p,
  .about-what__cell--why p { margin-top: 12px; }
  .about-what__flag { width: 110px; height: 58px; margin-bottom: 16px; }
  .about-what__shot { position: static; display: block; width: auto; height: auto; margin-top: 20px; aspect-ratio: 593 / 400; transform: translateX(24px); }
  .about-what__cta { margin-top: 20px; width: 172px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-what__stage::before { inset: 0; transition: none; }
  .about-what__cell,
  .about-what__shot,
  .about-what__glow { opacity: 0.1; transition: none; }
  .about-what__cell.card { clip-path: none; }
}