/* ====================================================================
   Augmented Cool — Team "Sphere of Expertise"
   Concept: a hand holds the floating sphere of knowledge; the people who
   contribute that knowledge stand around it in a right-side semicircle.
   Uses the site's design tokens (--accent, --green, --ink, --line ...).
   ==================================================================== */

.tg-root{
  --tg-stage-w: min(1080px, 92vw);
  margin: 56px auto 0;
  width:100%;
}

/* ---------------- STAGE ---------------- */
.tg-stage{
  position:relative;
  width:var(--tg-stage-w);
  margin:0 auto;
  aspect-ratio: 10 / 9;
  --tg-d: 38%;                 /* sphere diameter as % of stage width */
}

/* ---------------- HAND ---------------- */
.tg-hand{
  position:absolute;
  left:-15%;
  bottom:2%;
  width:46%;
  z-index:6;
  pointer-events:none;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.34));
}
.tg-hand img{ width:100%; display:block; }
/* in light theme the black sleeve is heavy — soften slightly */
:root[data-theme="light"] .tg-hand{ filter:drop-shadow(0 18px 30px rgba(0,0,0,.28)); }

/* ---------------- SPHERE ---------------- */
.tg-sphere{
  position:absolute;
  left:26%; top:50%;
  width:var(--tg-d); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  z-index:5;
  background:
    radial-gradient(120% 120% at 32% 24%,
      color-mix(in srgb, var(--accent) 34%, #100d18) 0%,
      color-mix(in srgb, var(--accent) 20%, #100d18) 40%,
      #0d0b13 80%);
  box-shadow:
    inset 0 2px 30px rgba(255,255,255,0.10),
    inset 0 -34px 64px rgba(0,0,0,0.55),
    0 46px 70px -34px rgba(0,0,0,0.55);
  isolation:isolate;
  animation: tg-float 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .tg-sphere{ animation:none; } }
@keyframes tg-float{
  0%,100%{ transform:translate(-50%,-50%); }
  50%{ transform:translate(-50%,calc(-50% - 10px)); }
}
.tg-sphere-glow{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:3;
  background:
    radial-gradient(40% 30% at 30% 16%, rgba(255,255,255,0.34), transparent 60%),
    radial-gradient(80% 80% at 70% 96%, color-mix(in srgb, var(--green) 26%, transparent), transparent 62%);
  mix-blend-mode:screen;
}
.tg-sphere-ring{
  position:absolute; inset:-1px; border-radius:50%; pointer-events:none; z-index:4;
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.tg-sphere::after{ /* faint AR scan ring */
  content:""; position:absolute; inset:7%; border-radius:50%; z-index:2; pointer-events:none;
  border:1px dashed color-mix(in srgb, var(--green) 30%, transparent);
  opacity:.42;
}

/* word cloud inside the sphere */
.tg-sphere-inner{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center; align-items:center;
  gap:.16em .42em;
  padding:11%;
  text-align:center;
  line-height:1.04;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 62%, rgba(0,0,0,.4) 76%, transparent 90%);
          mask:radial-gradient(circle at 50% 50%, #000 62%, rgba(0,0,0,.4) 76%, transparent 90%);
}
.tg-word{
  font-family:var(--f-display);
  font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  color:#efeaf4;
  background:none; border:0; padding:0 .04em; margin:0;
  cursor:pointer; line-height:.95;
  transition:color .25s, opacity .25s, transform .25s, text-shadow .25s;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;
}
.tg-word.t5{ font-size:calc(var(--tg-stage-w) * .030); font-weight:900; letter-spacing:.004em; }
.tg-word.t4{ font-size:calc(var(--tg-stage-w) * .022); font-weight:800; }
.tg-word.t3{ font-size:calc(var(--tg-stage-w) * .0165); }
.tg-word.t2{ font-size:calc(var(--tg-stage-w) * .0128); color:#d7cfe6; font-weight:600; }
.tg-word.t1{ font-size:calc(var(--tg-stage-w) * .0108); color:#a89cc0; font-weight:500; letter-spacing:.03em; }

.tg-word:hover{ color:#fff; transform:translateY(-1px); }
.tg-word.t5:hover,.tg-word.t4:hover{ text-shadow:0 0 18px color-mix(in srgb, var(--green) 70%, transparent); }
.tg-word.is-dim{ opacity:.15; }
.tg-word.is-hi{
  color:#fff; opacity:1;
  text-shadow:0 0 16px color-mix(in srgb, var(--green) 80%, transparent), 0 0 3px rgba(255,255,255,.6);
}
.tg-word.is-active{
  color:#0d0b13; opacity:1; background:var(--green); border-radius:.2em;
  box-shadow:0 0 22px color-mix(in srgb, var(--green) 75%, transparent); text-shadow:none;
}

/* ---------------- AVATARS (semicircle) ---------------- */
.tg-orbit{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.tg-avatar{
  position:absolute;
  transform:translate(-50%,-50%);
  width:clamp(108px, 11.5vw, 134px);
  pointer-events:auto;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:transform .25s, opacity .25s;
  -webkit-tap-highlight-color:transparent;
}
.tg-av-photo{
  display:block; width:100%; aspect-ratio:1; border-radius:14px;
  overflow:hidden; position:relative;
  border:1px solid var(--line);
  background:var(--bg-3);
  box-shadow:0 16px 32px -14px rgba(0,0,0,.5);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.tg-av-photo img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.1) contrast(1.02); transition:filter .25s; }
.tg-av-photo::after{ /* subtle corner tick, AR feel */
  content:""; position:absolute; left:8px; top:8px; width:14px; height:14px;
  border-left:2px solid rgba(255,255,255,.5); border-top:2px solid rgba(255,255,255,.5);
  opacity:0; transition:opacity .25s;
}
.tg-av-label{ font-family:var(--f-display); text-transform:uppercase; line-height:1.06;
  font-size:clamp(14px,1.4vw,18px); letter-spacing:.015em; text-align:center; position:relative; z-index:3;
  text-shadow:0 0 7px var(--bg), 0 0 7px var(--bg); }
.tg-av-first{ font-weight:800; color:var(--ink); }
.tg-av-last{ font-weight:500; color:var(--muted); }

.tg-avatar:hover{ transform:translate(-50%,-50%) scale(1.04); }
.tg-avatar:hover .tg-av-photo{ border-color:var(--accent); }
.tg-avatar:hover .tg-av-photo img{ filter:none; }
.tg-avatar:hover .tg-av-photo::after{ opacity:1; }

.tg-avatar.is-sel{ transform:translate(-50%,-50%) scale(1.06); }
.tg-avatar.is-sel .tg-av-photo{
  border-color:var(--green); border-width:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 24%, transparent), 0 16px 32px -12px rgba(0,0,0,.5);
}
.tg-avatar.is-sel .tg-av-photo img{ filter:none; }
.tg-avatar.is-sel .tg-av-last{ color:var(--ink); }
.tg-avatar.is-hi .tg-av-photo{
  border-color:var(--accent); border-width:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent), 0 16px 32px -12px rgba(0,0,0,.5);
}
.tg-avatar.is-hi .tg-av-photo img{ filter:none; }
.tg-avatar.is-dim{ opacity:.32; }
.tg-avatar.is-dim .tg-av-photo img{ filter:grayscale(.75); }

/* ---------------- HINT ---------------- */
.tg-hint{
  max-width:var(--tg-stage-w); margin:40px auto 0;
  display:flex; flex-direction:column; gap:6px; text-align:center; align-items:center;
}
.tg-hint-kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.tg-hint-text{ color:var(--muted); font-size:15.5px; line-height:1.5; max-width:62ch; }
.tg-hint-text strong{ color:var(--ink); font-weight:600; }

/* ---------------- POPUP ---------------- */
.tg-popup-wrap{ position:fixed; inset:0; z-index:200; display:none; }
.tg-popup-wrap.tg-open{ display:block; }
.tg-popup-scrim{ position:absolute; inset:0; background:rgba(13,11,19,0.32); backdrop-filter:blur(2px); }
.tg-popup{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96);
  width:min(460px, calc(100vw - 36px));
  max-height:calc(100vh - 48px); overflow:auto;
  background:var(--bg-2); border:1px solid var(--line); border-top:3px solid var(--accent);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  padding:30px 30px 28px;
  opacity:0; transition:opacity .22s ease, transform .22s ease;
}
.tg-popup-wrap.tg-open .tg-popup{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.tg-pop-close{ position:absolute; top:10px; right:14px; background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--muted); transition:color .2s; }
.tg-pop-close:hover{ color:var(--ink); }
.tg-pop-kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.tg-pop-title{ font-family:var(--f-display); text-transform:uppercase; font-weight:500;
  font-size:clamp(24px,3vw,34px); line-height:1; color:var(--ink); margin:7px 0 0; }
.tg-pop-first{ font-weight:800; }
.tg-pop-def{ color:var(--soft); font-size:16px; line-height:1.6; margin:16px 0 0; }
.tg-pop-who{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.tg-pop-wholbl{ display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.tg-pop-company{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }

/* member popup header */
.tg-pop-person{ display:flex; align-items:center; gap:16px; }
.tg-pop-photo{ width:72px; height:72px; flex:none; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.tg-pop-photo img{ width:100%; height:100%; object-fit:cover; }

/* chips */
.tg-chip-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.tg-chip{ font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--soft); background:var(--bg-3); border:1px solid var(--line); border-radius:999px;
  padding:7px 13px; cursor:pointer; transition:all .18s; -webkit-tap-highlight-color:transparent; }
.tg-chip:hover{ border-color:var(--green); color:var(--ink); }
.tg-chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tg-chip-member{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--line); border-radius:999px; padding:5px 13px 5px 5px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--soft);
  transition:all .18s; -webkit-tap-highlight-color:transparent; }
.tg-chip-member img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.tg-chip-member:hover{ border-color:var(--accent); color:var(--ink); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:820px){
  /* stack: sphere on top, photos in a grid below */
  .tg-root{ --tg-stage-w: 540px; }
  .tg-stage{ aspect-ratio:auto; width:100%; max-width:460px; }
  .tg-hand{ display:none; }
  .tg-sphere{ position:relative; left:auto; top:auto; transform:none; margin:0 auto;
    width:min(380px,92vw); animation:none; }
  .tg-orbit{ position:static; inset:auto; display:grid; grid-template-columns:repeat(3,1fr);
    gap:20px 14px; margin-top:30px; }
  .tg-avatar{ position:static !important; transform:none !important; left:auto !important; top:auto !important;
    width:100%; }
  .tg-avatar:hover, .tg-avatar.is-sel{ transform:none !important; }
}
@media (max-width:440px){
  .tg-orbit{ grid-template-columns:repeat(2,1fr); }
}