/* THE LAB — the audio-first community layer (Discord).
   Owns pre-window intent: the mint CTA is locked until Aug 22, so this is the
   live action in that gap. Sits between #film (emotional peak, the only audio
   surface) and #faq, so it never competes with the mint CTAs above or the
   email capture below.

   Colour: the drop gradient's violet end (#7A7CFF) runs into Discord blurple
   (#5865F2) — near-neighbours, so the CTA reads native rather than pasted on.
   Zero third-party scripts: the Discord mark is inline SVG, never the widget
   iframe (which would also leak visitor IPs and render an empty room).
   Trademark: the mark ships unmodified in near-black on a light fill — one of
   the three finishes Discord's brand guidelines permit. Do not recolour it. */

.sy-lab{
  position:relative;
  padding:96px 0 88px;
  scroll-margin-top:88px;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(122,124,255,0.05) 30%,
      rgba(122,124,255,0.05) 70%,
      transparent 100%);
}
.sy-lab .sy-kicker{color:var(--sy-violet)}
.sy-lab .sy-kicker::before{background:linear-gradient(90deg,var(--sy-violet),transparent)}

.sy-lab-panel{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:44px;
  align-items:start;
  padding:42px 44px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg,rgba(22,26,32,0.85),rgba(17,19,23,0.92)) padding-box,
    linear-gradient(135deg,rgba(122,124,255,0.4),rgba(88,101,242,0.14) 48%,rgba(122,124,255,0.05)) border-box;
}

/* ---- live-state chip ---- */
.sy-chip--violet{border-color:rgba(122,124,255,0.35);color:var(--sy-violet)}
.sy-chip--violet .sy-dot{background:var(--sy-violet);box-shadow:var(--sy-glow-violet)}
@media (prefers-reduced-motion: no-preference){
  .sy-chip--violet .sy-dot{animation:sy-lab-pulse 2.4s var(--sy-ease) infinite}
}
@keyframes sy-lab-pulse{
  0%,100%{opacity:1;box-shadow:var(--sy-glow-violet)}
  50%{opacity:0.45;box-shadow:none}
}

/* ---- copy column ---- */
.sy-lab-lede{
  margin-top:20px;
  font-family:var(--font-serif);
  font-size:clamp(1.05rem,1.9vw,1.22rem);
  line-height:1.6;
  color:var(--sy-ice);
  max-width:46ch;
}
.sy-lab-list{
  margin-top:26px;
  list-style:none;
  display:grid;
  gap:14px;
}
.sy-lab-list li{
  position:relative;
  padding-left:22px;
  font-size:0.95rem;
  line-height:1.6;
  color:var(--sy-dim);
}
.sy-lab-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.62em;
  width:8px;
  height:1px;
  background:var(--sy-violet);
}
.sy-lab-list b{
  color:var(--sy-text);
  font-weight:600;
}

/* ---- CTA column ---- */
.sy-lab-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  padding:26px 24px;
  border:1px solid var(--sy-border-subtle);
  background:rgba(10,10,12,0.5);
}
.sy-lab-founding{
  font-size:0.9rem;
  line-height:1.65;
  color:var(--sy-dim);
}
.sy-lab-founding b{color:var(--sy-ice);font-weight:500}
.sy-lab-cta .sy-cta-note{margin-top:0}
.sy-lab-transmit{
  display:inline-flex;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--sy-dim);
}
.sy-lab-transmit:hover{color:var(--sy-violet)}

/* ---- the Discord button ---- */
.sy-btn--discord{
  width:100%;
  border:none;
  padding:16px 26px;
  /* Violet → a lightened blurple. Not raw #5865F2: void-on-#5865F2 measures
     4.05:1, under AA for this 12.5px weight. #6E79F5 keeps the blurple read at
     5.2:1. The Discord mark's own colour is unaffected — guidelines govern the
     mark, not the surface behind it. */
  background:linear-gradient(135deg,var(--sy-violet) 0%,#6E79F5 100%);
  color:var(--sy-void);
  font-weight:700;
}
.sy-btn--discord:hover{
  color:var(--sy-void);
  box-shadow:var(--sy-glow-violet);
}
.sy-btn--discord.is-locked{
  background:rgba(122,124,255,0.16);
  color:var(--sy-dim);
  cursor:default;
}
.sy-discord-glyph{
  flex:none;
  width:19px;
  height:19px;
  fill:var(--sy-void); /* trademark: unmodified mark, near-black finish */
}
.sy-btn--discord.is-locked .sy-discord-glyph{fill:var(--sy-faint)}

/* ---- hero: the only live action while the mint CTA is locked ---- */
.sy-hero-lab{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--sy-dim);
}
.sy-hero-lab:hover{color:var(--sy-violet)}
.sy-hero-lab .sy-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--sy-violet);
  box-shadow:var(--sy-glow-violet);
}
@media (prefers-reduced-motion: no-preference){
  .sy-hero-lab .sy-dot{animation:sy-lab-pulse 2.4s var(--sy-ease) infinite}
}

/* ---- signal success: the second ask, revealed only after the lock lands ---- */
.sy-signal-lab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--sy-violet);
}
.sy-signal-lab:hover{color:var(--sy-ice)}
.sy-signal-lab .sy-discord-glyph{width:14px;height:14px;fill:var(--sy-violet)}

/* ---- footer community column ---- */
.sy-footer-nav a .sy-discord-glyph{
  width:13px;
  height:13px;
  fill:var(--sy-dim);
  display:inline-block;
  vertical-align:-2px;
  margin-right:7px;
}
.sy-footer-nav a:hover .sy-discord-glyph{fill:var(--sy-violet)}

/* ---- sticky mobile bar ---- */
.sy-mobilebar-discord{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid rgba(122,124,255,0.4);
  background:rgba(122,124,255,0.1);
}
.sy-mobilebar-discord .sy-discord-glyph{width:19px;height:19px;fill:var(--sy-violet)}
.sy-mobilebar-discord:hover{border-color:var(--sy-violet)}

/* ---- post-window demotion (countdown.js flips <html data-drop-state>) ----
   Once the mint window is live, mint takes primacy everywhere: the Lab keeps
   its section but steps down from filled CTA to outline. */
html[data-drop-state="open"] .sy-lab{padding:70px 0 64px}
html[data-drop-state="open"] .sy-btn--discord{
  background:transparent;
  border:1px solid rgba(122,124,255,0.45);
  color:var(--sy-violet);
  font-weight:500;
}
html[data-drop-state="open"] .sy-btn--discord .sy-discord-glyph{fill:var(--sy-violet)}
html[data-drop-state="open"] .sy-hero-lab{display:none}

@media (max-width:860px){
  .sy-lab{padding:72px 0 66px}
  .sy-lab-panel{grid-template-columns:1fr;gap:28px;padding:32px 24px}
  .sy-lab-cta{width:100%}
}