/* Slack Frontline hero — Sleight of Hand carousel with hero copy.
   Every rule is scoped to #sleight-effect so nothing leaks onto the page. */
/* ---- edit me ------------------------------------------------------ */
/* The stage is the element the effect renders into. Give it whatever
   size you want — the effect fills it and re-fits when it changes. */
#sleight-effect {
  width: 100%;
  /* +120px is HERO_BOTTOM_PAD in the JS: room under the scene. */
  height: calc(100vh + 120px);
  min-height: 880px;
  position: relative;
  /* The scene's gradient in CSS, so the white copy is readable before the
     canvas draws (or if WebGL / the CDN scripts are blocked). */
  background: linear-gradient(180deg, #481a54 1%, #730394 9%, #9602c7 24%, #e5b9fe 70%);
}
/* Hero copy sits over the top of the canvas so the gradient runs behind
   it; the scene is framed in the space below it (see resize()). */
#sleight-effect #surfaces-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  /* Beat any page-level #surfaces-container styles (another blade on the
     page uses the same id) so the canvas shows through behind the copy. */
  background: none;
  padding: 0;
  margin: 0;
}
#sleight-effect #surfaces-container img,
#sleight-effect #surfaces-container .ob-blog-hero > * {
  pointer-events: auto;
}
#sleight-effect > canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Keyboard focus on the carousel (arrow keys flip cards). */
#sleight-effect > canvas:focus { outline: none; }
#sleight-effect > canvas:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -6px;
}
/* ------------------------------------------------------------------- */

#sleight-effect { color-scheme: dark; }
#sleight-effect, #sleight-effect *, #sleight-effect *::before, #sleight-effect *::after { box-sizing: border-box; }
#sleight-effect { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

@font-face {
 font-family: "ITC Avant Garde";
 src: local("AvantGardeForSalesforceDm"), url(https://a.sfdcstatic.com/shared/fonts/avant-garde/AvantGardeForSalesforceW05-Dm.woff2) format("woff2"), url(https://a.sfdcstatic.com/shared/fonts/avant-garde/AvantGardeForSalesforceW05-Dm.woff) format("woff");
 font-weight: 600;
 font-display: swap;
 font-style: normal;
 font-stretch: 100%;
 }
 @font-face {
 font-family: "ITC Avant Garde";
 src: url(https://a.sfdcstatic.com/shared/fonts/avant-garde/AvantGardeForSalesforceW05-Dm.woff2) format("woff2"), url(https://a.sfdcstatic.com/shared/fonts/avant-garde/AvantGardeForSalesforceW05-Dm.woff) format("woff");
 font-weight: 500;
 font-display: swap;
 unicode-range: U+0000-007F, U+0080-00FF, U+0100-017F, U+0180-024F, U+1E??, U+2C60-2C7F;
 }
#sleight-effect .ob-blog-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 32px 24px 32px;
  text-align: center;
  color: #33364A;
  font-family: "Salesforce Sans", Arial, sans-serif;
}
#sleight-effect h1.h1-custom, #sleight-effect h2.h2-custom, #sleight-effect p.p-custom {
  display: block;
  width: 100%;
  flex: 0 0 100%;
}
/* max-width is narrow enough that "Who Don't Sit at a Desk" drops to its
   own line after "Slack for the 80% of Workers". In em so it scales with
   the mobile font size. */
#sleight-effect h1.h1-custom {
  max-width: 14em;
  margin: 0 auto 14px;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: #ffffff;
  font-family: "ITC Avant Garde", "Century Gothic", sans-serif;
}
/* Kept on one line; on phones the heading shrinks to fit it. */
#sleight-effect .h1-nowrap {
  white-space: nowrap;
}
#sleight-effect h2.h2-custom {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: #ffffff;
  font-family: "ITC Avant Garde", "Century Gothic", sans-serif;
}
#sleight-effect p.p-custom {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;
}
@media (max-width: 400px) {
  #sleight-effect .h1-nowrap {
    white-space: normal;
  }
}
@media (max-width: 768px) {
  #sleight-effect h1.h1-custom {
    font-size: clamp(26px, calc(7.4vw - 4px), 36px);
  }
  #sleight-effect h2.h2-custom {
    font-size: 24px;
  }
}