/* ==========================================================================
   Collsta website — Section 4: Together + Decide

   Deliberately NOT a scroll-driven scene. The previous three sections each
   pin and scrub; this one arrives in ordinary document flow, plays a short
   entrance, and then stays put while the BOARD itself comes alive.

   Nothing here reads `--p`. The only motion is a ~9.8s in-place loop driven
   by classes that site.js toggles on `.tg`:

     is-joined  → a fourth member appears in the stack
     is-added   → a new save fills the empty slot
     is-voted   → a vote count ticks 3 → 4
     is-picked  → the winning save is marked

   They accumulate through the cycle and are cleared together at the end, so
   every transition is a plain CSS transition on opacity/transform.

   Card visuals (.badge, .badge__mark--*, .price, .fill--*, .map-pin) are
   REUSED from hero.css, and `.bc__status` from board-customize.css, exactly
   as Save anything and Board customize reuse them. Loads after both.
   ========================================================================== */

.tg{
  /* Deeper cuts of the brand coral and purple, used only where white text
     sits on them: at full strength they measure 3.2:1 and 4.5:1 against
     white, which small bold labels do not clear. Same hue families. */
  --tg-vote-ink:#A0526A;
  --tg-pick-ink:#5A4FA8;

  position:relative;
  background:var(--surface-page);
  padding-block:clamp(28px,4.4vw,68px) clamp(72px,9vw,120px);
  overflow:hidden;
}
@supports (overflow:clip){
  .tg{overflow:clip}
}
@supports (color:color-mix(in oklab,red,blue)){
  .tg{
    --tg-vote-ink:color-mix(in oklab,var(--coral) 70%,var(--navy));
    --tg-pick-ink:color-mix(in oklab,var(--purple-bright) 72%,var(--navy));
  }
}
/* Soft hand-off from the soft-surfaced character row above — a hard colour
   step here would read as a new page rather than the next beat. */
.tg::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:clamp(80px,12vh,160px);
  background:linear-gradient(to bottom,var(--bg-soft),rgba(250,250,253,0));
  pointer-events:none;
}

.tg__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tg__blob{filter:blur(30px)}
.tg__blob--a{width:min(36vw,460px);aspect-ratio:1;top:6%;right:-8%;opacity:.32}
.tg__blob--b{width:min(28vw,360px);aspect-ratio:1;bottom:6%;left:-6%;opacity:.3}

.tg__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  /* Top-aligned, not centred: the board is roughly three times the height of
     the copy, so centring pushed the headline hundreds of pixels down the
     page and opened a gap after the section above it. */
  align-items:start;
  gap:clamp(24px,3.2vw,50px);
}

/* ==========================================================================
   Copy
   ========================================================================== */
.tg__copy{max-width:34rem;padding-top:clamp(0px,2.6vw,38px)}
.tg__eyebrow-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:clamp(14px,1.8vw,20px)}

.tg__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;
}
.tg__title-accent{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tg__sub{
  margin-top:clamp(14px,1.8vw,20px);
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body);
  color:var(--text-body);
  text-wrap:pretty;
}
.tg__sub b{font-weight:var(--fw-semibold);color:var(--navy)}

/* The product logic, stated once as a quiet rail rather than a feature list. */
.tg__flow{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:8px;
  margin-top:clamp(20px,2.6vw,30px);
}
.tg__flow-step{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-meta);
}
.tg__flow-sep{width:14px;height:1.5px;border-radius:2px;background:var(--border)}
.tg__flow-step--on{color:var(--purple)}

/* ==========================================================================
   The two supporting points
   Under the mechanic rail the column says two more things, in this order:
     .tg__value    — why collaborating is worth anything
     .tg__benefit  — why it beats the alternative
   Both are pitched well below the h2 and the board and share one type pair,
   so they read as a matched pair rather than two competing blocks. Only the
   second carries a hairline, which is what separates the two thoughts.
   ========================================================================== */
.tg__value{
  margin-top:clamp(18px,2.1vw,26px);
}
.tg__benefit{
  margin-top:clamp(16px,1.9vw,24px);
  padding-top:clamp(13px,1.5vw,18px);
  border-top:1px solid var(--border);
}
.tg__point-line{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(15px,1.5vw,17.5px);
  line-height:1.35;
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  text-wrap:balance;
}
.tg__point-sub{
  margin-top:7px;
  font-size:clamp(13px,1.2vw,14.5px);
  line-height:1.55;
  color:var(--text-meta);
  max-width:30rem;
  text-wrap:pretty;
}

ul.tg__uses{
  display:flex;flex-wrap:wrap;
  gap:8px;
  margin-top:clamp(14px,1.6vw,18px);
}
.tg__use{
  padding:7px 14px;
  border-radius:var(--radius-pill);
  background:var(--bg-soft);
  border:1px solid var(--border);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:12px;
  color:var(--text-meta);
  white-space:nowrap;
}

/* ==========================================================================
   Board
   ========================================================================== */
.tg__board-col{min-width:0}

.tg-board{
  position:relative;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

/* ---- Cover + header ---- */
.tg-board__cover{position:relative;height:clamp(72px,9vw,104px);overflow:hidden}
.tg-board__cover img{width:100%;height:100%;object-fit:cover;display:block}
.tg-board__stamp{
  position:absolute;left:0;right:0;bottom:0;
  padding:7px 14px;
  background:linear-gradient(transparent,rgba(13,15,60,.6));
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:9.5px;letter-spacing:.14em;color:#fff;
}
.tg-sticker{
  position:absolute;right:clamp(12px,2vw,22px);top:clamp(26px,4vw,50px);
  z-index:4;width:clamp(46px,5vw,62px);
  transform:rotate(-8deg);
  filter:drop-shadow(0 10px 18px rgba(13,15,60,.24));
}
.tg-sticker img{width:100%;height:auto;display:block}

.tg-board__head{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px clamp(14px,1.6vw,20px) 12px;
  border-bottom:1px solid var(--border);
}
.tg-board__emoji{
  flex:none;width:clamp(46px,4.8vw,58px);aspect-ratio:1;
  margin-top:-28px;
  border-radius:17px;border:3px solid #fff;
  box-shadow:var(--shadow-md);
  background:linear-gradient(150deg,#FFE7E9,#FF9AA3 46%,#B8ABF2);
  display:grid;place-items:center;font-size:clamp(20px,2.2vw,25px);line-height:1;
}
.tg-board__meta{flex:1;min-width:0}

/* Presence line — the "someone is here" cue, not a status widget. */
.tg-presence{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple);
}
.tg-presence__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--purple-bright);
  box-shadow:0 0 0 4px rgba(115,92,255,.16);
}
.tg-board__title{
  margin-top:5px;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:clamp(17px,1.9vw,22px);
  letter-spacing:var(--ls-tight);color:var(--navy);
}
.tg-board__desc{
  margin-top:3px;
  font-size:clamp(11.5px,1.1vw,13px);color:var(--text-meta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- Members ---- */
.tg-members{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.tg-avatars{display:flex}
.tg-av{
  width:clamp(26px,2.6vw,32px);aspect-ratio:1;
  border-radius:50%;border:2.5px solid #fff;
  box-shadow:var(--shadow-sm);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:11px;color:#fff;
}
.tg-av + .tg-av{margin-left:-9px}
.tg-av--m{background:linear-gradient(160deg,#EDE8FF,#B8ABF2);color:var(--purple)}
.tg-av--a{background:linear-gradient(160deg,#FFE7E9,#FF9AA3)}
.tg-av--l{background:linear-gradient(160deg,#E4ECFF,#735CFF)}
.tg-av--d{background:var(--navy)}
/* The joining member. Scale + fade only — no bounce. */
.tg-av--join{
  opacity:0;
  transform:scale(.5);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.tg.is-joined .tg-av--join{opacity:1;transform:scale(1)}

.tg-count{
  display:inline-flex;align-items:center;
  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:11px;white-space:nowrap;
}
.tg-invite{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:11px;color:var(--navy);white-space:nowrap;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.tg-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.2vw,15px);
  padding:clamp(12px,1.5vw,18px);
}

.tg-card{
  position:relative;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .55s var(--ease-out);
}
.tg-card__media{position:relative;height:clamp(88px,10vw,124px);overflow:hidden}
.tg-card__body{padding:10px clamp(10px,1.1vw,13px) 11px}
.tg-card__title{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(12.5px,1.2vw,14.5px);line-height:1.25;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tg-card__meta{
  margin-top:3px;font-size:clamp(10.5px,1vw,12px);color:var(--text-meta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tg-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;
}

/* ---- Vote pill ---- */
.tg-vote{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--bg-soft);border:1px solid var(--border);
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:11.5px;color:var(--text-meta);
  transition:background .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out);
}
.tg-vote svg{transition:transform .4s var(--ease-out)}
.tg-vote--on{background:var(--tg-vote-ink);border-color:var(--tg-vote-ink);color:#fff}
/* The card that receives the vote during the loop. */
.tg.is-voted .tg-vote--live{background:var(--tg-vote-ink);border-color:var(--tg-vote-ink);color:#fff}
.tg.is-voted .tg-vote--live svg{transform:scale(1.16)}

/* Odometer: the two numerals are stacked and swapped, so nothing reflows. */
.tg-num{position:relative;display:inline-block;width:1ch;height:1.2em;overflow:hidden;vertical-align:-.18em}
.tg-num span{
  position:absolute;left:0;right:0;
  transition:transform .45s var(--ease-out),opacity .45s var(--ease-out);
}
.tg-num__from{transform:translateY(0);opacity:1}
.tg-num__to{transform:translateY(100%);opacity:0}
.tg.is-voted .tg-num__from{transform:translateY(-100%);opacity:0}
.tg.is-voted .tg-num__to{transform:translateY(0);opacity:1}

/* ---- Added-by attribution ---- */
.tg-by{
  display:inline-flex;align-items:center;gap:6px;
  font-size:clamp(10px,.95vw,11.5px);color:var(--text-meta);
  min-width:0;
}
.tg-by__av{
  flex:none;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:8px;color:#fff;
}
.tg-by span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Picked ---- */
.tg-pick{
  position:absolute;top:9px;right:9px;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--radius-pill);
  background:var(--tg-pick-ink);
  color:#fff;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:9.5px;letter-spacing:.06em;
  opacity:0;transform:translateY(-6px) scale(.94);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.tg.is-picked .tg-pick{opacity:1;transform:none}
.tg.is-picked .tg-card--pick{
  border-color:var(--purple-bright);
  box-shadow:var(--glow-purple),var(--shadow-md);
  transform:translateY(-4px);
}

/* ---- The save that gets added mid-loop ----
   Its grid cell always exists, with a quiet placeholder underneath, so the
   card arriving never shifts the layout. */
.tg-slot{position:relative}
.tg-slot__ghost{
  position:absolute;inset:0;
  border-radius:var(--radius-md);
  border:1.5px dashed var(--border);
  background:rgba(245,243,250,.6);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-meta);
  transition:opacity .45s var(--ease-out);
}
.tg-card--new{
  opacity:0;
  transform:translateY(10px) scale(.975);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.tg.is-added .tg-card--new{opacity:1;transform:none}
.tg.is-added .tg-slot__ghost{opacity:0}

/* ==========================================================================
   Activity chip — one line, never a feed
   ========================================================================== */
.tg-activity{
  position:relative;
  height:34px;
  margin:0 clamp(12px,1.5vw,18px) clamp(12px,1.5vw,18px);
}
.tg-chip{
  position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  font-size:12px;color:var(--text-body);
  white-space:nowrap;
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.tg-chip__av{
  flex:none;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:8px;color:#fff;
}
.tg-chip b{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--navy)}
/* Exactly one chip is up at a time, chosen by the beat on the root. */
.tg[data-chip="join"]   .tg-chip--join,
.tg[data-chip="add"]    .tg-chip--add,
.tg[data-chip="vote"]   .tg-chip--vote,
.tg[data-chip="picked"] .tg-chip--picked{opacity:1;transform:none}

/* ==========================================================================
   Entrance — plays once when the section first reaches the viewport
   ========================================================================== */
.js .tg__copy,
.js .tg__board-col{
  opacity:0;
  transform:translateY(18px);
}
.tg.is-in .tg__copy,
.tg.is-in .tg__board-col{
  opacity:1;
  transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.tg.is-in .tg__board-col{transition-delay:.12s}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1040px){
  .tg__inner{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,40px)}
  .tg__copy{max-width:38rem}
}

/* ---- Mobile: stacked, board dominant, fewer things moving at once -------- */
@media (max-width:720px){
  .tg{padding-block:clamp(40px,8vw,64px) clamp(48px,10vw,80px)}
  .tg__title{font-size:clamp(26px,7vw,38px)}
  .tg__sub{font-size:15.5px}
  .tg__flow{gap:6px}
  .tg__flow-step{font-size:10px;letter-spacing:.1em}

  .tg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:11px}
  .tg-card__media{height:84px}
  .tg-board__head{gap:11px}
  .tg-members{gap:8px}
  /* The invite affordance is the first thing to go when width is short —
     members and votes carry the message on their own. */
  .tg-invite{display:none}
  .tg-activity{height:32px;margin:0 11px 11px}
  .tg-chip{font-size:11.5px;padding:7px 12px}
  /* Smaller travel so the loop reads as a nudge, not a jump. */
  .tg-card--new{transform:translateY(7px) scale(.985)}
  .tg.is-picked .tg-card--pick{transform:translateY(-2px)}
}

@media (max-width:420px){
  .tg-board__desc{display:none}
  .tg-count{display:none}
}

/* ==========================================================================
   Reduced motion
   The loop never starts (site.js checks the same query). Everything the loop
   would have revealed is shown in its final, decided state instead, so the
   members, the attribution, the votes and the pick all read without motion.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .tg__copy,.js .tg__board-col{opacity:1;transform:none}
  .tg-av--join{opacity:1;transform:none}
  .tg-card--new{opacity:1;transform:none}
  .tg-slot__ghost{opacity:0}
  .tg-pick{opacity:1;transform:none}
  .tg-card--pick{border-color:var(--purple-bright);box-shadow:var(--glow-purple),var(--shadow-md)}
  .tg-vote--live{background:var(--tg-vote-ink);border-color:var(--tg-vote-ink);color:#fff}
  .tg-num__from{opacity:0}
  .tg-num__to{transform:none;opacity:1}
  /* One activity line, held still, instead of a rotating chip. */
  .tg-chip{position:static;opacity:0}
  .tg-chip--picked{opacity:1;transform:none}
  .tg-chip--join,.tg-chip--add,.tg-chip--vote{display:none}
}