/* "Glitterball works where you work": the headline inside a tilted ring of tool logos that turns slowly. The ring
   and the headline share one 3D space, so the logos pass behind the words at the back and in front of them at the
   front. Used as the hero of /integrations/ and as a band just above the home page's MCP card (ringHero in build.mjs).
   Its own wr- names, because home.css already has .ring and .stage. */
.wr{position:relative;isolation:isolate;padding-top:24px;text-align:center}
/* A faint, diffuse orange glow behind the ring, the same recipe as the one behind the home page's pricing cards. */
.wr::before{content:"";position:absolute;inset:-88px 0 -12%;z-index:-1;pointer-events:none;background:radial-gradient(42% 40% at 38% 42%,rgba(255,107,61,.11),transparent 72%),radial-gradient(40% 36% at 64% 60%,rgba(255,107,61,.08),transparent 72%)}
.wr-stage{--R:min(400px,44vw);--tilt:68deg;position:relative;display:grid;place-items:center;height:calc(var(--R) * 1.15 + 96px);perspective:1400px;transform-style:preserve-3d}
.wr-head{position:relative;display:grid;justify-items:center;transform:translateZ(0)}
.wr-title{position:relative;margin:0;max-width:10em;text-align:center;font:500 clamp(32px,5vw,60px)/1.04 var(--display);letter-spacing:-.04em;color:var(--ink);transform:translateZ(0)}
.wr-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(-9deg) rotateX(var(--tilt))}
.wr-spin{position:absolute;transform-style:preserve-3d;animation:wr-spin 48s linear infinite}
.wr-orb{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateZ(var(--a)) translateX(var(--R))}
/* Each tile turns back against the ring and stands up, so it always faces you */
.wr-orb .tile{--t:60px;position:absolute;left:-30px;top:-30px;display:grid;place-items:center;width:var(--t);height:var(--t);border-radius:16px;background:var(--sheet);box-shadow:var(--lift);animation:wr-face 48s linear infinite}
.wr-orb .tile .logo{width:50%;height:50%;color:var(--lc,var(--ink))}
@keyframes wr-spin{to{transform:rotateZ(360deg)}}
@keyframes wr-face{from{transform:rotateZ(calc(var(--a) * -1)) rotateX(calc(var(--tilt) * -1)) rotateZ(9deg)}to{transform:rotateZ(calc(var(--a) * -1 - 360deg)) rotateX(calc(var(--tilt) * -1)) rotateZ(9deg)}}
@media (prefers-reduced-motion:reduce){.wr-spin{animation:none}.wr-orb .tile{animation:none;transform:rotateZ(calc(var(--a) * -1)) rotateX(calc(var(--tilt) * -1)) rotateZ(9deg)}}
@media (max-width:600px){.wr-stage{--tilt:62deg;--R:46vw}.wr-title{font-size:28px;max-width:8em}.wr-orb .tile{--t:44px;border-radius:12px;left:-22px;top:-22px}}
.wr-sub{max-width:34em;margin:16px auto 0;padding-inline:20px;font:400 clamp(17px,1.6vw,20px)/1.45 var(--sans);letter-spacing:-.01em;color:var(--grey);text-wrap:pretty}
/* On the home page a button to the integrations page sits under the heading, inside the ring */
.wr-go{display:inline-flex;align-items:center;height:44px;margin-top:24px;padding:0 22px;border-radius:999px;background:var(--sheet);color:var(--ink);font:500 16px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;box-shadow:var(--card);transition:box-shadow .2s,transform .2s}
.wr-go:hover{box-shadow:var(--lift);transform:translateY(-1px)}
/* On the home page the band sits in the two-column story grid, between the cards: it spans both columns */
.story>.wr{grid-column:1/-1;padding-block:72px 64px}
.story>.wr::before{inset:-12% 0}