/* ═══════════════════════════════════════════════════════════════
   SPOTLIGHT GLOW — pointer-following border glow on team cards
   Adapted from React GlowCard → vanilla CSS custom properties
═══════════════════════════════════════════════════════════════ */
[data-glow] {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-xp: 0.5;
  --glow-base: 35;
  --glow-spread: 60;
  --glow-hue: calc(var(--glow-base) + (var(--glow-xp) * var(--glow-spread)));
  --glow-active: 0;
}

.team-card[data-glow]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: radial-gradient(
    300px circle at var(--glow-x) var(--glow-y),
    hsla(var(--glow-hue), 80%, 60%, calc(0.55 * var(--glow-active))),
    transparent 60%
  ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: var(--glow-active);
  transition: opacity 0.35s ease;
}

.team-card[data-glow]::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: radial-gradient(
    150px circle at var(--glow-x) var(--glow-y),
    hsla(0, 0%, 100%, calc(0.10 * var(--glow-active))),
    transparent 50%
  ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: var(--glow-active);
  transition: opacity 0.35s ease;
}

.team-glow-inner {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    400px circle at var(--glow-x) var(--glow-y),
    hsla(var(--glow-hue, 35), 80%, 55%, calc(0.12 * var(--glow-active, 0))),
    transparent 60%
  );
  filter: blur(14px);
  opacity: var(--glow-active, 0);
  transition: opacity 0.4s ease;
}

/* ── Enhanced hover elevation ── */
.team-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-8px);
  z-index: 10;
}
html[data-theme="dark"] .team-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Infinite scrolling carousel ── */
.team-carousel {
  overflow-x: clip;           /* clip cards at viewport edges */
  overflow-y: visible;        /* don't clip 3D heads vertically */
  padding: 80px 0 48px;      /* 80px top for heads, 48px bottom for footer distance */
  width: 100%;
  height: 50vh;
  min-height: 340px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;   /* cards align to top of padded area */
}

.team-carousel-track {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
  padding-left: 24px;
}

/* hover slow-down handled via JS playbackRate — see initGlowCards() */

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .team-view { padding: 0; }
  .team-header { height: 40vh; min-height: 220px; padding: 0 16px; }
  .team-card { width: 280px; min-width: 280px; height: calc(50vh - 100px); min-height: 260px; padding: 24px 20px; padding-top: 64px; }
  .team-carousel { padding: 60px 0 32px; }
  .team-carousel-track { gap: var(--space-6); animation-duration: 30s; }
}

/* Disable glow on touch / reduced motion */
@media (hover: none), (pointer: coarse) {
  .team-card[data-glow]::before,
  .team-card[data-glow]::after,
  .team-glow-inner { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .team-card { transition: none !important; }
  .team-card[data-glow]::before,
  .team-card[data-glow]::after,
  .team-glow-inner { display: none; }
  .team-carousel-track { animation-play-state: paused; }
}