/* ============================================================
   JOIN THE JUG — final slide (sits right after the Q&A close)

   Two beats on one slide, swapped by data-step so only ONE QR is
   ever scannable at a time (no scan-confusion):
     data-step="0"  →  the frame with data-step-show="0"  (Join CTA)
     data-step="1"  →  the frame with data-step-show="1"  (Kahoot)

   Order is encoded purely in the HTML `data-step-show` attribute,
   so flipping Kahoot-first ↔ CTA-first is a two-attribute swap.

   Mirrors the .s-about2-flip [data-step] contract (pointer-events
   on the off-step layer, @media print collapse, reduced-motion
   cut) but CROSS-FADES flat layers instead of a 3D rotate — the
   two beats aren't "two sides of one thing", so a fade reads
   truer than a flip. Reuses the .s-closing radial-orange-glow
   ground and the white QR-card spec.
   ============================================================ */
.s-joinus {
  background:
    radial-gradient(1100px 700px at 80% 80%, rgba(244, 84, 31, 0.22), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(244, 84, 31, 0.20), transparent 60%),
    var(--bg);
}
.s-joinus .body {
  position: absolute;
  inset: 56px 0 56px 0;
}

/* ---- the two step layers, stacked ---------------------------- */
.s-joinus .frame {
  position: absolute;
  inset: 0;
  padding: 80px var(--pad-x);
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 280ms ease;
}
/* The frame shown at step 1 starts hidden; both swap when the
   section advances. Default (no data-step yet) = step-0 frame visible. */
.s-joinus .frame[data-step-show="1"] { opacity: 0; visibility: hidden; pointer-events: none; }
.s-joinus[data-step="1"] .frame[data-step-show="1"] { opacity: 1; visibility: visible; pointer-events: auto; }
.s-joinus[data-step="1"] .frame[data-step-show="0"] { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- shared top band: prompt + headline (left) / brand (right) */
.s-joinus .top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}
.s-joinus .top-main { display: flex; flex-direction: column; gap: 24px; }
.s-joinus .prompt {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-mono-lg);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.s-joinus .cta-head {
  font-size: 120px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--fg);
}
.s-joinus .cta-head .accent { color: var(--accent); }
.s-joinus .brand-signoff {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  flex-shrink: 0;
}
.s-joinus .vj-logo-signoff { height: 88px; width: auto; display: block; }
.s-joinus .signoff-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-mono-sm);
  color: var(--fg-mute);
  letter-spacing: 0.06em;
  text-align: right;
}

/* ---- KAHOOT frame (step 1): a "get ready" staging beat -------- */
/* No QR (a live game's PIN is per-session; the host lobby projects its own
   auto-join QR + PIN next). Diptych like the join frame: a left ready-check
   column hanging off the headline's left edge, the four Kahoot answer-shapes
   filling the right half. */
.s-joinus .kahoot-stage {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}
.s-joinus .ready {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
/* Lift the eyebrow above the 24px decorative-chrome tier — it carries the slide's
   one motivational hook ("winners take swag"), so it's content, not chrome. The
   prize segment is gold (reward) to set it apart from the orange scope text. */
.s-joinus .frame-kahoot .clabel { font-size: 30px; }
.s-joinus .frame-kahoot .clabel .prize { color: var(--accent-2); }
.s-joinus .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.s-joinus .steps li {            /* must-read action steps — ideal body floor (48px) */
  font-size: 48px;
  line-height: 1.15;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.s-joinus .steps .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.s-joinus .steps .url { font-family: 'JetBrains Mono', monospace; color: var(--accent-2); }
.s-joinus .ready-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;                 /* reassurance microcopy — at the mono floor */
  color: var(--fg-dim);
  letter-spacing: 0.03em;
  margin-top: 8px;
}
/* The four Kahoot answer-shapes, outlined in the deck's warm/cool set
   (orange / gold / cyan / red) — quoting the game on-palette rather than
   pasting its saturated brand colors. Purely decorative (aria-hidden). */
.s-joinus .kahoot-shapes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 380px;
  flex-shrink: 0;
  justify-self: end;
}
.s-joinus .kahoot-shapes .shape {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  fill: none;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.9;
}
/* Triangle = red to match Kahoot's strongest canonical anchor (triangle=red);
   the other three stay on-palette (gold / cyan / orange) for a warm/cool spread. */
.s-joinus .kahoot-shapes .tri { stroke: var(--amp-bad); }
.s-joinus .kahoot-shapes .dia { stroke: var(--accent-2); }
.s-joinus .kahoot-shapes .cir { stroke: var(--cyan); }
.s-joinus .kahoot-shapes .squ { stroke: var(--accent); }

/* ---- JOIN frame (step 1): the diptych CTA + Slack QR --------- */
.s-joinus .frame-join { justify-content: space-between; }
.s-joinus .bottom-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
}
.s-joinus .cta-block { display: flex; flex-direction: column; gap: 28px; }
.s-joinus .clabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-mono-sm);
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.s-joinus .clabel.gold { color: var(--accent-2); }
.s-joinus .cta-line {
  font-size: 38px;
  line-height: 1.25;
  color: var(--fg);
}
.s-joinus .cta-line .chan { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.s-joinus .cta-line .chan.gold { color: var(--accent-2); }
.s-joinus .cta-line a { color: var(--accent-2); text-decoration: none; white-space: nowrap; }
.s-joinus .cta-line a:hover,
.s-joinus .cta-line a:focus-visible { text-decoration: underline; }
.s-joinus .cta-sub {
  font-size: 36px;
  line-height: 1.3;
  color: var(--fg-dim);
  margin-top: 12px;
}

/* ---- shared white QR card (the .s-closing spec) ------------- */
.s-joinus .qr {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}
.s-joinus .qr a, .s-joinus .qr img { display: block; width: 100%; height: 100%; }
.s-joinus .qr-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  justify-self: end;
}
.s-joinus .qr-wrap .qr { width: 300px; height: 300px; }
/* Brand cue above the Slack QR — the code alone doesn't say "Slack". A mono
   fa-slack glyph in the community gold signals the destination on-palette. */
.s-joinus .qr-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  color: var(--accent-2);
  letter-spacing: 0.04em;
}
.s-joinus .qr-brand i { font-size: 30px; }
.s-joinus .qr-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-mono-sm);
  color: var(--fg-dim);
  letter-spacing: 0.06em;
  text-align: center;
}

/* ---- step-swap contract (mirrors .s-about2-flip) ------------- */
/* Print / PDF: export:pdf renders the section at data-step="0" then "1";
   hard-hide the off-step frame on each so both beats export as clean,
   flat pages with no fade mid-capture. */
@media print {
  .s-joinus .frame { transition: none !important; }
  .s-joinus[data-step="0"] .frame[data-step-show="1"] { display: none; }
  .s-joinus[data-step="1"] .frame[data-step-show="0"] { display: none; }
}
/* Reduced motion: instant cut, no fade (WCAG 2.2 SC 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .s-joinus .frame { transition: none; }
}