/* The marks identify the assistants in an explanatory illustration.
   Use after ai.css. Motion is CSS transform/opacity only; JS controls play state. */
.feature-visual.collaboration {
  height: 252px;
  min-height: 252px;
  align-items: flex-start;
  background: #f0eee7;
  border-right: 0;
  border-bottom: 1px solid #cccac0;
  isolation: isolate;
}
.collaboration-stage {
  position: relative;
  width: min(100%, 310px);
  height: 232px;
  flex-shrink: 0;
  container-type: inline-size;
}
.collaboration-tracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 232px;
  overflow: visible;
}
.collaboration-track { stroke: #9b9c90; stroke-width: .7; }
.collaboration-track--accent { stroke: var(--red); opacity: .38; }
.collaboration-feed { stroke: #b2b1a5; stroke-width: .7; }
.collaboration-actor {
  position: absolute;
  top: 110px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 72px;
  height: 64px;
  margin: -24px 0 0 -36px;
  animation: collaboration-chatgpt-orbit 12s linear infinite;
  animation-play-state: paused;
}
.collaboration-actor--chatgpt { transform: translate(-33.5484cqw, 0px); }
.collaboration-actor--claude {
  transform: translate(33.5484cqw, 0px);
  animation-name: collaboration-claude-orbit;
}
.collaboration-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: #f0eee7;
  border: 1px solid #bdbeb1;
  border-radius: 50%;
}
.collaboration-brand { display: block; flex-shrink: 0; user-select: none; }
.collaboration-brand--chatgpt { width: 56px; height: 56px; }
.collaboration-brand--claude { width: 36px; height: 36px; }
.collaboration-name {
  background: #f0eee7;
  padding: 3px 5px 0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.collaboration-result {
  position: absolute;
  top: 110px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 7px 8px;
  transform: translate(-50%, -50%);
  background: #f0eee7;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}
.collaboration-result-dot { width: 3px; height: 3px; background: currentColor; }
.collaboration-signal {
  position: absolute;
  top: 109px;
  left: calc(50% - 1px);
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0;
  animation: collaboration-share-one 12s linear infinite;
  animation-play-state: paused;
}
.collaboration-signal--two { animation-name: collaboration-share-two; }
.collaboration-toggle {
  position: absolute;
  right: 8px;
  bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 65px;
  min-height: 32px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  color: #62625b;
  background: #f0eee7;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  transition: color 160ms ease, border-color 160ms ease;
}
.collaboration-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.collaboration-toggle-icon { width: 10px; height: 10px; }
.collaboration-play-icon { display: none; }
.collaboration-toggle[aria-pressed="true"] .collaboration-play-icon { display: block; }
.collaboration-toggle[aria-pressed="true"] .collaboration-pause-icon { display: none; }
.collaboration-toggle:disabled { cursor: default; font-size: 8px; opacity: .8; }
.collaboration-toggle:disabled .collaboration-toggle-icon { display: none; }
.collaboration[data-motion="running"] .collaboration-actor,
.collaboration[data-motion="running"] .collaboration-signal { animation-play-state: running; }

/* Add this class to a resource-icon for an occasional, small hover response.
   Keyboard focus changes no position. Resource text and actions stay still. */
.resource-icon--motion { transition: transform 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .collaboration-toggle:not(:disabled):hover { color: var(--ink); border-color: #aeb0a0; }
  .card-link:hover .resource-icon--motion { transform: translateY(-2px) rotate(-3deg); }
}
/* A narrow two-column hero squeezes the full orbit. Give the feature its
   full width on small tablets, then retain the existing mobile stack. */
@media (min-width: 561px) and (max-width: 680px) {
  .hero:has(> .featured-resource--collaboration) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .featured-resource--collaboration { display: flex; min-height: 0; }
  .featured-resource--collaboration > .feature-visual.collaboration { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .collaboration-actor--chatgpt { transform: translate(-31cqw, -9px); }
  .collaboration-actor--claude { transform: translate(31cqw, 9px); }
  .collaboration-actor, .collaboration-signal { animation: none; }
  .collaboration-signal { display: none; }
  .resource-icon--motion { transition: none; }
  .card-link:hover .resource-icon--motion { transform: none; }
}

/* A shared full ellipse, half a turn apart. The two marks exchange sides
   every six seconds; translation keeps both marks and their names upright. */
@keyframes collaboration-chatgpt-orbit {
  0% { transform: translate(-33.5484cqw, -0.0000px); }
  1.5625% { transform: translate(-33.3868cqw, 7.4493px); }
  3.125% { transform: translate(-32.9038cqw, 14.8269px); }
  4.6875% { transform: translate(-32.1038cqw, 22.0616px); }
  6.25% { transform: translate(-30.9947cqw, 29.0839px); }
  7.8125% { transform: translate(-29.5870cqw, 35.8262px); }
  9.375% { transform: translate(-27.8945cqw, 42.2233px); }
  10.9375% { transform: translate(-25.9333cqw, 48.2139px); }
  12.5% { transform: translate(-23.7223cqw, 53.7401px); }
  14.0625% { transform: translate(-21.2829cqw, 58.7488px); }
  15.625% { transform: translate(-18.6385cqw, 63.1917px); }
  17.1875% { transform: translate(-15.8146cqw, 67.0260px); }
  18.75% { transform: translate(-12.8384cqw, 70.2148px); }
  20.3125% { transform: translate(-9.7386cqw, 72.7275px); }
  21.875% { transform: translate(-6.5450cqw, 74.5397px); }
  23.4375% { transform: translate(-3.2883cqw, 75.6340px); }
  25% { transform: translate(-0.0000cqw, 76.0000px); }
  26.5625% { transform: translate(3.2883cqw, 75.6340px); }
  28.125% { transform: translate(6.5450cqw, 74.5397px); }
  29.6875% { transform: translate(9.7386cqw, 72.7275px); }
  31.25% { transform: translate(12.8384cqw, 70.2148px); }
  32.8125% { transform: translate(15.8146cqw, 67.0260px); }
  34.375% { transform: translate(18.6385cqw, 63.1917px); }
  35.9375% { transform: translate(21.2829cqw, 58.7488px); }
  37.5% { transform: translate(23.7223cqw, 53.7401px); }
  39.0625% { transform: translate(25.9333cqw, 48.2139px); }
  40.625% { transform: translate(27.8945cqw, 42.2233px); }
  42.1875% { transform: translate(29.5870cqw, 35.8262px); }
  43.75% { transform: translate(30.9947cqw, 29.0839px); }
  45.3125% { transform: translate(32.1038cqw, 22.0616px); }
  46.875% { transform: translate(32.9038cqw, 14.8269px); }
  48.4375% { transform: translate(33.3868cqw, 7.4493px); }
  50% { transform: translate(33.5484cqw, 0.0000px); }
  51.5625% { transform: translate(33.3868cqw, -7.4493px); }
  53.125% { transform: translate(32.9038cqw, -14.8269px); }
  54.6875% { transform: translate(32.1038cqw, -22.0616px); }
  56.25% { transform: translate(30.9947cqw, -29.0839px); }
  57.8125% { transform: translate(29.5870cqw, -35.8262px); }
  59.375% { transform: translate(27.8945cqw, -42.2233px); }
  60.9375% { transform: translate(25.9333cqw, -48.2139px); }
  62.5% { transform: translate(23.7223cqw, -53.7401px); }
  64.0625% { transform: translate(21.2829cqw, -58.7488px); }
  65.625% { transform: translate(18.6385cqw, -63.1917px); }
  67.1875% { transform: translate(15.8146cqw, -67.0260px); }
  68.75% { transform: translate(12.8384cqw, -70.2148px); }
  70.3125% { transform: translate(9.7386cqw, -72.7275px); }
  71.875% { transform: translate(6.5450cqw, -74.5397px); }
  73.4375% { transform: translate(3.2883cqw, -75.6340px); }
  75% { transform: translate(0.0000cqw, -76.0000px); }
  76.5625% { transform: translate(-3.2883cqw, -75.6340px); }
  78.125% { transform: translate(-6.5450cqw, -74.5397px); }
  79.6875% { transform: translate(-9.7386cqw, -72.7275px); }
  81.25% { transform: translate(-12.8384cqw, -70.2148px); }
  82.8125% { transform: translate(-15.8146cqw, -67.0260px); }
  84.375% { transform: translate(-18.6385cqw, -63.1917px); }
  85.9375% { transform: translate(-21.2829cqw, -58.7488px); }
  87.5% { transform: translate(-23.7223cqw, -53.7401px); }
  89.0625% { transform: translate(-25.9333cqw, -48.2139px); }
  90.625% { transform: translate(-27.8945cqw, -42.2233px); }
  92.1875% { transform: translate(-29.5870cqw, -35.8262px); }
  93.75% { transform: translate(-30.9947cqw, -29.0839px); }
  95.3125% { transform: translate(-32.1038cqw, -22.0616px); }
  96.875% { transform: translate(-32.9038cqw, -14.8269px); }
  98.4375% { transform: translate(-33.3868cqw, -7.4493px); }
  100% { transform: translate(-33.5484cqw, -0.0000px); }
}
@keyframes collaboration-claude-orbit {
  0% { transform: translate(33.5484cqw, -0.0000px); }
  1.5625% { transform: translate(33.3868cqw, -7.4493px); }
  3.125% { transform: translate(32.9038cqw, -14.8269px); }
  4.6875% { transform: translate(32.1038cqw, -22.0616px); }
  6.25% { transform: translate(30.9947cqw, -29.0839px); }
  7.8125% { transform: translate(29.5870cqw, -35.8262px); }
  9.375% { transform: translate(27.8945cqw, -42.2233px); }
  10.9375% { transform: translate(25.9333cqw, -48.2139px); }
  12.5% { transform: translate(23.7223cqw, -53.7401px); }
  14.0625% { transform: translate(21.2829cqw, -58.7488px); }
  15.625% { transform: translate(18.6385cqw, -63.1917px); }
  17.1875% { transform: translate(15.8146cqw, -67.0260px); }
  18.75% { transform: translate(12.8384cqw, -70.2148px); }
  20.3125% { transform: translate(9.7386cqw, -72.7275px); }
  21.875% { transform: translate(6.5450cqw, -74.5397px); }
  23.4375% { transform: translate(3.2883cqw, -75.6340px); }
  25% { transform: translate(0.0000cqw, -76.0000px); }
  26.5625% { transform: translate(-3.2883cqw, -75.6340px); }
  28.125% { transform: translate(-6.5450cqw, -74.5397px); }
  29.6875% { transform: translate(-9.7386cqw, -72.7275px); }
  31.25% { transform: translate(-12.8384cqw, -70.2148px); }
  32.8125% { transform: translate(-15.8146cqw, -67.0260px); }
  34.375% { transform: translate(-18.6385cqw, -63.1917px); }
  35.9375% { transform: translate(-21.2829cqw, -58.7488px); }
  37.5% { transform: translate(-23.7223cqw, -53.7401px); }
  39.0625% { transform: translate(-25.9333cqw, -48.2139px); }
  40.625% { transform: translate(-27.8945cqw, -42.2233px); }
  42.1875% { transform: translate(-29.5870cqw, -35.8262px); }
  43.75% { transform: translate(-30.9947cqw, -29.0839px); }
  45.3125% { transform: translate(-32.1038cqw, -22.0616px); }
  46.875% { transform: translate(-32.9038cqw, -14.8269px); }
  48.4375% { transform: translate(-33.3868cqw, -7.4493px); }
  50% { transform: translate(-33.5484cqw, -0.0000px); }
  51.5625% { transform: translate(-33.3868cqw, 7.4493px); }
  53.125% { transform: translate(-32.9038cqw, 14.8269px); }
  54.6875% { transform: translate(-32.1038cqw, 22.0616px); }
  56.25% { transform: translate(-30.9947cqw, 29.0839px); }
  57.8125% { transform: translate(-29.5870cqw, 35.8262px); }
  59.375% { transform: translate(-27.8945cqw, 42.2233px); }
  60.9375% { transform: translate(-25.9333cqw, 48.2139px); }
  62.5% { transform: translate(-23.7223cqw, 53.7401px); }
  64.0625% { transform: translate(-21.2829cqw, 58.7488px); }
  65.625% { transform: translate(-18.6385cqw, 63.1917px); }
  67.1875% { transform: translate(-15.8146cqw, 67.0260px); }
  68.75% { transform: translate(-12.8384cqw, 70.2148px); }
  70.3125% { transform: translate(-9.7386cqw, 72.7275px); }
  71.875% { transform: translate(-6.5450cqw, 74.5397px); }
  73.4375% { transform: translate(-3.2883cqw, 75.6340px); }
  75% { transform: translate(-0.0000cqw, 76.0000px); }
  76.5625% { transform: translate(3.2883cqw, 75.6340px); }
  78.125% { transform: translate(6.5450cqw, 74.5397px); }
  79.6875% { transform: translate(9.7386cqw, 72.7275px); }
  81.25% { transform: translate(12.8384cqw, 70.2148px); }
  82.8125% { transform: translate(15.8146cqw, 67.0260px); }
  84.375% { transform: translate(18.6385cqw, 63.1917px); }
  85.9375% { transform: translate(21.2829cqw, 58.7488px); }
  87.5% { transform: translate(23.7223cqw, 53.7401px); }
  89.0625% { transform: translate(25.9333cqw, 48.2139px); }
  90.625% { transform: translate(27.8945cqw, 42.2233px); }
  92.1875% { transform: translate(29.5870cqw, 35.8262px); }
  93.75% { transform: translate(30.9947cqw, 29.0839px); }
  95.3125% { transform: translate(32.1038cqw, 22.0616px); }
  96.875% { transform: translate(32.9038cqw, 14.8269px); }
  98.4375% { transform: translate(33.3868cqw, 7.4493px); }
  100% { transform: translate(33.5484cqw, 0.0000px); }
}
@keyframes collaboration-share-one {
  0%, 31%, 47%, 100% { opacity: 0; transform: translate(-41px, -13px); }
  34% { opacity: .7; transform: translate(-39px, -12px); }
  43% { opacity: .7; transform: translate(-10px, -3px); }
  46% { opacity: 0; transform: translate(-7px, -2px); }
}
@keyframes collaboration-share-two {
  0%, 33%, 49%, 100% { opacity: 0; transform: translate(41px, 14px); }
  36% { opacity: .7; transform: translate(39px, 13px); }
  45% { opacity: .7; transform: translate(10px, 3px); }
  48% { opacity: 0; transform: translate(7px, 2px); }
}