/* =========================================================
   TEAM UNITY — "silos to one team" motion piece (prototype/turnaround.js)
   ========================================================= */
/* Hero figure on #/work/turnaround */
.c-unity {
  margin: 0;
  max-width: 960px;
  display: flex; flex-direction: column;
}
.c-unity__stage { padding: 12px 0 0; }
.c-unity__svg { display: block; width: 100%; height: auto; }

.c-unity figcaption {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 0 0;
}
.c-unity__steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.c-unity__step {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; height: 100%;
  padding: 12px 0 0;
  background: none; border: 0; border-top: 2px solid var(--line);
  font: inherit; text-align: left; color: var(--muted);
  cursor: pointer;
  transition: color var(--transition-base);
}
.c-unity__step::before {
  content: ''; position: absolute; top: -2px; left: 0;
  width: calc(var(--p, 0) * 100%); height: 2px;
  background: var(--text);
}
.c-unity__step:hover { color: var(--text-2); }
.c-unity__step:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.c-unity__step-n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.c-unity__step-title {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 20px;
  color: var(--muted); transition: color var(--transition-base);
}
.c-unity__step[aria-pressed="true"] { color: var(--text-2); }
.c-unity__step[aria-pressed="true"] .c-unity__step-title { color: var(--text); }
.c-unity__step-body { font-size: 14px; line-height: 20px; }

.c-unity__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.c-unity__legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--muted);
}
.c-unity__legend li { display: flex; align-items: center; gap: 6px; }
.c-unity__legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.c-unity__legend i.is-lead { background: var(--accent); }
.c-unity__replay {
  padding: 4px 12px;
  background: none; border: 1px solid var(--field-line); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 13px; color: var(--text);
  cursor: pointer;
}
.c-unity__replay:hover { border-color: var(--text); }
.c-unity__replay[hidden] { display: none; }

/* Card thumbnail */
.c-project-media__unity { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; container-type: size; }
.c-project-media__unity .c-unity__svg { width: 100%; height: 100%; }
/* With its caption (styles from prototype/reel.css): the drawing keeps its full size, nudged right into its spare
   margin, and the caption sits in the empty bottom-left corner */
.c-project-media__unity.has-cap .c-unity__svg { transform: translate(7%, -3%); }
.c-project-media__unity .c-reel__cap { left: 3%; bottom: 5%; width: 36%; }
/* Narrow cards: the drawing gives a little more room; the caption may overlap the ring edge, which is fine */
@container (max-width: 420px) {
  .c-project-media__unity.has-cap .c-unity__svg { transform: translate(10%, -4%) scale(.92); }
  .c-project-media__unity .c-reel__cap { left: 3%; bottom: 4%; width: 37%; }
}

/* SVG marks */
.u-node--design  { fill: var(--u-design); }
.u-node--dev     { fill: var(--u-dev); }
.u-node--ops     { fill: var(--u-ops); }
.u-node--product { fill: var(--u-product); }
.u-node--lead    { fill: var(--accent); }
.u-halo {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: u-halo 2.4s ease-out infinite;
}
@keyframes u-halo { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }

.u-edge { stroke-width: 1.5; stroke-linecap: round; }
.u-edge--spoke         { stroke: var(--line); }
.u-edge--ring          { stroke: var(--u-design); stroke-opacity: 0.55; stroke-width: 2; }
.u-edge--chord         { stroke: var(--u-design); stroke-opacity: 0.22; }
.u-edge--silo-design   { stroke: var(--u-design);  stroke-opacity: 0.35; }
.u-edge--silo-dev      { stroke: var(--u-dev);     stroke-opacity: 0.4; }
.u-edge--silo-ops      { stroke: var(--u-ops);     stroke-opacity: 0.4; }
.u-edge--silo-product  { stroke: var(--u-product); stroke-opacity: 0.4; }

.u-boundary {
  fill: none;
  stroke: var(--u-design); stroke-opacity: 0.5; stroke-width: 1.5; stroke-dasharray: 5 7;
  animation: u-march 30s linear infinite;
}
@keyframes u-march { to { stroke-dashoffset: -480; } }

.u-wall line { stroke: var(--field-line); stroke-width: 1.5; stroke-dasharray: 3 7; }
.u-wall path {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
  transition: transform 200ms ease;
}
.u-wall.is-hit path { transform: scale(1.4); }

.u-pkt--design  { fill: var(--u-design); }
.u-pkt--dev     { fill: var(--u-dev); }
.u-pkt--ops     { fill: var(--u-ops); }
.u-pkt--product { fill: var(--u-product); }
.u-pkt--lead    { fill: var(--accent); }
.u-pkt.is-rejected { fill: var(--accent); }

.u-label { font-family: var(--font-sans); font-size: 15px; fill: var(--muted); text-anchor: middle; }

@media (max-width: 900px) {
  .c-unity__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
}
@media (max-width: 560px) {
  .u-label { display: none; }   /* too small to read; the legend carries the names */
  .c-unity__stage { padding: 8px 4px 0; }
  .c-unity figcaption { padding: 16px; }
  /* Keep the drawing on screen: a list of step titles, with only the current step's text */
  .c-unity__steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .c-unity__step { padding-top: 8px; gap: 4px; }
  .c-unity__step[aria-pressed="false"] .c-unity__step-body { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .u-halo, .u-boundary { animation: none; }
  .u-halo { opacity: 0.5; }
}