/* ==========================================================================
   "We are what we sell" band: the AI agents that run Futuvara
   Brand §10 rule 5, "We are what we sell" band (4.8.0; decisions D-38, D-40,
   D-41). Each avatar sits apart, with no shared frame. Avatars are round
   (BR-S05 "avatars 50%"). Copy on black uses the design system's greys
   (BR-K07).

   Text only on click (D-40, Guy, 2026-10-25): no name, label or other text
   sits beside an avatar. Each avatar is a button that opens its own round
   panel: "AI agent", the agent's name, its role and a short description of
   its work. Above the rows, one line always says every face is an AI agent
   (condition iv; the line approved in D-41).

   The panel is a popover (sell-band.js adds the `popover` attribute), so it
   sits above the moving rows and is never cut off by them. While open, the
   whole band is a clear layer that lets clicks through; only the round panel
   takes them. Three red rings echo out from the agent's face, as the clover
   field's echo does (site.css `fv-cloverEcho`), and the panel opens from its
   centre. A click outside, Escape, the close button or the face again closes
   it. With reduced motion the panel simply appears.

   Without the script (condition vi): every avatar shows its name, "AI agent",
   role and description beneath it, in a 12rem column, and nothing is hidden.

   Three rows that run endlessly (Guy, 2026-10-25). Without the script, and
   with reduced motion, each row is a still row that scrolls sideways. With
   the script, sell-band.js copies each row's avatars once after the
   originals (hidden from screen readers, out of the tab order) and the row
   drifts by exactly one set, so the loop never shows a seam. Rows 1 and 3
   drift left, row 2 right. A row stops while the pointer is on it and while
   the band is off screen; all three stop while a panel is open. "Pause the
   rows" stops all three (WCAG 2.2.2) and then reads "Play the rows". Paused,
   each row scrolls sideways with the mouse or trackpad, its copies still in
   place, starting exactly where it stopped, so it never moves. A keyboard
   visitor who tabs into a row gets that row still, so focus never chases a
   moving target.

   The drift is linear: a constant speed is what makes a loop read as calm,
   and the brand ease would surge at every turn.

   Above the rows (Freya's fixes 1 and 3, Guy, 2026-10-25): the pause button,
   so a keyboard visitor reaches it before the 55 avatars, then "Skip past
   the agents", a link that shows only while it has keyboard focus. It sits
   over the right end of the same line, so showing it moves nothing. Under
   380px wide the focused link sits just under the Pause button instead.
   ========================================================================== */
.fv-site .sell-band{
  /* design system tokens this band uses that the site does not yet declare
     (Design-tokens.md: typography.css, motion.css and colors.css) */
  --type-eyebrow:.78rem; --tracking-caps:.16em; --dur-menu:.3s;
  --sa-w:12rem; --sa-gap:var(--space-6); --sa-face:72px;
  --sa-disc:min(20rem, calc(100vw - 2 * var(--space-3)));
}
.fv-site .sell-band .sa-band{ position:relative; display:grid; gap:var(--space-5); margin-top:var(--space-3); }

/* The line that says what the faces are (condition iv): always visible,
   before the avatars, in white so it reads before anything in the rows. */
.fv-site .sell-band .sa-note{
  margin:var(--space-section-tight) 0 0; color:var(--white);
  font-size:1.125rem; line-height:1.5; max-width:var(--measure);
}

/* A row runs the full width of the screen. Still, its first avatar lines up
   with the heading; the padding at top and bottom keeps the focus ring in. */
.fv-site .sell-band .sa-row{
  margin-inline:calc(50% - 50vw);
  padding:var(--space-3) max(var(--space-gutter), calc((100vw - var(--container)) / 2));
  overflow-x:auto; overscroll-behavior-x:contain;
}
.fv-site .sell-band .sa-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:flex-start; width:max-content;
}
/* Without the script each avatar has a column for its words beneath it;
   with it, an avatar is only its face. */
.fv-site .sell-band .sa{ flex:none; width:var(--sa-w); margin-inline-end:var(--sa-gap); min-width:0; }
.fv-site .sell-band .sa-ready .sa{ width:auto; }

/* The button: the face. Its name for screen readers is the face's alt text,
   which says it is an AI-generated image of the agent, an AI agent. */
.fv-site .sell-band .sa-btn{
  display:block; margin:0; padding:0; border:0; border-radius:50%; background:none; color:inherit; font:inherit;
  cursor:default;
}
.fv-site .sell-band .sa-ready .sa-btn{ cursor:pointer; }
.fv-site .sell-band .sa-btn:focus{ outline:none; }
.fv-site .sell-band .sa-face{
  display:block; width:var(--sa-face); height:var(--sa-face); border-radius:50%; object-fit:cover;
  background:var(--surface-dark);
  transition:transform var(--dur-hover) var(--ease-out-expo);
}

/* Feedback: the face lifts on hover, and keyboard focus gets the same lift
   plus a white ring round the face, as clear as hover (design system). The
   face whose panel is open keeps a red ring, so the panel's owner is plain. */
.fv-site .sell-band .sa-btn:hover .sa-face,
.fv-site .sell-band .sa-btn:focus-visible .sa-face{ transform:translateY(var(--lift-hover)); }
.fv-site .sell-band .sa-ready .sa-btn[aria-expanded="true"] .sa-face{ outline:2px solid var(--red, #ff1717); outline-offset:4px; }
.fv-site .sell-band .sa-btn:focus-visible .sa-face{ outline:3px solid var(--white); outline-offset:4px; }

/* ---------- the words, without the script: beneath each face ---------- */
.fv-site .sell-band .sa-disc p{ margin:0; }
.fv-site .sell-band .sa-panel{ margin-top:var(--space-3); }
.fv-site .sell-band .sa-kind{
  display:block; color:var(--white); font-weight:700; font-size:var(--type-eyebrow);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; line-height:1.3;
}
.fv-site .sell-band .sa-disc .sa-name{ margin-top:var(--space-1); color:var(--white); font-weight:400; font-size:1rem; line-height:1.3; }
.fv-site .sell-band .sa-disc .sa-role{ margin-top:var(--space-2); color:var(--muted-dark); font-size:.875rem; line-height:1.4; }
.fv-site .sell-band .sa-disc .sa-desc{ margin-top:var(--space-2); color:var(--muted-dark); font-size:.875rem; line-height:1.45; }

/* ---------- the round panel, with the script ----------
   The popover is a clear layer over the whole screen; sell-band.js sets
   --ax/--ay (the centre of the face), --aw (its size) and --px/--py (the
   panel's centre: above the face if it fits, else below, else over it). */
.fv-site .sell-band .sa-ready .sa-panel{
  position:fixed; inset:0; width:auto; height:auto; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:transparent; color:var(--ink);
  overflow:visible; pointer-events:none;
}
.fv-site .sell-band .sa-ready .sa-panel::backdrop{ background:transparent; }
.fv-site .sell-band .sa-ready .sa-disc{
  position:absolute; left:var(--px, 50%); top:var(--py, 50%);
  width:var(--sa-disc); height:var(--sa-disc);
  margin:calc(var(--sa-disc) / -2) 0 0 calc(var(--sa-disc) / -2);
  box-sizing:border-box; padding:0 calc(var(--sa-disc) * .14);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border-radius:50%; background:var(--white); box-shadow:var(--shadow-card-dark);
  pointer-events:auto;
  animation:sa-open var(--dur-menu) var(--ease-out-expo) both;
}
.fv-site .sell-band .sa-ready .sa-disc .sa-kind{ color:var(--red-deep); }
.fv-site .sell-band .sa-ready .sa-disc .sa-name{ margin-top:var(--space-2); color:var(--ink); font-weight:800; font-size:1.25rem; line-height:1.2; }
.fv-site .sell-band .sa-ready .sa-disc .sa-role{ margin-top:var(--space-2); color:var(--muted); }
.fv-site .sell-band .sa-ready .sa-disc .sa-desc{ margin-top:var(--space-3); color:var(--muted-2); }

/* Close: a dark round button on the panel's edge, at its top right, so it
   takes no room from the words. 44px, as every target on the site. */
.fv-site .sell-band .sa-close{
  position:absolute; left:85.36%; top:14.64%; width:44px; height:44px; margin:-22px 0 0 -22px;
  display:grid; place-items:center; padding:0; border:2px solid var(--white); border-radius:50%;
  background:var(--ink); color:var(--white); cursor:pointer;
  transition:transform var(--dur-hover) var(--ease-out-expo);
}
.fv-site .sell-band .sa-close svg{ width:14px; height:14px; }
.fv-site .sell-band .sa-close:hover,
.fv-site .sell-band .sa-close:focus-visible{ transform:translateY(var(--lift-hover)); }
.fv-site .sell-band .sa-close:focus{ outline:none; }
.fv-site .sell-band .sa-close:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }

/* The echo: three red rings ripple out from the face and fade, the values of
   the clover field's echo (site.css fv-cloverEcho), 0.13s apart. */
.fv-site .sell-band .sa-ring{
  position:absolute; left:var(--ax, -999px); top:var(--ay, -999px);
  width:var(--aw, 72px); height:var(--aw, 72px); margin:calc(var(--aw, 72px) / -2) 0 0 calc(var(--aw, 72px) / -2);
  border:2px solid var(--red, #ff1717); border-radius:50%; opacity:0; pointer-events:none;
  animation:sa-echo 1s cubic-bezier(.22,.61,.36,1) forwards;
}
.fv-site .sell-band .sa-ring:nth-child(2){ animation-delay:.13s; }
.fv-site .sell-band .sa-ring:nth-child(3){ animation-delay:.26s; }
@keyframes sa-echo{ 0%{ transform:scale(1); opacity:0; } 30%{ opacity:.4; } 100%{ transform:scale(3); opacity:0; } }
@keyframes sa-open{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }

/* ---------- the endless rows ---------- */
.fv-site .sell-band .sa-loop .sa-row{ overflow:hidden; }
.fv-site .sell-band .sa-loop .sa-list{ animation:sa-drift var(--sa-dur, 90s) linear infinite; will-change:transform; }
.fv-site .sell-band .sa-loop .sa-list[data-dir="right"]{ animation-direction:reverse; }
@keyframes sa-drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.fv-site .sell-band .sa-loop .sa-row:hover .sa-list,
.fv-site .sell-band .sa-loop .sa-row:focus-within .sa-list,
.fv-site .sell-band .sa-loop.sa-hold .sa-list,
.fv-site .sell-band .sa-loop.sa-paused .sa-list,
.fv-site .sell-band .sa-loop.sa-away .sa-list{ animation-play-state:paused; }
/* a keyboard visitor's row: still, scrolling sideways, copies out of the way */
.fv-site .sell-band .sa-loop .sa-row.sa-still{ overflow-x:auto; }
.fv-site .sell-band .sa-loop .sa-row.sa-still .sa-list{ animation:none; }
.fv-site .sell-band .sa-band:not(.sa-paused) .sa-row.sa-still .sa-clone{ display:none; }
/* paused rows: still and scrolling sideways, for the mouse and trackpad. The
   copies stay, so sell-band.js can scroll each row to exactly where it
   stopped. */
.fv-site .sell-band .sa-loop.sa-paused .sa-row{ overflow-x:auto; }
.fv-site .sell-band .sa-loop.sa-paused .sa-list{ animation:none; }

/* Above the rows: the sideways hint while the rows are still, the pause
   button while they run (sell-band.js adds `.sa-run`). One line of the same
   height either way. */
.fv-site .sell-band .sa-foot{ position:relative; display:flex; align-items:center; min-height:44px; margin:var(--space-3) 0 0; }
.fv-site .sell-band .sa-hint{ color:var(--muted-dark); font-size:.875rem; }
.fv-site .sell-band .sa-pause{ display:none; min-height:44px; }
.fv-site .sell-band .sa-foot.sa-run .sa-hint{ display:none; }
.fv-site .sell-band .sa-foot.sa-run .sa-pause{ display:inline-flex; align-items:center; }
.fv-site .sell-band .sa-pause:focus-visible{ outline:3px solid var(--white); outline-offset:3px; }

/* "Skip past the agents": out of sight until it has focus, then a solid
   button over the right end of the line, so nothing moves and no text shows
   through it. It sits above the drifting rows, which paint in their own
   layer. */
.fv-site .sell-band .sa-foot .sa-skip:not(:focus){
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.fv-site .sell-band .sa-foot .sa-skip:focus{
  position:absolute; top:0; right:0; z-index:2; min-height:44px; justify-content:center;
  background:var(--surface-dark); color:var(--white);
  outline:3px solid var(--white); outline-offset:3px; transition:none;
}
/* Under 380px the link and the Pause button do not fit side by side, so the
   focused link sits just under the button, clear of it and its ring. */
@media (max-width:379px){
  .fv-site .sell-band .sa-foot .sa-skip:focus{ top:calc(100% + var(--space-2)); right:auto; left:0; }
}
/* Where the skip link lands: the footer takes focus so the next Tab starts
   there. It is not a control, so it gets no ring. */
.fv-site .site-footer:focus{ outline:none; }

/* Phones: smaller faces and gaps, and narrower columns without the script;
   still three rows. */
@media (max-width:599px){
  .fv-site .sell-band{ --sa-w:9.5rem; --sa-gap:var(--space-5); --sa-face:64px; }
}

@media (prefers-reduced-motion: reduce){
  .fv-site .sell-band .sa-face,
  .fv-site .sell-band .sa-close{ transition:none; }
  .fv-site .sell-band .sa-btn:hover .sa-face,
  .fv-site .sell-band .sa-btn:focus-visible .sa-face,
  .fv-site .sell-band .sa-close:hover,
  .fv-site .sell-band .sa-close:focus-visible{ transform:none; }
  .fv-site .sell-band .sa-ready .sa-disc{ animation:none; }
  .fv-site .sell-band .sa-ring{ display:none; }
  .fv-site .sell-band .sa-loop .sa-list{ animation:none; }
}