/* ==========================================================================
   SECTION DIVIDER — shared decorative separator dropped between every
   top-level <section> on every page (see the .section-divider markup
   inserted site-wide). Reuses the site's existing scroll-reveal system
   (data-reveal="fade", see animations.css) for its entrance; everything
   else here is this component's own continuous motion.
   ========================================================================== */

.section-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  padding: 15px 0;
  pointer-events: none;
}
@media (min-width: 640px) {
  .section-divider { max-width: 42rem; gap: 1.35rem; }
}
@media (min-width: 1024px) {
  .section-divider { max-width: 50rem; gap: 1.5rem; }
}

/* Side rotating diamonds — pseudo-elements of the flex container become
   flex items, giving three rotating elements total (small / BIG / small)
   with no extra markup on any page. Explicit `order` values pull them in
   right beside the center node (lines outermost): line, small, BIG, small,
   line. They counter-rotate against the center node for visual interest. */
.section-divider::before,
.section-divider::after {
  content: '';
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--red-600), var(--rose-500));
  opacity: 0.75;
  animation: sectionDividerSpinReverse 7s linear infinite;
}
.section-divider::after { animation-delay: -3.5s; }
.section-divider-line.is-left  { order: 1; }
.section-divider::before       { order: 2; }
.section-divider-node          { order: 3; }
.section-divider::after        { order: 4; }
.section-divider-line.is-right { order: 5; }
@media (min-width: 1024px) {
  .section-divider::before,
  .section-divider::after { width: 0.75rem; height: 0.75rem; }
}

@keyframes sectionDividerSpinReverse {
  from { transform: rotate(45deg); }
  to   { transform: rotate(-315deg); }
}

/* The two lines flanking the center node. A masked shimmer sweeps along
   each one continuously — same idiom as the services-ticker accent line
   (hero-slider.css), reused for visual consistency. */
.section-divider-line {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--red-500) 50%, transparent);
  opacity: 0.35;
  overflow: hidden;
}
.section-divider-line::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--red-500), var(--rose-500), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: sectionDividerShimmer 4.5s ease-in-out infinite;
}
.section-divider-line.is-left::after { animation-direction: normal; }
.section-divider-line.is-right::after { animation-direction: reverse; animation-delay: -2.25s; }

@keyframes sectionDividerShimmer {
  0%   { background-position: -80% 0; }
  100% { background-position: 180% 0; }
}

/* Center node: a slowly-rotating gradient diamond with a breathing glow. */
.section-divider-node {
  position: relative;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--red-600), var(--rose-500));
  animation: sectionDividerSpin 9s linear infinite, sectionDividerPulse 3s ease-in-out infinite;
}
@media (min-width: 1024px) {
  .section-divider-node { width: 1.3rem; height: 1.3rem; border-radius: 5px; }
}
.section-divider-node::before {
  content: '';
  position: absolute;
  inset: -0.9rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(239,68,68,0.38), transparent 70%);
  opacity: 0;
  animation: sectionDividerGlow 3s ease-in-out infinite;
}

@keyframes sectionDividerSpin {
  from { transform: rotate(45deg); }
  to   { transform: rotate(405deg); }
}
@keyframes sectionDividerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%      { box-shadow: 0 0 20px 6px rgba(239,68,68,0.55); }
}
@keyframes sectionDividerGlow {
  0%, 100% { opacity: 0; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .section-divider::before,
  .section-divider::after,
  .section-divider-line::after,
  .section-divider-node,
  .section-divider-node::before {
    animation: none !important;
  }
}