/* Scoped badge styles also apply when the card is in the fixed drag layer. */
.staff-badge-slot{width:min(280px,100%);position:relative;flex:none;z-index:2;text-align:left;margin-top:4rem}
.staff-badge{box-sizing:border-box;width:280px;max-width:100%;margin:0;overflow:visible;position:relative;z-index:2;border:0;border-radius:18px;background:#fff;color:#1b2942;font-family:Arial,Helvetica,sans-serif;line-height:1.4;text-align:left;box-shadow:inset 0 0 0 1px #d6dce7,0 18px 42px -18px rgba(25,40,68,.35),0 2px 6px rgba(25,40,68,.08);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.staff-badge *{box-sizing:border-box}
/* Only the metal clip belongs to the moving card. The strap sits behind the hero content. */
.staff-badge-surface{position:relative;z-index:1;overflow:hidden;border-radius:18px;transform-origin:50% 0;animation:staffBadgeGlitch 7s steps(1,end) infinite;animation-play-state:paused}
#hero{isolation:isolate}
.staff-badge-lanyard{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:2}
.staff-badge-lanyard line{stroke-linecap:round}
.staff-badge-clip{position:absolute;left:50%;top:-20px;width:32px;height:40px;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.3));z-index:3}
.staff-badge-surface::before,.staff-badge-surface::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;z-index:4;mix-blend-mode:screen;will-change:clip-path,transform,opacity}
.staff-badge-surface::before{background:linear-gradient(90deg,transparent 0 12%,rgba(45,145,255,.6) 12% 28%,transparent 28% 54%,rgba(0,214,255,.42) 54% 71%,transparent 71%);animation:staffBadgeGlitchSlice 7s steps(1,end) infinite}
.staff-badge-surface::after{background:linear-gradient(90deg,transparent 0 31%,rgba(255,74,142,.34) 31% 47%,transparent 47% 78%,rgba(75,128,255,.45) 78% 91%,transparent 91%);animation:staffBadgeGlitchSlice 7s steps(1,end) infinite reverse}
/* Clip stays outside the card; only the portrait clips to the rounded corners. */
.staff-badge:focus-visible{outline:3px solid #687ec0;outline-offset:5px}
.staff-badge-portrait{position:relative;overflow:hidden;width:100%;height:260px;border-radius:17px 17px 0 0;background:#e6e9ef}
.staff-badge-portrait>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;pointer-events:none}
.staff-badge-brand{position:absolute;top:28px;left:14px;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(255,255,255,.35);border-radius:7px;background:rgba(17,26,39,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:8px;font-weight:700;letter-spacing:.07em;pointer-events:none}
.staff-badge-label{padding-left:8px;border-left:1px solid rgba(255,255,255,.4);font-size:7px;letter-spacing:.12em}
.staff-badge-status{position:absolute;left:12px;bottom:11px;display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid rgba(52,199,89,.35);border-radius:999px;background:rgba(20,38,29,.7);color:rgba(116,239,153,.98);font:700 7px/1 'Share Tech Mono',monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.staff-badge-status .green-dot{width:6px;height:6px;flex:none}
.staff-badge-status span{color:#73e3a0;padding:0 2px}
.staff-badge-body{min-height:174px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px 20px;border-radius:0 0 17px 17px;background:#fff}
.staff-badge-name{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.staff-badge-name-text{position:relative;background:linear-gradient(105deg,#8f8bd0 0%,#6479bd 28%,#c27ab3 52%,#f4956a 72%,#7b78c4 92%);background-size:220% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:badgeNameColor 4.5s ease-in-out infinite}
.staff-badge-name-text::before,.staff-badge-name-text::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.staff-badge-name-text::before{color:var(--coral);clip-path:polygon(0 28%,100% 28%,100% 48%,0 48%);animation:gBefore 5s infinite}
.staff-badge-name-text::after{color:var(--blue-gray);clip-path:polygon(0 58%,100% 58%,100% 74%,0 74%);animation:gAfter 5s infinite}
.staff-badge-verified{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;border-radius:50%;box-shadow:0 2px 5px rgba(22,78,158,.28),inset 0 1px 1px rgba(255,255,255,.32);transition:box-shadow .25s ease,transform .25s ease,filter .25s ease}
.staff-badge-verified svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 2px rgba(19,76,166,.42))}
.staff-badge-verified-path{stroke-dasharray:24;stroke-dashoffset:24;animation:verifiedCheckDraw .7s cubic-bezier(.22,.8,.35,1) .12s forwards}
.staff-badge-verified:hover{transform:scale(1.1);filter:saturate(1.08);box-shadow:0 0 0 2px rgba(72,143,239,.16),0 0 11px rgba(49,126,231,.52),inset 0 1px 1px rgba(255,255,255,.42)}
@keyframes verifiedCheckDraw{to{stroke-dashoffset:0}}
@keyframes badgeNameColor{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.staff-badge-aka{margin:0 0 7px;color:#b39bc7;font:600 12px/1.25 'Share Tech Mono',monospace;letter-spacing:.18em}
.staff-badge-role{margin:0;max-width:230px;font-size:13px;font-weight:600;color:#6979ad;line-height:1.4}
.staff-badge-role span,.staff-badge-meta span{color:#b09bc8;padding:0 3px}
.staff-badge-meta{margin:9px 0 0;color:#8d91bd;font:600 10px/1.35 'Share Tech Mono',monospace;letter-spacing:.08em}
/* Transforms are clipped to the viewport, never added to page scroll dimensions. */
.staff-badge-drag-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:10000;contain:layout paint}
.staff-badge.is-lifted{position:absolute;margin:0;pointer-events:auto;will-change:transform;box-shadow:0 24px 55px -16px rgba(25,40,68,.4),0 3px 10px rgba(25,40,68,.12)}
.staff-badge.is-entering{will-change:transform}
.staff-badge.is-dragging{cursor:grabbing;transition:none}
.staff-badge.is-returning{transition:none} /* Card and tether share the JS spring clock. */
.staff-badge:not(.is-entering):not(.is-lifted):not(.is-dragging):not(.is-returning):not(:hover) .staff-badge-surface{animation-play-state:running}
.staff-badge:not(.is-entering):not(.is-lifted):not(.is-dragging):not(.is-returning):not(:hover) .staff-badge-surface::before,.staff-badge:not(.is-entering):not(.is-lifted):not(.is-dragging):not(.is-returning):not(:hover) .staff-badge-surface::after{animation-play-state:running}
.staff-badge:hover .staff-badge-surface{animation:staffBadgeGlitchHover .65s steps(1,end) 1;animation-play-state:running}
.staff-badge:hover .staff-badge-surface::before,.staff-badge:hover .staff-badge-surface::after{animation:staffBadgeGlitchHoverSlice .65s steps(1,end) 1;animation-play-state:running}
.staff-badge.is-entering:hover .staff-badge-surface,.staff-badge.is-lifted:hover .staff-badge-surface,.staff-badge.is-dragging:hover .staff-badge-surface,.staff-badge.is-returning:hover .staff-badge-surface{animation:none}
.staff-badge.is-entering:hover .staff-badge-surface::before,.staff-badge.is-entering:hover .staff-badge-surface::after,.staff-badge.is-lifted:hover .staff-badge-surface::before,.staff-badge.is-lifted:hover .staff-badge-surface::after,.staff-badge.is-dragging:hover .staff-badge-surface::before,.staff-badge.is-dragging:hover .staff-badge-surface::after,.staff-badge.is-returning:hover .staff-badge-surface::before,.staff-badge.is-returning:hover .staff-badge-surface::after{animation:none;opacity:0}
@keyframes staffBadgeGlitch{0%,91%{clip-path:inset(0);transform:translate3d(0,0,0)}92%{clip-path:polygon(0 8%,100% 8%,100% 25%,0 25%,0 47%,100% 47%,100% 68%,0 68%,0 88%,100% 88%,100% 100%,0 100%);transform:translate3d(-1px,0,0) skewX(-.35deg)}94%{clip-path:polygon(0 0,100% 0,100% 13%,0 13%,0 39%,100% 39%,100% 61%,0 61%,0 80%,100% 80%,100% 100%,0 100%);transform:translate3d(1px,0,0) skewX(.35deg)}96%,100%{clip-path:inset(0);transform:translate3d(0,0,0)}}
@keyframes staffBadgeGlitchSlice{0%,90%{opacity:0;clip-path:inset(0);transform:translate3d(0,0,0)}92%{opacity:.72;clip-path:polygon(0 10%,100% 10%,100% 24%,0 24%,0 54%,100% 54%,100% 67%,0 67%);transform:translate3d(-3px,0,0)}95%{opacity:.35;clip-path:polygon(0 35%,100% 35%,100% 45%,0 45%,0 77%,100% 77%,100% 86%,0 86%);transform:translate3d(2px,0,0)}98%,100%{opacity:0;clip-path:inset(0);transform:translate3d(0,0,0)}}
@keyframes staffBadgeGlitchHover{0%,12%{clip-path:inset(0);transform:translate3d(0,0,0)}15%{clip-path:polygon(0 12%,100% 12%,100% 28%,0 28%,0 64%,100% 64%,100% 77%,0 77%);transform:translate3d(-1px,0,0) skewX(-.4deg)}22%{clip-path:polygon(0 0,100% 0,100% 18%,0 18%,0 48%,100% 48%,100% 70%,0 70%);transform:translate3d(1px,0,0) skewX(.4deg)}28%,100%{clip-path:inset(0);transform:translate3d(0,0,0)}}
@keyframes staffBadgeGlitchHoverSlice{0%,10%{opacity:0;clip-path:inset(0);transform:translate3d(0,0,0)}15%{opacity:.72;clip-path:polygon(0 15%,100% 15%,100% 28%,0 28%,0 61%,100% 61%,100% 74%,0 74%);transform:translate3d(-3px,0,0)}22%{opacity:.35;clip-path:polygon(0 39%,100% 39%,100% 49%,0 49%,0 80%,100% 80%,100% 89%,0 89%);transform:translate3d(2px,0,0)}30%,100%{opacity:0;clip-path:inset(0);transform:translate3d(0,0,0)}}
@media(max-width:768px){
  .staff-badge-slot{width:min(250px,100%)}
  .staff-badge{width:250px}
  .staff-badge-portrait{height:232px}
  .staff-badge-body{padding:14px 16px 0}
  .staff-badge-name{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.staff-badge.is-returning{transition:none}}
@media(prefers-reduced-motion:reduce){.staff-badge-surface{animation:none;transform:none}.staff-badge-surface::before,.staff-badge-surface::after{animation:none;opacity:0}}
@media(prefers-reduced-motion:reduce){.staff-badge-verified-path{animation:none;stroke-dashoffset:0}}