/**
 * DetailAnnotation - Standalone Annotation Overlay Styles
 * 
 * Companion CSS for detail-annotation.js
 * 
 * Required CSS Variable:
 *   --font-primary: Your primary font family (defaults to system sans-serif)
 * 
 * Example:
 *   :root {
 *     --font-primary: 'Hanken Grotesk', 'Inter', sans-serif;
 *   }
 * 
 * @version 1.0.0
 */

/* ========================================
   DETAIL ANNOTATION OVERLAY SYSTEM
   ======================================== */

/* SVG annotation overlay - dynamically positioned to match image bounds via JS */
.annotation-overlay {
  position: absolute;
  /* Position, width, height set dynamically by JavaScript to match rendered image */
  /* Fallback values if JS positioning hasn't run yet */
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

/* Individual annotation group - inherit pointer events from parent SVG */
.annotation-group {
  pointer-events: inherit;
  cursor: pointer;
  opacity: 0;
  /* Hidden until entrance animation */
}

/* Outer circle - numbered marker */
.annotation-circle {
  fill: transparent;
  /* Hidden until stroke animation completes, then animated to white */
  stroke: #000;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
}

/* Number text inside circle */
.annotation-number {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-weight: 500;
  fill: #000;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

/* Line connecting circle to endpoint - hidden by default, draws on hover */
.annotation-line {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  opacity: 0;
  /* Hidden by default, stroke-dasharray set dynamically in JS */
}

/* Endpoint dot - hidden by default, fades in on hover */
.annotation-endpoint {
  fill: #000;
  opacity: 0;
}

/* Hover states are handled by GSAP, but we add a subtle hover hint */
.annotation-group:hover .annotation-circle {
  stroke-width: 2;
}

/* ----------------------------------------
   ANNOTATION TEXT SWAP CONTAINER
   ---------------------------------------- */

/* Container for swappable annotation description */
.annotation-text-container {
  position: relative;
  overflow: hidden;
}

/* The actual text that gets swapped */
.annotation-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Line mask for annotation text (used by SplitType) */
.annotation-description .line-mask {
  overflow: hidden;
  display: block;
}

.annotation-description .line {
  display: block;
}

/* ----------------------------------------
   LINE MASK STYLES (for text swap animation)
   ---------------------------------------- */

/* 
 * These styles support the text swap animation when SplitType is used.
 * They're applied to any element that uses the annotation's bodyTextElement.
 */
.line-mask {
  overflow: hidden;
  display: block;
}

.line-mask .line {
  display: block;
}