/* ============================================
   TEAM HERO SECTION
   "Built for small teams, big results" — light
   contrast block between the ticker marquee and
   the horizontal slide deck. Fanned portrait
   cards, ghost display text, scrubbed white
   background crossfade (driven by js/team-hero.js).
   ============================================ */


/* ─── Section shell ───────────────────────────────────────────────────── */

.team-hero {
  position: relative;
  min-height: 100vh;
  /* Contains the y:-800 card intro and the ±260px fan-out so cards
     never fly over the pinned ticker above. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-900);
}

/* Opaque white layer — opacity is scrubbed 0→1→0 by JS; defaults to
   fully visible so no-JS / reduced-motion users get a readable section. */
.team-hero-bg {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  z-index: 0;
}

/* Soft brand-tinted accent disc; slow scrubbed zoom for parallax depth.
   Centered via margin:auto (not transform) so GSAP owns its transform. */
.team-hero-bg-blob {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 90vmin;
  height: 90vmin;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(37, 99, 235, 0.09) 0%,
    rgba(124, 58, 237, 0.05) 45%,
    transparent 70%);
  will-change: transform;
}

.team-hero-inner {
  position: relative;
  width: 100%;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  will-change: transform;
  z-index: 1;
}


/* ─── Headline + ghost display text ───────────────────────────────────── */

.team-hero-headline {
  margin: 0;
  font-family: var(--font-sans);
}

.team-hero-line1 {
  display: block;
  position: relative;
  z-index: 4;
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5.25rem);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}

.team-hero-ghost {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 0.04em;
  font-size: clamp(48px, 18vw, 260px);
  font-weight: var(--font-bold);
  letter-spacing: -0.04em;
  line-height: 0.9;
  white-space: nowrap;
  color: #c9d3e8;
  user-select: none;
  /* Comfortaa has no italic — approximate the reference's slant. */
  transform: skewX(-6deg);
}

/* Runtime split spans (created by js/team-hero.js) */
.th-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.th-word > span {
  display: inline-block;
  will-change: transform;
}

.th-letter {
  display: inline-block;
  transform-origin: bottom;
  will-change: transform;
}


/* ─── Portrait card fan ───────────────────────────────────────────────── */

.team-hero-cards {
  /* In flow below the ghost text; the negative margin tucks the cards
     over its descenders only, so the word stays legible. */
  position: relative;
  margin-top: max(-65px, -4.5vw);
  height: 320px;
  z-index: 3;
  pointer-events: none;
}

.team-card-fan {
  position: absolute;
  will-change: transform;
}

.team-card-float {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.team-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow:
    0 30px 50px -16px rgba(29, 78, 216, 0.35),
    0 14px 26px -8px rgba(23, 23, 23, 0.18),
    0 5px 10px -2px rgba(23, 23, 23, 0.10),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
  will-change: transform;
  transition: box-shadow 500ms cubic-bezier(0.6, 0, 0.2, 1);
}

.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.22) 0%,
    transparent 30%,
    transparent 70%,
    rgba(23, 23, 60, 0.22) 100%);
  pointer-events: none;
}

.team-card:hover {
  box-shadow:
    0 44px 70px -20px rgba(29, 78, 216, 0.42),
    0 22px 38px -10px rgba(23, 23, 23, 0.22),
    0 8px 14px -3px rgba(23, 23, 23, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Card geometry (mirrors reference layout) */
.team-fan-1 { width: 130px; height: 180px; left: 4%;  top: 30px; z-index: 1; }
.team-fan-2 { width: 160px; height: 220px; left: 12%; top: 50px; z-index: 2; }
.team-fan-3 { width: 200px; height: 270px; left: 22%; top: 20px; z-index: 4; }
.team-fan-4 { width: 150px; height: 200px; left: 36%; top: 70px; z-index: 3; }
.team-fan-5 { width: 230px; height: 310px; left: 44%; top: 0;    z-index: 5; }
.team-fan-6 { width: 160px; height: 215px; left: 59%; top: 55px; z-index: 3; }
.team-fan-7 { width: 175px; height: 240px; left: 70%; top: 30px; z-index: 4; }
.team-fan-8 { width: 130px; height: 175px; left: 84%; top: 50px; z-index: 2; }


/* ─── Progress dots over the white section ────────────────────────────── */

.site-nav.on-light .nav-dot {
  border-color: rgba(23, 23, 23, 0.35);
}

.site-nav.on-light .nav-dot:hover {
  border-color: rgba(23, 23, 23, 0.7);
  background: rgba(23, 23, 23, 0.15);
}

.site-nav.on-light .nav-dot.active {
  background: rgba(23, 23, 23, 0.85);
  border-color: rgba(23, 23, 23, 0.85);
}


/* ─── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .team-hero-inner {
    padding: var(--space-12) var(--space-4);
  }

  .team-hero-cards {
    height: 220px;
    margin-top: -10px;
  }

  .team-fan-1 { width: 80px;  height: 110px; left: 0;   top: 20px; }
  .team-fan-2 { width: 90px;  height: 130px; left: 10%; top: 35px; }
  .team-fan-3 { width: 110px; height: 150px; left: 22%; top: 15px; }
  .team-fan-4 { width: 90px;  height: 120px; left: 36%; top: 50px; }
  .team-fan-5 { width: 130px; height: 180px; left: 46%; top: 0; }
  .team-fan-6 { width: 95px;  height: 130px; left: 62%; top: 40px; }
  .team-fan-7 { width: 100px; height: 140px; left: 74%; top: 20px; }
  .team-fan-8 { width: 80px;  height: 110px; left: 87%; top: 35px; }
}