/* Founder section: a round profile photo with the YC badge, the name, four credentials with their facts,
   and the partners line. On the page's three-column grid (the same as content/points and content/proof):
   the portrait in the first column, the text across the other two. One column on phones. Reveals once. */

.founder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-7);
  align-items: center;
  padding: var(--space-10) var(--space-page);
}
.founder__text {
  grid-column: 2 / -1;
}

/* ── Portrait ── */

.founder__portrait {
  position: relative;
  justify-self: start;
  width: min(100%, clamp(220px, 26vw, 400px));
  aspect-ratio: 1;
}
.founder__photo {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface-sunken);
  /* A fine gold rim: by night it keeps the black studio photo apart from the black sky. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 30px 80px -30px color-mix(in srgb, var(--color-gold-700) 45%, transparent);
}
.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The YC badge sits on the circle's edge at 45°, ringed in the surface colour. */
.founder__badge {
  position: absolute;
  left: calc(50% + 35.36% - 11%);
  top: calc(50% + 35.36% - 11%);
  width: 22%;
  height: 22%;
  border-radius: 14%;
  box-shadow: 0 0 0 clamp(3px, 0.35vw, 5px) var(--surface), 0 10px 24px -8px rgb(0 0 0 / 0.35);
}

/* ── Text ── */

.founder__name {
  margin-top: var(--space-5);
}
.founder__credentials {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}
.founder__credentials li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
}
/* Hairlines above each row and below the last; they draw in from the left on reveal. */
.founder__credentials li::before,
.founder__credentials li:last-child::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline-strong);
  transform-origin: left;
}
.founder__credentials li::before {
  top: 0;
}
.founder__credentials li:last-child::after {
  bottom: 0;
}
.founder__credential {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.7vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-title);
  transition: color var(--dur-base) var(--ease-standard);
}
.founder__fact {
  color: var(--ink-muted);
  text-align: right;
  transition: color var(--dur-base) var(--ease-standard);
}
.founder__credentials li:hover .founder__credential {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.founder__credentials li:hover .founder__fact {
  color: var(--accent-strong);
}

.founder__team {
  margin-top: var(--space-7);
}
.founder__team-label {
  color: var(--ink-muted);
}
.founder__partners {
  max-width: 600px;
  margin-top: var(--space-4);
  font-size: var(--text-body-l);
  color: var(--ink-muted);
}
.founder__person {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard), text-decoration-color var(--dur-base) var(--ease-standard);
}
.founder__person:hover,
.founder__person:focus-visible {
  color: var(--accent-strong);
  text-decoration-style: solid;
}

/* ── Reveal ── */

.founder [data-reveal] {
  opacity: 0;
}
.founder.is-visible [data-reveal] {
  animation: founder-in 1100ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
.founder.is-visible .founder__credentials li::before,
.founder.is-visible .founder__credentials li:last-child::after {
  animation: founder-line 1200ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
.founder.is-visible .founder__photo {
  animation: founder-photo 1600ms var(--ease-out-expo) both;
}
.founder.is-visible .founder__badge {
  animation: founder-badge 700ms var(--ease-out-back) both;
  animation-delay: 900ms;
}
@keyframes founder-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(18px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes founder-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes founder-photo {
  from { clip-path: circle(0% at 50% 50%); transform: scale(1.08); }
  to { clip-path: circle(50% at 50% 50%); transform: scale(1); }
}
@keyframes founder-badge {
  from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .founder [data-reveal] {
    opacity: 1;
  }
  .founder.is-visible [data-reveal],
  .founder.is-visible .founder__photo,
  .founder.is-visible .founder__badge,
  .founder.is-visible .founder__credentials li::before,
  .founder.is-visible .founder__credentials li:last-child::after {
    animation: none;
  }
}

@media (max-width: 900px) {
  .founder {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding-top: var(--space-9);
  }
  .founder__text {
    grid-column: auto;
  }
  .founder__portrait {
    justify-self: start;
    width: clamp(160px, 46vw, 240px);
  }
  .founder__credentials li {
    flex-direction: column;
    gap: var(--space-1);
  }
  .founder__fact {
    text-align: left;
  }
}