/* ════════════════════════════════════════════════════════════════
   TEAM VIEW
════════════════════════════════════════════════════════════════ */
.team-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0 auto;
}

.team-header {
  height: 50vh;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
}

.team-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--body-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: var(--space-6);
}

.team-eyebrow::before,
.team-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--brand-gold);
  opacity: 0.45;
}

.team-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

.team-description {
  font-size: var(--body-md);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

.team-card {
  background: var(--color-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-9);
  padding-top: 84px;              /* room for the floating head */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  position: relative;
  overflow: visible;              /* head can break out of card */
  width: 350px;
  min-width: 350px;
  height: calc(50vh - 128px);     /* carousel 50vh minus 80px top + 48px bottom padding */
  min-height: 280px;              /* don't collapse on short screens */
  flex-shrink: 0;
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.25s var(--ease-bounce);
}

/* hover elevation → see glow section below */

/* ── Avatar wrapper ── */
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-floating);
  border: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* When a 3D model is present, break the avatar out of the circle
   and float it above the card top edge */
.team-avatar[data-avatar-config] {
  width: 120px;
  height: 180px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  position: absolute;
  top: -72px;                     /* head peeks above card — extra room for hats/ears */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;           /* clicks pass through to card */
  /* Subtle shadow disc under the head for floating depth */
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35));
}

.team-avatar canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: default;
}

.team-avatar-placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

.team-name {
  font-family: var(--font-display);
  font-size: var(--heading-md);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}

/* ── Role pills ── */
.team-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin: -8px 0 0;
}

.team-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--body-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

.team-pill--founder {
  color: var(--pill-founder);
  background: rgba(201,160,72, 0.12);   /* brand-gold @ 12% */
  border-color: rgba(201,160,72, 0.22); /* brand-gold @ 22% */
}
.team-pill--developer {
  color: var(--pill-developer);
  background: rgba(43,127,255, 0.12);   /* blue-500 @ 12% */
  border-color: rgba(43,127,255, 0.22); /* blue-500 @ 22% */
}
.team-pill--creative {
  color: var(--pill-creative);
  background: rgba(142,81,255, 0.12);   /* violet-500 @ 12% */
  border-color: rgba(142,81,255, 0.22); /* violet-500 @ 22% */
}
.team-pill--helper {
  color: var(--pill-helper);
  background: rgba(0,201,80, 0.12);     /* green-500 @ 12% */
  border-color: rgba(0,201,80, 0.22);   /* green-500 @ 22% */
}

/* Light theme: stronger text for readability */
html[data-theme="light"] .team-pill--founder   { color: var(--pill-founder-text); }
html[data-theme="light"] .team-pill--developer  { color: var(--pill-developer-text); }
html[data-theme="light"] .team-pill--creative   { color: var(--pill-creative-text); }
html[data-theme="light"] .team-pill--helper     { color: var(--pill-helper-text); }

/* ── Discord profile button ── */
.team-discord-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(88, 101, 242, 0.10);
  color: var(--brand-discord);
  border: 1px solid rgba(88, 101, 242, 0.20);
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s ease,
    transform 0.2s var(--ease-bounce),
    box-shadow 0.2s ease;
  margin-top: auto;
  flex-shrink: 0;
}
.team-discord-btn:hover {
  background: rgba(88, 101, 242, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.25);
}
.team-discord-btn:focus-visible {
  outline: 2px solid var(--brand-discord);
  outline-offset: 2px;
}
.team-discord-btn:active {
  transform: translateY(0) scale(0.95);
}

.team-desc {
  font-size: var(--body-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
html[data-theme="light"] .team-desc {
  color: var(--text-secondary);
}