/* ==========================================================================
   AIR.2026 — landing page
   Loaded only on "/". The hero, the four track surfaces and the pinned eight-week
   timeline are here; nothing else needs them.
   ========================================================================== */

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* The stack has to FIT one viewport at 1440x900, which it did not at first: the
     countdown was cut off and the scroll cue sat on top of it. Every gap below is
     deliberately tight for that reason, and the cue hides on short screens. */
  padding: 6rem 0 3.4rem;
  overflow: hidden;
}

/* The WebGL stage sits behind everything and is purely atmospheric: a drone over
   a lattice. The copy is real HTML above it, so the hero still reads if WebGL
   fails or is blocked — which on a campus proxy is a real possibility. */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
#hero-canvas.on { opacity: 1; }

/* A measured grid, masked to dissolve at the edges rather than stopping in a
   hard line. Two gradients, one element, no markup. */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  opacity: .8;
}

.hero-inner { position: relative; z-index: 2; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .8rem;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hero-tag b { color: var(--signal); font-weight: 500; }
/* A live dot on the open-registration pill. One small animation, and it is
   attached to the one time-critical fact on the page. */
.hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 70%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 60%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero h1 {
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -.045em;
  margin: .9rem 0 0;
  max-width: 20ch;
}
.hero-sub {
  margin-top: .9rem;
  font-size: var(--step-1);
  color: var(--text-2);
  max-width: 52ch;
}
.hero-domains {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  margin-top: 1.1rem;
  padding: 0;
  list-style: none;
}
.hero-domains li {
  padding: .28rem .6rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 65%, transparent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-2);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* Dates and countdown are one readout row on a wide screen: two facts about time,
   side by side, rather than two stacked panels that push the fold. */
.hero-readout { display: grid; gap: 1rem; margin-top: 1.9rem; align-items: end; }
@media (min-width: 1080px) { .hero-readout { grid-template-columns: minmax(0, 760px) auto; gap: 1.6rem; } }

/* The two dates, as an instrument readout rather than a sentence. */
.hero-dates {
  display: grid;
  gap: 1px;
  margin-top: 0;
  border: 1px solid var(--line);
  background: var(--line);
  grid-template-columns: 1fr;
  max-width: 760px;
}
@media (min-width: 620px) { .hero-dates { grid-template-columns: 1fr 1fr; } }
.hero-date { padding: 1rem 1.1rem; background: var(--base); }
.hero-date span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero-date b { display: block; margin-top: .3rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }
.hero-date i { display: block; font-style: normal; font-size: var(--step--1); color: var(--text-2); }

/* Countdown. Real arithmetic against the real start date, updated once a second
   by js/main.js; the static markup already reads sensibly before JS runs. */
.count {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 0;
  border: 1px solid var(--line);
  background: var(--line);
  width: fit-content;
}
.count div { min-width: 68px; padding: .55rem .8rem; background: var(--base); text-align: center; }
/* Once the start date has passed the digits mean nothing, so they go and the note
   carries the state on its own. */
.count[data-state] { display: none; }
.count b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.count span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.count-note { margin-top: .5rem; font-size: var(--step--1); color: var(--text-3); }

.hero-cue {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* Below this the hero content already reaches the bottom edge, and the cue would
   sit on top of the countdown. */
@media (max-height: 940px), (max-width: 700px) { .hero-cue { display: none; } }

/* --- stat strip ----------------------------------------------------------- */

.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 1.3rem 1.2rem; background: var(--base); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: var(--step--1); color: var(--text-3); }

/* --- generic card grid ---------------------------------------------------- */

.cards { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .cards-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  padding: 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.card p { color: var(--text-2); font-size: var(--step-0); }
.card-n {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--signal);
  letter-spacing: .14em;
}

/* A left-edge accent that fills on hover: the card's own progress bar, and the
   only decoration on it. */
.card::after {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  background: linear-gradient(180deg, var(--signal), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s var(--ease);
}
.card:hover::after { transform: scaleY(1); }

/* --- the lab strip: the centre's own platforms --------------------------- */

.lab-strip {
  display: grid;
  gap: 1px;
  margin-top: 1.1rem;
  border: 1px solid var(--line);
  background: var(--line);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) { .lab-strip { grid-template-columns: 1fr 1.5fr 1fr; } }

.lab-shot { margin: 0; display: grid; background: var(--panel); padding: 1rem 1rem 0; }
/* These two are the programme's own studio shots, and they were photographed against
   WHITE. Keying it out was tried and measured: the corners went fully transparent but
   the robot's own body dropped to alpha 37/255, because Baxter's torso and head are
   light grey — the key cannot tell them from the backdrop. So the white stays, and it
   is framed as a lab plate on purpose rather than bleeding into the navy panel as an
   accidental white box. */
.lab-shot img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  padding: .9rem;
  background: #EEF2F8;
  border: 1px solid var(--line-hi);
  filter: none;
}
.lab-shot figcaption {
  padding: .7rem .1rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
}
.lab-shot figcaption b { display: block; color: var(--signal); font-weight: 500; letter-spacing: .06em; }

.lab-copy { display: grid; align-content: center; gap: .7rem; padding: clamp(1.2rem, 3vw, 2rem); background: var(--panel-2); }
.lab-copy h3 { font-size: var(--step-2); }
.lab-copy p { color: var(--text-2); }
.lab-copy .btn { justify-self: start; }

/* --- the four tracks ------------------------------------------------------ */
/* Each track carries a canvas that actually computes what the track teaches:
   a least-squares fit, a trained classifier boundary, a Q-learning agent, and
   two-link inverse kinematics. They are the argument for the programme, so they
   are real rather than decorative loops. */

.tracks { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tracks { grid-template-columns: repeat(2, 1fr); } }

.track {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.track-head { display: flex; align-items: baseline; gap: .7rem; padding: 1.1rem 1.2rem .8rem; }
.track-head h3 { font-size: var(--step-1); }
.track-code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  color: var(--accent-tx);
}
.track p { padding: 0 1.2rem 1rem; color: var(--text-2); font-size: var(--step--1); }

.track-stage {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--void);
  aspect-ratio: 16 / 10;
}
.track-stage canvas { width: 100%; height: 100%; }
/* The live readout each demo writes its own numbers into. */
.track-read {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .5rem .8rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--void) 92%, transparent), transparent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
  pointer-events: none;
}
.track-read b { color: var(--signal); font-weight: 500; }
.track-hint {
  position: absolute;
  top: .6rem; right: .8rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: .75;
  pointer-events: none;
}

/* --- pinned eight-week timeline ------------------------------------------- */
/* The section is tall, the viewport inside it is sticky, and scroll distance
   through the section becomes progress along the eight weeks. js/timeline.js
   publishes --tl-p (0..1) and sets data-week. */

.tl-sec { position: relative; }
.tl-stage { position: relative; height: 460vh; }
.tl-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(.9rem, 2.4vh, 1.8rem);
  padding-top: 4.6rem;
  overflow: hidden;
}

.tl-grid { display: grid; gap: clamp(1rem, 3vw, 2.4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .tl-grid { grid-template-columns: 1.05fr 1fr; } }

/* The phase rail: two blocks, offline then online, with the active one lit. */
.tl-phase { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tl-phase div {
  flex: 1;
  padding: .7rem .9rem;
  background: var(--base);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.tl-stage[data-phase="offline"] .tl-phase div:first-child,
.tl-stage[data-phase="online"] .tl-phase div:last-child {
  color: var(--on-signal);
  background: var(--signal);
}

.tl-week { min-height: 12.5rem; }
.tl-label { opacity: .8; }
.tl-week-n {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-tx);
}
.tl-week h3 { font-size: var(--step-3); margin: .4rem 0 .5rem; }
.tl-week-dates { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3); }
.tl-tags { display: flex; flex-wrap: wrap; gap: .35rem .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tl-tags li {
  padding: .22rem .55rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  font-size: var(--step--1);
  color: var(--text-2);
}

/* The day list for the week on screen. Fixed row count so the panel does not
   resize as the weeks change, which would make the whole pin jump. */
.tl-days { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tl-day {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: .8rem;
  padding: .5rem .8rem;
  background: var(--base);
  font-size: var(--step--1);
}
.tl-day dt { font-family: var(--font-mono); color: var(--text-3); }
.tl-day dd { margin: 0; color: var(--text-2); }
.tl-day[data-off] { opacity: .5; }
.tl-day[data-off] dd { color: var(--text-3); }

/* Progress across the eight weeks, with a tick per week. */
.tl-bar { position: relative; height: 12px; background: rgba(168,192,240,.07); border: 1px solid var(--line); }
.tl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--tl-p, 0) * 100%); background: linear-gradient(90deg, var(--signal), var(--accent)); }
.tl-bar u {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-hi);
  text-decoration: none;
}
.tl-hud {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
}
.tl-hud .tl-bar { flex: 1; }

@media (max-width: 939px) {
  /* The pin is one viewport tall and clips, so on a narrow screen the panel shows
     fewer rows rather than being cut off. */
  .tl-pin { padding-top: 4.2rem; }
  .tl-week { min-height: 9rem; }
  .tl-week h3 { font-size: var(--step-2); }
  .tl-day { grid-template-columns: 3.6rem 1fr; padding: .4rem .6rem; }
}

/* --- people --------------------------------------------------------------- */

.person { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem; background: var(--panel); border: 1px solid var(--line); }
/* The official portraits, cropped square. They are photographs of real people on a
   dark page, so they carry a hairline rather than being cut out — a hard edge on a
   navy panel reads as a mistake. */
.person-pic {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--line-hi);
  background: var(--panel-2);
}
/* Kept for any person without a published photograph: initials in the same box. */
.person-mark {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  border: 1px solid var(--line-hi);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--text);
}
.person h3 { font-size: var(--step-0); font-weight: 500; font-family: var(--font-body); }
.person p { font-size: var(--step--1); color: var(--text-3); }
/* A standalone link in a heading, so the inline-link exception does not cover it:
   it needs its own 24px target. */
.person a { display: inline-block; min-height: 24px; padding-block: 2px; color: var(--signal); text-decoration: none; }
.person a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.faq details { background: var(--base); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--signal);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--text); }
.faq p { padding: 0 1.1rem 1.1rem; color: var(--text-2); max-width: 78ch; }

/* --- closing CTA --------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-hi);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(100% 120% at 100% 100%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 60%),
    var(--panel);
  padding: clamp(1.8rem, 5vw, 3.2rem);
  display: grid;
  gap: 1.4rem;
  align-items: center;
}
@media (min-width: 860px) { .cta { grid-template-columns: 1.5fr auto; } }
.cta h2 { font-size: var(--step-3); }
.cta p { color: var(--text-2); margin-top: .6rem; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- marquee of topics --------------------------------------------------- */
/* Duplicated track translated exactly -50%, so the loop has no seam. Pauses on
   hover so it can be read, and stops entirely under reduced motion. */

.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: .8rem 0; }
.ticker-track { display: flex; width: max-content; gap: 2.2rem; animation: ticker 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.ticker b { color: var(--signal); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* --- AIRXLAB wings: who leads each one, under the description ------------ */
.wing-leads { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--text); }
.wing-leads span { display: block; font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: .2rem; }


/* --- the team constellation (js/team.js) -----------------------------------
   Pinned stage over a tall track. --z (0..1, on .orbit only) pulls the camera
   back from the mentor to the whole lab; data-stage (0..4) lights the tiers. */
.team { padding-block: 0; }
.team-track { position: relative; height: 460vh; }
.team-stage {
  position: sticky; top: 0; height: 100vh; overflow: clip;
  display: grid; grid-template-columns: minmax(16rem, 23rem) 1fr; align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto;
}
.team-stage::before {                      /* a faint radial field behind the orbit */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side at 64% 50%, rgba(25, 211, 183, .10), transparent 70%),
              radial-gradient(closest-side at 64% 50%, rgba(139, 123, 255, .08), transparent 100%);
}
.team-head h2 { font-size: var(--step-3); margin: .5rem 0 1.4rem; }
.team-steps { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .35rem; }
.team-steps li {
  position: relative; padding: .55rem 0 .55rem 1rem; color: var(--text-3);
  font-family: var(--font-display); font-size: var(--step-1);
  border-left: 2px solid var(--line); transition: color .5s var(--ease), border-color .5s var(--ease);
}
.team-steps li span { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3); margin-right: .5rem; }
.team-steps small {
  display: block; font-family: var(--font-body); font-size: var(--step--1); color: var(--text-2);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .5s var(--ease);
}
.team-stage[data-stage="1"] [data-step="1"], .team-stage[data-stage="2"] [data-step="2"],
.team-stage[data-stage="3"] [data-step="3"], .team-stage[data-stage="4"] [data-step="4"] {
  color: var(--text); border-color: var(--signal);
}
.team-stage[data-stage="1"] [data-step="1"] small, .team-stage[data-stage="2"] [data-step="2"] small,
.team-stage[data-stage="3"] [data-step="3"] small, .team-stage[data-stage="4"] [data-step="4"] small {
  max-height: 4em; opacity: 1; margin-top: .25rem;
}
.team-count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3); letter-spacing: .08em; }
.team-count b { color: var(--signal); font-weight: 500; }
.team-cue {
  position: absolute; bottom: 1.2rem; left: 50%; translate: -50% 0; margin: 0;
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3); transition: opacity .6s var(--ease);
}
.team-stage[data-stage="4"] .team-cue { opacity: 0; }

/* the orbit: a square world, camera = transform on this one element */
.orbit {
  --z: 0;
  position: relative; justify-self: center;
  width: min(84vh, 100vw - 30rem); aspect-ratio: 1;
  transform: perspective(1400px) rotateX(calc((1 - var(--z)) * 22deg)) scale(calc(1.8 - .8 * var(--z)));
  will-change: transform;
}
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring { fill: none; stroke: var(--line-hi); stroke-width: .12; stroke-dasharray: .6 1.4; opacity: 0; transition: opacity 1s var(--ease); }
.rings { transform-origin: 0 0; animation: orbit-spin 90s linear infinite; animation-play-state: paused; }
.live .rings { animation-play-state: running; }
.team-stage[data-stage="2"] .ring-1, .team-stage[data-stage="3"] .ring-1, .team-stage[data-stage="4"] .ring-1,
.team-stage[data-stage="3"] .ring-2, .team-stage[data-stage="4"] .ring-2,
.team-stage[data-stage="4"] .ring-3 { opacity: 1; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.link { fill: none; stroke: var(--wc, var(--signal)); stroke-width: .22; stroke-opacity: .55;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.pulse { fill: none; stroke: var(--wc, var(--signal-hi)); stroke-width: .6; stroke-linecap: round;
  stroke-dasharray: .05 .95; stroke-dashoffset: 1; opacity: 0; }
.team-stage[data-stage="2"] .link[data-tier="1"], .team-stage[data-stage="3"] .link[data-tier="1"], .team-stage[data-stage="4"] .link[data-tier="1"],
.team-stage[data-stage="3"] .link[data-tier="2"], .team-stage[data-stage="4"] .link[data-tier="2"],
.team-stage[data-stage="4"] .link[data-tier="3"] { stroke-dashoffset: 0; }
.live[data-stage="2"] .pulse[data-tier="1"], .live[data-stage="3"] .pulse[data-tier="1"], .live[data-stage="4"] .pulse[data-tier="1"],
.live[data-stage="3"] .pulse[data-tier="2"], .live[data-stage="4"] .pulse[data-tier="2"],
.live[data-stage="4"] .pulse[data-tier="3"] { opacity: 1; animation: pulse-run 2.6s var(--delay, 0s) linear infinite; }
@keyframes pulse-run { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }

.orbit-nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.node {
  position: absolute; left: calc(50% + var(--x) * 1%); top: calc(50% + var(--y) * 1%);
  translate: -50% -50%;
  opacity: 0; scale: calc(.6 * var(--ns, 1));
  transition: opacity .8s var(--ease), scale .8s var(--ease);
}
.team-stage[data-stage="1"] .node[data-tier="0"], .team-stage[data-stage="2"] .node[data-tier="0"],
.team-stage[data-stage="3"] .node[data-tier="0"], .team-stage[data-stage="4"] .node[data-tier="0"],
.team-stage[data-stage="2"] .node[data-tier="1"], .team-stage[data-stage="3"] .node[data-tier="1"], .team-stage[data-stage="4"] .node[data-tier="1"],
.team-stage[data-stage="3"] .node[data-tier="2"], .team-stage[data-stage="4"] .node[data-tier="2"],
.team-stage[data-stage="4"] .node[data-tier="3"] { opacity: 1; scale: var(--ns, 1); }
.node[data-tier="1"] { transition-delay: calc(var(--i, 0) * 90ms); }
#n-ujair { --i: 1; } #n-manoj { --i: 2; } #n-aditya { transition-delay: 120ms; }
#n-blueprint { transition-delay: 100ms; } #n-nexus { transition-delay: 200ms; } #n-forge { transition-delay: 300ms; }

.node--p { display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 11rem; text-align: center; }
.node-dot {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text);
  background: radial-gradient(circle at 35% 30%, var(--panel-3), var(--panel));
  border: 1px solid var(--line-hi);
  box-shadow: 0 0 0 4px rgba(25, 211, 183, .06), 0 0 24px rgba(25, 211, 183, .18);
}
.node-txt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--text); }
.node-txt small { display: block; font-size: var(--step--1); color: var(--text-2); line-height: 1.35; }
.node[data-core] { width: 13rem; }
.node[data-core] .node-dot {
  width: 5rem; height: 5rem; font-size: var(--step-1); color: var(--on-signal);
  background: radial-gradient(circle at 35% 30%, var(--signal-hi), var(--signal));
  border: 0; box-shadow: 0 0 0 8px rgba(25, 211, 183, .12), 0 0 60px rgba(25, 211, 183, .45);
  animation: core-breathe 4s ease-in-out infinite; animation-play-state: paused;
}
.live .node[data-core] .node-dot { animation-play-state: running; }
@keyframes core-breathe { 50% { box-shadow: 0 0 0 14px rgba(25, 211, 183, .07), 0 0 80px rgba(25, 211, 183, .55); } }
.node[data-tier="2"] .node-dot { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139, 123, 255, .08), 0 0 28px rgba(139, 123, 255, .3); }

.node--w {
  width: 17.5rem; padding: .9rem 1rem; display: grid; gap: .3rem;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--wc) 45%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--wc) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--wc) 30%, transparent);
}
.node--w::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--wc); }
.w-code { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--wc); }
.w-name { font-family: var(--font-display); font-size: var(--step-0); color: var(--text); }
.w-leads { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; }
.w-leads .lead {
  font-size: var(--step--1); color: var(--text); padding: .15rem .55rem;
  border: 1px solid var(--line-hi); background: var(--panel-2);
}

/* narrow screens and reduced motion: an ordinary, readable list */
.team-stage.static { position: static; height: auto; display: block; overflow: visible; padding-block: clamp(3rem, 8vh, 6rem); }
.team-track:has(.static) { height: auto; }
.static .team-steps small { max-height: none; opacity: 1; }
.static .team-steps li { color: var(--text); }
.static .team-cue, .static .orbit-svg { display: none; }
.static .orbit { width: 100%; aspect-ratio: auto; transform: none; }
.static .orbit-nodes { position: static; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.static .node { position: relative; left: auto; top: auto; translate: none; width: auto; opacity: 1; scale: 1; }
.static .node--p { flex-direction: row; text-align: left; padding: .9rem; background: var(--panel); border: 1px solid var(--line); }
.static .node[data-core] .node-dot { width: 3.4rem; height: 3.4rem; font-size: var(--step-0); }
.static .node:not(.in) { opacity: 0; translate: 0 14px; }
.static .node.in { transition: opacity .6s var(--ease), translate .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .static .node:not(.in) { opacity: 1; translate: none; } }

.node[data-core] .node-dot { overflow: hidden; padding: 0; }
.node[data-core] .node-dot img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }


/* --- living wing cards -------------------------------------------------------
   Each wing carries a small animated instrument for what it does, a light sheen
   that sweeps the card, and flies out from the core when its stage lights. All
   motion is transform/opacity and pauses while the stage is off screen. */
.node--w { overflow: hidden; padding-right: 4.6rem; transition: opacity .9s var(--ease), scale .9s var(--ease), transform 1.1s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.team-stage:not(.static) .node--w { transform: translate(calc(var(--x) * -.55vmin), calc(var(--y) * -.55vmin)) rotate(calc(var(--x) * -.2deg)); }
.team-stage[data-stage="4"]:not(.static) .node--w { transform: none; }
.node--w:hover { border-color: var(--wc); box-shadow: 0 0 60px color-mix(in srgb, var(--wc) 34%, transparent), inset 0 1px 0 var(--wc); }
.w-art { position: absolute; top: 50%; right: .75rem; width: 3.3rem; height: 3.3rem; translate: 0 -50%; color: var(--wc); opacity: .95; }
.w-art svg { width: 100%; height: 100%; overflow: visible; }
.w-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.w-sheen::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: 0;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--wc) 22%, transparent), transparent);
  transform: translateX(-120%) skewX(-12deg);
}
.live[data-stage="4"] .w-sheen::before { animation: sheen 5.5s var(--sd, 0s) var(--ease) infinite; }
#n-nexus { --sd: 1.3s; } #n-forge { --sd: 2.6s; } #n-blueprint { --sd: 3.9s; }
@keyframes sheen { 0% { transform: translateX(-120%) skewX(-12deg); } 45%, 100% { transform: translateX(360%) skewX(-12deg); } }

/* coordinator chips pop in after their card */
.w-leads .lead { opacity: 0; translate: 0 8px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.team-stage[data-stage="4"] .w-leads .lead, .static .w-leads .lead { opacity: 1; translate: none; transition-delay: .7s; }
.team-stage[data-stage="4"] .w-leads .lead + .lead { transition-delay: .85s; }

/* Cortex: a small network, activations rippling input to output */
.nn-l line { stroke: currentColor; stroke-width: .6; opacity: .28; }
.nn-n { fill: var(--panel); stroke: currentColor; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.live .nn-n { animation: fire 1.8s var(--d) ease-in-out infinite; }
@keyframes fire { 0%, 60%, 100% { fill: var(--panel); scale: 1; } 25% { fill: currentColor; scale: 1.35; } }

/* Nexus: a radar sweep with blips, the robot finding its way */
.rd-r, .rd-x { fill: none; stroke: currentColor; stroke-width: .7; opacity: .35; }
.rd-sweep { transform-origin: 32px 32px; }
.rd-sweep path { fill: currentColor; opacity: .28; }
.live .rd-sweep { animation: spin 3s linear infinite; }
.rd-b { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; }
.live .rd-b { animation: blip 3s var(--d, .6s) ease-out infinite; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes blip { 0% { opacity: 1; scale: 1.6; } 60%, 100% { opacity: 0; scale: .6; } }

/* Forge: a turning gear and current running through the traces */
.cf-t { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .3; }
.cf-c { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .08 .92; }
.live .cf-c { animation: current 2.4s linear infinite; }
@keyframes current { to { stroke-dashoffset: -1; } }
.gear { fill: currentColor; transform-origin: 40px 32px; }
.gear-hole { fill: var(--panel); }
.live .gear { animation: spin 6s linear infinite; }
.chip { fill: var(--panel-2); stroke: currentColor; stroke-width: 1.2; }

/* Blueprint: a wireframe cube turning in 3D */
.w-art--blueprint { perspective: 220px; display: grid; place-items: center; }
.cube { position: relative; width: 2.2rem; height: 2.2rem; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(30deg); }
.live .cube { animation: cube 8s linear infinite; }
.cube i { position: absolute; inset: 0; border: 1.5px solid currentColor; background: color-mix(in srgb, currentColor 7%, transparent); }
.cube i:nth-child(1) { transform: translateZ(1.1rem); }
.cube i:nth-child(2) { transform: rotateY(180deg) translateZ(1.1rem); }
.cube i:nth-child(3) { transform: rotateY(90deg) translateZ(1.1rem); }
.cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(1.1rem); }
.cube i:nth-child(5) { transform: rotateX(90deg) translateZ(1.1rem); }
.cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(1.1rem); }
@keyframes cube { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .live .nn-n, .live .rd-sweep, .live .rd-b, .live .cf-c, .live .gear, .live .cube, .live[data-stage="4"] .w-sheen::before { animation: none; }
  .rd-b { opacity: .8; }
}

/* coordinator photo bubbles: initial now, <img> inside .lead-pic when photos arrive */
.w-leads .lead { display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .6rem .18rem .2rem; border-radius: 999px; }
.lead-pic {
  display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; overflow: hidden;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--on-signal);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wc) 70%, white), var(--wc));
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px color-mix(in srgb, var(--wc) 60%, transparent);
}
.lead-pic img { width: 100%; height: 100%; object-fit: cover; }

/* Smit first, then Aditya: during stage 3 the CTO waits for data-cto (js/team.js) */
.team-stage[data-stage="3"]:not([data-cto]) #n-aditya { opacity: 0; scale: calc(.6 * var(--ns, 1)); }
.team-stage[data-stage="3"]:not([data-cto]) .link[data-to="aditya"] { stroke-dashoffset: 1; }
.team-stage[data-stage="3"]:not([data-cto]) .pulse[data-to="aditya"] { opacity: 0; animation: none; }

/* chips may run under the instrument, which sits beside the title */
.team-stage:not(.static) .w-leads { margin-right: -3.8rem; position: relative; z-index: 1; }
.team-stage:not(.static) .w-art { top: 2.1rem; translate: none; }


.node-dot img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.node-dot:has(img) { overflow: hidden; padding: 0; }

/* --- the wings: holographic 3D cards (js/wings.js) --------------------------
   Layers sit at different translateZ depths inside a preserve-3d card, so a tilt
   makes the instrument, title and chips pop out of the plate. Colours are per
   wing: --c1/--c2 drive the mesh, the glow and the foil. */
.wings { position: relative; overflow: clip; padding-bottom: clamp(5rem, 12vh, 9rem); }
.wings-floor {
  position: absolute; left: -25%; right: -25%; bottom: -10%; height: 70%; pointer-events: none; z-index: -1;
  transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, rgba(25, 211, 183, .16) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg, rgba(139, 123, 255, .16) 1px, transparent 1px) 0 0 / 64px 64px;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
.wings::before {                          /* aurora wash behind the grid */
  content: ""; position: absolute; inset: 10% -10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 20% 60%, rgba(25, 211, 183, .16), transparent 70%),
              radial-gradient(40% 50% at 45% 70%, rgba(139, 123, 255, .16), transparent 70%),
              radial-gradient(40% 50% at 70% 60%, rgba(255, 70, 110, .14), transparent 70%),
              radial-gradient(40% 50% at 92% 70%, rgba(255, 180, 84, .14), transparent 70%);
}

.wings-grid { display: grid; gap: clamp(1.1rem, 2vw, 1.8rem); grid-template-columns: repeat(4, 1fr); perspective: 1400px; margin-top: 1rem; }
@media (max-width: 1120px) { .wings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .wings-grid { grid-template-columns: 1fr; } }

.wcard--cortex    { --c1: #19D3B7; --c2: #28A8FF; }
.wcard--nexus     { --c1: #8B7BFF; --c2: #D05BFF; }
.wcard--forge     { --c1: #FF4D7A; --c2: #FF8A3D; }
.wcard--blueprint { --c1: #FFB454; --c2: #FFE070; }

.wcard { transform-style: preserve-3d; }
/* entrance: from deep and turned away, staggered */
.wcard { opacity: 0; transform: translate3d(0, 80px, -260px) rotateY(-28deg) rotateX(12deg);
  transition: opacity 1s calc(var(--i) * 130ms) var(--ease), transform 1.3s calc(var(--i) * 130ms) var(--ease); }
.wings-grid.in .wcard { opacity: 1; transform: none; }

.wcard-in {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; height: 100%; min-height: 27rem; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  border-radius: 14px;
}
.live .wcard-in { animation: float 6s calc(var(--i) * -1.4s) ease-in-out infinite; }
.hot .wcard-in { animation-play-state: paused; }
@keyframes float { 50% { translate: 0 -10px; } }

.wcard-bg {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 16%, #0B1226), #070B17 70%);
  border: 1px solid color-mix(in srgb, var(--c1) 40%, transparent);
  box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--c1) 40%, transparent), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.hot .wcard-bg { border-color: var(--c1); box-shadow: 0 40px 90px -20px color-mix(in srgb, var(--c1) 60%, transparent), 0 0 50px color-mix(in srgb, var(--c2) 30%, transparent); }
.wcard-mesh {                              /* slow rotating colour mesh */
  position: absolute; width: 180%; aspect-ratio: 1; left: -40%; top: -60%;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--c1) 55%, transparent), transparent 30%,
                             color-mix(in srgb, var(--c2) 45%, transparent), transparent 60%, color-mix(in srgb, var(--c1) 35%, transparent), transparent);
  opacity: .45;
}
.live .wcard-mesh { animation: spin 18s linear infinite; }
.wcard-grid { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 22px 22px,
              linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 65%); }
.wcard-foil { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.28), transparent 42%),
              linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--c2) 30%, transparent) 50%, transparent 70%); }
.hot .wcard-foil { opacity: 1; }

.wcard-num {                               /* huge outlined numeral, set BEHIND the plate plane */
  position: absolute; right: .6rem; bottom: -1.2rem; transform: translateZ(10px);
  font-family: var(--font-display); font-weight: 700; font-size: 9rem; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c1) 45%, transparent); pointer-events: none;
}
.wcard-art {                               /* the instrument pops out furthest */
  position: absolute; top: -1.6rem; right: 1.1rem; width: 6.2rem; height: 6.2rem; color: var(--c1);
  transform: translateZ(90px); display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 26%, #0B1226) 0%, #0B1226 70%);
  border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent);
  box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--c1) 60%, transparent), 0 0 30px color-mix(in srgb, var(--c1) 35%, transparent);
}
.wcard-art svg { width: 64%; height: 64%; overflow: visible; }
.wcard-art .cube { width: 2.6rem; height: 2.6rem; }
.wcard-art .cube i:nth-child(1) { transform: translateZ(1.3rem); } .wcard-art .cube i:nth-child(2) { transform: rotateY(180deg) translateZ(1.3rem); }
.wcard-art .cube i:nth-child(3) { transform: rotateY(90deg) translateZ(1.3rem); } .wcard-art .cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(1.3rem); }
.wcard-art .cube i:nth-child(5) { transform: rotateX(90deg) translateZ(1.3rem); } .wcard-art .cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(1.3rem); }
.wcard--blueprint .wcard-art { perspective: 260px; }
.wcard-art::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c1) 50%, transparent); }
.live .wcard-art::after { animation: spin 14s linear infinite; }

.wcard-body { position: relative; padding: 1.6rem 1.4rem 1.5rem; transform: translateZ(40px); display: grid; gap: .55rem; height: 100%; align-content: start; }
.wcard-code { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--c1); margin-top: 3.2rem; }
.wcard h3 { font-size: var(--step-2); line-height: 1.1; margin: 0;
  background: linear-gradient(100deg, #fff 30%, var(--c1) 70%, var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; background-position: 0 0; transition: background-position .8s var(--ease); }
.hot .wcard h3 { background-position: 100% 0; }
.wcard-text { color: var(--text-2); font-size: var(--step-0); margin: 0; }
.wcard-tags { list-style: none; padding: 0; margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; transform: translateZ(20px); }
.wcard-tags li { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .06em; padding: .2rem .55rem; border-radius: 999px;
  color: var(--text); background: color-mix(in srgb, var(--c1) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 40%, transparent); }
.wcard-leads { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: auto 0 0; padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--c1) 25%, transparent); transform: translateZ(30px); }
.wcard-lbl { flex-basis: 100%; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.wcard-leads .lead { --wc: var(--c1); display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .7rem .2rem .22rem; border-radius: 999px;
  background: #0B1226; border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); color: var(--text); font-size: var(--step-0);
  transition: translate .4s var(--ease), box-shadow .4s var(--ease); }
.hot .wcard-leads .lead { translate: 0 -3px; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--c1) 70%, transparent); }
.wcard-leads .lead-pic { width: 2rem; height: 2rem; }

/* the team-card instruments run here too, but only while this grid is on screen */
.live .nn-n { animation: fire 1.8s var(--d) ease-in-out infinite; }
.live .rd-sweep { animation: spin 3s linear infinite; }
.live .rd-b { animation: blip 3s var(--d, .6s) ease-out infinite; }
.live .cf-c { animation: current 2.4s linear infinite; }
.live .gear { animation: spin 6s linear infinite; }
.live .cube { animation: cube 8s linear infinite; }

@media (hover: none), (max-width: 640px) {
  .wcard-in { min-height: 0; }
  .wcard-art { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wcard { opacity: 1; transform: none; transition: none; }
  .live .wcard-in, .live .wcard-mesh, .live .wcard-art::after { animation: none; }
}

/* perspective per card, so each card pops around its own centre instead of the
   grid's (which dragged the outer cards' text past their edges) */
.wings-grid { perspective: none; margin-top: 3.4rem; }
.wcard { perspective: 1100px; transform: perspective(1100px) translate3d(0, 80px, -260px) rotateY(-28deg) rotateX(12deg); }
.wings-grid.in .wcard { transform: none; }
.wcard-body { transform: translateZ(24px); padding: 1.6rem 1.7rem 1.6rem; }
.wcard-art { transform: translateZ(60px); }
.wcard-num { top: 3.3rem; left: 1.2rem; right: auto; bottom: auto; font-size: 7.5rem; -webkit-text-stroke: 1px color-mix(in srgb, var(--c1) 28%, transparent); }
.wcard-num { top: auto; left: auto; right: .8rem; bottom: .2rem; font-size: 5.5rem; opacity: .55; }

.wcard-art::after { inset: 5px; }
.wcard-art svg { overflow: hidden; }


/* --- the constellation, grander -------------------------------------------
   A depth starfield (canvas, js/team.js) that streams past as the camera pulls
   back, a vast wordmark behind the orbit, satellites on the rings, rotating
   halos on every person, and a final beat once the whole lab is assembled. */
.team-track { height: 540vh; }
.team-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.team-stage { width: 100%; padding-inline: max(var(--gutter), (100% - var(--shell)) / 2); }
.team-stage::before { background: radial-gradient(closest-side at 64% 50%, rgba(25, 211, 183, .16), transparent 70%),
  radial-gradient(60% 70% at 64% 50%, rgba(139, 123, 255, .14), transparent 100%),
  radial-gradient(30% 40% at 90% 90%, rgba(255, 77, 122, .10), transparent), radial-gradient(30% 40% at 40% 10%, rgba(255, 180, 84, .08), transparent); }
.team-word {
  position: absolute; left: 50%; top: 50%; translate: -38% -50%; margin: 0; pointer-events: none; z-index: -1; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 22vw; letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(168, 192, 240, .10);
  opacity: 0; scale: 1.2; transition: opacity 1.4s var(--ease), scale 1.8s var(--ease);
}
.team-word span { -webkit-text-stroke-color: rgba(25, 211, 183, .22); }
.team-stage[data-final] .team-word { opacity: 1; scale: 1; }
.team-final { font-family: var(--font-display); font-size: var(--step-2); color: var(--text); margin: 0 0 1rem; line-height: 1.15;
  opacity: 0; translate: 0 12px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.team-final span { display: block; font-size: var(--step-0); color: var(--signal); font-family: var(--font-mono); letter-spacing: .06em; margin-top: .3rem; }
.team-stage[data-final] .team-final { opacity: 1; translate: none; }

.sat { transform-origin: 0 0; animation: spin var(--t) linear infinite; animation-play-state: paused; opacity: 0; transition: opacity 1s var(--ease); }
.sat circle { fill: var(--signal-hi); }
.sat:nth-child(2n) circle { fill: #B3A8FF; } .sat:nth-child(4) circle { fill: var(--warm); }
.live .sat { animation-play-state: running; }
.team-stage[data-stage="2"] .sat:nth-child(1), .team-stage[data-stage="3"] .sat:nth-child(-n+3), .team-stage[data-stage="4"] .sat { opacity: 1; }

/* every person gets a halo; photos get a spinning gradient ring */
.node-dot { position: relative; isolation: isolate; }
.node--p .node-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--signal), transparent 30%, var(--accent), transparent 65%, var(--signal));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.live .node--p .node-dot::after { animation: spin 7s linear infinite; }
.node-dot:has(img) { overflow: visible; }
.node-dot img { position: relative; z-index: 1; }
.node[data-tier="2"] .node-dot { width: 3.8rem; height: 3.8rem; }
.node[data-tier="2"] .node-dot::after { inset: -7px; background: conic-gradient(from 0deg, var(--accent), transparent 35%, var(--warm), transparent 70%, var(--accent)); }
.node[data-core] .node-dot::after { inset: -10px; }

/* the core flares once the lab is assembled; the orbit breathes */
.orbit-flare { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(25, 211, 183, .22), transparent 60%); opacity: 0; scale: .4; transition: opacity 1.2s var(--ease), scale 1.6s var(--ease); }
.team-stage[data-final] .orbit-flare { opacity: 1; scale: 1; }
.live[data-final] .orbit-nodes, .live[data-final] .orbit-svg { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { translate: 0 -6px; } }
.team-stage[data-final] .node--w { box-shadow: 0 0 60px color-mix(in srgb, var(--wc) 35%, transparent), inset 0 1px 0 var(--wc); }

.static .team-stars, .static .team-word, .static .team-final, .static .orbit-flare { display: none; }
@media (prefers-reduced-motion: reduce) { .live .node--p .node-dot::after, .live .sat, .live[data-final] .orbit-nodes, .live[data-final] .orbit-svg { animation: none; } }

/* halo inside the dot's own box (the audit counts overflow); the photo is inset to show it */
.node--p .node-dot::after, .node[data-tier="2"] .node-dot::after, .node[data-core] .node-dot::after { inset: 0; }
.node-dot:has(img) { overflow: hidden; }
.node-dot img { width: calc(100% - 6px); height: calc(100% - 6px); }


/* --- full-landscape constellation ------------------------------------------
   The orbit fills the whole stage below the header; the heading sits top-left
   and the steps run along the bottom. Coordinates are % of width and height, so
   the rings are ellipses; strokes are non-scaling so lines stay even. */
.team-stage:not(.static) { display: block; padding: 0; }
.team-stage:not(.static) .team-head { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.team-stage:not(.static) .team-head > * { pointer-events: auto; }
.team-stage:not(.static) .team-head .eyebrow { position: absolute; left: var(--gutter); top: 5.4rem; margin: 0; }
.team-stage:not(.static) .team-head h2 { position: absolute; left: var(--gutter); top: 6.6rem; margin: 0; font-size: var(--step-2); max-width: 15ch; }
.team-stage:not(.static) .team-steps {
  position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; margin: 0;
  display: flex; gap: .4rem; background: rgba(7, 12, 24, .72); border: 1px solid var(--line); border-radius: 999px; padding: .3rem;
}
.team-stage:not(.static) .team-steps li { border: 0; border-radius: 999px; padding: .45rem 1rem; font-size: var(--step-0); white-space: nowrap; }
.team-stage:not(.static) .team-steps small { display: none; }
.team-stage:not(.static)[data-stage="1"] [data-step="1"], .team-stage:not(.static)[data-stage="2"] [data-step="2"],
.team-stage:not(.static)[data-stage="3"] [data-step="3"], .team-stage:not(.static)[data-stage="4"] [data-step="4"] {
  background: color-mix(in srgb, var(--signal) 18%, transparent); box-shadow: inset 0 0 0 1px var(--signal); }
.team-stage:not(.static) .team-final { position: absolute; right: var(--gutter); top: 5.4rem; text-align: right; margin: 0; }
.team-stage:not(.static) .team-count { position: absolute; left: var(--gutter); bottom: 1.6rem; margin: 0; }
.team-stage:not(.static) .team-cue { bottom: 4.6rem; }

.team-stage:not(.static) .orbit { position: absolute; left: 1.5vw; right: 1.5vw; top: 4.6rem; bottom: 4rem; width: auto; aspect-ratio: auto; }
.ring { stroke-width: 1px; vector-effect: non-scaling-stroke; }
.link { stroke-width: 1.6px; }
.pulse { stroke-width: 4px; }
.team-word { translate: -50% -50%; }

/* bigger people */
.node--p { width: 13rem; gap: .55rem; }
.node-dot { width: 4.4rem; height: 4.4rem; font-size: var(--step-0); }
.node[data-tier="2"] .node-dot { width: 5.4rem; height: 5.4rem; font-size: var(--step-1); }
.node[data-core] { width: 16rem; }
.node[data-core] .node-dot { width: 7.2rem; height: 7.2rem; }
.node-txt b { font-size: var(--step-1); }
.node[data-core] .node-txt b { font-size: var(--step-2); }
.node-txt small { font-size: var(--step-0); }
.node--w { width: 19rem; }
.node--w .lead-pic { width: 2.3rem; height: 2.3rem; }
.node--w .w-name { font-size: var(--step-1); }
.static .node-dot, .static .node[data-tier="2"] .node-dot { width: 3.6rem; height: 3.6rem; }
.team-stage:not(.static) .orbit { justify-self: stretch; }   /* centre alignment shrink-wraps an abspos box to 0 width */

.link { stroke-width: .13; }
.pulse { stroke-width: .4; }
.node[data-core] { width: 22rem; }


/* --- the Blender film behind the hero (js/hero.js) -------------------------
   Poster first, film attached after load. The scrim keeps the copy on the left
   readable over the render; object-position 68% matches the HUD's crop maths. */
.hero-film {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: 68% 50%; background: #05080f;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 12, 24, .94) 0%, rgba(7, 12, 24, .78) 30%, rgba(7, 12, 24, .25) 58%, rgba(7, 12, 24, 0) 72%),
    linear-gradient(180deg, rgba(7, 12, 24, .5) 0%, transparent 18%, transparent 75%, var(--void) 100%);
}
@media (max-width: 760px) {
  .hero-film { object-position: 72% 40%; }
  .hero-scrim { background: linear-gradient(180deg, rgba(7, 12, 24, .55) 0%, rgba(7, 12, 24, .82) 45%, var(--void) 100%); }
}

/* bigger coordinator photos */
.wcard-leads .lead-pic { width: 2.45rem; height: 2.45rem; }
.wcard-leads .lead { padding-right: .7rem; }
.node--w .lead-pic { width: 2.8rem; height: 2.8rem; }

/* Aditya (CTO): gold rings, the senior-most after mentors and Smit.
   Both rings live inside the dot's own box (audit overflow rule). */
#n-aditya .node-dot { border-color: #FFC857; box-shadow: 0 0 0 4px rgba(255, 200, 87, .1), 0 0 34px rgba(255, 190, 70, .45); }
#n-aditya .node-dot::after { background: conic-gradient(from 0deg, #FFE39A, transparent 28%, #FFB02E 50%, transparent 78%, #FFE39A); }
#n-aditya .node-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  border: 1.5px dashed rgba(255, 210, 110, .75);
  -webkit-mask: conic-gradient(#000 0 70%, transparent 70% 78%, #000 78%); mask: conic-gradient(#000 0 70%, transparent 70% 78%, #000 78%);
}
.live #n-aditya .node-dot::after { animation-duration: 5s; }
.live #n-aditya .node-dot::before { animation: spin 11s linear infinite reverse; }
#n-aditya .node-txt b { color: #FFD77A; }
@media (prefers-reduced-motion: reduce) { .live #n-aditya .node-dot::before { animation: none; } }

/* draggable drone layer (js/hero.js): positioned over its own pixels in the arena film */
.hero-drone { position: absolute; z-index: 0; pointer-events: none; opacity: 0; will-change: transform; transform-origin: 50% 40%; }
.hero-drone.on { opacity: 1; }
.hero.grab { cursor: grab; }
.hero.grabbing { cursor: grabbing; user-select: none; }

/* short or narrow stages: heading clears the eyebrow; the people count yields to the step pills */
.team-stage:not(.static) .team-head h2 { top: 6.9rem; }
@media (max-width: 1200px) { .team-stage:not(.static) .team-count { display: none; } }

/* wing cards: coordinators as profile tiles, big photo over the name, two across */
.wcard-leads { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.wcard-leads .wcard-lbl { grid-column: 1 / -1; }
.wcard-leads .lead { flex-direction: column; justify-content: center; gap: .55rem; padding: .85rem .5rem .75rem; border-radius: 16px;
  text-align: center; font-weight: 500; min-width: 0; }
.wcard-leads .lead-pic { width: 4.6rem; height: 4.6rem; font-size: var(--step-1);
  box-shadow: 0 0 0 2px #0B1226, 0 0 0 3.5px color-mix(in srgb, var(--c1) 75%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--c1) 60%, transparent); }

/* ---- showcase: the lab video in a phone-shaped frame beside the intro ---- */
.showcase-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.showcase-facts { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: 2.2rem; }
.showcase-facts li { display: flex; flex-direction: column; gap: .2rem; }
.showcase-facts b { font-family: var(--font-display); font-size: 1.9rem; color: var(--signal-hi); line-height: 1; }
.showcase-facts span { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2, #9FB0CF); }
.showcase-phone { margin: 0; justify-self: center; width: 100%; max-width: 380px; }
.showcase-phone video {
  display: block; width: 100%; aspect-ratio: 9 / 16; height: auto; object-fit: cover;
  background: #000; border-radius: 28px;
  border: 1px solid var(--line-hi);
  box-shadow: 0 0 0 8px var(--panel), 0 0 0 9px var(--line-hi), 0 30px 80px rgba(0, 0, 0, .55),
              0 0 70px color-mix(in srgb, var(--signal) 18%, transparent);
}
.showcase-phone figcaption { margin-top: 1.4rem; text-align: center; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2, #9FB0CF); }
@media (max-width: 860px) {
  .showcase-in { grid-template-columns: 1fr; }
  .showcase-phone { max-width: 340px; }
}