.section-highlight-features .highlight-container {
  position: relative;
  display: block;
}
.section-highlight-features .highlight-image {
  position: relative;
  border-radius: var(--large-radius);
}
.section-highlight-features .highlight-image .highlight-spots .spot {
  position: absolute;
  transform: translate(calc(-50% * var(--translate-x-direction)), -50%);
  --color-pulse: var(--color-foreground);
  animation: pulse 2000ms cubic-bezier(0, 0, 0.3, 1) infinite;
  width: 1.2rem;
  height: 1.2rem;
  min-width: unset;
  min-height: unset;
  padding: 0;
  background: rgba(var(--color-button), 0.6);
  backdrop-filter: blur(4px);
}
.section-highlight-features .highlight-image .highlight-spots .spot:hover, .section-highlight-features .highlight-image .highlight-spots .spot[aria-selected=true] {
  animation-duration: 500ms;
  background: rgb(var(--color-button));
  backdrop-filter: none;
}
@media screen and (max-width: 749px) {
  .section-highlight-features .highlight-image {
    margin-block-end: 2rem;
  }
  .section-highlight-features .highlight-features .feature {
    padding: 1rem;
    border-radius: var(--medium-radius);
    background: rgba(var(--color-foreground), 0.05);
  }
  .section-highlight-features .highlight-features .feature:not(:last-of-type) {
    margin-block-end: 1rem;
  }
  .section-highlight-features .highlight-features .feature.active {
    --color-pulse: var(--color-foreground);
    animation: pulse 1s ease infinite;
  }
}
@media screen and (min-width: 750px) {
  .section-highlight-features .highlight-container {
    perspective: 500px;
  }
  .section-highlight-features .highlight-image {
    width: 40%;
    margin-block: 0;
    margin-inline: auto;
    will-change: transform;
  }
  .section-highlight-features .highlight-features {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .section-highlight-features .highlight-features .feature {
    position: absolute;
    transform: translateY(-100%);
    max-width: 25rem;
    padding-block-end: 0.5rem;
    pointer-events: auto;
  }
  .section-highlight-features .highlight-features .feature.position--left {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }
  .section-highlight-features .highlight-features .feature.position--right {
    inset-inline-start: auto;
    inset-inline-end: 0;
    text-align: end;
  }
  .section-highlight-features .highlight-features .feature[data-scroll-synergy-observed=true] {
    visibility: hidden;
    opacity: 0;
  }
  .section-highlight-features .highlight-features .feature[data-scroll-synergy-observed=true] + .line {
    visibility: hidden;
  }
  .section-highlight-features .highlight-features .feature[data-scroll-synergy-observed=true].synergy-position--2 {
    visibility: visible;
    animation: fadeIn 300ms cubic-bezier(0, 0, 0.3, 1) forwards;
    animation-delay: 500ms;
  }
  .section-highlight-features .highlight-features .feature[data-scroll-synergy-observed=true].synergy-position--2 + .line {
    visibility: visible;
  }
  .section-highlight-features .highlight-features .feature[data-scroll-synergy-observed=true].position--left.synergy-position--2 + .line {
    animation: growWidthFromRight 500ms cubic-bezier(0, 0, 0.3, 1) forwards;
  }
  .section-highlight-features .highlight-features .feature[data-scroll-synergy-observed=true].position--right.synergy-position--2 + .line {
    animation: growWidth 500ms cubic-bezier(0, 0, 0.3, 1) forwards;
  }
  .section-highlight-features .highlight-features .line {
    position: absolute;
    height: 1px;
    background: rgba(var(--color-foreground), 0.75);
  }
  .section-highlight-features .highlight-features .line.position--left {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }
  .section-highlight-features .highlight-features .line.position--right {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}