/* ===========================================================================
   blog-graphics.css
   Inline-SVG hero graphics for the Augello chiro blog.
   Athletic-documentary system. Tracksmith x Hyperice lineage.
   Palette pulled from styles.css tokens (--primary, --bg, --bg-deep, --accent, --border-strong).
   =========================================================================== */

/* ----- 1. Container ----------------------------------------------------- */

.blog-hero-art {
  position: relative;
  width: 100%;
  max-width: var(--max-w-prose);
  margin: 0 auto var(--space-6);
  aspect-ratio: 16 / 7;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
}

.blog-hero-art--wide {
  max-width: var(--max-w);
  aspect-ratio: 21 / 8;
}

.blog-hero-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Caption ribbon — small all-caps editorial chrome on top of the SVG */
.blog-hero-art .bha-caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.375rem 0.625rem;
  background: rgba(241, 236, 226, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 2px;
  z-index: 2;
}
.blog-hero-art .bha-caption .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px rgba(92, 26, 31, 0.12);
  animation: bha-dot 2.4s ease-in-out infinite alternate;
}
.blog-hero-art .bha-caption .num {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 600px) {
  .blog-hero-art { aspect-ratio: 4 / 3; margin-bottom: var(--space-5); }
  .blog-hero-art--wide { aspect-ratio: 4 / 3; }
  .blog-hero-art .bha-caption { font-size: 0.625rem; left: var(--space-3); bottom: var(--space-3); }
}

/* ----- 2. Shared SVG primitives ----------------------------------------- */

.bha-stroke         { stroke: var(--primary); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bha-stroke-secondary { stroke: var(--border-strong); fill: none; stroke-width: 0.75; stroke-linecap: round; stroke-linejoin: round; }
.bha-stroke-ink     { stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bha-stroke-gold    { stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bha-fill-primary   { fill: var(--primary); }
.bha-fill-gold      { fill: var(--accent); }
.bha-fill-ink       { fill: var(--ink); }
.bha-fill-bg        { fill: var(--bg); }
.bha-text {
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--ink-mute);
}
.bha-text-display {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 18px;
  fill: var(--primary);
}

/* Baseline grid — drawn behind every graphic */
.bha-grid line { stroke: var(--border); stroke-width: 0.5; }

/* ----- 3. Animations ---------------------------------------------------- */

@keyframes bha-draw {
  from { stroke-dashoffset: var(--bha-len, 600); }
  to   { stroke-dashoffset: 0; }
}
@keyframes bha-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes bha-pulse {
  0%   { opacity: 0.35; transform: scale(0.92); }
  100% { opacity: 1;    transform: scale(1.08); }
}
@keyframes bha-dot {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}
@keyframes bha-shift-x {
  0%   { transform: translateX(-3px); }
  100% { transform: translateX(3px); }
}
@keyframes bha-shimmer {
  0%   { opacity: 0.25; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.25; }
}

/* Apply line-draw to any path/circle marked .bha-draw */
.bha-draw {
  stroke-dasharray: var(--bha-len, 600);
  stroke-dashoffset: var(--bha-len, 600);
  animation: bha-draw 1.2s var(--ease-out, ease-out) forwards;
}
.bha-draw-2  { animation-delay: 0.15s; }
.bha-draw-3  { animation-delay: 0.30s; }
.bha-draw-4  { animation-delay: 0.45s; }
.bha-draw-5  { animation-delay: 0.60s; }

/* Pulse dot helper */
.bha-pulse-dot {
  transform-origin: center;
  transform-box: fill-box;
  animation: bha-pulse 2s ease-in-out infinite alternate;
}
.bha-pulse-dot--slow  { animation-duration: 3.2s; }
.bha-pulse-dot--fast  { animation-duration: 1.4s; }

/* Note: rotation on SVG groups uses SMIL <animateTransform> inline
   so it composes with parent translate transforms. CSS rotate would
   replace the SVG transform attribute. */

/* Subtle horizontal drift — only safe on elements without a transform attr.
   For groups with a translate, place the drift on an inner empty wrapper. */
.bha-drift {
  animation: bha-shift-x 4.8s ease-in-out infinite alternate;
}

/* Shimmering line (used for measurement rules) */
.bha-shimmer {
  animation: bha-shimmer 3.6s ease-in-out infinite;
}

/* ----- 4. Per-post tints ------------------------------------------------ */

.bha-when           { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.bha-crash          { background: var(--bg-alt); }
.bha-desk           { background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 60%); }
.bha-safe           { background: var(--bg); }
.bha-vs             { background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 50%, var(--bg-alt) 50%, var(--bg-alt) 100%); }
.bha-index          { background: var(--bg-deep); }
.bha-index .bha-stroke { stroke: var(--bg); }
.bha-index .bha-stroke-secondary { stroke: var(--border-strong); opacity: 0.55; }
.bha-index .bha-text { fill: var(--border-strong); }
.bha-index .bha-text-display { fill: var(--accent); }
.bha-index .bha-caption,
.bha-index + .bha-caption {
  background: rgba(26, 31, 36, 0.78); border-color: rgba(168, 154, 124, 0.35); color: var(--bg);
}

/* Index variant — caption sits inside hero block, override default */
.blog-hero-art.bha-index .bha-caption {
  background: rgba(26, 31, 36, 0.78);
  border-color: rgba(168, 154, 124, 0.35);
  color: var(--bg);
}

/* ----- 5. Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .bha-draw,
  .bha-pulse-dot,
  .bha-drift,
  .bha-shimmer,
  .blog-hero-art .bha-caption .dot {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  /* Pause SMIL rotations declared inline */
  .blog-hero-art animateTransform { display: none; }
}