/* ============================================================
   connect.css — CONNECT section (the closer, SPECIMEN pass)
   The giant display CTA is gone: mono specimen eyebrow + ONE medium
   line (serif-italic accent on "the thing."). Link rows keep the
   hover invert at a quieter type size.
   Scope: .connect-* only
   ============================================================ */

.connect {
  --connect-gutter: clamp(1.25rem, 5vw, 5rem);
  --connect-hairline: rgba(143, 163, 200, 0.18);
  position: relative;
  overflow: hidden;
}

/* Faint lime glow behind the CTA — kinetic, but quiet */
.connect::before {
  content: '';
  position: absolute;
  top: -12%;
  left: 50%;
  width: 70vw;
  height: 70vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(198, 245, 63, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.connect__inner {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 10vh, 8rem) var(--connect-gutter) 0;
}

/* ---------- Medium CTA line ---------- */
.connect__cta {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600; /* Clash 500 isn't shipped by Fontshare; 600 is the medium voice */
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  /* Soft navy shadow lifts the glyphs off the accretion ring glow
     rendered on the universe canvas behind the section. */
  text-shadow: 0 0 26px rgba(10, 22, 51, 0.65);
}

.connect__reason {
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.25rem; /* serif-italic accent (class in the markup) */
  text-shadow: 0 1px 16px rgba(10, 22, 51, 0.7); /* stays legible over the halo */
}

/* ---------- Oversized full-width link rows ---------- */
/* Negative margins bleed the rows (and their hover invert) to the
   viewport edges; row padding re-aligns content with the gutter. */
.connect__links {
  margin: clamp(3rem, 7vh, 5rem) calc(-1 * var(--connect-gutter)) 0;
  border-bottom: 1px solid var(--connect-hairline);
}

.connect__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) var(--connect-gutter);
  border-top: 1px solid var(--connect-hairline);
  color: var(--ink);
  background: transparent;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* The invert: lime background, navy text */
.connect__row:hover,
.connect__row:active,
.connect__row:focus-visible {
  background: var(--pop);
  color: var(--bg);
}

.connect__row:focus-visible {
  outline: none;
}

.connect__row-main {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  flex-wrap: wrap;
  min-width: 0;
}

.connect__row-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.4rem); /* SPECIMEN: down from display-xl */
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Label slides right on hover */
.connect__row:hover .connect__row-label,
.connect__row:focus-visible .connect__row-label {
  transform: translateX(clamp(0.5rem, 1.5vw, 1.25rem));
}

.connect__row-desc {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--muted);
  text-shadow: 0 1px 14px rgba(10, 22, 51, 0.75); /* stays legible over the disk */
  transition: color 0.35s ease;
}

.connect__row:hover .connect__row-desc,
.connect__row:focus-visible .connect__row-desc {
  color: rgba(10, 22, 51, 0.65); /* muted navy on the lime invert */
}

/* Arrow chip — carries data-magnetic, transform handled by JS.
   Hover nudge lives on the SVG child so the two never fight. */
.connect__row-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(3rem, 5.5vw, 4.5rem);
  height: clamp(3rem, 5.5vw, 4.5rem);
  border: 1px solid rgba(143, 163, 200, 0.35); /* fallback */
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 50%;
}

.connect__row-arrow svg {
  width: 45%;
  height: 45%;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.connect__row:hover .connect__row-arrow svg,
.connect__row:focus-visible .connect__row-arrow svg {
  transform: translate(3px, -3px);
}

/* ---------- Footer ---------- */
.connect__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: clamp(1.5rem, 3vh, 2.5rem) 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.connect__colophon {
  max-width: 60ch;
}

/* Button cluster on the footer's right edge */
.connect__footer-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Undo the global pill style from base.css `button` — this one is a
   quiet text button with the .link-line underline sweep instead. */
.connect__top {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.connect__top:hover {
  color: var(--pop);
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .connect__row-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .connect__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ---------- Eyebrow entrance ----------
   The connect timeline reveals chars/reason/links/footer — the eyebrow has
   no GSAP slot, so it gets a pure-CSS scroll-driven fade-rise where
   supported; elsewhere it simply renders visible. The reduced-motion
   guard in base.css still applies. */
@supports (animation-timeline: view()) {
  .connect__stage > .eyebrow {
    animation: fade-rise 0.8s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}