/* ─── VioHunter Cinematic System ──────────────────────────────────────────────
   Shared across all marketing pages (index, pricing, jobs).
   No !important — additive only. Load AFTER per-page styles, AFTER styles-v2.css.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Motion tokens ──────────────────────────────────────────────────────────── */
:root {
  --gold: #B97E10;
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  200ms;
  --dur-base:  600ms;
  --dur-slow: 1200ms;
  --stagger:    80ms;
}

/* ── Scroll reveal utility ──────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-cinematic),
              transform var(--dur-base) var(--ease-cinematic);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Reticle SVG mark ───────────────────────────────────────────────────────── */
/* Draw-in triggered by parent gaining .reveal.visible */
.retic {
  display: inline-block;
  vertical-align: middle;
  margin-right: .4em;
  flex-shrink: 0;
  overflow: visible;
}
.retic-circle {
  stroke-dasharray: 15.71;
  stroke-dashoffset: 15.71;
  transition: stroke-dashoffset var(--dur-base) var(--ease-cinematic);
}
.retic-tick {
  stroke-dasharray: 2;
  stroke-dashoffset: 2;
  transition: stroke-dashoffset var(--dur-base) var(--ease-cinematic) .18s;
}
.reveal.visible .retic-circle { stroke-dashoffset: 0; }
.reveal.visible .retic-tick   { stroke-dashoffset: 0; }

/* Layout helper — section headers that carry a reticle mark need flex row */
.retic-header { display: flex; align-items: center; }

/* ── Gold focus ring ────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold, #B97E10);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Gold border pulse keyframe ─────────────────────────────────────────────── */
/* Used by .result-row.row-new::before for fresh-data row entrances */
@keyframes border-gold-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(185, 126, 16, 0); }
  22%  { box-shadow: 0 0 7px 2px rgba(185, 126, 16, .6); }
  100% { box-shadow: 0 0 0 0 rgba(185, 126, 16, 0); }
}

/* ── Section divider draw-in ─────────────────────────────────────────────────── */
/* Apply .div-top to sections that have border-top hairlines. */
/* The ::before covers the static border; ::after draws the animated line. */
.div-top { position: relative; }
.div-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--paper, #FCFCFA);
  pointer-events: none;
  z-index: 0;
}
.div-top::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--hairline, #E8E7E2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-cinematic);
  pointer-events: none;
  z-index: 1;
}
.div-top.div-visible::after { transform: scaleX(1); }

/* ── Reduced motion — disable everything above ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .retic-circle { transition: none; stroke-dashoffset: 0; }
  .retic-tick   { transition: none; stroke-dashoffset: 0; }
  .div-top::after { transition: none; transform: scaleX(1); }
}