/* Intellica homepage — "meet your SMS sales team." (Calvin, 2026-10-17). Loaded by index.html. Script: team.js.
   The pattern is ramp.design's "Beyond the work": photos on a slowly turning 3D sphere around a big headline. The near
   ones are large and sharp and pass in front of the headline; the far ones are small, soft and pass behind it. Scrolling
   turns it a little further, and a click brings one person to the front. Here the photos are iOS contact avatars with
   the name tag the launch film gave the reps circling Charlie's head (a round photo with a white ring, and a dark tag:
   bold name with a chevron, then the city).
   The photos are Intellica's real reps (Calvin, 2026-10-17); a rep without a photo falls back to the grey monogram iOS shows
   for a contact with none. Names, cities and bios are demo copy for now (team.js). */

.team { --d: 106px; position: relative; padding: 40px 0 70px; overflow: hidden; overflow: clip; }
.tm-stage { position: relative; height: 820px; max-width: 1600px; margin: 0 auto; touch-action: pan-y; }

/* the headline sits at the sphere's middle depth: the near avatars cross in front of it, the far ones go behind */
.tm-head { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 50; width: min(1000px, 90%); text-align: center; pointer-events: none; }
.tm-head .h2 { font-size: clamp(52px, 8.2vw, 124px); line-height: .94; letter-spacing: -.03em; }
.tm-head p { max-width: 460px; margin: 22px auto 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }

/* ---------- an avatar: a button the sphere moves; its depth sets size, softness and whether its tag shows ---------- */
.tm-p { position: absolute; left: 0; top: 0; z-index: 10; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; transform-origin: 0 0; will-change: transform; -webkit-tap-highlight-color: transparent; }   /* scaled about its own corner: team.js lands the photo's centre exactly where it means to */
.tm-p:focus-visible { outline: none; }
.tm-p:focus-visible .tm-ph { box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in oklab, var(--hero) 45%, transparent), 0 14px 34px rgba(2,11,36,.22); }
.tm-in { display: flex; flex-direction: column; align-items: center; transition: filter .25s linear, opacity .25s linear; }
/* the photo: round, a white ring, a soft shadow (the film's avatar) */
.tm-ph { position: relative; width: var(--d, 104px); height: var(--d, 104px); border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 3px #fff, 0 14px 34px rgba(2,11,36,.22); background: linear-gradient(180deg, #A9AFBC, #878D9A); }
.tm-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transform-origin: var(--fx, 50%) var(--fy, 40%); }   /* framed on the face in CSS; the file is as sent */
/* the stand-in: iOS's monogram for a contact without a photo */
.tm-ph .mono { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", var(--sans);
  font-weight: 600; font-size: calc(var(--d, 104px) * .4); letter-spacing: .01em; }
/* the tag: the film's, an iOS-style dark label */
.tm-tag { display: flex; flex-direction: column; align-items: center; margin-top: 10px; padding: 6px 12px 7px; border-radius: 12px;
  background: rgba(28,28,30,.74); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #fff; white-space: nowrap; transition: opacity .3s var(--ease); }
.tm-tag b { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.tm-tag b svg { width: 6px; height: 10px; opacity: .6; }
.tm-tag span { font-size: 11.5px; line-height: 1.25; color: rgba(255,255,255,.62); }
.tm-p:hover .tm-ph { box-shadow: 0 0 0 3px #fff, 0 18px 40px rgba(2,11,36,.28); }

/* ---------- the card: one person brought to the front, the sphere softened behind ---------- */
.tm-veil { position: absolute; inset: 0; z-index: 80; opacity: 0; pointer-events: none; background: color-mix(in oklab, var(--ground) 90%, transparent);   /* near-opaque, so every card reads the same whatever is behind it (Calvin) */
  transition: opacity .3s var(--ease); }
.team.open .tm-veil { opacity: 1; pointer-events: auto; cursor: pointer; }
.team.open .tm-stage > .tm-head, .team.open .tm-p:not(.lift) { filter: blur(14px); transition: filter .3s var(--ease); }
.tm-card { position: absolute; left: 50%; top: 50%; z-index: 90; width: min(400px, 86vw); translate: -50% -50%; text-align: center; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease) .12s, visibility 0s .37s; }
.team.open .tm-card { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s var(--ease) .12s, visibility 0s 0s; }
.tm-card .ph-slot { width: 184px; height: 184px; margin: 0 auto 18px; }   /* where the avatar lands */
.tm-card h3 { font-family: var(--sans); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.tm-card .city { margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.tm-card .line { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--ink); text-wrap: balance; }   /* even lines, no one-word last line */
.tm-card .x { position: absolute; top: -6px; right: -10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface);
  box-shadow: var(--shadow-1); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.tm-card .x:hover { color: var(--ink); }
.tm-card .x svg { width: 12px; height: 12px; }
.tm-p.lift { z-index: 95 !important; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tm-p.lift .tm-in { filter: none !important; opacity: 1 !important; }
.tm-p.lift .tm-tag { opacity: 0 !important; }

@media (max-width: 860px) {
  .team { --d: 64px; padding: 10px 0 30px; }
  /* phones and tablets (Calvin, 2026-10-17, second pass): the faces float over the words as they do on desktop. The sphere
     is wider than the screen (team.js), so much of each pass happens off its edges and the words stay readable. */
  .tm-stage { height: 600px; }
  .tm-head { width: calc(100% - 2 * var(--gutter)); max-width: 560px; }
  .tm-head .h2 { font-size: clamp(44px, 12.5vw, 64px); }
  .tm-head p { font-size: 15.5px; max-width: 300px; margin-top: 16px; }
  .tm-tag { margin-top: 7px; padding: 4px 9px 5px; border-radius: 10px; }
  .tm-tag b { font-size: 12.5px; }
  .tm-tag span { font-size: 10.5px; }
  .tm-card .ph-slot { width: 150px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-p.lift { transition: none; }
  .tm-card, .tm-veil { transition: none; }
}

/* phones: the section rhythm, about a third tighter (Calvin, 2026-10-17: "all sections a bit too spaced on mobile"): the sphere keeps its size (team.js), the stage loses its empty bands */
@media (max-width: 640px) { .team { padding: 10px 0 16px; } .tm-stage { height: 540px; } }