/* The invitation to join the lab, beside a drawing of five fields meeting on one problem
   (drawn by scripts/build_join_art.py). Colours are theme tokens, so both themes work: ink for the
   fields and the black hole, and accent green for a lit field and for what comes out. */
.closing.closing-team {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(40px, 5vw, 80px);
  padding-block: 80px 88px;
}

.closing-team h2 {
  max-width: 570px;
  font-size: clamp(38px, 4.2vw, 60px);
  letter-spacing: -.045em;
  line-height: 1.08;
  margin-block: 26px;
}

.closing-team .closing-copy {
  max-width: 560px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  margin-bottom: 25px;
}

.closing-team-art {
  min-width: 0;
  margin: 0;
}

.join-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--ink);
}

/* The fields: a glyph and a name each, coloured by the field's group (ink, or accent while lit),
   and a line each in its own notation. */
.join-art .jt-field { color: var(--ink); }
.join-art .jt-g { fill: none; stroke: currentColor; stroke-width: 1.4; }
.join-art .jt-fill { fill: var(--paper); }
.join-art .jt-soft { stroke-opacity: .5; stroke-width: 1; }
.join-art .jt-thin { stroke-width: 1.1; }
.join-art .jt-dash { stroke-opacity: .45; stroke-width: .9; stroke-dasharray: 1.8 2.4; }
.join-art .jt-dot { fill: currentColor; }
.join-art .jt-name { fill: currentColor; fill-opacity: .78; font: 400 11px/1 var(--mono); letter-spacing: .08em; }
.join-art .jt-line { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; }
.join-art .jt-pulse { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: .07 2; stroke-dashoffset: -1; }

/* Where they meet: a black hole, the O of the Voaige logo. */
.join-art .jt-hole-in { fill: var(--paper); }
.join-art .jt-hole-ring { fill: var(--ink); }
.join-art .jt-hole-slash { fill: none; stroke: var(--ink); stroke-width: 3; }

/* What comes out: one green line to Next Gen AI, set like the site's headings. */
.join-art .jt-result { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.join-art .jt-stop { fill: var(--accent); stroke: var(--paper); stroke-width: 1.4; }
.join-art .jt-out { fill: var(--ink); font: 400 21px/1 var(--sans); letter-spacing: -.02em; }
.join-art .jt-out-em { fill: var(--accent-text); }

/* On phones the names grow a little, from the start of their baseline, so they stay legible. Each
   name is drawn at the origin of its own group, and grows from that origin, which every browser
   places alike. (Safari misplaces a fill-box origin on SVG text: it drifted each name onto a line.) */
.join-art .jt-name { transform-box: view-box; transform-origin: 0 0; }

/* The drawing rests on the finished frame and plays once while it is hovered, or while the Join
   Us link has keyboard focus, like the research tiles: one by one, each field comes forward (its name bold,
   name and glyph in accent) and sends a pulse along its line; the pulses reach the black hole together, it swallows them, and one
   green line leaves it for Next Gen AI. Touch screens and reduced motion see the still. Each mark
   that moves names its kind of step as a class (jt-a-travel, -lit, -bold, -gulp, -draw, -pop,
   -rise) and carries its start and length as --t and --d, set by scripts/build_join_art.py.
   Each step plays once: its first frame holds until it starts, and its last frame is the still. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.closing-team-art:hover, .closing-team:has(.text-link:focus-visible) .closing-team-art) .jt-a {
    animation-delay: var(--t, 0s);
    animation-duration: var(--d, .4s);
    animation-timing-function: ease;
    animation-fill-mode: both;
    transform-box: fill-box;
    transform-origin: center;
  }
  :is(.closing-team-art:hover, .closing-team:has(.text-link:focus-visible) .closing-team-art) .jt-a-travel { animation-name: jt-travel; animation-timing-function: linear; }
  :is(.closing-team-art:hover, .closing-team:has(.text-link:focus-visible) .closing-team-art) .jt-a-lit { animation-name: jt-lit; }
  :is(.closing-team-art:hover, .closing-team:has(.text-link:focus-visible) .closing-team-art) .jt-a-bold { animation-name: jt-bold; transform-box: view-box; transform-origin: 0 0; }
  :is(.closing-team-art:hover, .closing-team:has(.text-link:focus-visible) .closing-team-art) .jt-a-gulp { animation-name: jt-gulp; }
  :is(.closing-team-art:hover, .closing-team:has(.text-link:focus-visible) .closing-team-art) .jt-a-draw { animation-name: jt-draw; animation-timing-function: linear; stroke-dasharray: 1; }
  :is(.closing-team-art:hover, .closing-team:has(.text-link:focus-visible) .closing-team-art) .jt-a-pop { animation-name: jt-pop; }
  :is(.closing-team-art:hover, .closing-team:has(.text-link:focus-visible) .closing-team-art) .jt-a-rise { animation-name: jt-rise; animation-timing-function: ease-out; }
}

@keyframes jt-travel { from { stroke-dashoffset: .07; } to { stroke-dashoffset: -1; } }
@keyframes jt-lit { 0% { color: var(--ink); } 8%, 88% { color: var(--accent); } 100% { color: var(--ink); } }
@keyframes jt-bold { 0% { font-weight: 400; fill-opacity: .78; } 8%, 88% { font-weight: 700; fill-opacity: 1; } 100% { font-weight: 400; fill-opacity: .78; } }
@keyframes jt-gulp { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes jt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes jt-pop { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes jt-rise { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .closing.closing-team { gap: 36px; }
  .closing-team h2 { font-size: 42px; }
}

@media (max-width: 760px) {
  .closing.closing-team {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
    padding-block: 48px 52px;
  }
  .closing-team h2 {
    font-size: clamp(36px, 9.2vw, 48px);
    max-width: 540px;
    margin-block: 23px;
  }
  .closing-team .closing-copy { max-width: 600px; font-size: 17px; }
  .closing-team-art { width: 100%; max-width: 600px; justify-self: center; }
  .join-art .jt-name { scale: 1.2; }
}

@media print {
  .closing.closing-team { display: grid; break-inside: avoid; padding-block: 32px; gap: 30px; }
}