/* ==========================================================================
   Collsta website — Section 7: AI / Board Intelligence

   Design brief in one line: BOARD = source of truth, AI = a layer on top.
   That hierarchy is carried by the layout, not by copy — the board keeps the
   wider column, the solid white surface and the real content; the panel is a
   narrower, tinted, secondary surface whose every line restates something the
   board already holds. Nothing here looks like a chat app: no assistant
   persona, no bubbles, no sparkle, no neon.

   Motion is the same contract as sections 2, 5 and 6 — CSS keyframes parked
   at `animation-play-state: paused`, with site.js deciding only when they may
   run. Transform and opacity only.

   The loop, as fractions of --ai-cycle:
     0 → 9%     BOARD READY    the board sits on its own
     9 → 17%    ANALYSE        "Summarize board" activates, one soft sweep
                               crosses the panel, its state line flips
     17 → 29%   SUMMARY        counts reveal, their bars grow
     29 → 41%   TOP PICKS
     36 → 48%   VOTING         the three voted items on the BOARD and the
                               picks that came from them highlight together —
                               the one moment that shows the panel is reading
                               the board's own votes
     41 → 53%   GAPS
     53 → 65%   PLAN
     65 → 76%   ASK
     76 → 93%   CALM           the whole read-out holds
     93 → 100%  RESET          the panel body fades so the restart has no snap
   ========================================================================== */

.ai{
  --ai-cycle:11s;
  --ai-purple-ink:#5A4FA8;

  /* Purple accents inside the panel sit on --surface-soft, not on white, and
     --purple measures 4.43:1 there — just under AA for the 10–11px labels
     that use it. Nudged toward navy until it clears: 5.16:1 on the soft
     surface, 5.68:1 on white. Same hue, same family as the other sections'
     ink variants. */
  --ai-purple-soft:#5C55D3;

  position:relative;
  background:var(--surface-page);
  padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,100px);
  overflow:hidden;
  isolation:isolate;
}
@supports (overflow:clip){
  .ai{overflow:clip}
}
@supports (color:color-mix(in oklab,red,blue)){
  .ai{
    --ai-purple-ink:color-mix(in oklab,var(--purple-bright) 72%,var(--navy));
    --ai-purple-soft:color-mix(in oklab,var(--purple) 90%,var(--navy));
  }
}

.ai__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ai__blob{filter:blur(30px)}
.ai__blob--a{width:min(34vw,440px);aspect-ratio:1;top:3%;right:-8%;opacity:.28}
.ai__blob--b{width:min(28vw,380px);aspect-ratio:1;bottom:4%;left:-8%;opacity:.28}

/* ==========================================================================
   Copy
   ========================================================================== */
.ai__copy{position:relative;z-index:2;max-width:54rem}
.ai__eyebrow-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:clamp(12px,1.6vw,18px);
}
.ai__status{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--lavender-pale);
  color:var(--navy);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.ai__status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--lavender);
}
.ai__title{
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  text-wrap:balance;
}
.ai__title-accent{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ai__sub{
  margin:clamp(14px,1.8vw,20px) 0 0;
  max-width:44rem;
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body);
  color:var(--text-body);
  text-wrap:pretty;
}
.ai__sub b{font-weight:var(--fw-semibold);color:var(--navy)}
.ai__benefit{
  margin:clamp(12px,1.5vw,16px) 0 0;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-small);
  color:var(--purple);
}
.ai__benefit::before{
  content:"";width:18px;height:1.5px;border-radius:2px;
  background:var(--grad-underline);
}

/* ==========================================================================
   Scene
   ========================================================================== */
.ai__scene{position:relative;z-index:2;margin-top:var(--section-copy-gap)}
/* The board takes the wider column. This is the hierarchy, stated in the
   grid: the thing being read is bigger than the thing reading it. */
.ai__split{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(14px,1.8vw,26px);
  align-items:start;
}

/* ---- The board ---- */
.ai-board{
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.ai-board__head{
  display:flex;align-items:center;gap:clamp(11px,1.2vw,15px);
  padding:clamp(13px,1.3vw,18px) clamp(14px,1.4vw,20px);
  background:var(--grad-lavender);
  border-bottom:1px solid var(--border);
}
.ai-cover{
  position:relative;flex:none;
  width:clamp(46px,4.4vw,58px);aspect-ratio:1;
  border-radius:14px;overflow:hidden;
  border:3px solid #fff;
  box-shadow:var(--shadow-md);
  background:linear-gradient(150deg,#FFE7E9,#FF7A85 62%,#0D0F3C);
}
.ai-cover__emoji{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(19px,1.9vw,24px);line-height:1;
}
.ai-board__meta{flex:1;min-width:0}
.ai-board__title{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:clamp(16px,1.45vw,20px);
  letter-spacing:var(--ls-tight);
  color:var(--navy);line-height:1.2;
}
.ai-board__facts{
  margin-top:6px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--text-meta);
}
.ai-people{display:inline-flex}
.ai-face{
  width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:8px;color:#fff;
  border:1.5px solid #fff;
}
.ai-face + .ai-face{margin-left:-6px}
.ai-face--a{background:linear-gradient(160deg,#FFB3B9,#FF7A85)}
.ai-face--b{background:linear-gradient(160deg,#C9BEF7,#735CFF)}
.ai-face--c{background:linear-gradient(160deg,#FFE7E9,#FF9AA3)}
.ai-face--d{background:var(--lavender-pale);color:var(--navy)}

/* Rows, not media cards. A 42-item board reads as a list; using the picture
   grid again here would repeat sections 4 and 5 and make six items look like
   the whole board. */
ul.ai-items{
  list-style:none;margin:0;padding:clamp(9px,.9vw,13px);
  display:flex;flex-direction:column;gap:clamp(5px,.5vw,7px);
}
.ai-item{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;
  border-radius:var(--radius-md);
  background:var(--bg-soft);
  border:1px solid transparent;
}
.ai-item__src{
  flex:none;
  width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;
  background:#fff;
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:9.5px;
}
.ai-item__src.badge__mark--ig{font-size:7.5px}
/* Source marks this section adds on top of the shared set. */
.badge__mark--shop{color:#B0466A}
.ai-item__body{flex:1;min-width:0;display:block}
.ai-item__title{
  display:block;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(12.5px,1.02vw,13.5px);
  color:var(--navy);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ai-item__meta{
  display:block;margin-top:2px;
  font-size:11px;color:var(--text-meta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ai-item__vote{
  flex:none;
  padding:4px 9px;border-radius:var(--radius-pill);
  background:var(--lavender-pale);
  color:var(--navy);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10.5px;white-space:nowrap;
}
.ai-item__vote--quiet{background:#fff;color:var(--text-meta)}

.ai-board__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:0 clamp(14px,1.4vw,20px) clamp(13px,1.3vw,17px);
}
.ai-board__more{font-size:11.5px;color:var(--text-meta)}
/* The trigger reads as a board action, because that is what it is — the
   intelligence is something the board offers, not a separate product. */
.ai-act{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:var(--radius-pill);
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--text-meta);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:11.5px;white-space:nowrap;
}

/* ---- The panel ---- */
.ai-panel{
  position:relative;
  border-radius:var(--radius-lg);
  /* Tinted rather than white: it must not read as a second board. */
  background:var(--surface-soft);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.ai-panel__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:clamp(12px,1.2vw,16px) clamp(13px,1.3vw,18px);
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.ai-panel__name{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:12.5px;letter-spacing:var(--ls-tight);
  color:var(--navy);
}
.ai-panel__state{position:relative;display:inline-block;min-width:82px;text-align:right}
.ai-state{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10.5px;color:var(--text-meta);
  white-space:nowrap;
}
.ai-state--done{position:absolute;inset:0;opacity:0;color:var(--purple)}

/* One pass, once per cycle, at low opacity. This is the entire "it is
   thinking" treatment — no shimmer loop, no pulsing glow. */
.ai-sweep{
  position:absolute;inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(100deg,
    rgba(184,171,242,0) 38%,
    rgba(184,171,242,.20) 50%,
    rgba(184,171,242,0) 62%);
}

.ai-panel__body{padding:clamp(12px,1.2vw,16px)}
.ai-mod + .ai-mod{margin-top:clamp(13px,1.3vw,18px)}
.ai-mod__head{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-meta);
  margin-bottom:9px;
}
.ai-mod__note{
  font-size:10px;letter-spacing:0;text-transform:none;
  color:var(--ai-purple-soft);
}

/* Summary — the bar is the count animation: a scaleX, nothing that reflows. */
ul.ai-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ai-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.ai-row__label{font-size:12px;color:var(--text-body);white-space:nowrap}
.ai-row__track{height:5px;border-radius:999px;background:#fff;overflow:hidden}
.ai-bar{
  display:block;height:100%;width:var(--w,100%);
  border-radius:999px;
  background:var(--grad-underline);
  transform:scaleX(0);
  transform-origin:left center;
}
.ai-row__n{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:12.5px;color:var(--navy);
  min-width:14px;text-align:right;
}

/* Top picks */
ul.ai-picks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ai-pick{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid transparent;
}
.ai-pick__name{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:12.5px;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ai-pick__v{
  flex:none;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10.5px;color:var(--purple);white-space:nowrap;
}

/* Gaps */
ul.ai-gaps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ai-gap{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px dashed var(--lavender);
  font-size:11.5px;color:var(--text-body);
}
.ai-gap::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--coral,#FF7A85);
}

/* Plan */
ul.ai-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ai-day{display:flex;align-items:baseline;gap:10px}
.ai-day__name{
  flex:none;width:26px;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:11px;color:var(--ai-purple-soft);
}
.ai-day__text{font-size:12px;color:var(--text-body);line-height:1.4}

/* Ask — a field-shaped affordance and three real questions. Not a chat. */
.ai-ask{
  margin-top:clamp(14px,1.4vw,20px);
  padding-top:clamp(12px,1.2vw,16px);
  border-top:1px solid var(--border);
}
.ai-ask__field{
  display:flex;align-items:center;gap:9px;
  padding:9px 13px;
  border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-meta);
}
.ai-ask__placeholder{font-size:12.5px}
ul.ai-ask__chips{
  list-style:none;margin:9px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.ai-chip{
  padding:5px 10px;border-radius:var(--radius-pill);
  background:var(--lavender-pale);
  color:var(--navy);
  font-size:11px;
}

/* ---- Remix comparison teaser ---- */
.ai-compare{
  margin-top:clamp(16px,2vw,28px);
  display:flex;align-items:center;
  gap:clamp(12px,2vw,28px);flex-wrap:wrap;
  padding:clamp(13px,1.3vw,18px) clamp(15px,1.5vw,22px);
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.ai-compare__head{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.ai-compare__label{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:12.5px;letter-spacing:var(--ls-tight);color:var(--navy);
}
.ai-compare__sub{font-size:11.5px;color:var(--text-meta)}
ul.ai-compare__stats{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(10px,1.4vw,20px);flex-wrap:wrap;
}
.ai-cstat{font-size:11.5px;color:var(--text-meta);white-space:nowrap}
.ai-cstat b{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:14px;color:var(--navy);margin-right:4px;
}
.ai-compare__read{
  flex:1 1 260px;
  font-size:12px;color:var(--text-body);line-height:1.45;
}
.ai-compare__read b{font-weight:var(--fw-semibold);color:var(--purple)}

/* ==========================================================================
   Entrance
   ========================================================================== */
.js .ai__copy,
.js .ai__scene{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.ai.is-in .ai__copy,
.ai.is-in .ai__scene{opacity:1;transform:none}
.ai.is-in .ai__scene{transition-delay:.09s}

/* ==========================================================================
   The staged read-out
   ========================================================================== */
.ai-act,
.ai-sweep,
.ai-state--idle,
.ai-state--done,
.ai-panel__body,
.ai-mod,
.ai-bar,
.ai-item--voted,
.ai-pick,
.ai-ask{
  animation-duration:var(--ai-cycle);
  animation-timing-function:var(--ease-inout);
  animation-iteration-count:infinite;
  animation-play-state:paused;
}
.ai.is-live .ai-act,
.ai.is-live .ai-sweep,
.ai.is-live .ai-state--idle,
.ai.is-live .ai-state--done,
.ai.is-live .ai-panel__body,
.ai.is-live .ai-mod,
.ai.is-live .ai-bar,
.ai.is-live .ai-item--voted,
.ai.is-live .ai-pick,
.ai.is-live .ai-ask{animation-play-state:running}

/* Step 2 — the board action fires and the panel acknowledges */
.ai-act{animation-name:ai-act}
.ai-sweep{animation-name:ai-sweep}
.ai-state--idle{animation-name:ai-fade-out}
.ai-state--done{animation-name:ai-fade-in}
@keyframes ai-act{
  0%,9%{background:var(--bg-soft);border-color:var(--border);color:var(--text-meta)}
  17%,93%{background:var(--lavender-pale);border-color:transparent;color:var(--navy)}
  100%{background:var(--bg-soft);border-color:var(--border);color:var(--text-meta)}
}
@keyframes ai-sweep{
  0%,10%{opacity:0;transform:translate3d(-40%,0,0)}
  14%{opacity:1}
  22%{opacity:0;transform:translate3d(40%,0,0)}
  100%{opacity:0;transform:translate3d(40%,0,0)}
}
@keyframes ai-fade-out{
  0%,11%{opacity:1}
  19%,95%{opacity:0}
  100%{opacity:1}
}
@keyframes ai-fade-in{
  0%,11%{opacity:0}
  19%,95%{opacity:1}
  100%{opacity:0}
}

/* Steps 3–6 — the modules arrive in order. One keyframe set, four windows. */
.ai-panel__body{animation-name:ai-body}
@keyframes ai-body{
  0%,93%{opacity:1}
  100%{opacity:0}
}
.ai-mod--summary{animation-name:ai-mod-1}
.ai-mod--picks{animation-name:ai-mod-2}
.ai-mod--missing{animation-name:ai-mod-3}
.ai-mod--plan{animation-name:ai-mod-4}
.ai-ask{animation-name:ai-mod-5}
@keyframes ai-mod-1{
  0%,17%{opacity:0;transform:translate3d(0,8px,0)}
  29%,100%{opacity:1;transform:none}
}
@keyframes ai-mod-2{
  0%,29%{opacity:0;transform:translate3d(0,8px,0)}
  41%,100%{opacity:1;transform:none}
}
@keyframes ai-mod-3{
  0%,41%{opacity:0;transform:translate3d(0,8px,0)}
  53%,100%{opacity:1;transform:none}
}
@keyframes ai-mod-4{
  0%,53%{opacity:0;transform:translate3d(0,8px,0)}
  65%,100%{opacity:1;transform:none}
}
@keyframes ai-mod-5{
  0%,65%{opacity:0;transform:translate3d(0,8px,0)}
  76%,100%{opacity:1;transform:none}
}

/* The bars grow with their own module, slightly behind it */
.ai-bar{animation-name:ai-bar}
@keyframes ai-bar{
  0%,19%{transform:scaleX(0)}
  31%,100%{transform:scaleX(1)}
}

/* Step 4 — the votes. The board's voted rows and the picks they produced
   take the same highlight at the same moment; that simultaneity is the only
   thing saying "this came from your board", so no connector line is needed. */
.ai-item--voted{animation-name:ai-voted}
.ai-pick{animation-name:ai-picked}
@keyframes ai-voted{
  0%,36%{background:var(--bg-soft);border-color:transparent}
  44%,58%{background:var(--lavender-pale);border-color:var(--lavender)}
  70%,100%{background:var(--bg-soft);border-color:transparent}
}
@keyframes ai-picked{
  0%,36%{border-color:transparent}
  44%,58%{border-color:var(--lavender)}
  70%,100%{border-color:transparent}
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1100px){
  .ai__split{gap:14px}
  .ai-item__meta{display:none}
  .ai-item{padding:8px 10px}
}

/* Below this a split screen would give each side half a phone. The board goes
   first — it is the subject — then the panel reads it underneath, which is
   also the order the loop plays in. */
@media (max-width:900px){
  .ai__split{grid-template-columns:minmax(0,1fr)}
  .ai-item__meta{display:block}
  .ai-compare{gap:12px}
}

@media (max-width:820px){
  /* Fewer modules on a phone: summary, picks and the plan carry the argument,
     and the gaps list is the one that can go without losing it. */
  .ai-mod--missing{display:none}
  .ai-ask__chips .ai-chip:nth-child(n+3){display:none}
  .ai-board__more{display:none}
  .ai-compare__read{flex:1 1 100%}
}

@media (max-width:480px){
  /* The three voted rows keep their chip: the loop's voting beat highlights
     them and the panel's Top picks quotes those exact numbers, so dropping
     all of them here would leave that step pointing at nothing. Only the
     low-vote chips go, which is where the width is actually needed. */
  .ai-item__vote{padding:3px 7px;font-size:9.5px}
  .ai-item__vote--quiet{display:none}
  .ai-board__facts{gap:7px}
  ul.ai-compare__stats{gap:10px}
}

/* ==========================================================================
   Reduced motion
   The board and the FULL read-out, both static. Nothing is hidden behind a
   step that never plays.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .ai__copy,
  .js .ai__scene{opacity:1;transform:none;transition:none}

  .ai-act,.ai-sweep,.ai-state--idle,.ai-state--done,.ai-panel__body,
  .ai-mod,.ai-bar,.ai-item--voted,.ai-pick,.ai-ask,
  .ai-mod--summary,.ai-mod--picks,.ai-mod--missing,.ai-mod--plan{animation:none}

  .ai-sweep{opacity:0}
  .ai-act{background:var(--lavender-pale);border-color:transparent;color:var(--navy)}
  .ai-state--idle{opacity:0}
  .ai-state--done{opacity:1}
  .ai-panel__body{opacity:1}
  .ai-mod,.ai-ask{opacity:1;transform:none}
  .ai-bar{transform:scaleX(1)}
  .ai-item--voted{background:var(--lavender-pale);border-color:var(--lavender)}
  .ai-pick{border-color:transparent}
}