/* ============================================================================
   NextGen Summit — official exhibitors
   Three credentials hanging in a row after the sponsors, on the homepage and About.
   Same family as the attendee credential in the registration count (names.css): a
   real clip on a black strap, an idle sway, and a swing when touched (exhibitors.js).
   This card is the holographic exhibitor pass: an iridescent rim, a laminated face
   with rainbow light in two corners, the brand in the middle and the ticket line at
   the foot. Every measure on the card is a share of its width (cqw), so it is the
   same card at any size. The clip and the logos are cut from the approved artwork.
   ========================================================================= */

.xb{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vw,96px) var(--gutter) clamp(64px,9vw,128px);background:var(--paper)}
.xb__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.xb__k{margin-bottom:18px;font:800 11px/1.3 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.xb__title{max-width:16ch;font-size:clamp(34px,4.4vw,64px);line-height:1.04;letter-spacing:-.035em}
.xb__note{max-width:34ch;font:500 14px/1.6 var(--f-sans);color:var(--ink-2)}

/* ---------- the row ---------- */
.xb__row{--strap:clamp(110px,15vw,210px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,58px);
  max-width:1220px;margin:clamp(8px,2vw,24px) auto 0;padding:0;list-style:none}
.xb__item{display:flex;justify-content:center}

.xb__hang{position:relative;width:100%;max-width:290px;margin-top:var(--strap);container-type:inline-size;
  transform-origin:50% calc(-1 * var(--strap));animation:xb-sway var(--sway,9s) var(--ease) infinite alternate;animation-delay:var(--lag,0s)}
.xb__item:nth-child(2) .xb__hang{--sway:10.5s;--lag:-3.2s}
.xb__item:nth-child(3) .xb__hang{--sway:9.6s;--lag:-6.1s}

/* the strap comes down from above the section, fading in out of the paper, and hands over to
   the photographed strap at the top of the clip, so nothing dark sits behind the metal */
.xb__strap{position:absolute;left:50%;bottom:calc(100% + 21.6cqw);width:20.8cqw;height:calc(var(--strap) - 21.6cqw);transform:translateX(-50%);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,#060606 0%,#1c1c1c 22%,#0d0d0d 55%,#191919 82%,#050505 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%);mask-image:linear-gradient(180deg,transparent 0,#000 46%);
  filter:drop-shadow(2px 6px 8px rgba(10,18,22,.22))}

/* the clip bites the card at its slot: the photographed metal, card top at 74% of its height */
.xb__clip{position:absolute;left:50%;top:-26.7cqw;z-index:3;width:27.1cqw;height:auto;transform:translateX(-50%);pointer-events:none;
  filter:drop-shadow(0 3px 3px rgba(10,18,22,.28))}

/* ---------- the card ---------- */
.xb__card{position:relative;aspect-ratio:404/594;padding:1.55cqw;border-radius:6.2cqw;
  /* the iridescent rim: warm at the corners, cool down the long sides */
  background:conic-gradient(from 215deg at 50% 50%,#FF8A3D 0deg,#FFE04A 22deg,#43E1FF 52deg,#3F6BFF 86deg,#A447FF 118deg,#FF3FAE 146deg,#FF8A3D 178deg,#FFD84A 200deg,#3EDCFF 232deg,#4C62FF 268deg,#B046FF 300deg,#FF3FA6 330deg,#FF8A3D 360deg);
  box-shadow:0 0 0 .3cqw rgba(255,255,255,.75) inset,0 30px 50px -24px rgba(40,24,90,.42),0 2px 4px rgba(11,11,15,.1)}
/* the rim's glow on the paper around it */
.xb__card::before{content:"";position:absolute;inset:-.4cqw;z-index:-1;border-radius:inherit;background:inherit;filter:blur(3.2cqw) saturate(1.2);opacity:.38}

.xb__face{position:relative;height:100%;overflow:hidden;border-radius:4.9cqw;color:var(--ink);text-align:center;
  box-shadow:0 0 0 .32cqw rgba(255,255,255,.9),0 0 1.4cqw rgba(255,255,255,.95) inset;
  background:
    /* two long glints across the laminate */
    linear-gradient(121deg,transparent 54%,rgba(255,255,255,.95) 55.2%,transparent 57.5%),
    linear-gradient(121deg,transparent 60%,rgba(214,206,255,.32) 63%,transparent 69%),
    /* rainbow light in the top-left corner */
    linear-gradient(132deg,rgba(255,170,120,.5) 0%,rgba(255,228,140,.42) 7%,rgba(140,232,255,.42) 14%,rgba(255,160,224,.36) 21%,rgba(215,190,255,.2) 28%,transparent 38%),
    /* and the bottom-right */
    linear-gradient(312deg,rgba(255,160,210,.5) 0%,rgba(255,226,150,.44) 8%,rgba(150,226,255,.46) 16%,rgba(196,170,255,.34) 24%,transparent 36%),
    radial-gradient(70% 45% at 50% 46%,#fff 0,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#FCFCFF 0%,#F2F2F8 55%,#F6F3FA 100%)}

.xb__slot{position:absolute;left:50%;top:3.9cqw;width:31.7cqw;height:6.2cqw;transform:translateX(-50%);border-radius:999px;background:#FDFDFF;
  box-shadow:inset 0 .5cqw .9cqw rgba(60,60,90,.22),0 0 0 .3cqw rgba(200,200,215,.55),0 .25cqw 0 rgba(255,255,255,.9)}

.xb__mark{position:absolute;left:0;right:0;top:19.5cqw;display:flex;flex-direction:column;align-items:center;line-height:1}
.xb__mark .wm{font-size:11.6cqw;letter-spacing:-.045em}
.xb__mark span:last-child{margin:-.1em 0 0 26cqw;font:800 1.45cqw/1 var(--f-sans);letter-spacing:.55em;text-transform:uppercase}

/* the brand sits in the middle of the card, at the size the artwork gives it */
.xb__logo{position:absolute;left:8cqw;right:8cqw;top:52cqw;height:38cqw;display:flex;align-items:center;justify-content:center}
.xb__logo img{display:block;width:var(--w,76cqw);max-width:100%;height:auto}

.xb__role{position:absolute;left:0;right:0;top:114.2cqw;padding-left:.62em;font:800 3.65cqw/1 var(--f-sans);letter-spacing:.62em;text-transform:uppercase}

.xb__foot{position:absolute;left:8.6cqw;right:8.4cqw;top:128cqw;display:flex;align-items:center;padding:3.2cqw 2.2cqw 0 2.4cqw;border-top:.36cqw solid #55555C;text-align:left}
.xb__who{flex:1 1 auto;min-width:0}
.xb__name{font:800 3.5cqw/1.1 var(--f-sans);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.xb__when{margin-top:1.2cqw;font:500 2.1cqw/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.xb__bar{flex:none;align-self:stretch;width:.36cqw;margin:0 3.4cqw;background:#55555C}
.xb__get{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1.5cqw}
.xb__get-k{padding-left:2.4cqw;font:600 1.55cqw/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* the ticket line: a filled gradient pill; on hover it turns into the outlined one */
.xb__pill{position:relative;display:inline-flex;align-items:center;gap:1.3cqw;padding:1.1cqw 2.2cqw 1.1cqw 2.6cqw;border-radius:999px;color:#fff;text-decoration:none;
  background:linear-gradient(90deg,#F25560 0%,#E8467E 45%,#A35BF7 100%);box-shadow:0 .8cqw 1.8cqw -1cqw rgba(170,60,180,.55);
  font:800 2.3cqw/1 var(--f-sans);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease)}
.xb__pill svg{width:3.2cqw;height:3.2cqw;flex:none}
.xb__pill::before{content:"";position:absolute;inset:.45cqw;border-radius:inherit;background:#fff;opacity:0;transition:opacity .35s var(--ease)}
.xb__pill>*{position:relative}
.xb__pill:hover::before,.xb__pill:focus-visible::before{opacity:1}
.xb__pill:hover,.xb__pill:focus-visible{color:#3B2C9C}
.xb__pill:focus-visible{outline-offset:3px}

/* the cast shadow on the paper, moving with the card */
.xb__shadow{position:absolute;left:10%;right:10%;bottom:-22px;height:24px;border-radius:50%;
  background:radial-gradient(60% 100% at 50% 0,rgba(40,24,90,.22),rgba(40,24,90,0) 72%);filter:blur(5px);pointer-events:none}

@keyframes xb-sway{
  from{transform:rotate(-1deg)}
  to{transform:rotate(1deg)}
}

/* ---------- below about 1000px three side by side would be too small to read, so they
   become a row to swipe, the next card showing at the edge ---------- */
@media (max-width:1000px){
  .xb__row{--strap:clamp(112px,34vw,150px);display:flex;gap:18px;max-width:none;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 40px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .xb__row::-webkit-scrollbar{display:none}
  .xb__item{flex:0 0 min(68vw,280px);scroll-snap-align:center}
}

@media (prefers-reduced-motion:reduce){
  .xb__hang{animation:none}
}