/**
 * r62-anim.css — unified panelist hover animation (R6.2, rebuilt R6.6)
 *
 * R6.2 (Alex pick): close-up zoom (v2) + golden rotating ring (v3), thicker.
 * Image #26 review: ring runs ONCE per hover, then HOLDS (freeze-active).
 *
 * R6.6 REBUILD (Alex, 2026-06-12): the R6.2 ring lived on
 * .speaker-avatar-wrap::before — BEHIND the opaque portrait img and inside
 * the wrap's overflow:hidden circle, so it never produced a visible pixel
 * (Playwright probe: animation "finished", zero rendered ring). The ring is
 * now a real element, .avatar-ring, sibling of the wrap inside
 * .speaker-avatar-zone (built in js/speakers-data.js), masked to an 8px
 * band AROUND the portrait — actually visible.
 *
 * Hover contract (Alex, 2026-06-12):
 * - hover anywhere on the box starts ALL animations (zoom + ring reveal)
 * - box frame stays golden for the whole hover (overrides.css :hover rule)
 * - image round frame freezes active for the whole hover:
 *   img border holds solid gold; ring completes one rotation then HOLDS
 *   (animation-fill-mode: forwards)
 * - image frame line at 200% thickness (4px img border, overrides.css)
 */

/* =============================================================================
   RING — real element, NOT clipped (sibling of the overflow:hidden wrap)
   ============================================================================= */

.avatar-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(197, 165, 90, 0),
    #ddc074,
    rgba(197, 165, 90, 0)
  );
  /* Cut out the centre so only an ~8px band around the portrait remains */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Hover anywhere on the box: reveal + one rotation, then freeze-active hold */
.speaker-card:hover .avatar-ring {
  opacity: 1;
  animation: ring-reveal 3.5s ease-out 1 forwards;
}

.speaker-card[data-anim="v3"]:hover .speaker-avatar-wrap img {
  /* ZOOM: v2's close-up effect */
  transform: scale(1.10);
  transition: transform 1s ease;

  /* BRIGHTNESS: v3's subtle lift */
  filter: brightness(1.06);

  /* FREEZE-ACTIVE: border holds solid gold + glow for the whole hover */
  border-color: #ddc074;
  box-shadow: 0 0 28px rgba(197, 165, 90, 0.45);
  will-change: transform, filter;
}

/**
 * Ring reveal keyframes — single run with brightness peak, holds final state
 */
@keyframes ring-reveal {
  0% {
    opacity: 0;
    filter: brightness(1);
    transform: rotate(0deg);
  }
  60% {
    opacity: 1;
    filter: brightness(1.2);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    transform: rotate(360deg);
  }
}

/* =============================================================================
   NEUTRALIZE OLD VARIANTS (v1/v3 pseudo-element layers in overrides.css)
   ============================================================================= */

/* V1 shimmer used ::after — keep dead (defense-in-depth) */
.speaker-card[data-anim="v1"] .speaker-avatar-wrap::after {
  display: none !important;
}

/* R6.6: the old invisible ::before ring — remove the wasted layer entirely.
   Scoped to panel/keynote hover cards; the r61 entrance sweep targets
   :not([data-anim="v3"]) so it is unaffected. */
.speaker-card[data-anim="v3"] .speaker-avatar-wrap::before {
  content: none !important;
}

/* =============================================================================
   ACCESSIBILITY & MOBILE
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .avatar-ring {
    display: none;
  }

  .speaker-card[data-anim="v3"]:hover .speaker-avatar-wrap img {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
}

/* Hover effects off on mobile/touch (<=768px) — tap opens the modal instead */
@media (max-width: 768px) {
  .speaker-card:hover .avatar-ring {
    opacity: 0 !important;
    animation: none !important;
  }

  .speaker-card[data-anim="v3"]:hover .speaker-avatar-wrap img {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
}

/* =============================================================================
   ENTRANCE COMPATIBILITY
   =============================================================================
   Entrance (r61-panel.css) animates .speaker-card via transform/opacity and
   the keynote wrap via clip-path — the zone wrapper keeps all descendant
   selectors matching. Hover zoom is on the INNER img; no conflict.
   ============================================================================= */