/* =====================================================================
   02-logos — Quest "Logos section" (framer-uywb15), measured on quest-template.framer.ai
   Section : column, centred, gap 48, max-width 720, padding 72 0 (phone 72 16), scroll-margin-top 80.
   Title   : Inter 14/21, -0.02em, 60 % white, centred. Appear y 24 → 0, fade, 1.5 s, Framer ease,
             when 50 % of it is visible (core.js data-appear).
   Logos   : 120 × 30 boxes (aspect 4), white wordmarks at 90 % (template PNGs: alpha 229/255).
             Template grid: 4 cols, gap 40 / 80 (phone 2 cols, gap 48 / 32, width 272).
             Ours (5 items): one row at desktop / tablet with the same 120 box and 80 gap (fluid below 1000),
             3 + 2 on phone with the template's 48 row gap.
             Appear y 24 → 0, fade, 1.2 s, Framer ease, stagger 0.1 s in order, fired once when
             (section top − 80) reaches the viewport centre ("section in view" — js/sections/02-logos.js).
   No hover state, no loop (template has none).
   ===================================================================== */

[data-section="02-logos"].logos {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 720px;
  padding: 72px 0;
  scroll-margin-top: 80px;
  overflow: visible;
}
/* Quest's page column has a 48 px gap between blocks at >= 1200 px (framer-1cfletj) and none below.
   base.css .page has no gap, so the hero → logos step is added here. */
@media (min-width: 1200px) {
  [data-section="02-logos"].logos { margin-top: 48px; }
}

/* ------------------------------------------------------------ title */
.logos .logos__title {
  position: relative;
  flex: none;
  width: 100%;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------- grid */
.logos .logos__grid {
  position: relative;
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  /* 80 px like the template; shrinks between 1000 and 810 px so the row keeps a 24 px side margin */
  column-gap: clamp(24px, calc((100vw - 648px) / 4), 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logos .logos__item {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 120px;
  height: 30px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  user-select: none;
}

/* icons: Simple Icons (CC0), vendored in /img/logos, painted in currentColor through a mask */
.logos .logos__icon {
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
/* sized so the marks stand ~1.3-1.5x the cap height, like the template lockups (icons 22-25 px tall, caps 12-16) */
.logos .logos__icon--anthropic { --logo: url("/img/logos/anthropic.svg"); width: 24px; height: 24px; }
.logos .logos__icon--tether { --logo: url("/img/logos/tether.svg"); width: 25px; height: 25px; }
.logos .logos__icon--discord { --logo: url("/img/logos/discord.svg"); width: 27px; height: 27px; }

/* wordmarks: clean type in the template's brand face (Host Grotesk) */
.logos .logos__name {
  display: block;
  font-family: var(--f-brand);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: inherit;
}
.logos .logos__name--caps {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.logos .logos__name--atoms {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ----------------------------------------------------------- appear */
html.js .logos .logos__item {
  transition-property: opacity, transform;
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.12, 0.23, 0.5, 1);
}
html.js .logos .logos__grid:not(.is-in) .logos__item {
  opacity: 0.001;
  transform: translateY(24px);
  will-change: transform, opacity;
}
.logos .logos__item:nth-child(2) { transition-delay: 0.1s; }
.logos .logos__item:nth-child(3) { transition-delay: 0.2s; }
.logos .logos__item:nth-child(4) { transition-delay: 0.3s; }
.logos .logos__item:nth-child(5) { transition-delay: 0.4s; }
html.js .logos .logos__grid.no-anim .logos__item { transition: none; }

/* ----------------------------------------------------------- phone */
@media (max-width: 809.98px) {
  [data-section="02-logos"].logos { padding: 72px 16px; }
  /* 3 + 2: six tracks, each logo spans two; the second row starts half a logo in so it sits centred */
  .logos .logos__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: min-content;
    row-gap: 48px;
    column-gap: 16px;
    width: 100%;
    max-width: 392px;
  }
  .logos .logos__item { grid-column: span 2; width: 100%; min-width: 0; }
  .logos .logos__item:nth-child(4) { grid-column: 2 / span 2; }
  .logos .logos__item:nth-child(5) { grid-column: 4 / span 2; }
}
/* phone cells are ~109 px wide at 390 (120 from 424 up, 85 at 320): wordmarks step down so the widest keeps a few px of air */
@media (max-width: 423.98px) {
  .logos .logos__item { gap: 5px; }
  .logos .logos__name { font-size: 18px; }
  .logos .logos__name--caps { font-size: 14.5px; }
  .logos .logos__name--atoms { font-size: 22px; }
  .logos .logos__icon--anthropic { width: 22px; height: 22px; }
  .logos .logos__icon--tether { width: 23px; height: 23px; }
  .logos .logos__icon--discord { width: 25px; height: 25px; }
}
@media (max-width: 374.98px) {
  .logos .logos__item { gap: 4px; }
  .logos .logos__name { font-size: 16px; }
  .logos .logos__name--caps { font-size: 12.5px; }
  .logos .logos__name--atoms { font-size: 20px; }
  .logos .logos__icon--anthropic { width: 20px; height: 20px; }
  .logos .logos__icon--tether { width: 21px; height: 21px; }
  .logos .logos__icon--discord { width: 23px; height: 23px; }
}
@media (max-width: 339.98px) {
  .logos .logos__item { gap: 3px; }
  .logos .logos__name { font-size: 14.5px; }
  .logos .logos__name--caps { font-size: 11px; }
  .logos .logos__name--atoms { font-size: 18px; }
  .logos .logos__icon--anthropic { width: 18px; height: 18px; }
  .logos .logos__icon--tether { width: 19px; height: 19px; }
  .logos .logos__icon--discord { width: 21px; height: 21px; }
}

/* --------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.js .logos .logos__grid:not(.is-in) .logos__item { opacity: 1; transform: none; }
  html.js .logos .logos__item { transition: none; }
}

/* official wordmarks (Blue Origin from blueorigin.com, Atoms from atoms.co), painted white through a mask like the icons */
.logos .logos__wm { display: block; flex: none; background-color: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logos .logos__wm--blueorigin { --logo: url("/img/logos/blueorigin-wordmark.svg"); width: 96px; height: 16px; }
.logos .logos__wm--atoms { --logo: url("/img/logos/atoms-wordmark.svg"); width: 102px; height: 14px; }
@media (max-width: 809.98px) { .logos .logos__wm--blueorigin { width: 84px; height: 14px; } .logos .logos__wm--atoms { width: 88px; height: 12px; } }