.section-divider {
  position: relative;
  height: 56px;
  overflow: hidden;
  background-color: var(--ds-background);
}

.section-divider__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--ds-primary) 1.5px,
    transparent 1.5px
  );
  background-size: 20px 20px;
  background-position: center;
  opacity: 0.6;

  --reveal-width: 15%;
  -webkit-mask-image: radial-gradient(
    ellipse var(--reveal-width) 70% at center,
    black 0%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse var(--reveal-width) 70% at center,
    black 0%,
    transparent 100%
  );
}

/* Fallback estático si el usuario prefiere movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .section-divider {
    height: 1px;
    background-color: var(--ds-border);
  }

  .section-divider__dots {
    display: none;
  }
}