/* ---------- win: everyone on board wins ---------- */
/* Your company drawn as a ship, top down (YOUR COMPANY): management on the
   bridge amidships, your people on the foredeck, the AI systems and
   automations aft, SHIPdock's small AI-ready vessel alongside.

   The story plays in five steps tied to scroll. While the panel is pinned
   under the nav the vessel comes alongside, the trust lines draw (white),
   your people and then management turn from hollow REGULAR marks into solid
   AI-READY ones, a scan turns the hull AI-native from stern to bow, and the
   money lines draw (green and nothing else, every arrow at the receiver).
   Five of the thirty people hold a paid AI role (AI Heroes, AI Champions):
   the same mark in purple, which means that and nothing else. They turn
   first, and one label with a plain hairline leader names them.
   A WebGL canvas over the drawing streams trust and money along the lines,
   locks a ring onto each mark that turns AI-ready, leaves the vessel's wake
   and carries the scan line.

   The markup and this file's defaults are the settled final frame (no JS,
   ?still, reduced motion). js/sections/win.js adds .is-staged and the
   cumulative .is-s1 to .is-s4, which hold the earlier states. Wide: bow to
   the right, the five steps in columns. Below 1100px: a bow-up drawing with
   one step at a time. */

.win { padding: var(--section-y) 0; background: var(--bg); border-top: 1px solid var(--line); }

.win-deal { --win-gap: clamp(32px, 3.4vw, 56px); margin-top: clamp(64px, 6.4vw, 96px); }

/* the pinned run: the panel holds under the nav while the story plays.
   The run's length is a block after the panel (sticky cannot travel into padding). */
.win-deal.is-pinned .win-run::after { content: ""; display: block; height: var(--win-run, 110vh); }
.win-deal.is-pinned .win-fig { position: sticky; top: var(--win-top, calc(var(--nav-h) + 24px)); }

/* the drawing sheet, with the particle canvas laid exactly over it */
.win-fig { position: relative; margin: 0; }
.win-draw { position: relative; padding: clamp(20px, 2.4vw, 34px) clamp(12px, 1.8vw, 26px) 0; }
.win-svg { width: 100%; height: auto; overflow: hidden; }
.win-svg-tall { display: none; }
.win-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.win.no-webgl .win-gl { display: none; }

.win-svg text { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; fill: var(--fg-3); }
.win-svg .wd-name { font-family: var(--sans); font-size: 17px; font-weight: 520; letter-spacing: -0.01em; fill: var(--fg); }
.win-svg .wd-ship { fill: var(--fg-2); }
.win-svg .wd-ship-native { fill: var(--fg); }
.win-svg .wd-box-label { letter-spacing: 0.02em; fill: var(--fg-2); }
.win-svg-tall text { font-size: 12.5px; }
.win-svg-tall .wd-name { font-size: 14px; }

/* the ship: a plain outline while regular; AI-native adds the bright hull and its keyline */
.wd-hull { fill: var(--bg); stroke: var(--fg-3); stroke-width: 1.2; }
.wd-hull-on { fill: none; stroke: var(--fg); stroke-width: 1.6; }
.wd-keyline,
.wd-vessel-key { fill: none; stroke: var(--line-3); stroke-width: 1; }
.wd-box { fill: none; stroke: var(--fg-2); stroke-width: 1.2; }
.wd-box-split { fill: none; stroke: var(--line-2); }
.wd-bridge { fill: var(--bg); stroke: var(--fg-2); stroke-width: 1.2; }
.wd-vessel { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }
.wd-mark { color: var(--fg); }
.wd-hit { fill: transparent; stroke: none; }
.win-svg .flow { pointer-events: none; }

/* people and management: solid and bright once AI-ready */
.wd-person { fill: var(--fg); stroke: var(--fg); stroke-width: 1; }
.wd-node { fill: var(--fg); stroke: var(--fg); stroke-width: 1.5; }
.wd-ring { fill: none; stroke: var(--fg); stroke-width: 1; }

/* your people in a paid AI role: the same mark, in purple. The leader stays white ink. */
.wd-person.wd-role { fill: var(--role); stroke: var(--role); }
.win-svg .wd-role-label { fill: var(--role); }
.win-svg-tall .wd-role-label { letter-spacing: 0.02em; }
.wd-leader { fill: none; stroke: var(--line-3); }

/* state tags: outlined REGULAR, inverted AI-READY */
.wd-tag-reg rect { fill: none; stroke: var(--line-2); }
.win-svg .wd-tag-reg text,
.win-svg .wd-tag-ai text { letter-spacing: 0.08em; }
.wd-tag-ai rect { fill: var(--fg); }
.win-svg .wd-tag-ai text { fill: var(--bg); }
.wd-tag-reg { opacity: 0; }

/* flows: trust in white ink, money in green */
.flow-line { fill: none; }
.flow-main .flow-line { stroke: var(--fg); stroke-width: 2; }
.flow-main .flow-end,
.win-svg .flow-main text { fill: var(--fg); }
.flow-trust .flow-line { stroke: var(--fg-2); stroke-width: 1.2; }
.flow-trust .flow-end,
.win-svg .flow-trust text { fill: var(--fg-2); }
.flow-gain .flow-line { stroke: var(--gain); stroke-width: 1.6; }
.flow-gain .flow-end,
.win-svg .flow-gain .wd-tag text { fill: var(--gain); }
.wd-tag rect { fill: var(--gain-dim); }
.wd-tag .wd-tag-base { fill: var(--bg); }

/* ---- the story: every rule below holds a state before the final frame ---- */

.win-deal.is-instant * { transition: none !important; }

/* a line draws in when its step arrives: trust first, then money */
.win-deal.is-staged .flow-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out) var(--d, 0s), opacity 0.9s var(--ease-out); }
.win-deal.is-staged .flow-gain .flow-line { transition-duration: 1.4s, 0.9s; }
.win-deal.is-staged .flow-end,
.win-deal.is-staged .flow-label { transition: opacity 0.5s var(--ease-out) calc(var(--d, 0s) + 0.6s); }
.win-deal.is-staged .flow:not(.is-on) .flow-line { stroke-dashoffset: 1; transition-duration: 0.35s, 0.35s; transition-delay: 0s; }
.win-deal.is-staged .flow:not(.is-on) .flow-end,
.win-deal.is-staged .flow:not(.is-on) .flow-label { opacity: 0; transition-duration: 0.2s; transition-delay: 0s; }

/* regular until step 4: hollow, dim marks, the paid roles too. Then the roles turn
   first (purple, with their label) and the wave turns everyone else AI-ready */
.wd-person,
.wd-node { transition: fill 0.45s var(--ease-out) var(--dl, 0s), stroke 0.45s var(--ease-out) var(--dl, 0s); }
.wd-ring,
.wd-role-note,
.wd-tag-reg,
.wd-tag-ai { transition: opacity 0.4s var(--ease-out) var(--dl, 0s); }
.win-deal.is-staged:not(.is-s3) .wd-person,
.win-deal.is-staged:not(.is-s3) .wd-node { fill: rgba(233, 234, 234, 0); stroke: var(--fg-3); transition-delay: 0s; }
.win-deal.is-staged:not(.is-s3) .wd-ring,
.win-deal.is-staged:not(.is-s3) .wd-role-note,
.win-deal.is-staged:not(.is-s3) .wd-state .wd-tag-ai { opacity: 0; transition-delay: 0s; }
.win-deal.is-staged:not(.is-s3) .wd-state .wd-tag-reg { opacity: 1; transition-delay: 0s; }

/* the name gains AI-NATIVE once the scan has passed the bow */
.wd-ship-native { transition: fill-opacity 0.5s var(--ease-out) 1.5s; }
.win-deal.is-staged:not(.is-s4) .wd-ship-native { fill-opacity: 0; transition-duration: 0.2s; transition-delay: 0s; }

/* live: once its particles run, a line steps back to a quiet track */
.win-deal.is-live .flow.is-flowing .flow-line { opacity: 0.4; }
.win-deal.is-live .flow-main.is-flowing .flow-line { opacity: 0.46; }

/* pointing at or focusing a party lights its lines and dims the rest */
.win-svg [data-p] { transition: opacity 0.3s var(--ease-out); }
.win-deal[data-focus="mgmt"] .win-svg [data-p]:not([data-p~="mgmt"]),
.win-deal[data-focus="people"] .win-svg [data-p]:not([data-p~="people"]),
.win-deal[data-focus="us"] .win-svg [data-p]:not([data-p~="us"]) { opacity: 0.18; }
.win-deal.is-live[data-focus="mgmt"] .flow[data-p~="mgmt"].is-flowing .flow-line,
.win-deal.is-live[data-focus="people"] .flow[data-p~="people"].is-flowing .flow-line,
.win-deal.is-live[data-focus="us"] .flow[data-p~="us"].is-flowing .flow-line { opacity: 0.74; }
.win-deal[data-focus="mgmt"] .win-party:not([data-party="mgmt"]),
.win-deal[data-focus="people"] .win-party:not([data-party="people"]),
.win-deal[data-focus="us"] .win-party:not([data-party="us"]) { opacity: 0.45; }

/* ---- under the drawing: the key, the passage track and the five steps ---- */

.win-cap { padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2.6vw, 34px) clamp(24px, 2.8vw, 36px); }

.win-key { position: absolute; top: clamp(18px, 2vw, 28px); right: clamp(18px, 2.6vw, 34px); display: flex; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.win-key li { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--fg-3); }
.win-sample { flex: none; width: 22px; border-top: 2px solid var(--fg); }
.win-sample-gain { border-top-color: var(--gain); }

/* the nav's passage-plan grammar: dotted ahead, solid made good, a waypoint per step */
.win-track { --span: 80%; position: relative; height: 12px; margin-bottom: 18px; }
.win-track-plan { position: absolute; left: 0; top: 5.5px; width: var(--span); height: 1px; overflow: visible; }
.win-track-plan line { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.35; }
.win-track-made { position: absolute; left: 0; top: 5.25px; width: var(--span); height: 1.5px; background: var(--fg); transform: scaleX(var(--p, 1)); transform-origin: 0 50%; }
.win-wp { --k: 0; position: absolute; top: 2px; left: calc(var(--k) / 4 * var(--span) - 4px); width: 8px; height: 8px; background: var(--fg); border: 1px solid var(--fg); transition: background-color 0.3s ease, border-color 0.3s ease; }
.win-wp:nth-of-type(3) { --k: 1; }
.win-wp:nth-of-type(4) { --k: 2; }
.win-wp:nth-of-type(5) { --k: 3; }
.win-wp:nth-of-type(6) { --k: 4; }
.win-deal.is-staged .win-wp:not(.is-passed) { background: var(--bg-1); border-color: var(--fg-2); }
.win-track-ship { display: none; position: absolute; top: 0; left: calc(var(--p, 1) * var(--span) - 6px); width: 12px; height: 12px; background: var(--bg-1); border: 1.5px solid var(--fg); border-radius: 50%; }
.win-track-ship::after { content: ""; position: absolute; inset: 3px; background: var(--fg); border-radius: 50%; }
.win-deal.is-staged .win-track-ship { display: block; }
.win-deal.is-auto .win-track-made { transition: transform 0.9s var(--ease-out); }
.win-deal.is-auto .win-track-ship { transition: left 0.9s var(--ease-out); }

.win-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.win-step { padding-right: clamp(16px, 2vw, 28px); transition: opacity 0.4s var(--ease-out); }
.win-step strong { display: block; font-size: 16px; font-weight: 540; letter-spacing: -0.01em; line-height: 1.35; color: var(--fg); }
.win-step > span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
.win-nb { white-space: nowrap; }
.win-deal.is-staged .win-step:not(.is-active):not(.is-past) { opacity: 0.4; }

/* ---- the three parties: the money each one gets (green), then one more line ----
   Glyphs and arrows hang in a 32px gutter so every line of text starts on one edge. */
.win-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--win-gap); margin-top: clamp(56px, 5.6vw, 80px); }
.win-party { padding-left: 32px; outline-offset: 12px; transition: opacity 0.3s var(--ease-out); }
.win-party-name { display: flex; align-items: center; gap: 14px; margin-left: -32px; font-size: clamp(1.5rem, 2.2vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.win-glyph { flex: none; width: 18px; height: 18px; color: var(--fg); }
.win-glyph-role { fill: var(--role); }
.win-gain-line { position: relative; margin-top: 22px; font-size: 1.25rem; font-weight: 540; letter-spacing: -0.015em; line-height: 1.3; color: var(--gain); }
.win-gain-line svg { position: absolute; left: -32px; top: calc(0.65em - 5px); width: 20px; height: 10px; }
.win-more { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
.win-link { margin-top: 14px; font-size: 15.5px; line-height: 1.5; }

@media (min-width: 1100px) {
  /* the money lines read across as one row */
  @supports (grid-template-rows: subgrid) {
    .win-party { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  }
}

@media (max-width: 1099px) {
  .win-svg-wide { display: none; }
  .win-svg-tall { display: block; }

  /* one step at a time: the track spans the caption, the other steps stay for screen readers */
  .win-track { --span: 100%; margin-bottom: 16px; }
  .win-steps { display: block; }
  .win-step { padding-right: 0; }
  .win-step + .win-step { margin-top: 18px; }
  .win-step strong { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; }
  .win-step > span { font-size: 15.5px; line-height: 1.5; }
  .win-deal.is-staged .win-step + .win-step { margin-top: 0; }
  .win-deal.is-staged .win-step:not(.is-active) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .win-deal:not(.is-staged) .win-track { display: none; }
}

@media (min-width: 760px) and (max-width: 1099px) {
  /* the drawing beside its caption */
  .win-fig { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; }
  .win-draw { padding: 28px 0 28px 22px; }
  .win-cap { padding: 64px clamp(24px, 4vw, 44px) 28px clamp(28px, 5vw, 60px); }
  .win-deal.is-staged .win-step { min-height: 140px; }
  .win-step strong { font-size: clamp(1.5rem, 2.2vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.15; }
  .win-step > span { margin-top: 10px; font-size: 16.5px; }
  .win-parties { margin-top: clamp(56px, 7vw, 72px); }
}

@media (max-width: 899px) {
  /* three columns get too narrow for the money lines: the parties stack */
  .win-parties { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .win-gain-line { margin-top: 18px; }
}

@media (max-width: 759px) {
  .win-draw { padding: 12px 8px 0; }
  .win-svg-tall { max-width: 430px; margin: 0 auto; }
  .win-cap { padding: 14px 16px 16px; }
  .win-track { margin-bottom: 12px; }
  .win-step > span { margin-top: 4px; font-size: 15px; line-height: 1.45; }
  /* two lines of detail under a one-line title, so the panel keeps its height from step to step */
  .win-deal.is-staged .win-step { min-height: 74px; }
  .win-key { top: 14px; right: 14px; flex-direction: column; gap: 5px; }
  .win-key li { gap: 8px; }
  .win-sample { width: 16px; }
  .win-parties { margin-top: 56px; }
}

@media (max-width: 345px) {
  /* the smallest phones: the sheet runs edge to edge so the labels keep their size */
  .win-fig { margin-inline: calc(-1 * var(--pad)); border-inline: 0; }
  .win-draw { padding-inline: 4px; }
}