/* ==========================================================================
   The standards  —  Figma "About us" (1028:104754), the dark band at y 3242.
   1920 x 1031 on Mono/Dark.

   The four principles sit in a ruled row: a hairline over each, dividers
   between, and the whole row bounded left and right. Only the first is at
   full strength; the rest are held back until they are stepped to, which is
   what the Prev/Next pair is for.
   ========================================================================== */

/* Written at the same weight as base.css's flow-gap rule, which is what these
   are overriding: this page's gap is 0 because the design's own spacing lives
   inside the sections, and these two are the exceptions. */
.o-page--about > main > .about-what + .about-std { margin-top: calc(160 * var(--s)); }
.o-page--about > main > .about-std + .about-team { margin-top: calc(160 * var(--s)); }
/* The front-page sections that follow the design's own four. The frame stops
   at the team, so this spacing is the page's own rhythm rather than a
   measurement. */
.o-page--about > main > .about-team + .testimonial,
.o-page--about > main > .testimonial + .faq,
.o-page--about > main > .faq + .cta { margin-top: calc(160 * var(--s)); }

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .o-page--about > main > .about-what + .about-std,
  .o-page--about > main > .about-std + .about-team,
  .o-page--about > main > .about-team + .testimonial,
  .o-page--about > main > .testimonial + .faq,
  .o-page--about > main > .faq + .cta { margin-top: 0; }
}

.about-std {
  height: calc(1008 * var(--s));
  background: var(--c-mono-dark);
  overflow: clip;
}

.about-std__h {
  position: absolute;
  left: calc(48 * var(--s));
  top: 0;
  width: calc(820 * var(--s));
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: calc(48 * var(--s));
  line-height: 1.34;
  letter-spacing: calc(-1.44 * var(--s));
  color: var(--c-mono-light);
}
.about-std__h .mask { display: block; }
.about-std__h .rv { display: block; }

.about-std__nav {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(196 * var(--s));
}
.about-std__nav .rv { display: flex; gap: calc(16 * var(--s)); }

.about-std__btn {
  width: calc(56 * var(--s));
  height: calc(56 * var(--s));
  border: 1px solid rgba(236, 247, 255, 0.28);
  border-radius: 50%;
  background: transparent;
  font-family: var(--f-tech);
  font-size: max(11px, calc(13 * var(--s)));
  color: var(--c-mono-light);
  cursor: pointer;
  transition:
    border-color var(--ui-dur) var(--ui-ease),
    background-color var(--ui-dur) var(--ui-ease),
    opacity var(--ui-dur) var(--ui-ease);
}
.about-std__btn:hover:not(:disabled),
.about-std__btn:focus-visible:not(:disabled) {
  border-color: var(--c-accent-yellow);
  background: rgba(236, 247, 255, 0.06);
}
.about-std__btn:disabled { opacity: 0.35; cursor: default; }

/* --- the plate ----------------------------------------------------------- */

/* No plate behind these. The illustrations sit on the section's own ground,
   which is what they were drawn for -- their strokes came stroked in
   Mono/Light. */
.about-std__plate {
  position: absolute;
  left: calc(970 * var(--s));
  top: 0;
  width: calc(902 * var(--s));
  height: calc(400 * var(--s));
  overflow: clip;
  opacity: 0;
  transform: translateY(calc(48 * var(--s)));
  transition:
    opacity calc(var(--rv-dur) * 0.7) var(--ui-ease) 200ms,
    transform var(--rv-dur) var(--rv-ease) 200ms;
}
.about-std.is-in .about-std__plate { opacity: 1; transform: none; }

/* One slot per standard, stacked. Only the current one is shown, and they
   cross-fade, so the plate changes with the row rather than cutting. */
.about-std__slot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity calc(var(--ui-dur) * 1.2) var(--ui-ease);
}
.about-std__slot.is-current { opacity: 1; }

.about-std__slot svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(701 * var(--s));
  height: calc(379 * var(--s));
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  color: var(--c-mono-light);
  overflow: visible;
}
.about-std__slot svg [stroke] { vector-effect: non-scaling-stroke; }

/* --- the line draw -------------------------------------------------------
   Every path carries pathLength="1", so one dasharray draws all of them
   whatever their real length, and --i is the draw order. Held at dashoffset 1
   -- nothing drawn -- until the slot is the one up, which is what makes the
   drawing start again each time the row comes back to it. */
.about-std__slot svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.about-std__slot.is-current svg path {
  /* Every path at once, not one after another. Staggered by --i these
     drawings took 1.9s to finish -- twenty-one paths on the Operators one,
     the last of them starting a second in -- and the carousel advances well
     inside that, so what you saw most of the time was a handful of
     disconnected fragments rather than a drawing. Together they read as one
     line being inked, and it is done in under a second. */
  animation: ocularai-linedraw calc(var(--linedraw-dur) * 1.1) var(--rv-ease) forwards;
  animation-delay: 0s;
}

/* --- the ruled row ------------------------------------------------------- */

/* The frame does not rule this uniformly, and the difference is the point.
   The outer bounds run 527 -- the row AND the band -- and the two horizontals
   span the full width. The column rules do NOT: they are four segments with a
   49 gap between them and a gap at either end. And the dividers between
   columns stop at the row's foot rather than carrying on down.

   So the bounds live here, on the box around both, and everything else is
   drawn where it actually belongs. */
.about-std__rules {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(480 * var(--s));
  width: calc(1823 * var(--s));
  height: calc(528 * var(--s));
  border-left: 1px solid rgba(236, 247, 255, 0.15);
  border-right: 1px solid rgba(236, 247, 255, 0.15);
}

.about-std__viewport {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(265 * var(--s));
  overflow: clip;
  /* Line 36, the full 1823. */
  border-bottom: 1px solid rgba(236, 247, 255, 0.15);
}

.about-std__band {
  position: absolute;
  left: 0;
  top: calc(265 * var(--s));
  width: 100%;
  height: calc(263 * var(--s));
  /* Line 38, the full 1823. */
  border-bottom: 1px solid rgba(236, 247, 255, 0.15);
  overflow: clip;
}

/* The dots are the front page's, class for class, so the hover comes with
   them -- but that stylesheet raises them on .dots.is-in, which this is not. */
/* Figma puts the two rows on y4078 and y4162 -- 91 and 175 into the band --
   and staggers them half a pitch, the first starting at x98 and the second at
   x140. */
.about-std__dots {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity calc(var(--rv-dur) * 1.2) var(--rv-ease) 320ms;
}
.about-std.is-in .about-std__dots { opacity: 1; }
.about-std__dots .dots__row { position: absolute; }
.about-std__dots .dots__row:nth-child(1) { left: calc(41 * var(--s)); top: calc(82 * var(--s)); }
.about-std__dots .dots__row:nth-child(2) { left: calc(83 * var(--s)); top: calc(166 * var(--s)); }

.about-std__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform calc(var(--rv-dur) * 0.8) var(--rv-ease);
}

/* Lines 34, 62 and 35: 265 tall, stopping at the row's foot. The last column
   has none -- its right-hand edge IS the outer bound. */
.about-std__item {
  position: relative;
  flex: none;
  /* The frame's own columns: 48-498, 498-960, 960-1422, 1422-1871. Equal
     widths put every rule after the first 12 to the right of where the frame
     has it. */
  width: calc(462 * var(--s));
  height: 100%;
  padding: calc(32 * var(--s)) calc(48 * var(--s)) 0 calc(24 * var(--s));
  border-right: 1px solid rgba(236, 247, 255, 0.15);
  opacity: 0;
  transform: translateY(calc(28 * var(--s)));
  transition:
    opacity calc(var(--rv-dur) * 0.6) var(--ui-ease),
    transform calc(var(--rv-dur) * 0.9) var(--rv-ease),
    color var(--ui-dur) var(--ui-ease);
}
.about-std.is-in .about-std__item { opacity: 1; transform: none; }
.about-std__item:nth-child(1) { width: calc(450 * var(--s)); }
.about-std__item:nth-child(4) { width: calc(449 * var(--s)); border-right: 0; }
.about-std__item:nth-child(1) { transition-delay: 260ms; }
.about-std__item:nth-child(2) { transition-delay: 370ms; }
.about-std__item:nth-child(3) { transition-delay: 480ms; }
.about-std__item:nth-child(4) { transition-delay: 590ms; }

/* Lines 57 / 63 / 64 / 65: a rule over each column, inset 24 either side, so
   they read as four segments rather than one continuous rule. */
.about-std__rule {
  position: absolute;
  left: calc(24 * var(--s));
  right: calc(24 * var(--s));
  top: 0;
  height: 1px;
  background: rgba(236, 247, 255, 0.15);
}

/* Line 61. The dwell timer, drawn: it runs the rule's length while the
   standard is up, and the row advances when it finishes -- the bar and the
   advance are the same thing, so they cannot come apart. */
.about-std__progress {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--s));
  width: 100%;
  height: calc(2 * var(--s));
  min-height: 2px;
  background: var(--c-mono-light);
  transform: scaleX(0);
  transform-origin: left center;
}
.about-std {
  /* How long a standard holds. The bar runs for exactly this, and the row
     advances when it finishes. */
  --std-dwell: 4.2s;
}
.about-std__item.is-current .about-std__progress {
  animation: about-std-fill var(--std-dwell) linear forwards;
}
.about-std.is-paused .about-std__item.is-current .about-std__progress {
  animation-play-state: paused;
}
@keyframes about-std-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.about-std__item h3 {
  margin: 0 0 calc(20 * var(--s));
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(24 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-0.72 * var(--s));
  color: var(--c-light-grey-02, #B3B8C1);
  transition: color var(--ui-dur) var(--ui-ease);
}
.about-std__item p {
  margin: 0;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.5;
  color: var(--c-light-grey-02, #B3B8C1);
  opacity: 0.72;
  transition: opacity var(--ui-dur) var(--ui-ease);
}
.about-std__item.is-current h3 { color: var(--c-mono-light); }
.about-std__item.is-current p { opacity: 1; }

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

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .about-std { height: auto; padding: 56px 20px 48px; }
  .about-std__h,
  .about-std__nav,
  .about-std__plate,
  .about-std__rules,
  .about-std__viewport,
  .about-std__band { position: static; width: auto; height: auto; }
  .about-std__h { font-size: clamp(26px, 7vw, 40px); letter-spacing: -0.5px; }
  .about-std__nav { margin-top: 24px; }
  .about-std__nav .rv { gap: 12px; }
  .about-std__btn { width: 48px; height: 48px; font-size: 12px; }
  /* Relative, not static: the slots inside are inset:0 against it, and a
     static plate sent them off to the nearest positioned ancestor -- the
     illustration then kept its full 379 height and burst out of the plate. */
  .about-std__plate { position: relative; margin-top: 28px; aspect-ratio: 902 / 400; }
  .about-std__slot svg { width: auto; height: auto; max-width: 92%; max-height: 92%; }
  .about-std__rules { margin-top: 32px; border-left: 0; border-right: 0; }
  .about-std__band { display: none; }
  .about-std__item,
  .about-std__item:nth-child(1),
  .about-std__item:nth-child(4) { width: 78vw; height: auto; padding: 24px 20px 24px 16px; }
  .about-std__item h3 { font-size: 20px; margin-bottom: 12px; }
  .about-std__item p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-std__plate,
  .about-std__dots,
  .about-std__item { opacity: 1; transform: none; transition: none; }
  /* Drawn, not drawing. */
  .about-std__slot svg path { stroke-dashoffset: 0; }
  .about-std__slot.is-current svg path { animation: none; }
  /* The bar is the timer, so with motion off it does not run -- and nothing
     advances on its own either. See ui.js. */
  .about-std__item.is-current .about-std__progress { animation: none; transform: scaleX(1); }
  .about-std__track { transition: none; }
}