/* ==========================================================================
   Hero diagram — the self-drawing "AI search results" SVG used in the LO and
   RE page heroes. Extracted from the LO page's inline <style> (Wave 2 #7) so
   both landers can share one draw-on-scroll implementation byte-for-byte.

   MARKUP CONTRACT — the figure:
   <figure class="hero-preview" data-reveal data-stage aria-label="…">
     <svg viewBox="0 0 1600 901" aria-hidden="true" focusable="false">
       <defs>…</defs>
       <!-- query tile + query bar -->
       <g class="hv-fade">…</g>
       <!-- "AI search" tag + elbow connector -->
       <g class="hv-tag">…</g>
       <!-- ranked list rows (#1..#5) -->
       <g class="hv-row" style="animation-delay:…ms">…</g>
       <rect class="hv-pulse" …/>
       <!-- green curves to strong sources -->
       <path class="hv-curve-g" pathLength="1" style="animation-delay:…ms" d="…" />
       <!-- right column: strong-source cards -->
       <g class="hv-card" style="animation-delay:…ms">…</g>
       <!-- orange dashed curves to weak sources -->
       <path class="hv-curve-o" style="animation-delay:…ms" d="…" />
       <!-- left column: weak-source cards -->
       <g class="hv-card" style="animation-delay:…ms">…</g>
     </svg>
   </figure>
   <p class="hero-preview__caption-line" data-reveal><strong>…</strong> …</p>

   Behaviour:
   - Final frame (fully drawn) is the default — the no-JS / reduced-motion
     floor. `html.js [data-stage]:not(.is-staged)` hides each piece back to
     its pre-draw state; `app.js` adds `.is-staged` once ~25% visible (or
     immediately under reduced motion), and the per-element
     `animation-delay` inline styles sequence the reveal.
   - SVG colours that reference CSS vars (`--accent-rgb`) live in `style=""`,
     never in presentation attributes — Safari does not resolve var() there.
   ========================================================================== */

.hero-preview {
  margin-top: var(--space-8);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: #f6f1e6;
  position: relative;
  aspect-ratio: 1600 / 901;
  display: block;
}
.hero-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero-preview svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-preview svg text {
  font-family: Geist, system-ui, sans-serif;
}
.hero-preview__caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--label-sm, 0.75rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: rgba(251, 250, 247, 0.85);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hero-preview__placeholder {
  max-width: 44ch;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

/* Hero preview caption floats as a real sentence, not a chip */
.hero-preview__caption-line {
  margin-top: var(--space-4);
  font-size: var(--body-lg, 1.125rem);
  color: var(--color-text);
  max-width: 52ch;
}
.hero-preview__caption-line strong { font-weight: 600; }
.hero-preview__caption-line + p {
  margin-top: var(--space-2);
  max-width: 56ch;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

/* ===== Dark theme (data-theme="dark") ===== */
[data-theme="dark"] .hero-preview {
  background: var(--color-surface);
}
[data-theme="dark"] .hero-preview__caption {
  background: rgba(10, 13, 18, 0.72);
}

/* ===== Hero diagram (inline SVG) — draw-on-scroll sequence, B2 =====
   Final frame is the default (no-JS / reduced-motion floor). The
   pre-hide state only applies once app.js has added html.js and the
   figure hasn't been staged yet; .is-staged plays the reveal once. */
.hv-fade,
.hv-tag,
.hv-row,
.hv-card {
  opacity: 1;
  transform: translate(0, 0);
  transform-box: fill-box;
  transform-origin: center;
}
.hv-curve-g {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hv-curve-o {
  opacity: 1;
}
.hv-pulse {
  opacity: 0;
  transform: scale(1);
  transform-box: fill-box;
  transform-origin: center;
}
.hv-clip-rect {
  width: 1064px;
}
html.js [data-stage]:not(.is-staged) .hv-fade {
  opacity: 0;
  transform: translateY(6px);
}
html.js [data-stage]:not(.is-staged) .hv-tag {
  opacity: 0;
  transform: translateY(-4px);
}
html.js [data-stage]:not(.is-staged) .hv-row {
  opacity: 0;
  transform: translateX(-10px);
}
html.js [data-stage]:not(.is-staged) .hv-card {
  opacity: 0;
  transform: translateX(8px);
}
html.js [data-stage]:not(.is-staged) .hv-curve-g {
  stroke-dashoffset: 1;
}
html.js [data-stage]:not(.is-staged) .hv-curve-o {
  opacity: 0;
}
html.js [data-stage]:not(.is-staged) .hv-clip-rect {
  width: 0;
}
.hero-preview.is-staged .hv-fade {
  animation: hvFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-preview.is-staged .hv-tag {
  animation: hvTag 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s both;
}
.hero-preview.is-staged .hv-row {
  animation: hvRow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-preview.is-staged .hv-card {
  animation: hvCard 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-preview.is-staged .hv-curve-g {
  animation: hvDraw 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-preview.is-staged .hv-curve-o {
  animation: hvOpacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-preview.is-staged .hv-pulse {
  animation: hvPulse 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 2.5s both;
}
.hero-preview.is-staged .hv-clip-rect {
  animation: hvClip 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}
@keyframes hvFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hvTag {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hvRow {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hvCard {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hvDraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes hvOpacity {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hvPulse {
  0% { opacity: 0; transform: scale(1); }
  35% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes hvClip {
  from { width: 0; }
  to { width: 1064px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-preview * {
    animation: none !important;
    transition: none !important;
  }
}

/* Visible "illustrative" label under both lander hero diagrams (evidence rule: invented rankings are labelled). */
.hero-preview__note {
  display: block;
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8b929c);
}