/* ==========================================================================
   ARIA — Figures & Lightbox

   Apple-style figure viewer: full-bleed figure with caption, click-to-zoom
   for the high-resolution PNG version, and clickable guidance hotspots
   that smooth-scroll to the matching section.
   ========================================================================== */

.figure-block {
  margin: var(--sp-xl) 0;
  /* Anchor targets (e.g. #fig-paper-1) used by section "View in paper"
     links and the fig-hotspot reverse jumps. Without this, the browser
     scrolls the figure's top to the viewport top, where the fixed
     pill header covers it. */
  scroll-margin-top: calc(var(--header-offset, 96px) + 12px);
}

.figure-block__stage {
  position: relative;
  background: var(--apple-canvas);
  border: 1px solid var(--apple-divider-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  overflow: hidden;
  /* Reserve a sensible box even before the image decodes (or if it never
     does — see .figure-block__fallback below) so layout doesn't jump and
     hotspots never land on top of raw alt text. */
  min-height: 320px;
}

.figure-block__image {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

/* Image failed to load (e.g. a cloud-sync placeholder that hasn't
   hydrated). Hide the native broken-image icon + overflowing alt text;
   figure-viewer.js injects .figure-block__fallback in its place. */
.figure-block__image--broken {
  display: none;
}

.figure-block__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: 272px;
  padding: var(--sp-xl);
  background: var(--apple-parchment);
  border-radius: var(--radius-sm);
  color: var(--apple-ink-muted-48);
  text-align: center;
}

.figure-block__fallback-icon {
  font-size: 32px;
  opacity: 0.5;
}

.figure-block__fallback-text {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  max-width: 420px;
}

.figure-block__caption {
  margin-top: var(--sp-sm);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--apple-ink-muted-48);
  text-align: center;
}

.figure-block__caption strong {
  color: var(--apple-ink);
  font-weight: var(--weight-semibold);
}

.figure-block__caption a {
  color: var(--apple-primary);
  text-decoration: none;
  margin-left: 4px;
  font-weight: var(--weight-semibold);
}

.figure-block__caption a:hover {
  text-decoration: underline;
}

/* Clickable guidance hotspots overlaid on the figure.
   Two-layer "alive" affordance:
   - solid colored core with tier-tinted glow ring
   - soft outer pulse so the user instantly knows something is interactive
   - on hover: scale 1.25, brighter ring, glow halo, tooltip slides in
*/
.fig-hotspot {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--apple-primary);
  color: var(--apple-on-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  border: 2px solid var(--apple-canvas);
  box-shadow:
    0 2px 8px rgba(0, 45, 114, 0.18),
    0 0 0 4px rgba(104, 172, 229, 0.18);
  cursor: pointer;
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform 280ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 280ms ease,
    background 280ms ease;
  z-index: 2;
  animation: fig-hotspot-breath 2.6s ease-in-out infinite;
}

@keyframes fig-hotspot-breath {
  0%, 100% {
    box-shadow:
      0 2px 8px rgba(0, 45, 114, 0.18),
      0 0 0 4px rgba(104, 172, 229, 0.18);
  }
  50% {
    box-shadow:
      0 4px 14px rgba(0, 45, 114, 0.28),
      0 0 0 8px rgba(104, 172, 229, 0.10);
  }
}

.fig-hotspot:hover,
.fig-hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.25);
  background: var(--apple-primary-focus);
  box-shadow:
    0 6px 22px rgba(0, 45, 114, 0.42),
    0 0 0 6px rgba(104, 172, 229, 0.28),
    0 0 28px rgba(104, 172, 229, 0.45);
  outline: none;
  animation-play-state: paused;
}

.fig-hotspot:active {
  transform: translate(-50%, -50%) scale(1.05);
}

.fig-hotspot--pulse::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--apple-primary);
  opacity: 0.6;
  animation: fig-hotspot-pulse 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes fig-hotspot-pulse {
  0%   { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}

.fig-hotspot__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%) translateX(-6px);
  background: rgba(29, 29, 31, 0.94);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
  z-index: 3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.fig-hotspot__label::before {
  content: "→ ";
  color: var(--spirit-blue, #68ACE5);
  font-weight: var(--weight-semibold);
  margin-right: 2px;
}

.fig-hotspot:hover .fig-hotspot__label,
.fig-hotspot:focus-visible .fig-hotspot__label {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
}

/* Mobile: hotspots stay visible but smaller; tooltip shows on tap */
@media (max-width: 640px) {
  .fig-hotspot { width: 24px; height: 24px; font-size: 12px; }
  .fig-hotspot__label {
    position: fixed;
    top: auto;
    bottom: 24px;
    left: 24px;
    right: 24px;
    transform: none;
    white-space: normal;
  }
  .fig-hotspot:hover .fig-hotspot__label,
  .fig-hotspot:focus-visible .fig-hotspot__label {
    transform: none;
  }
}

/* Lightbox (click-to-zoom full-size view) */
.fig-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 5vh 5vw;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fig-lightbox.is-open {
  display: flex;
  opacity: 1;
}

.fig-lightbox__image {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.4);
  cursor: default;
}

.fig-lightbox__caption {
  position: absolute;
  bottom: 4vh;
  left: 0;
  right: 0;
  text-align: center;
  color: #f5f5f7;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  padding: 0 24px;
}

.fig-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}

.fig-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.05);
}

.fig-lightbox__close:active {
  transform: scale(0.95);
}

/* Preview modal for .paper-fig-link "Fig N →" links: a small centered
   card (thumbnail + caption) so clicking doesn't jump straight to the
   bottom Paper Figures section. "View full figure" scrolls there. */
.fig-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 5vh 5vw;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fig-preview-modal.is-open {
  display: flex;
  opacity: 1;
}

.fig-preview-modal__card {
  position: relative;
  background: var(--apple-canvas);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: var(--sp-xl);
  max-width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
}

.fig-preview-modal__image {
  display: block;
  max-width: 100%;
  max-height: 40vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--apple-divider-soft);
  cursor: zoom-in;
}

.fig-preview-modal__caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--apple-ink-muted-48);
  text-align: center;
}

.fig-preview-modal__caption strong {
  color: var(--apple-ink);
  font-weight: var(--weight-semibold);
}

.fig-preview-modal__cta {
  margin-top: var(--sp-xs);
}

.fig-preview-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--apple-parchment);
  color: var(--apple-ink);
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}

.fig-preview-modal__close:hover {
  background: var(--apple-divider-soft);
  transform: scale(1.05);
}

.fig-preview-modal__close:active {
  transform: scale(0.95);
}

/* Pulse on the section a hotspot links to */
@keyframes fig-pulse-target {
  0%   { box-shadow: 0 0 0 0   rgba(0, 45, 114, 0.45); }
  50%  { box-shadow: 0 0 0 12px rgba(0, 45, 114, 0.18); }
  100% { box-shadow: 0 0 0 0   rgba(0, 45, 114, 0); }
}

.fig-pulse-target {
  animation: fig-pulse-target 1.4s ease-out 2;
  border-radius: 8px;
}