/* ===================================================================
   rizzfr — team.css
   Team page only.
=================================================================== */

.staff-card{
  background:rgba(var(--surface-rgb),0.5);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:24px;text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  transform-style:preserve-3d;
}
.staff-card:hover{box-shadow:0 22px 40px -26px rgba(0,0,0,0.45);border-color:var(--crimson-500);}
.avatar{
  width:64px;height:64px;border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.14);
  filter:grayscale(1) contrast(1.05);
  display:block;margin:0 auto 16px;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.staff-card:hover .avatar{transform:scale(1.08) rotate(-3deg);filter:grayscale(0.4) contrast(1.05);}
.staff-card .name{font-size:16px;font-family:var(--body);font-weight:700;margin-bottom:2px;}
.staff-card .role{font-family:var(--mono);font-size:11px;color:var(--crimson-600);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px;}
.staff-card p.bio{font-size:13px;color:var(--muted);}

/* ---------- staff carousel (shared .h-scroll lives in base.css) ---------- */
.h-scroll > .staff-card{flex:0 0 78%;}

@media (min-width:560px){
  .h-scroll > .staff-card{flex:0 0 46%;}
}
@media (min-width:900px){
  .h-scroll > .staff-card{flex:0 0 31%;}
}
@media (min-width:1200px){
  .h-scroll > .staff-card{flex:0 0 23%;}
}

/* ---------- owner cards (vertical stack) ---------- */
.owner-stack{
  display:flex;flex-direction:column;gap:16px;
  max-width:640px;margin:0 auto;
}
.owner-card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:18px;
  border-radius:14px;
  padding:16px;text-align:left;cursor:pointer;
  font-family:inherit;color:inherit;width:100%;
  border:0;background:none;
  transition:transform .35s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.owner-card:hover, .owner-card:focus-visible{
  box-shadow:0 22px 40px -26px rgba(0,0,0,0.5);
  transform:translateY(-3px);
}
.owner-card-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0.55;filter:grayscale(0.25) contrast(1.05) brightness(0.75);
  transform:scale(1.001);
  transition:transform .6s var(--ease-out);
  pointer-events:none;
}
.owner-card:hover .owner-card-bg, .owner-card:focus-visible .owner-card-bg{transform:scale(1.06);}
.owner-card-tint{
  position:absolute;inset:0;z-index:1;
  background:rgba(var(--surface-rgb),0.45);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.1);border-radius:14px;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
  pointer-events:none;
}
.owner-card:hover .owner-card-tint, .owner-card:focus-visible .owner-card-tint{
  border-color:var(--crimson-500);
  background:rgba(var(--surface-rgb),0.32);
}
.owner-photo{position:relative;z-index:2;
  flex:0 0 72px;width:72px;height:72px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
}
.owner-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .25s var(--ease);}
.owner-card:hover .owner-photo img{filter:grayscale(0.35) contrast(1.05);}
.owner-info{position:relative;z-index:2;flex:1 1 auto;min-width:0;}
.owner-info .name{font-size:17px;font-family:var(--display);font-weight:700;text-transform:lowercase;}
.owner-info .role{font-family:var(--mono);font-size:11px;color:var(--crimson-600);text-transform:uppercase;letter-spacing:0.05em;margin:2px 0 6px;}
.owner-info p.bio{font-size:13px;color:var(--muted);}
.owner-arrow{position:relative;z-index:2;flex:0 0 auto;color:var(--muted);transition:transform .25s var(--ease), color .25s var(--ease);}
.owner-card:hover .owner-arrow{color:var(--crimson-600);transform:translateX(3px);}

/* ---------- owner detail modal ---------- */
.owner-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
}
.owner-modal.is-open{opacity:1;pointer-events:auto;}
.owner-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.owner-modal-panel{
  position:relative;width:100%;max-width:420px;
  background:var(--surface, #14141a);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;overflow:hidden;
  transform:translateY(16px) scale(0.98);
  transition:transform .25s var(--ease);
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);
}
.owner-modal.is-open .owner-modal-panel{transform:translateY(0) scale(1);}
.owner-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.45);color:var(--white);
  border:1px solid rgba(255,255,255,0.16);cursor:pointer;
}
.owner-modal-close:hover{background:rgba(0,0,0,0.65);}
.owner-modal-photo{width:100%;aspect-ratio:1/1;overflow:hidden;background:#000;}
.owner-modal-photo img{width:100%;height:100%;object-fit:cover;}
.owner-modal-body{padding:24px 26px 28px;}
.owner-modal-body .role{font-family:var(--mono);font-size:11px;color:var(--crimson-600);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;}
.owner-modal-body .name{font-size:26px;font-family:var(--display);font-weight:700;text-transform:lowercase;margin-bottom:12px;}
.owner-modal-body .desc{font-size:14.5px;line-height:1.6;color:var(--muted);}

@media (prefers-reduced-motion: reduce){
  .owner-card, .owner-card-bg, .owner-photo img, .owner-arrow{transition:none !important;}
  .owner-card:hover .owner-card-bg, .owner-card:focus-visible .owner-card-bg{transform:scale(1.001);}
}