/* Team page */

body.team-page {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

.team-main {
  width: 100%;
  max-width: 1120px;
  min-height: calc(100vh - 4.5rem);
  margin: 0 auto;
  padding: 0 2.5rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.6rem) clamp(1.5rem, 3vw, 2.8rem);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(7rem, 12vw, 10rem);
}

.team-member {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.team-member--founder { order: 1; }
.team-member--ai { order: 2; }
.team-member--ot2 { order: 3; }

.team-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 37%, rgba(34, 35, 33, 0.055) 0 13%, transparent 13.4%),
    radial-gradient(ellipse at 50% 86%, rgba(34, 35, 33, 0.045) 0 34%, transparent 34.4%),
    #f4f4ef;
}

.team-portrait > span {
  position: absolute;
  right: 0.8rem;
  bottom: 0.75rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(34, 35, 33, 0.38);
}

.team-portrait--ot2 {
  background: #f4f4ef;
}

.team-portrait--founder {
  background: #f4f4ef;
}

.founder-stage {
  position: relative;
  width: 82%;
  aspect-ratio: 1;
}

.founder-image,
.founder-wireframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.founder-image {
  object-fit: contain;
  opacity: 1;
  will-change: opacity;
}

.founder-wireframe {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.founder-stage.founder-enhanced .founder-image {
  opacity: 0;
}

.team-portrait--ai {
  background: #f4f4ef;
}

.ot2-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.ot2-image,
.ot2-wireframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ot2-image {
  object-fit: contain;
  opacity: 1;
  will-change: opacity;
}

.ot2-wireframe {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.ot2-stage.ot2-enhanced .ot2-image {
  opacity: 0;
}

.ai-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.ai-logos,
.ai-wireframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ai-logos {
  opacity: 1;
  will-change: opacity;
}

.ai-logo {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
}

.ai-logo--openai {
  left: 15.625%;
  top: 34.375%;
  width: 31.25%;
}

.ai-logo--anthropic {
  left: 54.58%;
  top: 40.83%;
  width: 26.35%;
}

.ai-wireframe {
  z-index: 2;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.ai-blueprint {
  fill: none;
  stroke: #7d7f79;
  stroke-width: 1.9;
  opacity: 0.15;
}

.ai-trace {
  fill: none !important;
  fill-opacity: 0;
  stroke: #343532;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.ai-trace--openai {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ai-trace--anthropic-slash {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ai-trace--anthropic-a {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ai-stage.ai-enhanced .ai-logos {
  opacity: 0;
}

.ai-stage.ai-enhanced .ai-wireframe {
  opacity: 1;
}

.ai-stage.ai-started .ai-trace--openai {
  animation: ai-draw-openai 1.35s var(--openai-delay, 0s) cubic-bezier(0.32, 0.05, 0.23, 1) forwards;
}

.ai-trace--openai-1 { --openai-delay: 0s; }
.ai-trace--openai-2 { --openai-delay: 0.18s; }
.ai-trace--openai-3 { --openai-delay: 0.36s; }
.ai-trace--openai-4 { --openai-delay: 0.54s; }
.ai-trace--openai-5 { --openai-delay: 0.72s; }
.ai-trace--openai-6 { --openai-delay: 0.90s; }
.ai-trace--openai-7 { --openai-delay: 1.08s; }
.ai-trace--openai-8 { --openai-delay: 1.25s; }

.ai-stage.ai-started .ai-trace--anthropic-slash {
  animation: ai-draw-anthropic-slash 2.25s 0.18s cubic-bezier(0.32, 0.05, 0.23, 1) forwards;
}

.ai-stage.ai-started .ai-trace--anthropic-a {
  animation: ai-draw-anthropic-a 2.45s 0.25s cubic-bezier(0.32, 0.05, 0.23, 1) forwards;
}

.ai-stage.ai-started .ai-logos {
  animation: ai-logos-in 0.9s 2.08s ease-out forwards;
}

.ai-stage.ai-started .ai-wireframe {
  animation: ai-wireframe-out 0.4s 2.7s ease-in-out forwards;
}

@keyframes ai-draw-openai {
  0% { opacity: 0; stroke-dashoffset: 1; }
  2% { opacity: 0.88; }
  100% { opacity: 0.88; stroke-dashoffset: 0; }
}

@keyframes ai-draw-anthropic-slash {
  0% { opacity: 0; stroke-dashoffset: 1; }
  2% { opacity: 0.88; }
  100% { opacity: 0.88; stroke-dashoffset: 0; }
}

@keyframes ai-draw-anthropic-a {
  0% { opacity: 0; stroke-dashoffset: 1; }
  2% { opacity: 0.88; }
  100% { opacity: 0.88; stroke-dashoffset: 0; }
}

@keyframes ai-logos-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ai-wireframe-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.team-image-credit {
  position: absolute;
  right: 0.75rem;
  bottom: 0.65rem;
  z-index: 3;
  border-bottom: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(34, 35, 33, 0.48);
}

.team-image-credit:hover {
  border-bottom: 0;
  color: var(--text);
}

.team-logo-credits {
  z-index: 3;
  white-space: nowrap;
}

.team-logo-credits a {
  border-bottom: 0;
  color: inherit;
}

.team-logo-credits a:hover {
  border-bottom: 0;
  color: var(--text);
}

.team-name {
  margin: 1.35rem 0 0;
  padding: 0;
  border: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.team-role {
  margin: 0.55rem 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.team-bio {
  margin: 1rem 0 0;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
}

.team-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

@media (max-width: 760px) {
  .team-main { padding: 0 1.35rem; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
  .team-main { padding: 0 1.1rem; }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 1.1rem 0 1.35rem;
  }

  .team-member {
    display: grid;
    grid-template-columns: 8.25rem minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 1rem;
    max-width: none;
    min-height: 10.3125rem;
    align-items: center;
  }

  .team-portrait {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 8.25rem;
  }

  .team-name {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .team-role {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0.38rem;
    font-size: 0.67rem;
    line-height: 1.3;
    letter-spacing: 0.065em;
  }

  .team-image-credit {
    right: 0.42rem;
    bottom: 0.4rem;
    font-size: 0.43rem;
  }

  .team-logo-credits {
    right: 0.38rem !important;
    bottom: 0.4rem !important;
    font-size: 0.38rem !important;
    letter-spacing: 0.055em !important;
  }

  .team-footer {
    padding: 1rem 0 1.4rem;
    font-size: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .founder-wireframe { display: none; }
  .founder-image { opacity: 1 !important; }
  .ai-wireframe { display: none; }
  .ai-logos { opacity: 1 !important; animation: none !important; }
}