/* ── Divider — the drawn line + diamond ornament ──────────────────
   Markup lives in Divi Code modules as a bare <svg class="rvt-divider">
   (see js/divider.js for the scroll trigger). Figma "Group 106":
   interlocked diamond pair at the centre, a line out to a small diamond
   at each end.

   Hidden until .is-inview is added — the centre diamonds pop, the line
   halves draw outward, then the end diamonds pop (~0.95s total). */

.rvt-divider {
  display: block;
  height: 2.5rem;
  width: auto;
  /* the SVG strokes use currentColor, so a variant is just a color */
  color: var(--darkest-green);
}

/* on dark sections (e.g. Strategic Advocacy) */
.rvt-divider--light { color: var(--white); }

/* left-aligned on desktop, centred once the column stacks */
@media (max-width: 1280px) {
  .rvt-divider { margin-inline: auto; }
}

.rvt-divider .dv-pop {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.rvt-divider .dv-line {
  stroke-dasharray: 49;
  stroke-dashoffset: 49;
}

.rvt-divider.is-inview .dv-center { animation: rvtDvPop 0.3s ease forwards; }
.rvt-divider.is-inview .dv-line   { animation: rvtDvDraw 0.5s ease-out 0.2s forwards; }
.rvt-divider.is-inview .dv-end    { animation: rvtDvPop 0.3s ease 0.65s forwards; }

@keyframes rvtDvPop  { to { transform: scale(1); } }
@keyframes rvtDvDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rvt-divider .dv-pop  { transform: scale(1); animation: none; }
  .rvt-divider .dv-line { stroke-dashoffset: 0; animation: none; }
}