.staff-page { position: relative; width: min(1120px, calc(100% - 48px)); min-height: calc(100vh - 148px); margin: 0 auto; padding: clamp(28px, 4vw, 46px) 0 88px; }

/* Intro overlay: slides up to reveal the page */
.staff-intro { --bg: #fff; --surface-raised: #fff; --line: #e4e7eb; --text: #171b22; --muted: #656d78; position: fixed; z-index: 2000; inset: 0; display: grid; width: 100%; min-height: 100vh; min-height: 100dvh; place-items: center; overflow: hidden; padding: 28px 20px; overscroll-behavior: contain; touch-action: pan-x pinch-zoom; background: var(--bg); text-align: center; animation: staff-intro-fallback 3.3s linear forwards; transition: transform .64s cubic-bezier(.76,0,.24,1), opacity .2s ease, visibility .2s linear; will-change: transform; }
:root[data-theme="dark"] .staff-intro { --bg: #0b0d10; --surface-raised: #181d23; --line: #2b323b; --text: #eef1f5; --muted: #a4adb8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .staff-intro { --bg: #0b0d10; --surface-raised: #181d23; --line: #2b323b; --text: #eef1f5; --muted: #a4adb8; }
}
.staff-intro.is-leaving { transform: translate3d(0, -100%, 0); pointer-events: none; animation: none; }
.staff-intro-content { display: grid; width: min(100%, 760px); justify-items: center; gap: clamp(14px, 2.6vh, 23px); }
.staff-intro-message { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; color: var(--text); font-size: clamp(22px, 4vw, 34px); font-weight: 620; letter-spacing: -.035em; line-height: 1.3; animation: staff-intro-line .9s cubic-bezier(.16,1,.3,1) both; }
.staff-intro-message:nth-child(2) { animation-delay: .18s; }
.staff-intro-warning { color: var(--muted); font-size: clamp(15px, 2.2vw, 19px); font-weight: 520; letter-spacing: -.01em; }
.staff-shield { width: 21px; height: 21px; flex: 0 0 auto; }
.staff-shield-success { color: #43b581; }
.staff-shield-warning { color: #e89a35; }
.staff-intro .staff-shield path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: staff-stroke .9s cubic-bezier(.65,0,.35,1) .2s forwards; }
.staff-intro .staff-shield path + path { animation-delay: .55s; }
.staff-intro .staff-loader { animation: staff-intro-line .9s cubic-bezier(.16,1,.3,1) .32s both; }
.staff-content { animation: staff-content-enter .8s 1.85s cubic-bezier(.2,.75,.2,1) both; }
.staff-heading { margin: 0 auto 48px; text-align: center; }
.staff-heading .eyebrow { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .15em; }
.staff-heading h1 { margin: 10px 0 9px; font-size: clamp(32px, 5vw, 48px); font-weight: 660; letter-spacing: -.055em; }
.staff-security-warning { display: flex; max-width: 100%; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; color: #cf8124; font-size: 13px; font-weight: 590; line-height: 1.6; }
.staff-security-warning .staff-shield { width: 18px; height: 18px; }
.staff-ranks { display: grid; justify-items: center; gap: clamp(38px, 6vw, 64px); }
.staff-rank-section { width: 100%; animation: staff-rank-enter .7s calc(2s + var(--staff-order, 0) * 110ms) cubic-bezier(.16,1,.3,1) both; }
.staff-rank-heading { width: fit-content; margin: 0 auto 23px; padding: 9px 20px; border-radius: 6px; background: var(--rank-color); color: #fff; font-size: clamp(14px, 1.8vw, 17px); font-weight: 720; letter-spacing: .12em; line-height: 1.2; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / 32%); text-transform: uppercase; }
.staff-member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 220px)); justify-content: center; gap: 18px; }
.staff-member-card { display: flex; min-width: 0; min-height: 232px; flex-direction: column; align-items: center; justify-content: center; padding: 22px 18px 20px; border: 1px solid color-mix(in srgb, var(--rank-color) 24%, var(--line)); border-radius: 15px; background: linear-gradient(155deg, var(--surface-raised), color-mix(in srgb, var(--surface) 44%, var(--surface-raised))); box-shadow: 0 9px 26px color-mix(in srgb, var(--text) 5%, transparent); text-align: center; transition: translate .24s cubic-bezier(.2,.75,.2,1), border-color .24s ease, box-shadow .24s ease, background-color .22s ease; animation: staff-card-enter .65s calc(2.05s + var(--staff-order, 0) * 110ms + var(--staff-card, 0) * 70ms) cubic-bezier(.16,1,.3,1) both; }
.staff-avatar-wrap { position: relative; display: grid; width: 112px; height: 112px; flex: 0 0 auto; place-items: center; margin-bottom: 15px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rank-color) 35%, var(--line)); border-radius: 50%; background: var(--surface); box-shadow: 0 5px 16px color-mix(in srgb, var(--text) 8%, transparent); }
.staff-avatar { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; animation: staff-avatar-enter .52s cubic-bezier(.2,.75,.2,1) both; }
.staff-avatar-fallback { position: absolute; inset: 0; place-items: center; color: var(--rank-color); font-size: 36px; font-weight: 650; }
.staff-avatar-fallback:not([hidden]) { display: grid; }
.staff-member-name { max-width: 100%; margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 15px; font-weight: 650; line-height: 1.45; }
.staff-member-rank { margin: 5px 0 0; color: var(--rank-color); font-size: 11px; font-weight: 650; letter-spacing: .045em; }
.staff-empty { display: grid; max-width: 590px; justify-items: center; gap: 8px; margin: 0 auto; padding: clamp(30px, 6vw, 54px); text-align: center; animation: staff-content-enter .5s 1.9s cubic-bezier(.2,.75,.2,1) both; }
.staff-empty-mark { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 19px; }
.staff-empty h2 { margin: 0; font-size: 18px; font-weight: 640; letter-spacing: -.025em; }
.staff-empty p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

@keyframes staff-intro-fallback {
  0%, 88% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes staff-intro-line {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes staff-stroke { to { stroke-dashoffset: 0; } }
@keyframes staff-content-enter {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes staff-rank-enter {
  from { opacity: 0; translate: 0 13px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes staff-card-enter {
  from { opacity: 0; scale: .97; }
  to { opacity: 1; scale: 1; }
}
@keyframes staff-avatar-enter {
  from { opacity: 0; scale: .96; }
  to { opacity: 1; scale: 1; }
}

/* CSS keyframes are the no-JS fallback; the early bootstrap and controller prevent animation handoff flashes. */
.staff-loader { --staff-loader-travel: calc(min(560px, 78vw) - 56px); position: relative; width: min(560px, 78vw); height: 110px; color: var(--text); }
.staff-loader-track { position: absolute; right: 28px; bottom: 18px; left: 28px; height: 2px; }
.staff-loader-rail, .staff-loader-progress, .staff-loader-trail { position: absolute; inset: 0; border-radius: 2px; }
.staff-loader-rail { background: var(--line); }
.staff-loader-progress { transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--text) 82%, var(--bg)), var(--text)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg) 20%, transparent); animation: staff-loader-fill 2.24s cubic-bezier(.16,1,.3,1) forwards; will-change: transform; }
.staff-loader-trail { left: 0; width: 70px; transform-origin: 0 50%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 45%, transparent)); opacity: 0; pointer-events: none; animation: staff-loader-trail-move 2.24s ease-out forwards; will-change: transform, opacity; }
.staff-loader-head { position: absolute; top: -2.5px; left: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 9%, transparent); animation: staff-loader-head-move 2.24s cubic-bezier(.16,1,.3,1) forwards; will-change: transform; }
.staff-loader-shadow { position: absolute; bottom: 14px; left: 28px; width: 45px; height: 6px; margin-left: -22.5px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 28%, transparent), transparent); opacity: 0; animation: staff-loader-shadow-move 2.24s ease-out forwards; will-change: transform, opacity; }
.staff-loader-particles { position: absolute; bottom: 18px; left: 28px; width: calc(100% - 56px); height: 0; pointer-events: none; }
.staff-loader-particle { display: none; position: absolute; left: 0; bottom: -1.5px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--text); opacity: 0; will-change: transform, opacity; }
.staff-loader-cart { position: absolute; bottom: 12px; left: 28px; z-index: 2; width: 52px; height: 52px; margin-left: -26px; transform-origin: 50% 100%; opacity: 0; animation: staff-loader-cart-move 2.24s cubic-bezier(.16,1,.3,1) forwards; will-change: transform, opacity; }
.staff-loader-cart-svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.staff-loader-basket { fill: color-mix(in srgb, var(--surface-raised) 85%, var(--text)); }
.staff-loader-highlight { stroke: color-mix(in srgb, var(--text) 38%, transparent); stroke-width: 1; }
.staff-loader-rail-line { stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 1; }
.staff-loader-wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: staff-loader-wheel-spin 2.24s linear forwards; }
.staff-loader-wheel circle { fill: var(--bg); }
.staff-loader-wheel path { stroke-width: 1; stroke: color-mix(in srgb, var(--text) 55%, transparent); }

.staff-intro-controller .staff-loader-progress,
.staff-intro-controller .staff-loader-trail,
.staff-intro-controller .staff-loader-head,
.staff-intro-controller .staff-loader-shadow,
.staff-intro-controller .staff-loader-cart,
.staff-intro-controller .staff-loader-wheel,
:root.staff-intro-pending .staff-loader-progress,
:root.staff-intro-pending .staff-loader-trail,
:root.staff-intro-pending .staff-loader-head,
:root.staff-intro-pending .staff-loader-shadow,
:root.staff-intro-pending .staff-loader-cart,
:root.staff-intro-pending .staff-loader-wheel { animation: none; }
.staff-intro-controller .staff-loader-particle { display: block; }
.staff-intro.is-leaving { opacity: 1; visibility: visible; }
html.staff-intro-active { overflow: hidden; }

@keyframes staff-loader-fill { to { transform: scaleX(1); } }
@keyframes staff-loader-trail-move {
  0% { opacity: 0; transform: translateX(0) scaleX(0); }
  12% { opacity: .8; }
  100% { opacity: .65; transform: translateX(var(--staff-loader-travel)) scaleX(1); }
}
@keyframes staff-loader-head-move { to { transform: translateX(var(--staff-loader-travel)); } }
@keyframes staff-loader-shadow-move {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: .45; }
  100% { opacity: .55; transform: translateX(var(--staff-loader-travel)); }
}
@keyframes staff-loader-cart-move {
  0% { opacity: 0; transform: translateX(0) scale(.92); }
  8% { opacity: 1; }
  100% { opacity: 1; transform: translateX(var(--staff-loader-travel)) scale(1.02); }
}
@keyframes staff-loader-wheel-spin { to { transform: rotate(720deg); } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .staff-member-card:hover { translate: 0 -4px; border-color: transparent; outline: 2px solid var(--rank-color); outline-offset: 2px; box-shadow: 0 15px 34px color-mix(in srgb, var(--text) 12%, transparent); }
  .staff-member-card:hover .staff-avatar-wrap { border-color: var(--rank-color); }
}
.staff-member-card:focus-visible { translate: 0 -4px; border-color: transparent; outline: 2px solid var(--rank-color); outline-offset: 2px; box-shadow: 0 15px 34px color-mix(in srgb, var(--text) 12%, transparent); }
@media (hover: none) and (pointer: coarse) {
  .staff-member-card:active { border-color: var(--rank-color); }
}

@media (max-width: 640px) {
  .staff-page { width: calc(100% - 36px); padding: 28px 0 58px; }
  .staff-intro { padding: 24px 18px; }
  .staff-intro-message { gap: 9px; }
  .staff-shield { width: 19px; height: 19px; }
  .staff-loader { --staff-loader-travel: calc(78vw - 48px); width: 78vw; }
  .staff-loader-track { right: 24px; left: 24px; bottom: 14px; }
  .staff-loader-cart { left: 24px; bottom: 8px; width: 46px; height: 46px; margin-left: -23px; }
  .staff-loader-shadow { left: 24px; bottom: 10px; }
  .staff-loader-particles { left: 24px; bottom: 14px; width: calc(100% - 48px); }
  .staff-heading { margin-bottom: 36px; }
  .staff-security-warning { max-width: 340px; font-size: 12px; }
  .staff-rank-heading { margin-bottom: 18px; }
  .staff-member-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 190px)); gap: 12px; }
  .staff-member-card { min-height: 210px; padding: 18px 12px; }
  .staff-avatar-wrap { width: 96px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .staff-intro { animation-duration: .42s; transition: opacity .2s ease, visibility .2s linear; }
  .staff-intro.is-leaving { transform: none; opacity: 0; visibility: hidden; }
  .staff-intro-message, .staff-intro .staff-loader, .staff-intro .staff-shield path { animation: none; }
  .staff-intro .staff-shield path { stroke-dashoffset: 0; }
  .staff-loader-progress, .staff-loader-trail, .staff-loader-head, .staff-loader-shadow,
  .staff-loader-particle, .staff-loader-cart, .staff-loader-wheel { animation: none; }
  .staff-loader-trail, .staff-loader-particle { display: none; }
  .staff-loader-progress { transform: scaleX(1); }
  .staff-loader-cart { right: 2px; left: auto; opacity: 1; transform: none !important; }
  .staff-loader-shadow { right: 2px; left: auto; opacity: .35; transform: none !important; }
  .staff-loader-head { right: -3.5px; left: auto; transform: none !important; }
  .staff-content, .staff-rank-section, .staff-empty, .staff-avatar, .staff-member-card { animation: none; }
  .staff-member-card, .staff-avatar-wrap { transition: none; }
  .staff-member-card:focus-visible, .staff-member-card:hover { translate: 0 0; }
}