/* Scroll-driven flying cards (js/agc-flying-cards.js): the About Us Joining steps and the
   homepage How it works steps. Loaded by both pages, so the card itself is styled by each
   page's own stylesheet; this file only lays out the flight.
   Everything below only applies once the script adds .agc-flying--on, so without JavaScript,
   with reduced motion, or without position: sticky the group stays an ordinary card grid.
   The script writes each card's transform, opacity and filter inline as it scrolls. */
.agc-flying--on {
  /* Each card's slot is this fraction of the viewport. Smaller means tighter spacing, so the
     next card is already arriving while the current one is still on screen. */
  --fc-slot: .38;
  --fc-vh: 100vh;
  display: block;
  overflow-x: clip;
  position: relative;
}

@supports (height: 100svh) {
  .agc-flying--on {
    --fc-vh: 100svh;
  }
}

/* The pinned backdrop leaves the group along with the last card, and would drift over the
   next section. The section around each group clips it vertically: clip, unlike hidden,
   does not make a scroll container, so the backdrop still pins, and only the y axis is
   clipped so full-bleed bands (.agc-band) keep their width. */
.agc-content-section:has(> .agc-flying--on),
.agc-how-section:has(.agc-flying--on) {
  overflow-y: clip;
}

/* The faint word is pinned for the whole group. Its negative bottom margin takes it out of
   the flow, so the first card starts flying in as soon as the group reaches the viewport. */
.agc-flying__backdrop {
  align-items: center;
  display: flex;
  height: var(--fc-vh);
  justify-content: center;
  left: 0;
  margin-bottom: calc(var(--fc-vh) * -1);
  overflow: hidden;
  pointer-events: none;
  position: sticky;
  top: 0;
  user-select: none;
  width: 100%;
  z-index: 0;
}

.agc-flying__text {
  align-items: baseline;
  color: rgba(255, 255, 255, .055);
  display: flex;
  flex-wrap: wrap;
  font: 800 clamp(56px, 8.4vw, 148px)/.95 var(--agc-font-display);
  gap: 0 .28em;
  justify-content: center;
  letter-spacing: -.02em;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  text-transform: uppercase;
}

.agc-flying__text--long {
  font-size: clamp(44px, 5.8vw, 108px);
}

.agc-flying__text--longer {
  font-size: clamp(36px, 4.4vw, 84px);
}

.agc-flying__slot {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(var(--fc-vh) * var(--fc-slot));
  position: relative;
  z-index: 1;
}

.agc-flying--on .agc-flying__slot > * {
  /* Scroll position drives the transform, so it must not ease behind the scroll. Borders and
     shadows keep their hover transitions. */
  transition:
    border-color var(--agc-dur) ease,
    box-shadow var(--agc-dur) var(--agc-ease);
  width: min(100%, 560px);
}

@media (max-width: 750px) {
  /* One word per line, no separators, so the stack stays inside a phone. */
  .agc-flying__text {
    flex-direction: column;
    align-items: center;
    font-size: clamp(64px, 24vw, 120px);
    gap: 0;
  }

  .agc-flying__dot {
    display: none;
  }
}

/* Printing or saving as PDF shows the plain stack, whatever scroll position the page was in. */
@media print {
  .agc-flying__backdrop {
    display: none;
  }

  .agc-flying__slot {
    min-height: 0;
    padding: 12px 0;
  }

  .agc-flying--on .agc-flying__slot > * {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}