.cm-shine-divider {
  --cm-shine-divider-height: 96px;
  --cm-shine-divider-stripe-width: 72%;
  --cm-shine-divider-stripe-height: 3px;
  --cm-shine-divider-dot-outer-size: 4px;
  --cm-shine-divider-dot-start-size: var(--cm-shine-divider-dot-outer-size);
  --cm-shine-divider-dot-end-size: var(--cm-shine-divider-dot-outer-size);
  --cm-shine-divider-dot-center-size: 10px;
  --cm-shine-divider-radius: 999px;
  --cm-shine-divider-opacity: 1;
  --cm-shine-divider-glow-blur: 18px;
  --cm-shine-divider-glow-spread: 0px;
  --cm-shine-divider-shine-width: 42%;
  --cm-shine-divider-shine-blur: 1.5px;
  --cm-shine-divider-edge-color: #76551e;
  --cm-shine-divider-mid-color: #caa35a;
  --cm-shine-divider-highlight-color: #fff0bd;
  --cm-shine-divider-shine-color: #fff7d2;
  --cm-shine-divider-glow-color: rgba(208, 168, 82, 0.46);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cm-shine-divider-height);
  min-height: max(var(--cm-shine-divider-stripe-height), var(--cm-shine-divider-dot-center-size));
  overflow: hidden;
  pointer-events: none;
}

.cm-shine-divider,
.cm-shine-divider *,
.cm-shine-divider *::before,
.cm-shine-divider *::after {
  box-sizing: border-box;
}

.cm-shine-divider__track {
  position: relative;
  width: min(100%, var(--cm-shine-divider-stripe-width));
  height: max(1px, var(--cm-shine-divider-stripe-height), var(--cm-shine-divider-dot-center-size));
}

.cm-shine-divider__line {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  isolation: isolate;
  opacity: var(--cm-shine-divider-opacity);
}

.cm-shine-divider__line--stripe {
  overflow: hidden;
  border-radius: var(--cm-shine-divider-radius);
  background:
    linear-gradient(
      90deg,
      var(--cm-shine-divider-highlight-color) 0%,
      var(--cm-shine-divider-mid-color) 18%,
      var(--cm-shine-divider-edge-color) 50%,
      var(--cm-shine-divider-mid-color) 82%,
      var(--cm-shine-divider-highlight-color) 100%
    );
  box-shadow:
    0 0 var(--cm-shine-divider-glow-blur) var(--cm-shine-divider-glow-spread) var(--cm-shine-divider-glow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.cm-shine-divider__line--stripe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.18) 38%,
      rgba(0, 0, 0, 0.06) 100%
    );
  mix-blend-mode: screen;
  pointer-events: none;
}

.cm-shine-divider__line--dots {
  overflow: visible;
}

.cm-shine-divider__dots {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: clamp(7px, 1.15vw, 26px);
}

.cm-shine-divider__dot {
  --cm-shine-divider-dot-size: var(--cm-shine-divider-dot-outer-size);
  --cm-dot-shine-opacity: 0;

  position: relative;
  flex: 0 0 auto;
  width: var(--cm-shine-divider-dot-size);
  height: var(--cm-shine-divider-dot-size);
  overflow: hidden;
  border-radius: 50%;
  opacity: var(--cm-shine-divider-opacity);
  background:
    radial-gradient(
      circle at 34% 30%,
      var(--cm-shine-divider-highlight-color) 0%,
      var(--cm-shine-divider-mid-color) 38%,
      var(--cm-shine-divider-edge-color) 100%
    );
  box-shadow:
    0 0 calc(var(--cm-shine-divider-glow-blur) * 0.5) calc(var(--cm-shine-divider-glow-spread) * 0.35) var(--cm-shine-divider-glow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}

.cm-shine-divider__dot::before {
  content: "";
  position: absolute;
  inset: 14% 18% 44% 18%;
  z-index: 1;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
}

.cm-shine-divider__dot-shine {
  position: absolute;
  z-index: 2;
  inset: -34%;
  display: block;
  border-radius: inherit;
  opacity: var(--cm-dot-shine-opacity, 0);
  pointer-events: none;
  filter: blur(var(--cm-shine-divider-shine-blur));
  mix-blend-mode: screen;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      color-mix(in srgb, var(--cm-shine-divider-shine-color) 38%, transparent) 28%,
      var(--cm-shine-divider-shine-color) 50%,
      color-mix(in srgb, var(--cm-shine-divider-shine-color) 38%, transparent) 72%,
      rgba(255, 255, 255, 0) 100%
    );
  will-change: transform, opacity;
}

.cm-shine-divider__shine {
  position: absolute;
  z-index: 2;
  top: -260%;
  bottom: -260%;
  left: 0;
  display: block;
  width: var(--cm-shine-divider-shine-width);
  min-width: 12px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  filter: blur(var(--cm-shine-divider-shine-blur));
  mix-blend-mode: screen;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      color-mix(in srgb, var(--cm-shine-divider-shine-color) 34%, transparent) 30%,
      var(--cm-shine-divider-shine-color) 50%,
      color-mix(in srgb, var(--cm-shine-divider-shine-color) 34%, transparent) 70%,
      rgba(255, 255, 255, 0) 100%
    );
  will-change: transform, opacity;
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  .cm-shine-divider__shine,
  .cm-shine-divider__dot-shine {
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.34) 30%,
        var(--cm-shine-divider-shine-color) 50%,
        rgba(255, 255, 255, 0.34) 70%,
        rgba(255, 255, 255, 0) 100%
      );
  }
}

.cm-shine-divider--silver {
  --cm-shine-divider-edge-color: #7b8088;
  --cm-shine-divider-mid-color: #c5cbd4;
  --cm-shine-divider-highlight-color: #ffffff;
  --cm-shine-divider-shine-color: #ffffff;
  --cm-shine-divider-glow-color: rgba(209, 220, 235, 0.44);
}

/* Premium dot-line variants: dot-only, no background shine or continuous line. */
.cm-shine-divider--dots-variant-fine .cm-shine-divider__dots {
  gap: clamp(10px, 1.55vw, 32px);
}

.cm-shine-divider--dots-variant-fine .cm-shine-divider__dot {
  transform: scale(0.88);
  box-shadow:
    0 0 calc(var(--cm-shine-divider-glow-blur) * 0.34) calc(var(--cm-shine-divider-glow-spread) * 0.2) var(--cm-shine-divider-glow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.cm-shine-divider--dots-variant-fine .cm-shine-divider__dot--center {
  transform: scale(1.06);
}

.cm-shine-divider--dots-variant-fine .cm-shine-divider__dot-shine {
  filter: blur(calc(var(--cm-shine-divider-shine-blur) + 0.5px));
}

.cm-shine-divider--dots-variant-halo .cm-shine-divider__dot--center {
  overflow: visible;
  box-shadow:
    0 0 calc(var(--cm-shine-divider-glow-blur) * 1.08) calc(var(--cm-shine-divider-glow-spread) + 1px) var(--cm-shine-divider-glow-color),
    0 0 calc(var(--cm-shine-divider-dot-center-size) * 1.15) color-mix(in srgb, var(--cm-shine-divider-shine-color) 42%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.cm-shine-divider--dots-variant-halo .cm-shine-divider__dot--center::after {
  content: "";
  position: absolute;
  inset: -72%;
  border: 1px solid color-mix(in srgb, var(--cm-shine-divider-shine-color) 54%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 calc(var(--cm-shine-divider-glow-blur) * 0.62) var(--cm-shine-divider-glow-color),
    inset 0 0 calc(var(--cm-shine-divider-dot-center-size) * 0.5) color-mix(in srgb, var(--cm-shine-divider-shine-color) 18%, transparent);
  opacity: calc(var(--cm-shine-divider-opacity) * 0.76);
  pointer-events: none;
}

.cm-shine-divider--dots-variant-double .cm-shine-divider__dot::after {
  content: "";
  position: absolute;
  inset: 28%;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cm-shine-divider-shine-color) 45%, transparent);
  opacity: calc(var(--cm-shine-divider-opacity) * 0.62);
  pointer-events: none;
}

.cm-shine-divider--dots-variant-double .cm-shine-divider__dot--start::after,
.cm-shine-divider--dots-variant-double .cm-shine-divider__dot--end::after {
  inset: 22%;
}

.cm-shine-divider--dots-variant-double .cm-shine-divider__dot--center::after {
  inset: 19%;
  border-color: color-mix(in srgb, var(--cm-shine-divider-shine-color) 62%, transparent);
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  .cm-shine-divider--dots-variant-halo .cm-shine-divider__dot--center::after,
  .cm-shine-divider--dots-variant-double .cm-shine-divider__dot::after {
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 0 calc(var(--cm-shine-divider-glow-blur) * 0.62) var(--cm-shine-divider-glow-color);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-shine-divider__shine,
  .cm-shine-divider__dot-shine {
    transition: none !important;
    animation: none !important;
    opacity: 0 !important;
  }
}