/* Two Product page sections built on the captain's anonymized result slide, Draagvlak kwantificeren van de benoemde oorzaken, over verschillende teams (6 Oct):
   white cards, the share of participants behind each named cause, and the teams in the Brand Guide's team colours.
   Clustering, what did each team say (light): an invented example in the slide's look; the participants sort into four causes, then a grid cuts every cause by team, the share of each team that raised it.
   Each team's own top cause is named under the grid, and the two the callout ties together, Workload in Operations and Too little room to grow in Sales, turn light pink (captain, 6 Oct).
   Cross-sections by team, pick a team (night), the slide's white cards on the dark purple: the causes as cards with their share and a bar split by team; the team chips filter the bars, and it opens on Controls & Automation.
   The markup is the finished picture, so without JavaScript, on a phone or under reduced motion each section simply shows it; clustering.js arms them and plays each once in view, then the Replay. */

.clusters .section-head :is(h1, h2) span, .team-pick .section-head :is(h1, h2) span { display: block; margin-bottom: .18em; font-size: .62em; color: var(--magenta); }
.team-pick .section-head :is(h1, h2) span { color: var(--magenta-hot); }

/* While a story arms its first state nothing may fade or slide, so the finished picture never flashes out before it plays */
:is(.cl-stage, .tp-stage).is-arming, :is(.cl-stage, .tp-stage).is-arming * { transition: none !important; animation: none !important; }

/* ---------- Clustering, what did each team say ---------- */
.cl-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 24px; padding-top: 40px; }
.cl-stage > .example-tag { position: absolute; top: 0; right: 0; }
.cl-panel { display: flex; flex-direction: column; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(38, 84, 124, .06), 0 10px 28px -14px rgba(38, 84, 124, .22); }
.cl-panel-head { margin: 0 0 20px; font-family: var(--font-heading); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cl-panel-head b { color: var(--ink); }
.cl-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--magenta); font: 800 13px/1 var(--font-heading); color: #fff; }

/* The causes, each with its share and one dot per participant who named it, in the colour of their team; they spread over the panel when the grid beside it is taller */
.cl-causes { flex: 1; align-content: space-evenly; display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.cl-causes li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px 14px; align-items: start; }
.cl-name { padding-top: 3px; font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.4; }
.cl-share { padding-top: 5px; font: 800 19px/1 var(--font-heading); }
.cl-dots { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; }
.cl-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }

/* The grid: a cause per row, a team per column, the share of the team that raised it with a bar in the team's colour */
.cl-grid { display: grid; grid-template-columns: 28px repeat(4, minmax(0, 1fr)); gap: 6px; }
.cl-grid > .cl-num { align-self: center; }
.cl-team { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; padding: 0 2px 6px; font-family: var(--font-heading); font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.cl-team i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.cl-cell { position: relative; display: flex; align-items: center; justify-content: center; height: 58px; padding-bottom: 6px; border-radius: 12px; background: var(--soft); }
.cl-cell b { font: 800 18px/1 var(--font-heading); color: var(--ink); }
.cl-cell i { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 5px; border-radius: 3px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--v) 100% no-repeat, rgba(39, 27, 54, .08); }
/* A team's own top cause has its team's colour round it; the two the callout names are light pink */
.cl-cell.is-top { background: #fff; box-shadow: inset 0 0 0 2px var(--c); }
.cl-cell.is-hit { background: var(--blush); box-shadow: inset 0 0 0 2px var(--magenta); }
.cl-cell.is-hit b { color: var(--magenta-deep); }
.cl-tops-head { margin: 22px 0 10px; }
.cl-tops { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cl-tops li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1.35; }
.cl-tops li i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.cl-tops li b { flex: none; min-width: 6.4em; font-weight: 800; }
.cl-tops li.is-key { background: var(--blush); color: var(--magenta-deep); }
.cl-callout { display: flex; gap: 12px; margin: 20px 0 0; text-wrap: balance; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.38; }
.cl-callout::before { content: ""; flex: none; width: 4px; border-radius: 4px; background: var(--magenta); }

/* Armed: everything keeps its room, and each part waits for its step */
.cl-stage.is-armed .cl-dots i { transition: transform 700ms cubic-bezier(.3, .7, .2, 1) var(--d), opacity 250ms var(--d); }
.cl-stage.is-armed:not(.is-sorted) .cl-dots i { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); }
.cl-stage.is-armed :is(.cl-name, .cl-share) { transition: opacity 400ms; }
.cl-stage.is-armed:not(.is-named) :is(.cl-name, .cl-share) { opacity: 0; }
.cl-stage.is-armed .cl-team { transition: opacity 300ms var(--d), transform 300ms var(--d); }
.cl-stage.is-armed:not(.is-cut) .cl-team { opacity: 0; transform: translateY(-8px); }
.cl-stage.is-armed .cl-cell > * { transition: opacity 250ms var(--d), transform 350ms cubic-bezier(.3, 1.5, .5, 1) var(--d); }
.cl-stage.is-armed:not(.is-filled) .cl-cell > * { opacity: 0; transform: scale(.4); }
.cl-stage.is-armed .cl-cell:is(.is-hit, .is-top) { transition: background 350ms, box-shadow 350ms; }
.cl-stage.is-armed:not(.is-hit) .cl-cell:is(.is-hit, .is-top) { background: var(--soft); box-shadow: inset 0 0 0 2px transparent; }
.cl-stage.is-armed .cl-cell.is-hit b { transition: color 350ms; }
.cl-stage.is-armed:not(.is-hit) .cl-cell.is-hit b { color: var(--ink); }
.cl-stage.is-armed .cl-tops li { transition: opacity 300ms var(--d), transform 300ms var(--d); }
.cl-stage.is-armed:not(.is-hit) .cl-tops li { opacity: 0; transform: translateX(-8px); }
.cl-stage.is-armed .cl-callout { transition: opacity 400ms, transform 400ms; }
.cl-stage.is-armed:not(.is-hit) .cl-callout { opacity: 0; transform: translateY(6px); }

@media (max-width: 980px) {
  .cl-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .cl-stage { padding-top: 36px; gap: 14px; }
  .cl-panel { padding: 18px 14px 16px; border-radius: 16px; }
  .cl-causes { gap: 16px; }
  .cl-causes li { gap: 8px 10px; }
  .cl-name { font-size: 15px; }
  .cl-share { font-size: 17px; }
  /* The team names do not fit over four narrow columns in every language: the heads keep their colour dot, and the top causes under the grid name each team by the same dot */
  .cl-grid { grid-template-columns: 24px repeat(4, minmax(0, 1fr)); gap: 5px; }
  .cl-num { width: 24px; height: 24px; font-size: 12px; }
  .cl-team { font-size: 0; gap: 0; padding-bottom: 4px; }
  .cl-cell { height: 48px; border-radius: 10px; }
  .cl-cell b { font-size: 15px; }
  .cl-cell i { left: 8px; right: 8px; bottom: 8px; height: 4px; }
  .cl-tops-head { margin-top: 18px; }
  /* On a phone the team's name sits over its cause, both beside the dot */
  .cl-tops li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 1px 10px; padding: 7px 10px; font-size: 14px; }
  .cl-tops li b { grid-column: 2; min-width: 0; }
  .cl-tops li i { grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
  .cl-callout { font-size: 16px; }
}

/* ---------- Cross-sections by team, pick a team ---------- */
.tp-stage { position: relative; padding-top: 40px; }
.tp-stage > .example-tag { position: absolute; top: 0; right: 0; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
/* On the dark purple the chips are see-through, and the picked one is white, like the audience switch in the hero */
.tp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 17px 0 14px; border: 1.5px solid var(--line-on-dark); border-radius: 999px; background: rgba(255, 255, 255, .06); font: 700 14px/1 var(--font-heading); color: #fff; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.tp-chip.tp-all { padding-left: 17px; }
.tp-chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.tp-chip:hover { border-color: rgba(255, 255, 255, .4); }
.tp-chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: var(--ink); }
.tp-chip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.tp-causes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tp-cause { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 32px; align-items: center; padding: 20px 26px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -20px rgba(10, 7, 14, .7); }
.tp-cause > * { transition: opacity .35s; }
.tp-name { grid-row: 1 / 3; display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.42; color: var(--ink); }
.tp-name::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--magenta); }
.tp-share { align-self: end; margin: 0; font-size: 16px; color: var(--ink); }
.tp-share b { font: 800 22px/1 var(--font-heading); }
.tp-bar { align-self: start; display: flex; height: 12px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.tp-fill { display: flex; width: var(--w); height: 100%; border-radius: 99px; overflow: hidden; transform-origin: left; }
.tp-fill i { flex: var(--n) 0 0; background: var(--c); transition: opacity .35s; }

/* The picked team: its parts of the bars stay, the rest steps back, a cause it did not name fades, and one line says how many it named */
.tp-call { display: none; gap: 12px; margin: 20px 0 0; font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.35; color: #fff; }
.tp-call::before { content: ""; flex: none; width: 4px; border-radius: 4px; background: var(--magenta-hot); }
.tp-stage[data-team="0"] .tp-fill i:not(.t-0), .tp-stage[data-team="1"] .tp-fill i:not(.t-1), .tp-stage[data-team="2"] .tp-fill i:not(.t-2), .tp-stage[data-team="3"] .tp-fill i:not(.t-3), .tp-stage[data-team="4"] .tp-fill i:not(.t-4) { opacity: .16; }
.tp-stage[data-team="0"] .tp-cause:not(.has-0) > *, .tp-stage[data-team="1"] .tp-cause:not(.has-1) > *, .tp-stage[data-team="2"] .tp-cause:not(.has-2) > *, .tp-stage[data-team="3"] .tp-cause:not(.has-3) > *, .tp-stage[data-team="4"] .tp-cause:not(.has-4) > * { opacity: .32; }
.tp-stage[data-team="0"] .tp-call[data-team="0"], .tp-stage[data-team="1"] .tp-call[data-team="1"], .tp-stage[data-team="2"] .tp-call[data-team="2"], .tp-stage[data-team="3"] .tp-call[data-team="3"], .tp-stage[data-team="4"] .tp-call[data-team="4"] { display: flex; }

/* Armed: the bars grow in the dark purple, then split into the teams */
.tp-stage.is-armed .tp-fill { transition: transform 800ms cubic-bezier(.3, .7, .2, 1); }
.tp-stage.is-armed:not(.is-fill) .tp-fill { transform: scaleX(0); }
.tp-stage.is-armed .tp-fill i { transition: background 400ms var(--d), opacity .35s; }
.tp-stage.is-armed:not(.is-split) .tp-fill i { background: var(--aubergine); }
.tp-stage.is-armed .tp-share { transition: opacity 400ms; }
.tp-stage.is-armed:not(.is-fill) .tp-share { opacity: 0; }

@media (max-width: 900px) {
  .tp-cause { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
  .tp-name { grid-row: auto; }
}
@media (max-width: 720px) {
  .tp-stage { padding-top: 36px; }
  .tp-chips { gap: 6px; }
  .tp-chip { min-height: 38px; padding: 0 13px 0 11px; font-size: 13px; }
  .tp-chip.tp-all { padding-left: 13px; }
  .tp-cause { padding: 16px; border-radius: 14px; }
  .tp-name { gap: 12px; font-size: 16px; }
  .tp-name::before { width: 14px; height: 14px; }
  .tp-share b { font-size: 20px; }
  .tp-call { font-size: 17px; }
}